Update react-charts types

packages/react-charts/package.json

@@ -36,7 +36,20 @@
     "lodash": "^4.17.15",
     "tslib": "^1.11.1",
     "victory": "^34.1.3",
-    "victory-core": "^34.1.3"
+    "victory-area": "^34.1.3",
+    "victory-axis": "^34.1.3",
+    "victory-bar": "^34.1.3",
+    "victory-chart": "^34.1.3",
+    "victory-core": "^34.1.3",
+    "victory-pie": "^34.1.3",
+    "victory-group": "^34.1.3",
+    "victory-legend": "^34.1.3",
+    "victory-line": "^34.1.3",
+    "victory-scatter": "^34.1.3",
+    "victory-stack": "^34.1.3",
+    "victory-tooltip": "^34.1.3",
+    "victory-voronoi-container": "^34.1.3",
+    "victory-zoom-container": "^34.1.3"
   },
   "peerDependencies": {
     "react": "^16.4.0"
@@ -46,7 +59,6 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.138",
-    "@types/victory": "^33.1.4",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",

packages/react-charts/src/components/Chart/Chart.tsx

@@ -10,11 +10,10 @@ import {
   PaddingProps,
   ScalePropType,
   StringOrNumberOrCallback,
-  VictoryChart,
-  VictoryChartProps,
-  VictoryStyleInterface,
-  VictoryZoomContainer
-} from 'victory';
+  VictoryStyleInterface
+} from 'victory-core';
+import { VictoryChart, VictoryChartProps } from 'victory-chart';
+import { VictoryZoomContainer } from 'victory-zoom-container';
 import { ChartContainer } from '../ChartContainer';
 import { ChartLegend, ChartLegendOrientation, ChartLegendPosition } from '../ChartLegend';
 import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme';
@@ -330,7 +329,7 @@ export interface ChartProps extends VictoryChartProps {
    * for data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified
    * via props as they determine relative layout for components in Chart.
    */
-  style?: VictoryStyleInterface;
+  style?: Pick<VictoryStyleInterface, 'parent'>;
   /**
    * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or
    * props defined in theme may be overwritten by props specified on the component instance.
@@ -446,7 +445,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     });
   };
 
-  // Note: containerComponent is required for theme, but @types/victory is missing a prop type
+  // Note: containerComponent is required for theme
   const VictoryChartWithContainerComponent = VictoryChart as any;
   return (
     <VictoryChartWithContainerComponent

packages/react-charts/src/components/ChartArea/ChartArea.tsx

@@ -12,10 +12,9 @@ import {
   PaddingProps,
   ScalePropType,
   StringOrNumberOrCallback,
-  VictoryStyleInterface,
-  VictoryArea,
-  VictoryAreaProps
-} from 'victory';
+  VictoryStyleInterface
+} from 'victory-core';
+import { VictoryArea, VictoryAreaProps } from 'victory-area';
 import { ChartContainer } from '../ChartContainer';
 import { ChartThemeDefinition } from '../ChartTheme';
 import { getTheme } from '../ChartUtils';
@@ -145,7 +144,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    *   }
    * ]}
    */
-  events?: EventPropTypeInterface<'data' | 'labels' | 'parent', 'all'>[];
+  events?: EventPropTypeInterface<'data' | 'labels' | 'parent', string | number>[];
   /**
    * ChartArea uses the standard externalEventMutations prop.
    */
@@ -403,12 +402,8 @@ export const ChartArea: React.FunctionComponent<ChartAreaProps> = ({
     ...containerComponent.props
   });
 
-  // Note: containerComponent is required for theme, but @types/victory is missing a prop type
-  return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    <VictoryArea containerComponent={container} theme={theme} {...rest} />
-  );
+  // Note: containerComponent is required for theme
+  return <VictoryArea containerComponent={container} theme={theme} {...rest} />;
 };
 
 // Note: VictoryArea.role must be hoisted

packages/react-charts/src/components/ChartAxis/ChartAxis.tsx

@@ -7,10 +7,9 @@ import {
   DomainPropType,
   EventPropTypeInterface,
   PaddingProps,
-  ScalePropType,
-  VictoryAxis,
-  VictoryAxisProps
-} from 'victory';
+  ScalePropType
+} from 'victory-core';
+import { VictoryAxis, VictoryAxisProps } from 'victory-axis';
 import { ChartContainer } from '../ChartContainer';
 import { ChartThemeDefinition } from '../ChartTheme';
 import { getAxisTheme, getTheme } from '../ChartUtils';
@@ -421,10 +420,9 @@ export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
     ...containerComponent.props
   });
 
