victory-core 36.4.1 → 36.5.0

package/lib/victory-util/types.d.ts

@@ -0,0 +1,188 @@
+import * as React from "react";
+import { OriginType } from "../victory-label/victory-label";
+import { NumberOrCallback, PaddingProps, VictoryThemeDefinition } from "../victory-theme/victory-theme";
+import { StringOrCallback, StringOrNumberOrCallback } from "../types";
+import { AnimationEasing, AnimationStyle } from "../victory-animation/victory-animation";
+export declare type StringOrNumberOrList = string | number | (string | number)[];
+export interface AnimatePropTypeInterface {
+    duration?: number;
+    onEnd?: () => void;
+    onExit?: {
+        duration?: number;
+        before?: (datum: any) => AnimationStyle;
+    };
+    onEnter?: {
+        duration?: number;
+        before?: (datum: any) => AnimationStyle;
+        after?: (datum: any) => AnimationStyle;
+    };
+    onLoad?: {
+        duration?: number;
+        before?: (datum: any) => AnimationStyle;
+        after?: (datum: any) => AnimationStyle;
+    };
+    easing?: AnimationEasing;
+    animationWhitelist?: string[];
+}
+export interface EventCallbackInterface<TTarget, TEventKey> {
+    childName?: string | string[];
+    target?: TTarget;
+    eventKey?: TEventKey;
+    mutation: (props: any) => any;
+    callback?: (props: any) => any;
+}
+export interface EventPropTypeInterface<TTarget, TEventKey> {
+    childName?: string | Array<StringOrNumberOrCallback>;
+    target: TTarget;
+    eventKey?: TEventKey;
+    eventHandlers: {
+        [key: string]: {
+            (event: React.SyntheticEvent<any>, props?: any): EventCallbackInterface<TTarget, TEventKey>;
+        } | {
+            (event: React.SyntheticEvent<any>, props?: any): EventCallbackInterface<TTarget, TEventKey>[];
+        } | {
+            (event: React.SyntheticEvent<any>, props?: any): void;
+        };
+    };
+}
+export declare type DomainTuple = [number, number] | [Date, Date];
+export declare type DomainPropObjectType = {
+    x?: DomainTuple;
+    y: DomainTuple;
+} | {
+    x: DomainTuple;
+    y?: DomainTuple;
+};
+export declare type DomainPropType = DomainPropObjectType | DomainTuple;
+export declare type PaddingType = number | [number, number];
+export declare type DomainPaddingPropType = PaddingType | {
+    x?: PaddingType;
+    y?: PaddingType;
+};
+export declare type RangeTuple = [number, number];
+export declare type RangePropType = RangeTuple | {
+    x?: RangeTuple;
+    y?: RangeTuple;
+};
+/**
+ * D3 scale function shape. Don"t want to introduce typing dependency to d3
+ */
+export interface D3Scale {
+    (input: string | number): number;
+    domain: () => any;
+    range: () => any;
+    copy: () => any;
+}
+export declare type ScalePropType = "linear" | "time" | "log" | "sqrt";
+export declare type CategoryPropType = string[] | {
+    x: string[];
+} | {
+    y: string[];
+} | {
+    x: string[];
+    y: string[];
+};
+export declare type DataGetterPropType = number | string | string[] | {
+    (data: any): number | string | string[];
+} | Function;
+export declare type InterpolationPropType = "basis" | "basisClosed" | "basisOpen" | "bundle" | "cardinal" | "cardinalClosed" | "cardinalOpen" | "catmullRom" | "catmullRomClosed" | "catmullRomOpen" | "linear" | "linearClosed" | "monotoneX" | "monotoneY" | "natural" | "radial" | "step" | "stepAfter" | "stepBefore";
+export declare type ColorScalePropType = "grayscale" | "qualitative" | "heatmap" | "warm" | "cool" | "red" | "green" | "blue" | string[];
+export declare type SortOrderPropType = "ascending" | "descending";
+export declare type SVGCoordinateType = {
+    x: number;
+    y: number;
+};
+export interface VictoryCommonThemeProps {
+    animate?: boolean | AnimatePropTypeInterface;
+    colorScale?: ColorScalePropType;
+    containerComponent?: React.ReactElement;
+    domainPadding?: DomainPaddingPropType;
+    externalEventMutations?: EventCallbackInterface<string | string[], StringOrNumberOrList>[];
+    groupComponent?: React.ReactElement;
+    height?: number;
+    horizontal?: boolean;
+    maxDomain?: number | {
+        x?: number;
+        y?: number;
+    };
+    minDomain?: number | {
+        x?: number;
+        y?: number;
+    };
+    name?: string;
+    origin?: OriginType;
+    padding?: PaddingProps;
+    polar?: boolean;
+    range?: RangePropType;
+    scale?: ScalePropType | D3Scale | {
+        x?: ScalePropType | D3Scale;
+        y?: ScalePropType | D3Scale;
+    };
+    sharedEvents?: {
+        events: any[];
+        getEventState: Function;
+    };
+    singleQuadrantDomainPadding?: boolean | {
+        x?: boolean;
+        y?: boolean;
+    };
+    standalone?: boolean;
+    width?: number;
+}
+export interface VictoryCommonProps extends VictoryCommonThemeProps {
+    theme?: VictoryThemeDefinition;
+}
+export interface VictoryCommonPrimitiveProps {
+    active?: boolean;
+    ariaLabel?: StringOrCallback;
+    className?: string;
+    clipPath?: string;
+    data?: any;
+    desc?: string | Function;
+    disableInlineStyles?: boolean;
+    events?: object;
+    id?: number | string | Function;
+    index?: number | string;
+    origin?: OriginType;
+    polar?: boolean;
+    role?: string;
+    scale?: any;
+    shapeRendering?: string;
+    style?: any;
+    tabIndex?: NumberOrCallback;
+    transform?: string;
+}
+export interface VictoryDatableProps {
+    categories?: CategoryPropType;
+    data?: any[];
+    dataComponent?: React.ReactElement;
+    domain?: DomainPropType;
+    domainPadding?: DomainPaddingPropType;
+    samples?: number;
+    sortKey?: DataGetterPropType;
+    sortOrder?: SortOrderPropType;
+    x?: DataGetterPropType;
+    y?: DataGetterPropType;
+    y0?: DataGetterPropType;
+}
+export interface VictoryLabelableProps {
+    labelComponent?: React.ReactElement;
+}
+export interface VictoryMultiLabelableProps extends VictoryLabelableProps {
+    labels?: string[] | number[] | {
+        (data: any): string | string[] | number | number[] | null;
+    };
+}
+export interface VictorySingleLabelableProps extends VictoryLabelableProps {
+    label?: string | {
+        (data: any): string | number | null;
+    };
+}
+export interface TextSizeStyleInterface {
+    angle?: number;
+    characterConstant?: string;
+    fontFamily?: string;
+    fontSize?: number | string;
+    letterSpacing?: string;
+    lineHeight?: number;
+}

