victory-core 36.4.1 → 36.5.2

package/src/victory-primitives/{border.js → border.tsx}

@@ -2,8 +2,19 @@ import React from "react";
 import PropTypes from "prop-types";
 import * as Helpers from "../victory-util/helpers";
 import { assign } from "lodash";
-import * as CommonProps from "../victory-util/common-props";
-import Rect from "./rect";
+import {
+  CommonProps,
+  VictoryCommonPrimitiveProps,
+} from "../victory-util/common-props";
+import { Rect } from "./rect";
+
+export interface BorderProps extends VictoryCommonPrimitiveProps {
+  width?: number;
+  height?: number;
+  rectComponent?: React.ReactElement;
+  x?: number;
+  y?: number;
+}
 
 const evaluateProps = (props) => {
   /**
@@ -19,17 +30,17 @@ const evaluateProps = (props) => {
   const id = Helpers.evaluateProp(props.id, props);
   const style = Helpers.evaluateStyle(
     assign({ fill: "none" }, props.style),
-    props
+    props,
   );
   const tabIndex = Helpers.evaluateProp(props.tabIndex, props);
 
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
-const Border = (props) => {
+export const Border = (props: BorderProps) => {
   props = evaluateProps(props);
 
-  return React.cloneElement(props.rectComponent, {
+  return React.cloneElement(props.rectComponent!, {
     ...props.events,
     "aria-label": props.ariaLabel,
     style: props.style,
@@ -43,7 +54,7 @@ const Border = (props) => {
     y: props.y,
     width: props.width,
     height: props.height,
-    clipPath: props.clipPath
+    clipPath: props.clipPath,
   });
 };
 
@@ -53,13 +64,11 @@ Border.propTypes = {
   rectComponent: PropTypes.element,
   width: PropTypes.number,
   x: PropTypes.number,
-  y: PropTypes.number
+  y: PropTypes.number,
 };
 
 Border.defaultProps = {
   rectComponent: <Rect />,
   role: "presentation",
-  shapeRendering: "auto"
+  shapeRendering: "auto",
 };
-
-export default Border;

package/src/victory-primitives/{circle.js → circle.tsx}

@@ -1,15 +1,16 @@
 import React from "react";
+import { VictoryPrimitiveShapeProps } from "./types";
 
-const Circle = (props) => {
+export const Circle = (props: VictoryPrimitiveShapeProps) => {
   // eslint-disable-next-line react/prop-types
   const { desc, ...rest } = props;
   return desc ? (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <circle vectorEffect="non-scaling-stroke" {...rest}>
       <desc>{desc}</desc>
     </circle>
   ) : (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <circle vectorEffect="non-scaling-stroke" {...rest} />
   );
 };
-
-export default Circle;

package/src/victory-primitives/clip-path.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
+
+export interface ClipPathProps extends VictoryCommonPrimitiveProps {
+  children?: React.ReactNode[] | React.ReactNode;
+  clipId?: number | string;
+}
+
+export const ClipPath = (props: ClipPathProps) => (
+  <defs>
+    {
+      // @ts-expect-error FIXME: "id cannot be a number"
+      <clipPath id={props.clipId}>{props.children}</clipPath>
+    }
+  </defs>
+);
+
+ClipPath.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  clipId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};

package/src/victory-primitives/index.ts

@@ -0,0 +1,14 @@
+export * from "./arc";
+export * from "./background";
+export * from "./border";
+export * from "./circle";
+export * from "./clip-path";
+export * from "./line";
+export * from "./line-segment";
+export * from "./path";
+export * from "./point";
+export * from "./rect";
+export * from "./text";
+export * from "./tspan";
+export * from "./types";
+export * from "./whisker";

package/src/victory-primitives/{line-segment.js → line-segment.tsx}

@@ -2,8 +2,20 @@ import React from "react";
 import PropTypes from "prop-types";
 import * as Helpers from "../victory-util/helpers";
 import { assign } from "lodash";
-import * as CommonProps from "../victory-util/common-props";
-import Line from "./line";
+import {
+  CommonProps,
+  VictoryCommonPrimitiveProps,
+} from "../victory-util/common-props";
+import { Line } from "./line";
+
+export interface LineSegmentProps extends VictoryCommonPrimitiveProps {
+  datum?: any;
+  lineComponent?: React.ReactElement;
+  x1?: number;
+  x2?: number;
+  y1?: number;
+  y2?: number;
+}
 
 const evaluateProps = (props) => {
   /**
@@ -19,17 +31,17 @@ const evaluateProps = (props) => {
   const id = Helpers.evaluateProp(props.id, props);
   const style = Helpers.evaluateStyle(
     assign({ stroke: "black" }, props.style),
-    props
+    props,
   );
   const tabIndex = Helpers.evaluateProp(props.tabIndex, props);
 
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
-const LineSegment = (props) => {
+export const LineSegment = (props: LineSegmentProps) => {
   props = evaluateProps(props);
 
-  return React.cloneElement(props.lineComponent, {
+  return React.cloneElement(props.lineComponent!, {
     ...props.events,
     "aria-label": props.ariaLabel,
     style: props.style,
@@ -43,7 +55,7 @@ const LineSegment = (props) => {
     y1: props.y1,
     y2: props.y2,
     transform: props.transform,
-    clipPath: props.clipPath
+    clipPath: props.clipPath,
   });
 };
 
@@ -54,13 +66,11 @@ LineSegment.propTypes = {
   x1: PropTypes.number,
   x2: PropTypes.number,
   y1: PropTypes.number,
-  y2: PropTypes.number
+  y2: PropTypes.number,
 };
 
 LineSegment.defaultProps = {
   lineComponent: <Line />,
   role: "presentation",
-  shapeRendering: "auto"
+  shapeRendering: "auto",
 };
-
-export default LineSegment;

package/src/victory-primitives/{line.js → line.tsx}

@@ -1,15 +1,16 @@
 import React from "react";
+import { VictoryPrimitiveShapeProps } from "./types";
 
-const Line = (props) => {
+export const Line = (props: VictoryPrimitiveShapeProps) => {
   // eslint-disable-next-line react/prop-types
   const { desc, ...rest } = props;
   return desc ? (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <line vectorEffect="non-scaling-stroke" {...rest}>
       <desc>{desc}</desc>
     </line>
   ) : (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <line vectorEffect="non-scaling-stroke" {...rest} />
   );
 };
-
-export default Line;

package/src/victory-primitives/{path.js → path.tsx}

@@ -1,15 +1,16 @@
 import React from "react";
+import { VictoryPrimitiveShapeProps } from "./types";
 
-const Path = (props) => {
+export const Path = (props: VictoryPrimitiveShapeProps) => {
   // eslint-disable-next-line react/prop-types
   const { desc, ...rest } = props;
   return desc ? (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <path {...rest}>
       <desc>{desc}</desc>
     </path>
   ) : (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <path {...rest} />
   );
 };
-
-export default Path;

package/src/victory-primitives/{point.js → point.tsx}

@@ -1,27 +1,34 @@
-import React from "react";
-import PropTypes from "prop-types";
 import { assign } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
 import * as Helpers from "../victory-util/helpers";
-import pathHelpers from "../victory-util/point-path-helpers";
-import * as CommonProps from "../victory-util/common-props";
-import Path from "./path";
+import * as pathHelpers from "../victory-util/point-path-helpers";
+import {
+  CommonProps,
+  VictoryCommonPrimitiveProps,
+} from "../victory-util/common-props";
+import * as UserProps from "../victory-util/user-props";
+import { Path } from "./path";
+import { ScatterSymbolType } from "./types";
+
+export interface PointProps extends VictoryCommonPrimitiveProps {
+  datum?: any;
+  getPath?: (x: number, y: number, size: number) => string;
+  pathComponent?: React.ReactElement;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  size?: number | Function;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  symbol?: ScatterSymbolType | Function;
+  x?: number;
+  y?: number;
+}
 
 const getPath = (props) => {
   const { x, y, size, symbol } = props;
   if (props.getPath) {
     return props.getPath(x, y, size);
   }
-  const pathFunctions = {
-    circle: pathHelpers.circle,
-    square: pathHelpers.square,
-    diamond: pathHelpers.diamond,
-    triangleDown: pathHelpers.triangleDown,
-    triangleUp: pathHelpers.triangleUp,
-    plus: pathHelpers.plus,
-    minus: pathHelpers.minus,
-    star: pathHelpers.star,
-    cross: pathHelpers.cross
-  };
+  const pathFunctions = pathHelpers;
   const symbolFunction =
     typeof pathFunctions[symbol] === "function"
       ? pathFunctions[symbol]
@@ -55,14 +62,15 @@ const evaluateProps = (props) => {
     size,
     style,
     symbol,
-    tabIndex
+    tabIndex,
   });
 };
 
-const Point = (props) => {
+export const Point = (props: PointProps) => {
   props = evaluateProps(props);
+  const userProps = UserProps.getSafeUserProps(props);
 
-  return React.cloneElement(props.pathComponent, {
+  return React.cloneElement(props.pathComponent!, {
     ...props.events,
     "aria-label": props.ariaLabel,
     d: getPath(props),
@@ -73,7 +81,8 @@ const Point = (props) => {
     shapeRendering: props.shapeRendering,
     className: props.className,
     transform: props.transform,
-    clipPath: props.clipPath
+    clipPath: props.clipPath,
+    ...userProps,
   });
 };
 
@@ -93,18 +102,16 @@ Point.propTypes = {
       "square",
       "star",
       "triangleDown",
-      "triangleUp"
+      "triangleUp",
     ]),
-    PropTypes.func
+    PropTypes.func,
   ]),
   x: PropTypes.number,
-  y: PropTypes.number
+  y: PropTypes.number,
 };
 
 Point.defaultProps = {
   pathComponent: <Path />,
   role: "presentation",
-  shapeRendering: "auto"
+  shapeRendering: "auto",
 };
-
-export default Point;

package/src/victory-primitives/{rect.js → rect.tsx}

@@ -1,14 +1,16 @@
 import React from "react";
+import { VictoryPrimitiveShapeProps } from "./types";
 
-const Rect = (props) => {
+export const Rect = (props: VictoryPrimitiveShapeProps) => {
   // eslint-disable-next-line react/prop-types
   const { desc, ...rest } = props;
   return desc ? (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <rect vectorEffect="non-scaling-stroke" {...rest}>
       <desc>{desc}</desc>
     </rect>
   ) : (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <rect vectorEffect="non-scaling-stroke" {...rest} />
   );
 };
-export default Rect;

package/src/victory-primitives/{text.js → text.tsx}

@@ -1,9 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
 
-const Text = (props) => {
+export interface TextProps extends VictoryCommonPrimitiveProps {
+  children?: React.ReactNode;
+  desc?: string;
+  title?: string;
+}
+
+export const Text = (props: TextProps) => {
   const { children, title, desc, ...rest } = props;
   return (
+    // @ts-expect-error FIXME: "id cannot be a number"
     <text {...rest}>
       {title && <title>{title}</title>}
       {desc && <desc>{desc}</desc>}
@@ -15,7 +23,5 @@ const Text = (props) => {
 Text.propTypes = {
   children: PropTypes.node,
   desc: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
 };
-
-export default Text;

package/src/victory-primitives/tspan.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
+
+export const TSpan = (props: VictoryCommonPrimitiveProps) => (
+  // @ts-expect-error FIXME: "id cannot be a number"
+  <tspan {...props} />
+);

package/src/victory-primitives/types.ts

@@ -0,0 +1,19 @@
+import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
+
+export type ScatterSymbolType =
+  | "circle"
+  | "cross"
+  | "diamond"
+  | "plus"
+  | "minus"
+  | "square"
+  | "star"
+  | "triangleDown"
+  | "triangleUp";
+
+export interface VictoryPrimitiveShapeProps
+  extends VictoryCommonPrimitiveProps {
+  desc?: string;
+  rx?: number;
+  ry?: number;
+}

package/src/victory-primitives/{whisker.js → whisker.tsx}

@@ -2,8 +2,25 @@ import React from "react";
 import { assign } from "lodash";
 import PropTypes from "prop-types";
 import * as Helpers from "../victory-util/helpers";
-import * as CommonProps from "../victory-util/common-props";
-import Line from "./line";
+import {
+  CommonProps,
+  VictoryCommonPrimitiveProps,
+} from "../victory-util/common-props";
+import { Line } from "./line";
+
+export type WhiskerAxes = {
+  x1?: number;
+  x2?: number;
+  y1?: number;
+  y2?: number;
+};
+
+export interface WhiskerProps extends VictoryCommonPrimitiveProps {
+  groupComponent?: React.ReactElement;
+  lineComponent?: React.ReactElement;
+  majorWhisker?: WhiskerAxes;
+  minorWhisker?: WhiskerAxes;
+}
 
 const evaluateProps = (props) => {
   /**
@@ -23,7 +40,7 @@ const evaluateProps = (props) => {
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
-const Whisker = (props) => {
+export const Whisker = (props: WhiskerProps) => {
   props = evaluateProps(props);
   const {
     ariaLabel,
@@ -39,7 +56,7 @@ const Whisker = (props) => {
     shapeRendering,
     style,
     desc,
-    tabIndex
+    tabIndex,
   } = props;
   const baseProps = {
     ...events,
@@ -50,26 +67,26 @@ const Whisker = (props) => {
     transform,
     clipPath,
     role,
-    shapeRendering
+    shapeRendering,
   };
 
-  return React.cloneElement(groupComponent, {}, [
+  return React.cloneElement(groupComponent!, {}, [
     React.cloneElement(
-      lineComponent,
+      lineComponent!,
       assign(
         { key: "major-whisker", "aria-label": ariaLabel },
         baseProps,
-        majorWhisker
-      )
+        majorWhisker,
+      ),
     ),
     React.cloneElement(
-      lineComponent,
+      lineComponent!,
       assign(
         { key: "minor-whisker", "aria-label": ariaLabel },
         baseProps,
-        minorWhisker
-      )
-    )
+        minorWhisker,
+      ),
+    ),
   ]);
 };
 
@@ -81,21 +98,19 @@ Whisker.propTypes = {
     x1: PropTypes.number,
     x2: PropTypes.number,
     y1: PropTypes.number,
-    y2: PropTypes.number
+    y2: PropTypes.number,
   }),
   minorWhisker: PropTypes.shape({
     x1: PropTypes.number,
     x2: PropTypes.number,
     y1: PropTypes.number,
-    y2: PropTypes.number
-  })
+    y2: PropTypes.number,
+  }),
 };
 
 Whisker.defaultProps = {
   groupComponent: <g />,
   lineComponent: <Line />,
   role: "presentation",
-  shapeRendering: "auto"
+  shapeRendering: "auto",
 };
-
-export default Whisker;

package/src/victory-state/defaults.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_HEIGHT = 300;
+export const DEFAULT_WIDTH = 450;

package/src/victory-state/helpers/get-axis-data.ts

@@ -0,0 +1,14 @@
+import { AxisType, Datum, DomainValue } from "../../types/prop-types";
+import { isKeyValueObject } from "../../victory-util/type-helpers";
+
+export function getAxisData(data: Datum[], axis: AxisType) {
+  return data.reduce((acc, datum) => {
+    if (isKeyValueObject(datum)) {
+      const value = datum[axis];
+      if (value && typeof value !== "string") {
+        acc.push(value);
+      }
+    }
+    return acc;
+  }, [] as DomainValue[]);
+}

package/src/victory-state/helpers/get-data.ts

@@ -0,0 +1,79 @@
+import { get, isNil, orderBy } from "lodash";
+import * as React from "react";
+import { Datum, DatumValue } from "../../types/prop-types";
+import { isKeyValueObject } from "../../victory-util/type-helpers";
+import { VictoryProviderProps } from "../types";
+
+type DataProps = Pick<
+  VictoryProviderProps,
+  "data" | "x" | "y" | "sortKey" | "sortOrder" | "samples"
+>;
+
+export interface FormattedDatum {
+  x: DatumValue;
+  y: DatumValue;
+  _x: number | Date;
+  _y: number | Date;
+  xName?: string;
+  yName?: string;
+  [key: string]: DatumValue;
+}
+
+function getValue(datum: Datum, key: string): DatumValue {
+  if (typeof datum === "object") {
+    return get(datum, key);
+  }
+  return datum;
+}
+
+function getNumericValue(value: DatumValue, fallback: number): number | Date {
+  if (typeof value === "number" || value instanceof Date) {
+    return value;
+  }
+  return fallback;
+}
+
+export function getData({
+  x: xAccessor = "x",
+  y: yAccessor = "y",
+  sortKey,
+  sortOrder = "ascending",
+  data = [],
+}: DataProps = {}): FormattedDatum[] {
+  const formattedData = data.reduce((nonNullData, datum, index) => {
+    const x = getValue(datum, xAccessor);
+    const y = getValue(datum, yAccessor);
+    if (isNil(x) || isNil(y)) {
+      return nonNullData;
+    }
+    const _x = getNumericValue(x, index + 1);
+    const _y = getNumericValue(y, index + 1);
+
+    // TODO: Get this value if it is different
+    const xName = typeof x === "string" ? x : undefined;
+    const yName = typeof y === "string" ? y : undefined;
+
+    const additionalProperties = isKeyValueObject(datum) ? datum : {};
+
+    return [
+      ...nonNullData,
+      {
+        x,
+        y,
+        _x,
+        _y,
+        // Only set these properties if they exist
+        ...(xName ? { xName } : {}),
+        ...(yName ? { yName } : {}),
+        ...additionalProperties,
+      },
+    ];
+  }, [] as FormattedDatum[]);
+
+  if (sortKey) {
+    const order = sortOrder === "descending" ? "desc" : "asc";
+    return orderBy(formattedData, sortKey, order);
+  }
+
+  return formattedData;
+}

package/src/victory-state/helpers/get-domain.ts

@@ -0,0 +1,62 @@
+import * as d3Array from "victory-vendor/d3-array";
+import { getAxisData } from "./get-axis-data";
+import {
+  getValueForAxis,
+  isDate,
+  isTuple,
+} from "../../victory-util/type-helpers";
+import { VictoryProviderProps } from "../types";
+import {
+  Tuple,
+  AxisType,
+  DomainTuple,
+  DomainValue,
+} from "../../types/prop-types";
+
+type DomainProps = Pick<
+  VictoryProviderProps,
+  "data" | "domain" | "maxDomain" | "minDomain" | "includeZero"
+>;
+
+// TODO: What should this default value be?
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 1;
+
+function getDomainFromMinMax(
+  min: number = DEFAULT_MIN,
+  max: number = DEFAULT_MAX,
+): Tuple<number> {
+  // TODO: Victoy currently has some really specific logic in getDomainFromMinMax
+  // that adds or subtracts a very small number from each domain to avoid the min
+  // and max being the same value. This has resulted in some weird behavior in the
+  // past, so we should revisit this.
+  return [min, max];
+}
+
+export function getDomain(
+  { data = [], includeZero, ...props }: DomainProps,
+  axis: AxisType,
+): DomainTuple {
+  const domainFromProps = getValueForAxis<DomainTuple>(props.domain, axis);
+  const axisData = getAxisData(data, axis);
+
+  if (includeZero && axis === "y") {
+    axisData.push(0);
+  }
+
+  if (isTuple(domainFromProps)) {
+    return domainFromProps;
+  }
+
+  const [min, max] = d3Array.extent(axisData) as DomainTuple | Tuple<undefined>;
+
+  const minDomain = getValueForAxis<DomainValue>(props.minDomain, axis) || min;
+  const maxDomain = getValueForAxis<DomainValue>(props.maxDomain, axis) || max;
+
+  if (isDate(minDomain) && isDate(maxDomain)) {
+    return [min, max] as Tuple<Date>;
+  }
+
+  // TODO: There might be an edge case here where we have mixed types
+  return getDomainFromMinMax(minDomain as number, maxDomain as number);
+}