victory-core 36.4.1 → 36.5.2

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

@@ -1,8 +1,11 @@
-/* eslint-disable func-style */
-/*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
@@ -11,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;
@@ -57,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.
@@ -78,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;
   };
 }
 
@@ -102,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]);
@@ -220,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]) &&
@@ -238,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}

@@ -1,21 +1,28 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 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) &&
@@ -28,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) {
@@ -37,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;
   }
@@ -45,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];
@@ -58,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";
   }
@@ -74,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)
@@ -114,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

package/src/victory-util/selection.ts

@@ -0,0 +1,158 @@
+import React from "react";
+import { Collection, VictoryCommonProps } from "./index";
+import type { DomainPropType, ScaleXYPropType } from "../types/prop-types";
+
+// Private Functions
+
+function transformTarget(
+  target: number,
+  matrix: DOMMatrix,
+  dimension: "x" | "y",
+) {
+  const { a, d, e, f } = matrix;
+  return dimension === "y" ? d * target + f : a * target + e;
+}
+
+function getTransformationMatrix(svg: SVGGraphicsElement): DOMMatrix {
+  return svg.getScreenCTM()!.inverse();
+}
+
+interface ReactNativeTouchEvent extends Event {
+  identifier?: number;
+  locationX: number;
+  locationY: number;
+}
+function isNativeTouchEvent(
+  nativeEvent: Event | undefined,
+): nativeEvent is ReactNativeTouchEvent {
+  return !!(
+    nativeEvent &&
+    (nativeEvent as ReactNativeTouchEvent).identifier !== undefined
+  );
+}
+function isReactTouchEvent(evt: React.SyntheticEvent): evt is React.TouchEvent {
+  return (
+    (evt as React.TouchEvent).changedTouches &&
+    (evt as React.TouchEvent).changedTouches.length > 0
+  );
+}
+
+// Exported Functions
+
+export function getParentSVG(
+  evt: Pick<React.SyntheticEvent, "target"> &
+    Partial<Pick<React.SyntheticEvent, "nativeEvent">>,
+): SVGElement {
+  if (isNativeTouchEvent(evt.nativeEvent)) {
+    // @ts-expect-error Seems like a superfluous check.
+    return undefined;
+  }
+  const getParent = (target) => {
+    if (target.nodeName === "svg") {
+      return target;
+    } else {
+      return target.parentNode ? getParent(target.parentNode) : target;
+    }
+  };
+  return getParent(evt.target);
+}
+
+export function getSVGEventCoordinates(
+  evt: React.SyntheticEvent,
+  svg?: SVGElement,
+): SVGCoordinateType {
+  if (isNativeTouchEvent(evt.nativeEvent)) {
+    // react-native override. relies on the RN.View being the _exact_ same size as its child SVG.
+    // this should be fine: the svg is the only child of View and the View shirks to its children
+    return {
+      x: evt.nativeEvent.locationX,
+      y: evt.nativeEvent.locationY,
+    };
+  }
+  const location = isReactTouchEvent(evt)
+    ? evt.changedTouches[0]
+    : (evt as React.MouseEvent);
+  svg = svg || getParentSVG(location);
+  const matrix = getTransformationMatrix(svg as SVGGraphicsElement);
+  return {
+    x: transformTarget(location.clientX, matrix, "x"),
+    y: transformTarget(location.clientY, matrix, "y"),
+  };
+}
+
+export function getDomainCoordinates(
+  props: Pick<VictoryCommonProps, "scale" | "horizontal">,
+  domain?: DomainPropType,
+): DomainPropType {
+  const { horizontal } = props;
+  const scale = props.scale as ScaleXYPropType;
+  // FIXME: add support for DomainTuple: [number, number]
+  const domainObj: any = domain || {
+    x: scale.x.domain(),
+    y: scale.y.domain(),
+  };
+  return {
+    x: horizontal
+      ? [scale.y(domainObj.y[0]), scale.y(domainObj.y[1])]
+      : [scale.x(domainObj.x[0]), scale.x(domainObj.x[1])],
+    y: horizontal
+      ? [scale.x(domainObj.x[0]), scale.x(domainObj.x[1])]
+      : [scale.y(domainObj.y[0]), scale.y(domainObj.y[1])],
+  };
+}
+
+// eslint-disable-next-line max-params
+export function getDataCoordinates(
+  props: any,
+  scale: ScaleXYPropType,
+  x: number,
+  y: number,
+): SVGCoordinateType {
+  const { polar, horizontal } = props;
+  if (!polar) {
+    return {
+      x: horizontal ? scale.x.invert(y) : scale.x.invert(x),
+      y: horizontal ? scale.y.invert(x) : scale.y.invert(y),
+    };
+  } else {
+    const origin = props.origin || { x: 0, y: 0 };
+    const baseX = x - origin.x;
+    const baseY = y - origin.y;
+    const radius = Math.abs(baseX * Math.sqrt(1 + Math.pow(-baseY / baseX, 2)));
+    const angle = (-Math.atan2(baseY, baseX) + Math.PI * 2) % (Math.PI * 2);
+    return {
+      x: scale.x.invert(angle),
+      y: scale.y.invert(radius),
+    };
+  }
+}
+
+export function getBounds(props: ComputedCommonProps): SVGCoordinateBounds {
+  const { x1, x2, y1, y2, scale } = props;
+  const point1 = getDataCoordinates(props, scale, x1, y1);
+  const point2 = getDataCoordinates(props, scale, x2, y2);
+  const makeBound = (a: number, b: number) => {
+    return [
+      Collection.getMinValue([a, b]) as number,
+      Collection.getMaxValue([a, b]) as number,
+    ] as const;
+  };
+  return {
+    x: makeBound(point1.x, point2.x),
+    y: makeBound(point1.y, point2.y),
+  };
+}
+
+export type SVGCoordinateType = { x: number; y: number };
+export type SVGCoordinateBounds = {
+  x: readonly [number, number];
+  y: readonly [number, number];
+};
+
+type ComputedCommonProps = {
+  scale: ScaleXYPropType;
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+};

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

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /**
  * Given an object with CSS/SVG transform definitions, return the string value
  * for use with the `transform` CSS property or SVG attribute. Note that we
@@ -19,7 +18,7 @@ export const toTransformString = function (obj, ...more) {
     if (obj === undefined || obj === null || typeof obj === "string") {
       return obj;
     }
-    const transforms = [];
+    const transforms = [] as string[];
     for (const key in obj) {
       if (obj.hasOwnProperty(key)) {
         const value = obj[key];
@@ -50,14 +49,14 @@ export function getColorScale(name) {
       "#55DBC1",
       "#EFDA97",
       "#E2A37F",
-      "#DF948A"
+      "#DF948A",
     ],
     heatmap: ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"],
     warm: ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"],
     cool: ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"],
     red: ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"],
     blue: ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"],
-    green: ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"]
+    green: ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"],
   };
   return name ? scales[name] : scales.grayscale;
 }