victory-core 36.5.0 → 36.5.3

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

@@ -0,0 +1,104 @@
+import * as d3Shape from "victory-vendor/d3-shape";
+
+const defined = (d) => {
+  const y = d._y1 !== undefined ? d._y1 : d._y;
+  return y !== null && y !== undefined && d._y0 !== null;
+};
+
+const getXAccessor = (scale) => {
+  return (d) => scale.x(d._x1 !== undefined ? d._x1 : d._x);
+};
+
+const getYAccessor = (scale) => {
+  return (d) => scale.y(d._y1 !== undefined ? d._y1 : d._y);
+};
+
+const getAngleAccessor = (scale) => {
+  return (d) => {
+    const x = scale.x(d._x1 !== undefined ? d._x1 : d._x);
+    return -1 * x + Math.PI / 2;
+  };
+};
+
+export type CurveName =
+  | "basis"
+  | "cardinal"
+  | "bumpX"
+  | "bumpY"
+  | "bundle"
+  | "catmullRom"
+  | "linear"
+  | "monotoneX"
+  | "monotoneY"
+  | "step"
+  | "stepAfter"
+  | "stepBefore"
+  | "natural";
+
+type ShapeMethod = keyof Pick<
+  typeof d3Shape,
+  | "curveBasis"
+  | "curveCardinal"
+  | "curveBumpX"
+  | "curveBumpY"
+  | "curveBundle"
+  | "curveCatmullRom"
+  | "curveLinear"
+  | "curveMonotoneX"
+  | "curveMonotoneY"
+  | "curveStep"
+  | "curveStepAfter"
+  | "curveStepBefore"
+  | "curveNatural"
+>;
+type ShapeMethodClosed = keyof Pick<
+  typeof d3Shape,
+  | "curveBasisClosed"
+  | "curveCardinalClosed"
+  | "curveLinearClosed"
+  | "curveCatmullRomClosed"
+>;
+
+const toNewName = (interpolation: CurveName) => {
+  // d3 shape changed the naming scheme for interpolators from "basis" -> "curveBasis" etc.
+  const capitalize = (s) => s && s[0].toUpperCase() + s.slice(1);
+  return `curve${capitalize(interpolation)}` as ShapeMethod;
+};
+const toNewNameClosed = (interpolation: CurveName) => {
+  return `${toNewName(interpolation)}Closed` as ShapeMethodClosed;
+};
+
+export const getInterpolationFunction = (props) => {
+  const { interpolation } = props;
+
+  if (typeof interpolation === "function") {
+    return interpolation;
+  }
+  if (typeof interpolation === "string") {
+    const { polar, openCurve = !polar } = props;
+    const interpolationName = !openCurve
+      ? toNewNameClosed(interpolation as CurveName)
+      : toNewName(interpolation as CurveName);
+
+    return d3Shape[interpolationName];
+  }
+
+  return d3Shape.curveLinear;
+};
+
+export const getLineFunction = (props) => {
+  const { polar, scale, horizontal } = props;
+  return polar
+    ? d3Shape
+        .lineRadial()
+        .defined(defined)
+        .curve(getInterpolationFunction(props))
+        .angle(getAngleAccessor(scale))
+        .radius(getYAccessor(scale))
+    : d3Shape
+        .line()
+        .defined(defined)
+        .curve(getInterpolationFunction(props))
+        .x(horizontal ? getYAccessor(scale) : getXAccessor(scale))
+        .y(horizontal ? getXAccessor(scale) : getYAccessor(scale));
+};

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

@@ -2,7 +2,7 @@
 /* eslint-disable no-console */
 
 // TODO: Use "warning" npm module like React is switching to.
