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

Author: dlabrecq

packages/react-charts/package.json

@@ -45,23 +45,23 @@
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18",
-    "victory-area": "^37.3.3",
-    "victory-axis": "^37.3.2",
-    "victory-bar": "^37.3.2",
-    "victory-box-plot": "^37.3.2",
+    "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.3",
-    "victory-core": "^37.3.2",
+    "victory-core": "^37.3.4",
     "victory-create-container": "^37.3.4",
-    "victory-cursor-container": "^37.3.2",
-    "victory-group": "^37.3.2",
-    "victory-legend": "^37.3.2",
-    "victory-line": "^37.3.2",
-    "victory-pie": "^37.3.2",
-    "victory-scatter": "^37.3.2",
-    "victory-stack": "^37.3.2",
-    "victory-tooltip": "^37.3.2",
-    "victory-voronoi-container": "^37.3.2",
-    "victory-zoom-container": "^37.3.2"
+    "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"
   },
   "peerDependenciesMeta": {
     "victory-area": {

packages/react-charts/src/victory/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/victory/components/ChartUtils/chart-legend.ts

@@ -1,5 +1,6 @@
 import defaults from 'lodash/defaults';
-import { Helpers, PaddingProps, TextSize } from 'victory-core';
+import { Helpers, TextSize } from 'victory-core';
+import { ElementPadding } from 'victory-core/src/victory-util/helpers';
 import { VictoryLegend } from 'victory-legend';
 import { ChartLegendProps } from '../ChartLegend/ChartLegend';
 import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
@@ -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/victory/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/*",

packages/react-docs/package.json

@@ -33,7 +33,7 @@
     "@patternfly/react-table": "workspace:^",
     "@patternfly/react-templates": "workspace:^",
     "@patternfly/react-tokens": "workspace:^",
-    "victory": "^37.3.2"
+    "victory": "^37.3.4"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "^6.0.15",