victory-core 36.5.0 → 36.5.3

package/src/types/prop-types.ts

@@ -0,0 +1,195 @@
+import * as React from "react";
+import {
+  ScaleLinear,
+  ScaleLogarithmic,
+  ScalePower,
+  ScaleTime,
+} from "victory-vendor/d3-scale";
+import {
+  AnimationEasing,
+  AnimationStyle,
+} from "../victory-animation/victory-animation";
+import { StringOrNumberOrCallback } from "./callbacks";
+
+export type AxisType = "x" | "y";
+export type DatumValue = number | string | Date | null | undefined;
+export type Datum = any;
+export type ForAxes<T> = T | { x?: T; y?: T };
+export type ID = number | string;
+export type ValueOrAccessor<ValueType = unknown, PropsType = object> =
+  | ValueType
+  | ((props: PropsType) => ValueType);
+export type Tuple<T> = [T, T];
+export type ValueOrAxes<T> = T | ForAxes<T>;
+
+export type DomainPaddingPropType = ValueOrAxes<PaddingType>;
+export type DomainPropType = ValueOrAxes<DomainTuple>;
+export type DomainValue = number | Date;
+// This should be a tuple type, but every time we use it, it fails with a type error.
+// type number[] is not assignable to type [number, number] | [Date, Date].
+export type DomainTuple = Tuple<number> | Tuple<Date>;
+export type PaddingType = number | Tuple<number>;
+export type RangePropType = ValueOrAxes<RangeTuple>;
+export type RangeTuple = number[];
+export type StringOrNumberOrList = string | number | (string | number)[];
+
+export interface Padding {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+export interface AnimatePropTypeInterface {
+  duration?: number;
+  onEnd?: () => void;
+  onExit?: {
+    duration?: number;
+    before?: (datum: Datum, index: number, data: Datum[]) => AnimationStyle;
+  };
+  onEnter?: {
+    duration?: number;
+    before?: (datum: Datum, index: number, data: Datum[]) => AnimationStyle;
+    after?: (datum: Datum, index: number, data: Datum[]) => AnimationStyle;
+  };
+  onLoad?: {
+    duration?: number;
+    before?: (datum: Datum, index: number, data: Datum[]) => AnimationStyle;
+    after?: (datum: Datum, index: number, data: Datum[]) => 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;
+        };
+  };
+}
+
+type NumberValue = number | { valueOf(): number };
+/**
+ * D3 scale function shape. Don't want to introduce typing dependency to d3
+ */
+export interface D3Scale<TRange = any> {
+  (numberValue: NumberValue): number;
+  base?: () => number;
+  ticks: (count?: number) => number[];
+  tickFormat: (count?: number) => (d: number) => string;
+  domain: {
+    (): number[];
+    (domain: NumberValue[]): D3Scale<TRange>;
+  };
+  range: {
+    (): TRange[];
+    (range: TRange): D3Scale<TRange>;
+  };
+  copy: () => this;
+  invert: (value: number) => number;
+}
+
+export type D3ScaleFn<TRange = any, TOutput = any> = () =>
+  | ScaleLinear<TRange, TOutput, unknown>
+  | ScaleLogarithmic<TRange, TOutput, unknown>
+  | ScaleTime<TRange, TOutput, unknown>
+  | ScalePower<TRange, TOutput, unknown>;
+
+export type ScaleName = "linear" | "time" | "log" | "sqrt";
+export type ScalePropType = ScaleName;
+export type ScaleXYPropType = {
+  x: D3Scale;
+  y: D3Scale;
+};
+
+export type CategoryPropType =
+  | string[]
+  | { x: string[] }
+  | { y: string[] }
+  | {
+      x: string[];
+      y: string[];
+    };
+
+export type DataGetterPropType = ValueOrAccessor<
+  string | string[] | number | number[]
+>;
+
+export type InterpolationPropType =
+  | "basis"
+  | "basisClosed"
+  | "basisOpen"
+  | "bundle"
+  | "cardinal"
+  | "cardinalClosed"
+  | "cardinalOpen"
+  | "catmullRom"
+  | "catmullRomClosed"
+  | "catmullRomOpen"
+  | "linear"
+  | "linearClosed"
+  | "monotoneX"
+  | "monotoneY"
+  | "natural"
+  | "radial"
+  | "step"
+  | "stepAfter"
+  | "stepBefore";
+
+export type ColorScalePropType =
+  | "grayscale"
+  | "qualitative"
+  | "heatmap"
+  | "warm"
+  | "cool"
+  | "red"
+  | "green"
+  | "blue"
+  | string[];
+
+export type SortOrderPropType = "ascending" | "descending";
+
+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 type CoordinatesPropType = {
+  x: number;
+  y: number;
+};

