victory-core 36.4.1 → 36.5.0

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,32 @@
-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 pathHelpers from "../victory-util/point-path-helpers";
 import * as CommonProps from "../victory-util/common-props";
-import Path from "./path";
+import * as UserProps from "../victory-util/user-props";
+import { Path } from "./path";
+import { VictoryCommonPrimitiveProps } from "../victory-util/types";
+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]
@@ -59,10 +64,11 @@ const evaluateProps = (props) => {
   });
 };
 
-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 +79,8 @@ const Point = (props) => {
     shapeRendering: props.shapeRendering,
     className: props.className,
     transform: props.transform,
-    clipPath: props.clipPath
+    clipPath: props.clipPath,
+    ...userProps
   });
 };
 
@@ -106,5 +113,3 @@ Point.defaultProps = {
   role: "presentation",
   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/types";
 
-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>}
@@ -17,5 +25,3 @@ Text.propTypes = {
   desc: 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/types";
+
+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/types";
+
+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}

@@ -3,7 +3,22 @@ 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 { Line } from "./line";
+import { VictoryCommonPrimitiveProps } from "../victory-util/types";
+
+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 +38,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,
@@ -53,9 +68,9 @@ const Whisker = (props) => {
     shapeRendering
   };
 
-  return React.cloneElement(groupComponent, {}, [
+  return React.cloneElement(groupComponent!, {}, [
     React.cloneElement(
-      lineComponent,
+      lineComponent!,
       assign(
         { key: "major-whisker", "aria-label": ariaLabel },
         baseProps,
@@ -63,7 +78,7 @@ const Whisker = (props) => {
       )
     ),
     React.cloneElement(
-      lineComponent,
+      lineComponent!,
       assign(
         { key: "minor-whisker", "aria-label": ariaLabel },
         baseProps,
@@ -97,5 +112,3 @@ Whisker.defaultProps = {
   role: "presentation",
   shapeRendering: "auto"
 };
-
-export default Whisker;

package/src/victory-theme/{grayscale.js → grayscale.tsx}

@@ -1,4 +1,5 @@
 import { assign } from "lodash";
+import { VictoryThemeDefinition } from "./victory-theme-definition";
 
 // *
 // * Colors
@@ -49,7 +50,7 @@ const centeredLabelStyles = assign({ textAnchor: "middle" }, baseLabelStyles);
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
-export default {
+export const grayscale: VictoryThemeDefinition = {
   area: assign(
     {
       style: {

package/src/victory-theme/{material.js → material.tsx}

@@ -1,4 +1,5 @@
 import { assign } from "lodash";
+import { VictoryThemeDefinition } from "./victory-theme-definition";
 
 // *
 // * Colors
@@ -57,7 +58,7 @@ const strokeDasharray = "10, 5";
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
-export default {
+export const material: VictoryThemeDefinition = {
   area: assign(
     {
       style: {

package/src/victory-theme/victory-theme-definition.ts

@@ -0,0 +1,261 @@
+import * as React from "react";
+import { VictoryCommonThemeProps, VictoryDatableProps } from "../index";
+import { CallbackArgs, StringOrNumberOrCallback } from "../types";
+
+export type BlockProps = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+export type PaddingProps = number | BlockProps;
+export type OrientationTypes = "top" | "bottom" | "left" | "right";
+export type VictoryNumberCallback = (args: CallbackArgs) => number;
+export type VictoryPaddingCallback = (
+  args: CallbackArgs
+) => number | BlockProps;
+export type VictoryOrientationCallback = (
+  args: CallbackArgs
+) => OrientationTypes;
+export type NumberOrCallback = number | VictoryNumberCallback;
+export type PaddingOrCallback = number | BlockProps | VictoryPaddingCallback;
+export type OrientationOrCallback =
+  | OrientationTypes
+  | VictoryOrientationCallback;
+export type VictoryStyleObject = {
+  [K in keyof React.CSSProperties]: StringOrNumberOrCallback;
+};
+export type LabelProps = React.CSSProperties & {
+  angle?: number;
+  verticalAnchor?: VerticalAnchorType;
+};
+export type VictoryLabelStyleObject = {
+  [K in keyof LabelProps]: StringOrNumberOrCallback;
+};
+
+/**
+ * Style interface used in components/themeing
+ */
+export interface VictoryStyleInterface {
+  parent?: VictoryStyleObject;
+  data?: VictoryStyleObject;
+  labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+  border?: VictoryStyleObject;
+}
+
+export type TickProps = React.CSSProperties & { size?: number };
+export type VictoryTickStyleObject = {
+  [K in keyof TickProps]: StringOrNumberOrCallback;
+};
+
+export interface VictoryAxisCommonProps {
+  axisComponent?: React.ReactElement;
+  axisLabelComponent?: React.ReactElement;
+  axisValue?: number | string | object | Date;
+  dependentAxis?: boolean;
+  disableInlineStyles?: boolean;
+  gridComponent?: React.ReactElement;
+  invertAxis?: boolean;
+  style?: {
+    parent?: VictoryStyleObject;
+    axis?: VictoryStyleObject;
+    axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    grid?: VictoryStyleObject;
+    ticks?: VictoryTickStyleObject;
+    tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+  };
+  tickComponent?: React.ReactElement;
+  tickCount?: number;
+  tickLabelComponent?: React.ReactElement;
+  tickFormat?:
+    | any[]
+    | { (tick: any, index: number, ticks: any[]): string | number };
+  tickValues?: any[];
+}
+
+export type VerticalAnchorType = "start" | "middle" | "end";
+// #region Victory Theme
+// Note: Many SVG attributes are missed in CSSProperties interface
+export interface VictoryThemeDefinition {
+  area?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  axis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    offsetX?: number;
+    offsetY?: number;
+  } & VictoryCommonThemeProps;
+  bar?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  boxplot?: {
+    style?: {
+      max?: VictoryStyleObject;
+      maxLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      median?: VictoryStyleObject;
+      medianLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      min?: VictoryStyleObject;
+      minLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      q1?: VictoryStyleObject;
+      q1Labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      q3?: VictoryStyleObject;
+      q3Labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    boxWidth?: number;
+  } & VictoryCommonThemeProps;
+  candlestick?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    candleColors?: {
+      positive?: string;
+      negative?: string;
+    };
+  } & VictoryCommonThemeProps;
+  chart?: VictoryCommonThemeProps;
+  dependentAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    offsetX?: number;
+    offsetY?: number;
+    orientation?: OrientationTypes;
+  } & VictoryCommonThemeProps;
+  errorbar?: {
+    borderWidth?: number;
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  group?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  histogram?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  independentAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    offsetX?: number;
+    offsetY?: number;
+    orientation?: OrientationTypes;
+  } & VictoryCommonThemeProps;
+  legend?: {
+    gutter?: number | BlockProps;
+    rowGutter?: number | BlockProps;
+    orientation?: string;
+    titleOrientation?: string;
+    style?: {
+      data?: VictoryStyleObject & {
+        type?: string;
+      };
+      border?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      title?: VictoryLabelStyleObject;
+    };
+    itemsPerRow?: number;
+    x?: number;
+    y?: number;
+    centerTitle?: boolean;
+    borderPadding?: number | BlockProps;
+  } & VictoryCommonThemeProps;
+  line?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  pie?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  polarAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  polarDependentAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  polarIndependentAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  scatter?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  stack?: VictoryCommonThemeProps;
+  tooltip?: {
+    style?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    flyoutStyle?: VictoryStyleObject;
+    cornerRadius?: NumberOrCallback;
+    pointerLength?: NumberOrCallback;
+    flyoutPadding?: PaddingOrCallback;
+    flyoutWidth?: NumberOrCallback;
+    flyoutHeight?: NumberOrCallback;
+    orientation?: OrientationOrCallback;
+    pointerOrientation?: OrientationOrCallback;
+  };
+  voronoi?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      flyout?: VictoryStyleObject;
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+}

package/src/victory-theme/victory-theme.tsx

@@ -0,0 +1,5 @@
+import { grayscale } from "./grayscale";
+import { material } from "./material";
+export * from "./victory-theme-definition";
+
+export const VictoryTheme = { grayscale, material };