package/lib/victory-util/types.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-core",
-  "version": "36.4.1",
+  "version": "36.5.0",
   "description": "Victory Core",
   "keywords": [
     "data visualization",
@@ -22,14 +22,14 @@
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react-fast-compare": "^3.2.0",
-    "victory-vendor": "^36.4.0"
+    "victory-vendor": "^36.5.0"
   },
   "peerDependencies": {
-    "react": "^16.6.0 || ^17.0.0"
+    "react": ">=16.6.0"
   },
   "scripts": {
     "version": "yarn run nps build-libs && nps build-dists"
   },
   "sideEffects": false,
-  "gitHead": "aa44a22e5a93989773a560f765f83ac151f44c46"
+  "gitHead": "7cecba921f751c3decc8215f7e866f51d11203c1"
 }

package/src/index.ts

@@ -0,0 +1,42 @@
+// This rule doesn't play well with namespaced exports
+/* eslint-disable import/export */
+export * from "./victory-accessible-group/victory-accessible-group";
+export * from "./victory-animation/victory-animation";
+export * from "./victory-container/victory-container";
+export * from "./victory-label/victory-label";
+export * from "./victory-transition/victory-transition";
+export * from "./victory-clip-container/victory-clip-container";
+export * from "./victory-theme/victory-theme";
+export * from "./victory-portal/portal";
+export * from "./victory-portal/portal-context";
+export * from "./victory-portal/victory-portal";
+export * from "./victory-primitives";
+export { Border as Box } from "./victory-primitives";
+
+// victory-util:
+export { default as addEvents } from "./victory-util/add-events";
+export * as Collection from "./victory-util/collection";
+export * as Data from "./victory-util/data";
+export * as DefaultTransitions from "./victory-util/default-transitions";
+export * as Domain from "./victory-util/domain";
+export * as Events from "./victory-util/events";
+export * as Helpers from "./victory-util/helpers";
+export * as Immutable from "./victory-util/immutable";
+export * as LabelHelpers from "./victory-util/label-helpers";
+export * as Log from "./victory-util/log";
+export * as PropTypes from "./victory-util/prop-types";
+export * as Scale from "./victory-util/scale";
+export * as Selection from "./victory-util/selection";
+export * as Style from "./victory-util/style";
+export * as TextSize from "./victory-util/textsize";
+export * as Transitions from "./victory-util/transitions";
+export * as UserProps from "./victory-util/user-props";
+export * as CommonProps from "./victory-util/common-props";
+export * as Wrapper from "./victory-util/wrapper";
+export * as Axis from "./victory-util/axis";
+export * as Hooks from "./victory-util/hooks";
+export * as LineHelpers from "./victory-util/line-helpers";
+export { default as Timer } from "./victory-util/timer";
+export * as PointPathHelpers from "./victory-util/point-path-helpers";
+export { default as TimerContext } from "./victory-util/timer-context";
+export * from "./victory-util/types";