package/src/victory-accessible-group/victory-accessible-group.tsx

@@ -17,15 +17,15 @@ export class VictoryAccessibleGroup extends React.Component<VictoryAccessibleGro
     "aria-label": PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
+      PropTypes.node,
     ]),
     className: PropTypes.string,
     desc: PropTypes.string,
-    tabIndex: PropTypes.number
+    tabIndex: PropTypes.number,
   };
 
   static defaultProps = {
-    className: "VictoryAccessibleGroup"
+    className: "VictoryAccessibleGroup",
   };
 
   render() {

package/src/victory-animation/util.ts

@@ -34,7 +34,7 @@ export const isInterpolatable = function (obj) {
         // component is only going to call the function (in which case it's
         // safely interpolatable) or if it's going to access special properties
         // (in which case our function generated from `interpolateFunction` will
-        // most likely cause an error. We could check for enumerable properties
+        // most likely cause an error). We could check for enumerable properties
         // on the function object here to see if it's a "plain" function, but
         // let's just require that components prevent such function props from
         // being animated in the first place.
@@ -193,11 +193,12 @@ export const victoryInterpolator = function <T>(a: T, b: T): (t: number) => T {
     return interpolateFunction(a, b);
   }
   if (isPlainObject(a) || isPlainObject(b)) {
-    // @ts-expect-error These generics are tough, but they work ok?
+    // @ts-expect-error These generics are tough, but they work :)
     return interpolateObject(a, b);
   }
   if (typeof a === "string" || typeof b === "string") {
     return interpolateString(a, b);
   }
+  // @ts-expect-error These generics are tough, but they work :)
   return interpolate(a, b);
 };

package/src/victory-animation/victory-animation.tsx

@@ -131,16 +131,16 @@ export class VictoryAnimation extends React.Component<
       "sin",
       "sinIn",
       "sinOut",
-      "sinInOut"
+      "sinInOut",
     ]),
-    onEnd: PropTypes.func
+    onEnd: PropTypes.func,
   };
 
   static defaultProps = {
     data: {},
     delay: 0,
     duration: 1000,
-    easing: "quadInOut"
+    easing: "quadInOut",
   };
 
   static contextType = TimerContext;
@@ -159,8 +159,8 @@ export class VictoryAnimation extends React.Component<
         : this.props.data,
       animationInfo: {
         progress: 0,
-        animating: false
-      }
+        animating: false,
+      },
     };
     this.interpolator = null;
     this.queue = Array.isArray(this.props.data) ? this.props.data.slice(1) : [];
@@ -191,8 +191,8 @@ export class VictoryAnimation extends React.Component<
           animationInfo: {
             progress: 1,
             animating: false,
-            terminating: true
-          }
+            terminating: true,
+          },
         });
       } else {
         /* cancel existing loop if it exists */
@@ -240,13 +240,13 @@ export 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) {
@@ -267,8 +267,8 @@ export class VictoryAnimation extends React.Component<
         animationInfo: {
           progress: 1,
           animating: false,
-          terminating: true
-        }
+          terminating: true,
+        },
       });
       if (this.loopID) {
         this.timer.unsubscribe(this.loopID);
@@ -286,8 +286,8 @@ export class VictoryAnimation extends React.Component<
       data: this.interpolator!(this.ease(step)),
       animationInfo: {
         progress: step,
-        animating: step < 1
-      }
+        animating: step < 1,
+      },
     });
   };
 

package/src/victory-clip-container/victory-clip-container.tsx

@@ -38,7 +38,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
     "aria-label": PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
+      PropTypes.node,
     ]),
     circleComponent: PropTypes.element,
     className: PropTypes.string,
@@ -48,7 +48,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
       top: PropTypes.number,
       bottom: PropTypes.number,
       left: PropTypes.number,
-      right: PropTypes.number
+      right: PropTypes.number,
     }),
     clipPathComponent: PropTypes.element,
     clipWidth: CustomPropTypes.nonNegative,
