fix(charts): fix Victory 37.3.4 issues (#11355)

#11354

Author: dlabrecq

packages/react-charts/package.json

@@ -33,23 +33,23 @@
     "hoist-non-react-statics": "^3.3.2",
     "lodash": "^4.17.21",
     "tslib": "^2.7.0",
-    "victory-area": "^37.1.1",
-    "victory-axis": "^37.1.1",
-    "victory-bar": "^37.1.1",
-    "victory-box-plot": "^37.1.1",
-    "victory-chart": "^37.1.1",
-    "victory-core": "^37.1.1",
-    "victory-create-container": "^37.1.1",
-    "victory-cursor-container": "^37.1.1",
-    "victory-group": "^37.1.1",
-    "victory-legend": "^37.1.1",
-    "victory-line": "^37.1.1",
-    "victory-pie": "^37.1.1",
-    "victory-scatter": "^37.1.1",
-    "victory-stack": "^37.1.1",
-    "victory-tooltip": "^37.1.1",
-    "victory-voronoi-container": "^37.1.1",
-    "victory-zoom-container": "^37.1.1"
+    "victory-area": "^37.3.4",
+    "victory-axis": "^37.3.4",
+    "victory-bar": "^37.3.4",
+    "victory-box-plot": "^37.3.4",
+    "victory-chart": "^37.3.4",
+    "victory-core": "^37.3.4",
+    "victory-create-container": "^37.3.4",
+    "victory-cursor-container": "^37.3.4",
+    "victory-group": "^37.3.4",
+    "victory-legend": "^37.3.4",
+    "victory-line": "^37.3.4",
+    "victory-pie": "^37.3.4",
+    "victory-scatter": "^37.3.4",
+    "victory-stack": "^37.3.4",
+    "victory-tooltip": "^37.3.4",
+    "victory-voronoi-container": "^37.3.4",
+    "victory-zoom-container": "^37.3.4"
   },
   "peerDependencies": {
     "react": "^17 || ^18",

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

@@ -482,4 +482,4 @@ export const ChartBar: React.FunctionComponent<ChartBarProps> = ({
 ChartBar.displayName = 'ChartBar';
 
 // Note: VictoryBar.getDomain & VictoryBar.role must be hoisted
-hoistNonReactStatics(ChartBar, VictoryBar);
+hoistNonReactStatics(ChartBar, VictoryBar, { getBaseProps: true });

packages/react-charts/src/components/ChartUtils/chart-legend.ts

@@ -1,12 +1,13 @@
 import defaults from 'lodash/defaults';
-import { Helpers, PaddingProps, TextSize } from 'victory-core';
+import { Helpers, TextSize } from 'victory-core';
 import { VictoryLegend } from 'victory-legend';
 import { ChartLegendProps } from '../ChartLegend/ChartLegend';
 import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { getLabelTextSize } from '../ChartUtils/chart-label';
 import { getPieOrigin } from './chart-origin';
 import * as React from 'react';
+import { ElementPadding } from 'victory-core/src/victory-util/helpers';
 
 interface ChartLegendInterface {
   allowWrap?: boolean; // Allow legend items to wrap to the next line
@@ -17,7 +18,7 @@ interface ChartLegendInterface {
   height: number; // Overall height of SVG
   legendComponent: React.ReactElement<any>; // The base legend component to render
   orientation?: 'horizontal' | 'vertical'; // Orientation of legend
-  padding: PaddingProps; // Chart padding
+  padding: ElementPadding; // Chart padding
   patternScale?: string[]; // Legend symbol patterns
   position: 'bottom' | 'bottom-left' | 'right'; // The legend position
   theme: ChartThemeDefinition; // The theme that will be applied to the chart
@@ -41,7 +42,7 @@ interface ChartLegendPositionInterface {
   legendOrientation: 'horizontal' | 'vertical'; // Orientation of legend
   legendPosition: 'bottom' | 'bottom-left' | 'right'; // Position of legend
   legendProps: any; // The legend props used to determine width
-  padding?: PaddingProps; // Chart padding
+  padding?: ElementPadding; // Chart padding
   theme: ChartThemeDefinition; // The theme that will be applied to the chart
   width?: number; // Overall width of SVG
 }
@@ -187,7 +188,7 @@ const doesLegendFit = ({
   theme,
   width
 }: ChartLegendPositionInterface) => {
-  const { left, right } = Helpers.getPadding({ padding });
+  const { left, right } = Helpers.getPadding(padding);
   const chartSize = {
     height, // Fixed size
     width: width - left - right
@@ -322,7 +323,7 @@ const getBulletLegendY = ({
   theme,
   width
 }: ChartLegendPositionInterface) => {
-  const { left, right } = Helpers.getPadding({ padding });
+  const { left, right } = Helpers.getPadding(padding);
   const chartSize = {
     height, // Fixed size
     width: width - left - right
@@ -363,7 +364,7 @@ const getChartLegendX = ({
   theme,
   width
 }: ChartLegendPositionInterface) => {
-  const { top, bottom, left, right } = Helpers.getPadding({ padding });
+  const { top, bottom, left, right } = Helpers.getPadding(padding);
   const chartSize = {
     height: Math.abs(height - (bottom + top)),
     width: Math.abs(width - (left + right))
@@ -402,7 +403,7 @@ const getChartLegendY = ({
   theme,
   width
 }: ChartLegendPositionInterface) => {
-  const { top, bottom, left, right } = Helpers.getPadding({ padding });
+  const { top, bottom, left, right } = Helpers.getPadding(padding);
   const chartSize = {
     height: Math.abs(height - (bottom + top)),
     width: Math.abs(width - (left + right))

packages/react-charts/src/components/ChartUtils/chart-origin.ts

@@ -12,7 +12,7 @@ interface ChartPieOriginInterface {
  * @private
  */
 export const getPieOrigin = ({ height, padding, width }: ChartPieOriginInterface) => {
-  const { top, bottom, left, right } = Helpers.getPadding({ padding });
+  const { top, bottom, left, right } = Helpers.getPadding(padding);
   const radius = Helpers.getRadius({ height, width, padding });
   const offsetX = (width - radius * 2 - left - right) / 2;
   const offsetY = (height - radius * 2 - top - bottom) / 2;

packages/react-charts/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist/esm",
-    "tsBuildInfoFile": "dist/esm.tsbuildinfo"
+    "tsBuildInfoFile": "dist/esm.tsbuildinfo",
+    "noImplicitAny": false,
   },
   "include": [
     "./src/*",