package/src/types.ts

@@ -0,0 +1,45 @@
+/**
+ * This is the first parameter of a callback when a callback is used to
+ * resolve the value of a property instead of a concrete value.
+ *
+ * Note that additional properties here like `scale`, `x`, `y`, etc are resolved
+ * values of properties from the VictoryXXXProps for each component.
+ */
+import type { D3Scale } from "./victory-util/types";
+
+export interface CallbackArgs {
+  active?: boolean;
+  data?: any;
+  datum?: any;
+  horizontal?: boolean;
+  index: number | string;
+  x?: number;
+  y?: number;
+  scale?: {
+    x?: D3Scale;
+    y?: D3Scale;
+  };
+  tick?: any;
+  ticks?: any;
+  text?: any;
+}
+
+export type VictoryStringOrNumberCallback = (
+  args: CallbackArgs
+) => string | number;
+export type VictoryStringCallback = (args: CallbackArgs) => string;
+export type StringOrNumberOrCallback =
+  | string
+  | number
+  | VictoryStringOrNumberCallback;
+export type StringOrCallback = string | VictoryStringCallback;
+
+export type SliceNumberOrCallback<
+  T,
+  P extends string | number | symbol = never
+> = number | ((props: Omit<T, P>) => number);
+
+export type CoordinatesPropType = {
+  x: number;
+  y: number;
+};

package/src/victory-accessible-group/{victory-accessible-group.js → victory-accessible-group.tsx}