@@ -56,7 +56,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
     groupComponent: PropTypes.element,
     origin: PropTypes.shape({
       x: CustomPropTypes.nonNegative,
-      y: CustomPropTypes.nonNegative
+      y: CustomPropTypes.nonNegative,
     }),
     polar: PropTypes.bool,
     radius: CustomPropTypes.nonNegative,
@@ -64,14 +64,14 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
     tabIndex: PropTypes.number,
     transform: PropTypes.string,
     translateX: PropTypes.number,
-    translateY: PropTypes.number
+    translateY: PropTypes.number,
   };
 
   static defaultProps = {
     circleComponent: <Circle />,
     rectComponent: <Rect />,
     clipPathComponent: <ClipPath />,
-    groupComponent: <g />
+    groupComponent: <g />,
   };
   private clipId: VictoryClipContainerProps["clipId"];
 
@@ -90,7 +90,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
       clipWidth = 0,
       clipHeight = 0,
       translateX = 0,
-      translateY = 0
+      translateY = 0,
     } = props;
     const clipPadding = Helpers.getPadding({ padding: props.clipPadding });
     const radius = props.radius || Helpers.getRadius(props);
@@ -99,12 +99,12 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
       y: (polar ? origin.y : translateY) - clipPadding.top,
       width: Math.max(
         (polar ? radius : clipWidth) + clipPadding.left + clipPadding.right,
-        0
+        0,
       ),
       height: Math.max(
         (polar ? radius : clipHeight) + clipPadding.top + clipPadding.bottom,
-        0
-      )
+        0,
+      ),
     };
   }
 
@@ -117,7 +117,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
       children,
       className,
       groupComponent,
-      tabIndex
+      tabIndex,
     } = props;
     const clipComponent = this.renderClipComponent(props, clipId);
     const groupProps = assign(
@@ -126,14 +126,14 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
         style,
         transform,
         key: `clipped-group-${clipId}`,
-        clipPath: `url(#${clipId})`
+        clipPath: `url(#${clipId})`,
       },
-      events
+      events,
     );
     return React.cloneElement(
       groupComponent,
       { ...groupProps, tabIndex, ...userProps },
-      [clipComponent, ...React.Children.toArray(children)]
+      [clipComponent, ...React.Children.toArray(children)],
     );
   }
 
@@ -145,7 +145,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
       children,
       className,
       groupComponent,
-      tabIndex
+      tabIndex,
     } = props;
     return React.cloneElement(
       groupComponent,
@@ -155,11 +155,11 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
           style,
           transform,
           "aria-label": props["aria-label"],
-          tabIndex
+          tabIndex,
         },
-        events
+        events,
       ),
-      children
+      children,
     );
   }
 
@@ -173,10 +173,10 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
       translateY = 0,
       circleComponent,
       rectComponent,
-      clipPathComponent
+      clipPathComponent,
     } = props;
     const { top, bottom, left, right } = Helpers.getPadding({
-      padding: props.clipPadding
+      padding: props.clipPadding,
     });
     let child;
     if (polar) {
@@ -184,7 +184,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
       const circleProps = {
         r: Math.max(radius + left + right, radius + top + bottom, 0),
         cx: origin.x - left,
-        cy: origin.y - top
+        cy: origin.y - top,
       };
       child = React.cloneElement(circleComponent, circleProps);
     } else {
@@ -192,7 +192,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
         x: translateX - left,
         y: translateY - top,
         width: Math.max(clipWidth + left + right, 0),
-        height: Math.max(clipHeight + top + bottom, 0)
+        height: Math.max(clipHeight + top + bottom, 0),
       };
       child = React.cloneElement(rectComponent, rectProps);
     }
@@ -200,7 +200,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
     return React.cloneElement(
       clipPathComponent,
       assign({ key: `clip-path-${clipId}` }, props, { clipId }),
-      child
+      child,
     );
   }
 
@@ -233,7 +233,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
       clipHeight,
       clipWidth,
       translateX,
-      translateY
+      translateY,
     });
     return this.renderClippedGroup(clipProps, this.clipId);
   }

package/src/victory-container/victory-container.tsx