-  // Note: containerComponent is required for theme, but @types/victory is missing a prop type
-  const VictoryAxisWithContainerComponent = VictoryAxis as any;
+  // Note: containerComponent is required for theme
   return (
-    <VictoryAxisWithContainerComponent
+    <VictoryAxis
       containerComponent={container}
       theme={showGrid ? getAxisTheme(themeColor, themeVariant) : theme}
       {...rest}

packages/react-charts/src/components/ChartBar/ChartBar.tsx

@@ -12,10 +12,9 @@ import {
   PaddingProps,
   ScalePropType,
   StringOrNumberOrCallback,
-  VictoryStyleInterface,
-  VictoryBar,
-  VictoryBarProps
-} from 'victory';
+  VictoryStyleInterface
+} from 'victory-core';
+import { VictoryBar, VictoryBarProps } from 'victory-bar';
 import { ChartContainer } from '../ChartContainer';
 import { ChartThemeDefinition } from '../ChartTheme';
 import { getTheme } from '../ChartUtils';
@@ -430,12 +429,8 @@ export const ChartBar: React.FunctionComponent<ChartBarProps> = ({
     ...containerComponent.props
   });
 
-  // Note: containerComponent is required for theme, but @types/victory is missing a prop type
-  return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    <VictoryBar containerComponent={container} theme={theme} {...rest} />
-  );
+  // Note: containerComponent is required for theme
+  return <VictoryBar containerComponent={container} theme={theme} {...rest} />;
 };
 
 // Note: VictoryBar.getDomain & VictoryBar.role must be hoisted

packages/react-charts/src/components/ChartBullet/ChartBullet.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { DataGetterPropType, DomainPropType, PaddingProps, VictoryChart } from 'victory';
+import { DataGetterPropType, DomainPropType, PaddingProps } from 'victory-core';
+import { VictoryChart } from 'victory-chart';
 import {
   getComparativeMeasureErrorWidth,
   getComparativeMeasureWidth,

packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps, VictoryBar } from 'victory';
+import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps } from 'victory-core';
+import { VictoryBar } from 'victory-bar';
 import { ChartContainer } from '../ChartContainer';
 import { ChartThemeDefinition } from '../ChartTheme';
 import { getBulletComparativeErrorMeasureTheme } from '../ChartUtils';

packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps, VictoryBar } from 'victory';
+import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps } from 'victory-core';
+import { VictoryBar } from 'victory-bar';
 import { getComparativeMeasureData } from './utils';
 import { ChartBar } from '../ChartBar';
 import { ChartContainer } from '../ChartContainer';

packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps, VictoryBar } from 'victory';
+import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps } from 'victory-core';
+import { VictoryBar } from 'victory-bar';
 import { ChartContainer } from '../ChartContainer';
 import { ChartThemeDefinition } from '../ChartTheme';
 import { getBulletComparativeWarningMeasureTheme } from '../ChartUtils';

packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { PaddingProps, StringOrNumberOrCallback } from 'victory';
-import { Line } from 'victory-core';
+import { PaddingProps, Line, StringOrNumberOrCallback } from 'victory-core';
 import { ChartContainer } from '../ChartContainer';
 import { ChartLabel } from '../ChartLabel';
 import { ChartBulletStyles, ChartThemeDefinition } from '../ChartTheme';

packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { DataGetterPropType, DomainPropType, PaddingProps, VictoryScatter } from 'victory';
+import { DataGetterPropType, DomainPropType, PaddingProps } from 'victory-core';
+import { VictoryScatter } from 'victory-scatter';
 import { getPrimaryDotMeasureData } from './utils';
 import { ChartContainer } from '../ChartContainer';
 import { ChartScatter } from '../ChartScatter';

packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps, VictoryBar } from 'victory';
+import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps } from 'victory-core';
+import { VictoryBar } from 'victory-bar';
 import { getPrimarySegmentedMeasureData } from './utils';
 import { ChartBar } from '../ChartBar';
 import { ChartContainer } from '../ChartContainer';

packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps, VictoryBar } from 'victory';
+import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps } from 'victory-core';
+import { VictoryBar } from 'victory-bar';
 import { getQualitativeRangeData } from './utils';
 import { ChartBar } from '../ChartBar';
 import { ChartContainer } from '../ChartContainer';

packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PaddingProps, StringOrNumberOrCallback } from 'victory';
+import { PaddingProps, StringOrNumberOrCallback } from 'victory-core';
 import { ChartContainer } from '../ChartContainer';
 import { ChartLabel } from '../ChartLabel';
 import { ChartLegendPosition } from '../ChartLegend';

packages/react-charts/src/components/ChartBullet/utils/chart-bullet-data.ts