@@ -1,7 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-class VictoryAccessibleGroup extends React.Component {
+export interface VictoryAccessibleGroupProps {
+  desc?: string;
+  "aria-describedby"?: string;
+  "aria-label"?: string;
+  children?: React.ReactElement | React.ReactElement[];
+  className?: string;
+  tabIndex?: number;
+}
+
+export class VictoryAccessibleGroup extends React.Component<VictoryAccessibleGroupProps> {
   static displayName = "VictoryAccessibleGroup";
   static propTypes = {
     "aria-describedby": PropTypes.string,
@@ -46,5 +55,3 @@ class VictoryAccessibleGroup extends React.Component {
     );
   }
 }
-
-export default VictoryAccessibleGroup;

package/src/victory-animation/{util.js → util.ts}

@@ -82,8 +82,8 @@ export const interpolateFunction = function (a, b) {
     if (t >= 1) {
       return b;
     }
-    return function () {
-      /* eslint-disable no-invalid-this */
+    return function (this: unknown) {
+      /* eslint-disable no-invalid-this, prefer-rest-params */
       const aval = typeof a === "function" ? a.apply(this, arguments) : a;
       const bval = typeof b === "function" ? b.apply(this, arguments) : b;
       return interpolate(aval, bval)(t);
@@ -182,7 +182,7 @@ export const interpolateString = function (a, b) {
  * @param {any} b - End value.
  * @returns {Function|undefined} An interpolation function, if necessary.
  */
-export const victoryInterpolator = function (a, b) {
+export const victoryInterpolator = function <T>(a: T, b: T): (t: number) => T {
   // If the values are strictly equal, or either value is not interpolatable,
   // just use either the start value `a` or end value `b` at every step, as
   // there is no reasonable in-between value.
@@ -193,6 +193,7 @@ export const victoryInterpolator = function (a, b) {
     return interpolateFunction(a, b);
   }
   if (isPlainObject(a) || isPlainObject(b)) {
+    // @ts-expect-error These generics are tough, but they work ok?
     return interpolateObject(a, b);
   }
   if (typeof a === "string" || typeof b === "string") {

package/src/victory-animation/{victory-animation.js → victory-animation.tsx}

@@ -5,8 +5,85 @@ import * as d3Ease from "victory-vendor/d3-ease";
 import { victoryInterpolator } from "./util";
 import TimerContext from "../victory-util/timer-context";
 import isEqual from "react-fast-compare";
+import type Timer from "../victory-util/timer";
 
-export default class VictoryAnimation extends React.Component {
+/**
+ * Single animation object to interpolate
+ */
+export type AnimationStyle = { [key: string]: string | number };
+/**
+ * Animation styles to interpolate
+ */
+
+export type AnimationData = AnimationStyle | AnimationStyle[];
+export type AnimationEasing =
+  | "back"
+  | "backIn"
+  | "backOut"
+  | "backInOut"
+  | "bounce"
+  | "bounceIn"
+  | "bounceOut"
+  | "bounceInOut"
+  | "circle"
+  | "circleIn"
+  | "circleOut"
+  | "circleInOut"
+  | "linear"
+  | "linearIn"
+  | "linearOut"
+  | "linearInOut"
+  | "cubic"
+  | "cubicIn"
+  | "cubicOut"
+  | "cubicInOut"
+  | "elastic"
+  | "elasticIn"
+  | "elasticOut"
+  | "elasticInOut"
+  | "exp"
+  | "expIn"
+  | "expOut"
+  | "expInOut"
+  | "poly"
+  | "polyIn"
+  | "polyOut"
+  | "polyInOut"
+  | "quad"
+  | "quadIn"
+  | "quadOut"
+  | "quadInOut"
+  | "sin"
+  | "sinIn"
+  | "sinOut"
+  | "sinInOut";
+
+export interface VictoryAnimationProps {
+  children: (style: AnimationStyle, info: AnimationInfo) => React.ReactNode;
+  duration?: number;
+  easing?: AnimationEasing;
+  delay?: number;
+  onEnd?: () => void;
+  data: AnimationData;
+}
+export interface VictoryAnimationState {
+  data: AnimationStyle;
+  animationInfo: AnimationInfo;
+}
+export interface AnimationInfo {
+  progress: number;
+  animating: boolean;
+  terminating?: boolean;
+}
+
+export interface VictoryAnimation {
+  context: React.ContextType<typeof TimerContext>;
+}
+
+export class VictoryAnimation extends React.Component<
+  VictoryAnimationProps,
+  VictoryAnimationState
+> {
   static displayName = "VictoryAnimation";
 
   static propTypes = {
@@ -67,6 +144,11 @@ export default class VictoryAnimation extends React.Component {
   };
 
   static contextType = TimerContext;
+  private interpolator: null | ((value: number) => AnimationStyle);
+  private queue: AnimationStyle[];
+  private ease: any;
+  private timer: Timer;
+  private loopID?: number;
 
   constructor(props, context) {
     super(props, context);
@@ -84,11 +166,6 @@ export default class VictoryAnimation extends React.Component {
     this.queue = Array.isArray(this.props.data) ? this.props.data.slice(1) : [];
     /* build easing function */
     this.ease = d3Ease[this.toNewName(this.props.easing)];
-    /*
-      There is no autobinding of this in ES6 classes
-      so we bind functionToBeRunEachFrame to current instance of victory animation class
-    */
-    this.functionToBeRunEachFrame = this.functionToBeRunEachFrame.bind(this);
     this.timer = this.context.animationTimer;
   }
 
@@ -163,13 +240,13 @@ export default class VictoryAnimation extends React.Component {
         setTimeout(() => {
           this.loopID = this.timer.subscribe(
             this.functionToBeRunEachFrame,
-            this.props.duration
+            this.props.duration!
           );
         }, this.props.delay);
       } else {
         this.loopID = this.timer.subscribe(
           this.functionToBeRunEachFrame,
-          this.props.duration
+          this.props.duration!
         );
       }
     } else if (this.props.onEnd) {
@@ -177,7 +254,7 @@ export default class VictoryAnimation extends React.Component {
     }
   }
   /* every frame we... */
-  functionToBeRunEachFrame(elapsed, duration) {
+  functionToBeRunEachFrame = (elapsed, duration) => {
     /*
       step can generate imprecise values, sometimes greater than 1
       if this happens set the state to 1 and return, cancelling the timer
@@ -186,7 +263,7 @@ export default class VictoryAnimation extends React.Component {
     const step = duration ? elapsed / duration : 1;
     if (step >= 1) {
       this.setState({
-        data: this.interpolator(1),
+        data: this.interpolator!(1),
         animationInfo: {
           progress: 1,
           animating: false,
@@ -206,13 +283,13 @@ export default class VictoryAnimation extends React.Component {
       interpolator, which is cached for performance whenever props are received
     */
     this.setState({
-      data: this.interpolator(this.ease(step)),
+      data: this.interpolator!(this.ease(step)),
       animationInfo: {
         progress: step,
         animating: step < 1
       }
     });
-  }
+  };
 
   render() {
     return this.props.children(this.state.data, this.state.animationInfo);

package/src/victory-clip-container/{victory-clip-container.js → victory-clip-container.tsx}

@@ -4,11 +4,34 @@ import * as CustomPropTypes from "../victory-util/prop-types";
 import * as Helpers from "../victory-util/helpers";
 import * as UserProps from "../victory-util/user-props";
 import { assign, defaults, isObject, uniqueId } from "lodash";
-import ClipPath from "../victory-primitives/clip-path";
-import Circle from "../victory-primitives/circle";
-import Rect from "../victory-primitives/rect";
+import { ClipPath } from "../victory-primitives/clip-path";
+import { Circle } from "../victory-primitives/circle";
+import { Rect } from "../victory-primitives/rect";
 
-export default class VictoryClipContainer extends React.Component {
+import { BlockProps } from "../victory-theme/victory-theme";
+import { OriginType } from "../victory-label/victory-label";
+
+export interface VictoryClipContainerProps {
+  "aria-label"?: string;
+  children?: React.ReactElement | React.ReactElement[];
+  circleComponent?: React.ReactElement;
+  className?: string;
+  clipHeight?: number;
+  clipId?: number | string;
+  clipPadding?: BlockProps;
+  clipPathComponent?: React.ReactElement;
+  clipWidth?: number;
+  events?: React.DOMAttributes<any>;
+  groupComponent?: React.ReactElement;
+  origin?: OriginType;
+  polar?: boolean;
+  radius?: number;
+  rectComponent?: React.ReactElement;
+  translateX?: number;
+  translateY?: number;
+}
+
+export class VictoryClipContainer extends React.Component<VictoryClipContainerProps> {
   static displayName = "VictoryClipContainer";
   static role = "container";
   static propTypes = {
@@ -50,8 +73,9 @@ export default class VictoryClipContainer extends React.Component {
     clipPathComponent: <ClipPath />,
     groupComponent: <g />
   };
+  private clipId: VictoryClipContainerProps["clipId"];
 
-  constructor(props) {
+  constructor(props: VictoryClipContainerProps) {
     super(props);
     this.clipId =
       !isObject(props) || props.clipId === undefined