@@ -8,8 +8,8 @@ import TimerContext from "../victory-util/timer-context";
 import * as Helpers from "../victory-util/helpers";
 import * as UserProps from "../victory-util/user-props";
 import { OriginType } from "../victory-label/victory-label";
-import { D3Scale } from "../victory-util/types";
-import { VictoryThemeDefinition } from "../victory-theme/victory-theme-definition";
+import { D3Scale } from "../types/prop-types";
+import { VictoryThemeDefinition } from "../victory-theme/types";
 
 export interface VictoryContainerProps {
   "aria-describedby"?: string;
@@ -51,7 +51,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
     "aria-labelledby": PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
+      PropTypes.node,
     ]),
     className: PropTypes.string,
     containerId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -62,7 +62,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
     name: PropTypes.string,
     origin: PropTypes.shape({
       x: CustomPropTypes.nonNegative,
-      y: CustomPropTypes.nonNegative
+      y: CustomPropTypes.nonNegative,
     }),
     ouiaId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ouiaSafe: PropTypes.bool,
@@ -77,7 +77,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
     tabIndex: PropTypes.number,
     theme: PropTypes.object,
     title: PropTypes.string,
-    width: CustomPropTypes.nonNegative
+    width: CustomPropTypes.nonNegative,
   };
 
   static defaultProps = {
@@ -85,7 +85,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
     portalComponent: <Portal />,
     portalZIndex: 99,
     responsive: true,
-    role: "img"
+    role: "img",
   };
 
   static contextType = TimerContext;
@@ -151,7 +151,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
     return {
       ...(ouiaId && { "data-ouia-component-id": ouiaId }),
       ...(ouiaType && { "data-ouia-component-type": ouiaType }),
-      ...(ouiaSafe !== undefined && { "data-ouia-safe": ouiaSafe })
+      ...(ouiaSafe !== undefined && { "data-ouia-safe": ouiaSafe }),
     };
   }
 
@@ -164,7 +164,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
       width,
       height,
       portalZIndex,
-      responsive
+      responsive,
     } = props;
     const children = this.getChildren(props);
     const dimensions = responsive
@@ -174,13 +174,13 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
       {
         pointerEvents: "none",
         touchAction: "none",
-        position: "relative"
+        position: "relative",
       } as const,
-      dimensions
+      dimensions,
     );
     const portalDivStyle = assign(
       { zIndex: portalZIndex, position: "absolute", top: 0, left: 0 } as const,
-      dimensions
+      dimensions,
     );
     const svgStyle = assign({ pointerEvents: "all" }, dimensions);
     const portalSvgStyle = assign({ overflow: "visible" }, dimensions);
@@ -189,14 +189,14 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
       height,
       viewBox: svgProps.viewBox,
       preserveAspectRatio: svgProps.preserveAspectRatio,
-      style: portalSvgStyle
+      style: portalSvgStyle,
     };
     return (
       <PortalContext.Provider
         value={{
           portalUpdate: this.portalUpdate,
           portalRegister: this.portalRegister,
-          portalDeregister: this.portalDeregister
+          portalDeregister: this.portalDeregister,
         }}
       >
         <div
@@ -217,7 +217,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
           <div style={portalDivStyle}>
             {React.cloneElement(portalComponent, {
               ...portalProps,
-              ref: this.savePortalRef
+              ref: this.savePortalRef,
             })}
           </div>
         </div>
@@ -235,12 +235,12 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
       desc,
       tabIndex,
       preserveAspectRatio,
-      role
+      role,
     } = this.props;
 
     const style = responsive
       ? this.props.style
-      : Helpers.omit(this.props.style, ["height", "width"]);
+      : Helpers.omit(this.props.style!, ["height", "width"]);
 
     const userProps = UserProps.getSafeUserProps(this.props);
 
@@ -253,7 +253,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
         "aria-labelledby":
           [
             title && this.getIdForElement("title"),
-            this.props["aria-labelledby"]
+            this.props["aria-labelledby"],
           ]
             .filter(Boolean)
             .join(" ") || undefined,
@@ -263,9 +263,9 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
             .join(" ") || undefined,
         viewBox: responsive ? `0 0 ${width} ${height}` : undefined,
         preserveAspectRatio: responsive ? preserveAspectRatio : undefined,
-        ...userProps
+        ...userProps,
       },
-      events
+      events,
     );
     return this.renderContainer(this.props, svgProps, style);
   }