-export function warn(message) {
+export function warn(message: string) {
   if (process.env.NODE_ENV !== "production") {
     if (console && console.warn) {
       console.warn(message);

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

@@ -1,7 +1,11 @@
-/*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
-import { isFunction, find, isRegExp } from "lodash";
+/* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }] */
+/* eslint-disable max-params */
+
+import { find, isRegExp } from "lodash";
 import * as Log from "./log";
 import PropTypes from "prop-types";
+import * as Scale from "./scale";
+import { D3Scale, ScaleName } from "../types/prop-types";
 
 /**
  * Return a new validator based on `validator` but with the option to chain
@@ -10,29 +14,25 @@ import PropTypes from "prop-types";
  * @param {Function} validator Validation function.
  * @returns {Function} Validator with `isRequired` option.
  */
-const makeChainable = function (validator) {
-  /* eslint-disable max-params */
-  const _chainable = function (
-    isRequired,
-    props,
-    propName,
-    componentName,
-    ...rest
-  ) {
-    const value = props[propName];
-    if (value === undefined || value === null) {
-      if (isRequired) {
-        return new Error(
-          `Required \`${propName}\` was not specified in \`${componentName}\`.`
-        );
+const makeChainable = function <T>(validator: PropTypes.Validator<T>) {
+  const createChainable =
+    (isRequired: boolean): PropTypes.Validator<T | undefined> =>
+    (props, propName, componentName, ...rest) => {
+      const value = props[propName];
+      if (value === undefined || value === null) {
+        if (isRequired) {
+          return new Error(
+            `Required \`${propName}\` was not specified in \`${componentName}\`.`,
+          );
+        }
+        return null;
       }
-      return null;
-    }
-    return validator(props, propName, componentName, ...rest);
-  };
-  const chainable = _chainable.bind(null, false);
-  chainable.isRequired = _chainable.bind(null, true);
-  return chainable;
+      return validator(props, propName, componentName, ...rest);
+    };
+  const chainable = Object.assign(createChainable(false), {
+    isRequired: createChainable(true),
+  });
+  return chainable as PropTypes.Requireable<T | undefined>;
 };
 
 const nullConstructor = () => null;
@@ -56,7 +56,7 @@ const getConstructor = (value) => {
 
 /**
  * Get the name of the constructor used to create `value`, using
- * `Object.protoype.toString`. If the value is null or undefined, return
+ * `Object.prototype.toString`. If the value is null or undefined, return
  * "null" or "undefined", respectively.
  * @param {*} value Instance to return the constructor name of.
  * @returns {String} Name of the constructor.
@@ -77,20 +77,24 @@ const getConstructorName = (value) => {
  * @param {String} explanation The message to provide the user of the deprecated propType.
  * @returns {Function} Validator which logs usage of this propType
  */
-export function deprecated(propType, explanation) {
+export function deprecated<T>(
+  propType: PropTypes.Validator<T>,
+  explanation: string,
+): PropTypes.Validator<T> {
   return (props, propName, componentName) => {
     const value = props[propName];
     if (value !== null && value !== undefined) {
       Log.warn(
-        `"${propName}" property of "${componentName}" has been deprecated ${explanation}`
+        `"${propName}" property of "${componentName}" has been deprecated ${explanation}`,
       );
     }
-    return PropTypes.checkPropTypes(
+    PropTypes.checkPropTypes(
       { [propName]: propType },
       props,
       propName,
-      componentName
+      componentName,
     );
+    return null;
   };
 }
 
@@ -101,109 +105,105 @@ export function deprecated(propType, explanation) {
  * @param {Array} validators Validation functions.
  * @returns {Function} Combined validator function
  */
-export function allOfType(validators) {
-  return makeChainable((props, propName, componentName, ...rest) =>
-    validators.reduce(
+export function allOfType<T>(validators: Array<PropTypes.Validator<T>>) {
+  return makeChainable<T>((props, propName, componentName, ...rest) => {
+    return validators.reduce<null | Error>(
       (result, validator) =>
         result || validator(props, propName, componentName, ...rest),
-      undefined
-    )
-  );
+      null,
+    );
+  });
 }
 
 /**
  * Check that the value is a non-negative number.
  */
-export const nonNegative = makeChainable((props, propName, componentName) => {
-  const value = props[propName];
-  if (typeof value !== "number" || value < 0) {
-    return new Error(
-      `\`${propName}\` in \`${componentName}\` must be a non-negative number.`
-    );
-  }
-  return undefined;
-});
+export const nonNegative = makeChainable<number>(
+  (props, propName, componentName) => {
+    const value = props[propName];
+    if (typeof value !== "number" || value < 0) {
+      return new Error(
+        `\`${propName}\` in \`${componentName}\` must be a non-negative number.`,
+      );
+    }
+    return null;
+  },
+);
 
 /**
  * Check that the value is an integer.
  */
-export const integer = makeChainable((props, propName, componentName) => {
-  const value = props[propName];
-  if (typeof value !== "number" || value % 1 !== 0) {
-    return new Error(
-      `\`${propName}\` in \`${componentName}\` must be an integer.`
-    );
-  }
-  return undefined;
-});
+export const integer = makeChainable<number>(
+  (props, propName, componentName) => {
+    const value = props[propName];
+    if (typeof value !== "number" || value % 1 !== 0) {
+      return new Error(
+        `\`${propName}\` in \`${componentName}\` must be an integer.`,
+      );
+    }
+    return null;
+  },
+);
 
 /**
  * Check that the value is greater than zero.
  */
-export const greaterThanZero = makeChainable(
+export const greaterThanZero = makeChainable<number>(
   (props, propName, componentName) => {
     const value = props[propName];
     if (typeof value !== "number" || value <= 0) {
       return new Error(
-        `\`${propName}\` in \`${componentName}\` must be a number greater than zero.`
+        `\`${propName}\` in \`${componentName}\` must be a number greater than zero.`,
       );
     }
-    return undefined;
-  }
+    return null;
+  },
 );
 
 /**
  * Check that the value is an Array of two unique values.
  */
-export const domain = makeChainable((props, propName, componentName) => {
-  const value = props[propName];
-  if (!Array.isArray(value) || value.length !== 2 || value[1] === value[0]) {
-    return new Error(
-      `\`${propName}\` in \`${componentName}\` must be an array of two unique numeric values.`
-    );
-  }
-  return undefined;
-});
+export const domain = makeChainable<[number, number]>(
+  (props, propName, componentName) => {
+    const value = props[propName];
+    if (!Array.isArray(value) || value.length !== 2 || value[1] === value[0]) {
+      return new Error(
+        `\`${propName}\` in \`${componentName}\` must be an array of two unique numeric values.`,
+      );
+    }
+    return null;
+  },
+);
 
 /**
  * Check that the value looks like a d3 `scale` function.
  */
-export const scale = makeChainable((props, propName, componentName) => {
-  const supportedScaleStrings = ["linear", "time", "log", "sqrt"];
-  const validScale = (scl) => {
-    if (isFunction(scl)) {
-      return (
-        isFunction(scl.copy) && isFunction(scl.domain) && isFunction(scl.range)
+export const scale = makeChainable<ScaleName | D3Scale>(
+  (props, propName, componentName) => {
+    const value = props[propName];
+    if (!Scale.validScale(value)) {
+      return new Error(
+        `\`${propName}\` in \`${componentName}\` must be a d3 scale.`,
       );
-    } else if (typeof scl === "string") {
-      return supportedScaleStrings.indexOf(scl) !== -1;
     }
-    return false;
-  };
-
-  const value = props[propName];
-  if (!validScale(value)) {
-    return new Error(
-      `\`${propName}\` in \`${componentName}\` must be a d3 scale.`
-    );
-  }
-  return undefined;
-});
+    return null;
+  },
+);
 
 /**
  * Check that an array contains items of the same type.
  */
-export const homogeneousArray = makeChainable(
+export const homogeneousArray = makeChainable<unknown[]>(
   (props, propName, componentName) => {
     const values = props[propName];
     if (!Array.isArray(values)) {
       return new Error(
-        `\`${propName}\` in \`${componentName}\` must be an array.`
+        `\`${propName}\` in \`${componentName}\` must be an array.`,
       );
     }
 
     if (values.length < 2) {
-      return undefined;
+      return null;
     }
 
     const comparisonConstructor = getConstructor(values[0]);
@@ -219,17 +219,17 @@ export const homogeneousArray = makeChainable(
       return new Error(
         `Expected \`${propName}\` in \`${componentName}\` to be a ` +
           `homogeneous array, but found types \`${constructorName}\` and ` +
-          `\`${otherConstructorName}\`.`
+          `\`${otherConstructorName}\`.`,
       );
     }
-    return undefined;
-  }
+    return null;
+  },
 );
 
 /**
  * Check that array prop length matches props.data.length
  */
-export const matchDataLength = makeChainable((props, propName) => {
+export const matchDataLength = makeChainable<unknown[]>((props, propName) => {
   if (
     props[propName] &&
     Array.isArray(props[propName]) &&
@@ -237,17 +237,19 @@ export const matchDataLength = makeChainable((props, propName) => {
   ) {
     return new Error(`Length of data and ${propName} arrays must match.`);
   }
-  return undefined;
+  return null;
 });
 
 /**
  * Check that the value is a regular expression
  */
-export const regExp = makeChainable((props, propName, componentName) => {
-  if (props[propName] && !isRegExp(props[propName])) {
-    return new Error(
-      `\`${propName}\` in \`${componentName}\` must be a regular expression.`
-    );
-  }
-  return undefined;
-});
+export const regExp = makeChainable<RegExp>(
+  (props, propName, componentName) => {
+    if (props[propName] && !isRegExp(props[propName])) {
+      return new Error(
+        `\`${propName}\` in \`${componentName}\` must be a regular expression.`,
+      );
+    }
+    return null;
+  },
+);

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

@@ -3,18 +3,26 @@ import { includes, isFunction, isPlainObject } from "lodash";
 import * as Helpers from "./helpers";
 import * as Collection from "./collection";
 import * as d3Scale from "victory-vendor/d3-scale";
+import { D3Scale, ScaleName } from "../types/prop-types";
 
-const supportedScaleStrings = ["linear", "time", "log", "sqrt"];
+const supportedScaleStrings = ["linear", "time", "log", "sqrt"] as const;
+
+type D3ScaleMethods = Pick<
+  typeof d3Scale,
+  "scaleLinear" | "scaleTime" | "scaleLog" | "scaleSqrt"
+>;
 
 // Private Functions
 
-function toNewName(scale) {
+function toNewName(scale: ScaleName): keyof D3ScaleMethods {
   // d3 scale changed the naming scheme for scale from "linear" -> "scaleLinear" etc.
   const capitalize = (s) => s && s[0].toUpperCase() + s.slice(1);
-  return `scale${capitalize(scale)}`;
+  return `scale${capitalize(scale)}` as keyof D3ScaleMethods;
 }
 
-function validScale(scale) {
+export function validScale(
+  scale: string | D3Scale,
+): scale is ScaleName | D3Scale {
   if (typeof scale === "function") {
     return (
       isFunction(scale.copy) &&
@@ -27,7 +35,7 @@ function validScale(scale) {
   return false;
 }
 
-function isScaleDefined(props, axis) {
+function isScaleDefined(props, axis: "x" | "y") {
   if (!props.scale) {
     return false;
   } else if (props.scale.x || props.scale.y) {
@@ -36,7 +44,7 @@ function isScaleDefined(props, axis) {
   return true;
 }
 
-function getScaleTypeFromProps(props, axis) {
+function getScaleTypeFromProps(props, axis: "x" | "y"): string | undefined {
   if (!isScaleDefined(props, axis)) {
     return undefined;
   }
@@ -44,7 +52,7 @@ function getScaleTypeFromProps(props, axis) {
   return typeof scale === "string" ? scale : getType(scale);
 }
 
-function getScaleFromDomain(props, axis) {
+function getScaleFromDomain(props, axis: "x" | "y"): ScaleName | undefined {
   let domain;
   if (props.domain && props.domain[axis]) {
     domain = props.domain[axis];
@@ -57,7 +65,7 @@ function getScaleFromDomain(props, axis) {
   return Collection.containsDates(domain) ? "time" : "linear";
 }
 
-function getScaleTypeFromData(props, axis) {
+function getScaleTypeFromData(props, axis): ScaleName {
   if (!props.data) {
     return "linear";
   }
@@ -73,36 +81,41 @@ function getScaleTypeFromData(props, axis) {
 
 // Exported Functions
 
-export function getScaleFromName(name) {
-  return validScale(name) ? d3Scale[toNewName(name)]() : d3Scale.scaleLinear();
+export function getScaleFromName(name: ScaleName | string): D3Scale {
+  if (validScale(name)) {
+    const methodName = toNewName(name as ScaleName);
+    // @ts-expect-error scaleTime is not directly compatible with our D3Scale definition
+    return d3Scale[methodName]();
+  }
+  return d3Scale.scaleLinear();
 }
 
-export function getBaseScale(props, axis) {
+export function getBaseScale(props, axis: "x" | "y") {
   const scale = getScaleFromProps(props, axis);
   if (scale) {
     return typeof scale === "string" ? getScaleFromName(scale) : scale;
   }
   const defaultScale =
     getScaleFromDomain(props, axis) || getScaleTypeFromData(props, axis);
-  return d3Scale[toNewName(defaultScale)]();
+  return getScaleFromName(defaultScale);
 }
 
 export function getDefaultScale() {
   return d3Scale.scaleLinear();
 }
 
-export function getScaleFromProps(props, axis) {
+export function getScaleFromProps(props, axis): D3Scale | undefined {
   if (!isScaleDefined(props, axis)) {
     return undefined;
   }
   const scale = props.scale[axis] || props.scale;
   if (validScale(scale)) {
-    return isFunction(scale) ? scale : d3Scale[toNewName(scale)]();
+    return isFunction(scale) ? scale : getScaleFromName(scale);
   }
   return undefined;
 }
 
-export function getScaleType(props, axis) {
+export function getScaleType(props, axis): string {
   // if the scale was not given in props, it will be set to linear or time depending on data
   return (
     getScaleTypeFromProps(props, axis) || getScaleTypeFromData(props, axis)
@@ -113,7 +126,7 @@ export function getScaleType(props, axis) {
 // **Note**: Brittle because reliant on d3 internals.
 const DUCK_TYPES = [
   { name: "quantile", method: "quantiles" },
-  { name: "log", method: "base" }
+  { name: "log", method: "base" },
   // TODO(2214): Re-evaluate (1) duck typing approach, and (2) if duck typing,
   //   do we need a different approach? (Multiple keys? Stringifying functions?)
   // https://github.com/FormidableLabs/victory/issues/2214