victory-core 36.4.1 → 36.5.2

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

@@ -120,23 +120,23 @@ const absoluteMeasurementUnitsToPixels = {
   pt: 1.33,
   pc: 16,
   in: 96,
-  px: 1
+  px: 1,
 };
 const relativeMeasurementUnitsCoef = {
   em: 1,
-  ex: 0.5
+  ex: 0.5,
 };
 
 const coefficients = {
   heightOverlapCoef: 1.05, // Coefficient for height value to prevent overlap.
-  lineCapitalCoef: 1.15 // Coefficient for height value. Reserve space for capital chars.
+  lineCapitalCoef: 1.15, // Coefficient for height value. Reserve space for capital chars.
 };
 const defaultStyle = {
   lineHeight: 1,
   letterSpacing: "0px",
   fontSize: 0,
   angle: 0,
-  fontFamily: ""
+  fontFamily: "",
 };
 
 const _degreeToRadian = (angle) => (angle * Math.PI) / 180;
@@ -147,7 +147,7 @@ const _getFontData = (fontFamily) => {
   return fonts[fontMatch];
 };
 
-const _splitToLines = (text) => {
+const _splitToLines = (text: string | string[]) => {
   return Array.isArray(text) ? text : text.toString().split(/\r\n|\r|\n/g);
 };
 
@@ -165,9 +165,12 @@ const _getSizeWithRotate = (axisSize, dependentSize, angle) => {
  * @param  {number} fontSize Current text font-size.
  * @returns {number} Approximate Css length in pixels.
  */
-export const convertLengthToPixels = (length, fontSize) => {
-  const attribute = length.match(/[a-zA-Z%]+/) && length.match(/[a-zA-Z%]+/)[0];
-  const value = length.match(/[0-9.,]+/);
+export const convertLengthToPixels = (
+  length: string,
+  fontSize?: number,
+): number => {
+  const attribute = length.match(/[a-zA-Z%]+/)?.[0];
+  const value = Number(length.match(/[0-9.,]+/));
   let result;
   if (!attribute) {
     result = value || 0;
@@ -195,11 +198,11 @@ const _prepareParams = (inputStyle, index) => {
     fontSize:
       typeof style.fontSize === "number"
         ? style.fontSize
-        : convertLengthToPixels(String(style.fontSize))
+        : convertLengthToPixels(String(style.fontSize)),
   });
 };
 
-const _approximateTextWidthInternal = (text, style) => {
+const _approximateTextWidthInternal = (text: string | string[], style) => {
   if (text === undefined || text === "" || text === null) {
     return 0;
   }
@@ -208,7 +211,7 @@ const _approximateTextWidthInternal = (text, style) => {
     const len = line.toString().length;
     const { fontSize, letterSpacing, fontFamily } = _prepareParams(
       style,
-      index
+      index,
     );
     const fontData = _getFontData(fontFamily);
     const width =
@@ -226,7 +229,7 @@ const _approximateTextWidthInternal = (text, style) => {
   return Math.max(...widths);
 };
 
-const _approximateTextHeightInternal = (text, style) => {
+const _approximateTextHeightInternal = (text: string | string[], style) => {
   if (text === undefined || text === "" || text === null) {
     return 0;
   }
@@ -240,9 +243,18 @@ const _approximateTextHeightInternal = (text, style) => {
   }, 0);
 };
 
+export interface TextSizeStyleInterface {
+  angle?: number;
+  characterConstant?: string;
+  fontFamily?: string;
+  fontSize?: number | string;
+  letterSpacing?: string;
+  lineHeight?: number;
+}
+
 // Stubbable implementation.
 export const _approximateTextSizeInternal = {
-  impl: (text, style) => {
+  impl: (text: string | string[], style?: TextSizeStyleInterface) => {
     const angle = Array.isArray(style)
       ? style[0] && style[0].angle
       : style && style.angle;
@@ -256,14 +268,14 @@ export const _approximateTextSizeInternal = {
       : height;
     return {
       width: widthWithRotate,
-      height: heightWithRotate * coefficients.heightOverlapCoef
+      height: heightWithRotate * coefficients.heightOverlapCoef,
     };
-  }
+  },
 };
 
 /**
  * Predict text size by font params.
- * @param {string} text Content for width calculation.
+ * @param {string|string[]} text Content for width calculation.
  * @param {Object} style Text styles, ,fontFamily, fontSize, etc.
  * @param {string} style.fontFamily Text fontFamily.
  * @param {(number|string)} style.fontSize Text fontSize.
@@ -272,5 +284,8 @@ export const _approximateTextSizeInternal = {
  * @param {number} style.lineHeight Line height coefficient.
  * @returns {number} Approximate text label height.
  */
-export const approximateTextSize = (text, style) =>
+export const approximateTextSize = (
+  text: string | string[],
+  style?: TextSizeStyleInterface,
+): { width: number; height: number } =>
   _approximateTextSizeInternal.impl(text, style);

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

@@ -7,7 +7,7 @@ import Timer from "./timer";
  */
 const TimerContext = React.createContext({
   transitionTimer: new Timer(),
-  animationTimer: new Timer()
+  animationTimer: new Timer(),
 });
 TimerContext.displayName = "TimerContext";
 

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

@@ -1,10 +1,20 @@
-import { timer, now } from "victory-vendor/d3-timer";
+import { timer, now, Timer as D3Timer } from "victory-vendor/d3-timer";
+
+type TimerCallback = (elapsed: number, duration: number) => void;
 
 export default class Timer {
+  private shouldAnimate: boolean;
+  private readonly subscribers: Array<{
+    callback: TimerCallback;
+    startTime: number;
+    duration: number;
+  }>;
+  private activeSubscriptions: number;
+  private timer: D3Timer | null;
+
   constructor() {
     this.shouldAnimate = true;
     this.subscribers = [];
-    this.loop = this.loop.bind(this);
     this.timer = null;
     this.activeSubscriptions = 0;
   }
@@ -17,11 +27,11 @@ export default class Timer {
     this.shouldAnimate = true;
   }
 
-  loop() {
+  loop = () => {
     this.subscribers.forEach((s) => {
       s.callback(now() - s.startTime, s.duration);
     });
-  }
+  };
 
   start() {
     if (!this.timer) {
@@ -36,12 +46,12 @@ export default class Timer {
     }
   }
 
-  subscribe(callback, duration) {
+  subscribe(callback: TimerCallback, duration: number) {
     duration = this.shouldAnimate ? duration : 0;
     const subscriptionID = this.subscribers.push({
       startTime: now(),
       callback,
-      duration
+      duration,
     });
     this.activeSubscriptions++;
     this.start();

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

@@ -1,6 +1,6 @@
-/* eslint-disable func-style */
 import { assign, defaults, identity, keys } from "lodash";
 import React from "react";
+import { AnimatePropTypeInterface } from "../types/prop-types";
 
 function getDatumKey(datum, idx) {
   return (datum.key || idx).toString();
@@ -47,7 +47,7 @@ function getNodeTransitions(oldData, nextData) {
     entering:
       oldDataKeyed && getKeyedDataDifference(nextDataKeyed, oldDataKeyed),
     exiting:
-      nextDataKeyed && getKeyedDataDifference(oldDataKeyed, nextDataKeyed)
+      nextDataKeyed && getKeyedDataDifference(oldDataKeyed, nextDataKeyed),
   };
 }
 
@@ -60,7 +60,7 @@ function getChildData(child) {
 
 /**
  * If a parent component has animation enabled, calculate the transitions
- * for any data of any child component that supports data transitions
+ * for any data of any child component that supports data transitions.
  * Data transitions are defined as any two datasets where data nodes exist
  * in the first set and not the second, in the second and not the first,
  * or both.
@@ -96,7 +96,7 @@ export function getInitialTransitionState(oldChildren, nextChildren) {
       if (child && child.props && child.props.children && next[idx]) {
         return getTransitionsFromChildren(
           React.Children.toArray(old[idx].props.children),
-          React.Children.toArray(next[idx].props.children)
+          React.Children.toArray(next[idx].props.children),
         );
       }
       // get Transition entering and exiting nodes
@@ -106,7 +106,7 @@ export function getInitialTransitionState(oldChildren, nextChildren) {
 
   const childrenTransitions = getTransitionsFromChildren(
     React.Children.toArray(oldChildren),
-    React.Children.toArray(nextChildren)
+    React.Children.toArray(nextChildren),
   );
   return {
     nodesWillExit,
@@ -117,20 +117,26 @@ export function getInitialTransitionState(oldChildren, nextChildren) {
     //       is a perfect match for the previous data and domain except
     //       for new nodes. In this case, we wouldn't want a delay before
     //       the new nodes appear.
-    nodesShouldEnter: false
+    nodesShouldEnter: false,
   };
 }
 
-function getInitialChildProps(animate, data) {
+type TransitionProps = {
+  data;
+  animate?: AnimatePropTypeInterface;
+  clipWidth?: number;
+};
+
+function getInitialChildProps(animate, data): TransitionProps {
   const after =
     animate.onEnter && animate.onEnter.after ? animate.onEnter.after : identity;
   return {
-    data: data.map((datum, idx) => assign({}, datum, after(datum, idx, data)))
+    data: data.map((datum, idx) => assign({}, datum, after(datum, idx, data))),
   };
 }
 
 // eslint-disable-next-line max-params
-function getChildBeforeLoad(animate, child, data, cb) {
+function getChildBeforeLoad(animate, child, data, cb): TransitionProps {
   animate = assign({}, animate, { onEnd: cb });
   if (animate && animate.onLoad && !animate.onLoad.duration) {
     return { animate, data };
@@ -146,7 +152,7 @@ function getChildBeforeLoad(animate, child, data, cb) {
 }
 
 // eslint-disable-next-line max-params
-function getChildOnLoad(animate, data, cb) {
+function getChildOnLoad(animate, data, cb): TransitionProps {
   animate = assign({}, animate, { onEnd: cb });
   if (animate && animate.onLoad && !animate.onLoad.duration) {
     return { animate, data };
@@ -162,7 +168,13 @@ function getChildOnLoad(animate, data, cb) {
 }
 
 // eslint-disable-next-line max-params, max-len
-function getChildPropsOnExit(animate, child, data, exitingNodes, cb) {
+function getChildPropsOnExit(
+  animate,
+  child,
+  data,
+  exitingNodes,
+  cb,
+): TransitionProps {
   // Whether or not _this_ child has exiting nodes, we want the exit-
   // transition for all children to have the same duration, delay, etc.
   const onExit = animate && animate.onExit;
@@ -170,7 +182,7 @@ function getChildPropsOnExit(animate, child, data, exitingNodes, cb) {
 
   if (exitingNodes) {
     // After the exit transition occurs, trigger the animations for
-    // nodes that are neither exiting or entering.
+    // nodes that are neither exiting nor entering.
     animate.onEnd = cb;
     const before =
       animate.onExit && animate.onExit.before
@@ -189,7 +201,13 @@ function getChildPropsOnExit(animate, child, data, exitingNodes, cb) {
 }
 
 // eslint-disable-next-line max-params,max-len
-function getChildPropsBeforeEnter(animate, child, data, enteringNodes, cb) {
+function getChildPropsBeforeEnter(
+  animate,
+  child,
+  data,
+  enteringNodes,
+  cb,
+): TransitionProps {
   if (enteringNodes) {
     // Perform a normal animation here, except - when it finishes - trigger
     // the transition for entering nodes.
@@ -213,7 +231,12 @@ function getChildPropsBeforeEnter(animate, child, data, enteringNodes, cb) {
 }
 
 // eslint-disable-next-line max-params, max-len
-function getChildPropsOnEnter(animate, data, enteringNodes, cb) {
+function getChildPropsOnEnter(
+  animate,
+  data,
+  enteringNodes,
+  cb,
+): TransitionProps {
   // Whether or not _this_ child has entering nodes, we want the entering-
   // transition for all children to have the same duration, delay, etc.
   const onEnter = animate && animate.onEnter;
@@ -244,7 +267,7 @@ function getChildPropsOnEnter(animate, data, enteringNodes, cb) {
  * and its index in the parent's children array.
  *
  * In particular, this will include an `animate` object that is set appropriately
- * so that each child will be synchoronized for each stage of a transition
+ * so that each child will be synchronized for each stage of a transition
  * animation.  It will also include a transformed `data` object, where each datum
  * is transformed by `animate.onExit` and `animate.onEnter` `before` and `after`
  * functions.
@@ -270,7 +293,7 @@ export function getTransitionPropsFactory(props, state, setState) {
       props.animate && props.animate.onExit && props.animate.onExit.duration,
     load:
       props.animate && props.animate.onLoad && props.animate.onLoad.duration,
-    move: props.animate && props.animate.duration
+    move: props.animate && props.animate.duration,
   };
 
   const onLoad = (child, data, animate) => {
@@ -325,9 +348,13 @@ export function getTransitionPropsFactory(props, state, setState) {
   };
 
   // eslint-disable-next-line max-statements, complexity, max-len
-  return function getTransitionProps(child, index) {
+  return function getTransitionProps(child, index): TransitionProps {
     const data = getChildData(child) || [];
-    const animate = defaults({}, props.animate, child.props.animate);
+    const animate: AnimatePropTypeInterface = defaults(
+      {},
+      props.animate,
+      child.props.animate,
+    );
     const defaultTransitions = child.props.polar
       ? child.type.defaultPolarTransitions || child.type.defaultTransitions
       : child.type.defaultTransitions;
@@ -335,17 +362,17 @@ export function getTransitionPropsFactory(props, state, setState) {
     animate.onExit = defaults(
       {},
       animate.onExit,
-      defaultTransitions && defaultTransitions.onExit
+      defaultTransitions && defaultTransitions.onExit,
     );
     animate.onEnter = defaults(
       {},
       animate.onEnter,
-      defaultTransitions && defaultTransitions.onEnter
+      defaultTransitions && defaultTransitions.onEnter,
     );
     animate.onLoad = defaults(
       {},
       animate.onLoad,
-      defaultTransitions && defaultTransitions.onLoad
+      defaultTransitions && defaultTransitions.onLoad,
     );
 
     const childTransitions =
@@ -378,13 +405,13 @@ export function getTransitionPropsFactory(props, state, setState) {
           ? transitionDurations.move
           : child.props.animate && child.props.animate.duration;
       const animation = {
-        duration: nodesShouldEnter && enteringNodes ? enter : move
+        duration: nodesShouldEnter && enteringNodes ? enter : move,
       };
       return onEnter(
         enteringNodes,
         child,
         data,
-        assign({}, animate, animation)
+        assign({}, animate, animation),
       );
     } else if (!state && animate && animate.onExit) {
       // This is the initial render, and nodes may enter when props change. Because

package/src/victory-util/type-helpers.ts

@@ -0,0 +1,50 @@
+import {
+  ForAxes,
+  AxisType,
+  Tuple,
+  Datum,
+  DatumValue,
+} from "../types/prop-types";
+
+export function hasValueForAxis<T = unknown>(
+  value: unknown | ForAxes<T>,
+  axis: AxisType,
+): value is ForAxes<T> {
+  if (typeof value === "object" && value !== null) {
+    return axis in value;
+  }
+  return false;
+}
+
+export function isTuple<T = unknown>(value: unknown): value is Tuple<T> {
+  return Array.isArray(value) && value.length === 2;
+}
+
+export function getValueForAxis<T = unknown>(
+  value: T | ForAxes<T> | undefined,
+  axis: AxisType,
+): T | undefined {
+  if (hasValueForAxis<T>(value, axis)) {
+    return value[axis] as T;
+  }
+  return value;
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function isFunction<T = Function>(func?: unknown): func is T {
+  return typeof func === "function";
+}
+
+export function isDate(value: unknown): value is Date {
+  return value instanceof Date;
+}
+
+export function isKeyValueObject(
+  datum: Datum,
+): datum is { [key: string]: DatumValue } {
+  return (
+    typeof datum === "object" &&
+    !Array.isArray(datum) &&
+    !(datum instanceof Date)
+  );
+}

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

@@ -2,15 +2,17 @@ import * as React from "react";
 
 /*
   USER_PROPS_SAFELIST is to contain any string deemed safe for user props.
-  The startsWidth array will contain the start of any accepted user-prop that 
+  The startsWidth array will contain the start of any accepted user-prop that
   starts with these characters.
   The exactMatch will contain a list of exact prop names that are accepted.
 */
 const USER_PROPS_SAFELIST = {
-  startsWith: ["data-", "aria-"],
-  exactMatch: []
+  startsWith: ["data-", "aria-"] as const,
+  exactMatch: [] as string[],
 };
 
+type SafeAttribute = `data-${string}` | `aria-${string}`;
+
 /**
  * doesPropStartWith: Function that takes a prop's key and runs it against all
  * options in the USER_PROPS_SAFELIST and checks to see if it starts with any
@@ -19,7 +21,7 @@ const USER_PROPS_SAFELIST = {
  * @returns {Boolean}: returns true if the key starts with an option or false if
  * otherwise
  */
-const doesPropStartWith = (key) => {
+const doesPropStartWith = (key: string): key is SafeAttribute => {
   let startsWith = false;
 
   USER_PROPS_SAFELIST.startsWith.forEach((starterString) => {
@@ -38,14 +40,15 @@ const doesPropStartWith = (key) => {
  * @returns {Boolean}: return true if whitelist contains that key, otherwise
  * returns false.
  */
-const isExactMatch = (key) => USER_PROPS_SAFELIST.exactMatch.includes(key);
+const isExactMatch = (key: string): key is SafeAttribute =>
+  USER_PROPS_SAFELIST.exactMatch.includes(key);
 
 /**
  * testIfSafeProp: tests prop's key against both startsWith and exactMatch values
  * @param {String} key: prop key to be tested against the whitelist
  * @returns {Boolean}: returns true if found in whitelist, otherwise returns false
  */
-const testIfSafeProp = (key) => {
+const testIfSafeProp = (key: string): key is SafeAttribute => {
   if (doesPropStartWith(key) || isExactMatch(key)) return true;
   return false;
 };
@@ -71,24 +74,26 @@ const getValue = (value, props) => {
  * @param {Object} props: props to be filtered against USER_PROPS_SAFELIST
  * @returns {Object}: object containing remaining acceptable props
  */
-export const getSafeUserProps = (props) => {
+export const getSafeUserProps = <T>(
+  props: T,
+): Record<SafeAttribute, string> => {
   const propsToFilter = { ...props };
   return Object.fromEntries(
     Object.entries(propsToFilter)
       .filter(([key]) => testIfSafeProp(key))
       .map(([key, value]) => {
         return [key, getValue(value, props)];
-      })
+      }),
   );
 };
 
 /**
  * Wraps a component and adds safe user props
  *
- * @param {ReactNode} component: parent component
+ * @param {ReactElement} component: parent component
  * @param {Object} props: props to be filtered
- * @returns {ReactNode} modified component
+ * @returns {ReactElement} modified component
  */
-export const withSafeUserProps = (component, props) => {
+export const withSafeUserProps = (component: React.ReactElement, props) => {
   return React.cloneElement(component, getSafeUserProps(props));
 };

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

@@ -0,0 +1,41 @@
+import React from "react";
+import {
+  VictoryProvider,
+  VictoryProviderProps,
+  VictoryContainer,
+} from "victory-core";
+import { VictoryCommonProps } from "./common-props";
+
+const defaultProviderProps = {
+  width: 450,
+  height: 300,
+  padding: 50,
+  data: [],
+};
+
+export function withContainer<Props extends VictoryCommonProps>(
+  WrappedComponent: (props: Props) => React.ReactElement,
+  initialProviderProps: Partial<VictoryProviderProps> = {},
+) {
+  return (props: Props) => {
+    const providerProps = {
+      ...defaultProviderProps,
+      ...initialProviderProps,
+      ...props,
+    };
+    const { standalone = true, containerComponent = <VictoryContainer /> } =
+      props;
+    if (standalone) {
+      return (
+        <VictoryProvider {...providerProps}>
+          {React.cloneElement(
+            containerComponent,
+            providerProps,
+            <WrappedComponent {...props} />,
+          )}
+        </VictoryProvider>
+      );
+    }
+    return <WrappedComponent {...props} />;
+  };
+}