@@ -1,5 +1,4 @@
-import { DataGetterPropType } from 'victory';
-import { Data } from 'victory-core';
+import { Data, DataGetterPropType } from 'victory-core';
 import { ChartThemeDefinition } from '../../ChartTheme';
 import {
   getBulletComparativeErrorMeasureTheme,

packages/react-charts/src/components/ChartContainer/ChartContainer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { VictoryContainer, VictoryContainerProps } from 'victory';
+import { VictoryContainer, VictoryContainerProps } from 'victory-core';
 import { ChartThemeDefinition } from '../ChartTheme';
 import { getClassName, getTheme } from '../ChartUtils';
 
@@ -119,7 +119,7 @@ export const ChartContainer: React.FunctionComponent<ChartContainerProps> = ({
 }: ChartContainerProps) => {
   const chartClassName = getClassName({ className });
 
-  // Note: theme is valid, but @types/victory is missing a prop type
+  // Note: className is valid, but Victory is missing a type
   // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore
   return <VictoryContainer className={chartClassName} theme={theme} {...rest} />;

packages/react-charts/src/components/ChartDonut/ChartDonut.tsx

@@ -6,12 +6,12 @@ import {
   ColorScalePropType,
   DataGetterPropType,
   EventPropTypeInterface,
+  Helpers,
   PaddingProps,
   StringOrNumberOrCallback,
-  VictoryPie,
   VictoryStyleInterface
-} from 'victory';
-import { Helpers } from 'victory-core';
+} from 'victory-core';
+import { VictoryPie, VictorySliceProps } from 'victory-pie';
 import { getDonutTheme } from '../ChartUtils/chart-theme';
 import { ChartContainer } from '../ChartContainer';
 import { ChartLabel } from '../ChartLabel';
@@ -224,7 +224,7 @@ export interface ChartDonutProps extends ChartPieProps {
    * When creating a donut chart, this prop determines the number of pixels between
    * the center of the chart and the inner edge.
    */
-  innerRadius?: number;
+  innerRadius?: number | ((props: VictorySliceProps) => number);
   /**
    * The labelComponent prop takes in an entire label component which will be used
    * to create a label for the area. The new element created from the passed labelComponent
@@ -241,12 +241,12 @@ export interface ChartDonutProps extends ChartPieProps {
    * The labelPosition prop specifies the angular position of each label relative to its corresponding slice.
    * When this prop is not given, the label will be positioned at the centroid of each slice.
    */
-  labelPosition?: 'startAngle' | 'endAngle' | 'centroid';
+  labelPosition?: 'startAngle' | 'centroid' | 'endAngle' | ((props: VictorySliceProps) => string);
   /**
    * The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.
    * If this prop is not set, the label radius will default to the radius of the pie + label padding.
    */
-  labelRadius?: number;
+  labelRadius?: number | ((props: VictorySliceProps) => number);
   /**
    * The labels prop defines labels that will appear above each bar in your chart.
    * This prop should be given as an array of values or as a function of data.
@@ -327,7 +327,7 @@ export interface ChartDonutProps extends ChartPieProps {
    * Specifies the radius of the chart. If this property is not provided it is computed
    * from width, height, and padding props
    */
-  radius?: number;
+  radius?: number | ((props: VictorySliceProps) => number);
   /**
    * The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
    */

packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx

@@ -3,14 +3,15 @@ import {
   AnimatePropTypeInterface,
   CategoryPropType,
   ColorScalePropType,
+  Data,
   DataGetterPropType,
   EventPropTypeInterface,
+  Helpers,
   PaddingProps,
   StringOrNumberOrCallback,
-  VictoryPie,
   VictoryStyleInterface
-} from 'victory';
-import { Data, Helpers } from 'victory-core';
+} from 'victory-core';
+import { VictoryPie, VictorySliceProps } from 'victory-pie';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { ChartContainer } from '../ChartContainer';
 import { ChartDonut, ChartDonutProps } from '../ChartDonut';
@@ -235,7 +236,7 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
    * When creating a donut chart, this prop determines the number of pixels between
    * the center of the chart and the inner edge.
    */
-  innerRadius?: number;
+  innerRadius?: number | ((props: VictorySliceProps) => number);
   /**
    * Invert the threshold color scale used to represent warnings, errors, etc.
    */
@@ -244,7 +245,7 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
    * The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.
    * If this prop is not set, the label radius will default to the radius of the pie + label padding.
    */
-  labelRadius?: number;
+  labelRadius?: number | ((props: VictorySliceProps) => number);
   /**
    * The labels prop defines labels that will appear above each bar in your chart.
    * This prop should be given as an array of values or as a function of data.
@@ -280,7 +281,7 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
    * Specifies the radius of the chart. If this property is not provided it is computed
    * from width, height, and padding props
    */
-  radius?: number;
+  radius?: number | ((props: VictorySliceProps) => number);
   /**
    * The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
    */