fix(charts): adjust for Victory types changes (patternfly#10082)

Fixes patternfly#10078 Fixes patternfly#10064
tlabaj · Feb 29, 2024 · c83632f · c83632f
1 parent c9f4ecd
commit c83632f
Show file tree

Hide file tree

Showing 10 changed files with 243 additions and 265 deletions.
diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json
@@ -33,23 +33,23 @@
     "hoist-non-react-statics": "^3.3.0",
     "lodash": "^4.17.21",
     "tslib": "^2.5.0",
-    "victory-area": "^36.8.1",
-    "victory-axis": "^36.8.1",
-    "victory-bar": "^36.8.1",
-    "victory-box-plot": "^36.8.1",
-    "victory-chart": "^36.8.1",
-    "victory-core": "^36.8.1",
-    "victory-create-container": "^36.8.1",
-    "victory-cursor-container": "^36.8.1",
-    "victory-group": "^36.8.1",
-    "victory-legend": "^36.8.1",
-    "victory-line": "^36.8.1",
-    "victory-pie": "^36.8.1",
-    "victory-scatter": "^36.8.1",
-    "victory-stack": "^36.8.1",
-    "victory-tooltip": "^36.8.1",
-    "victory-voronoi-container": "^36.8.1",
-    "victory-zoom-container": "^36.8.1"
+    "victory-area": "^36.9.1",
+    "victory-axis": "^36.9.1",
+    "victory-bar": "^36.9.1",
+    "victory-box-plot": "^36.9.1",
+    "victory-chart": "^36.9.1",
+    "victory-core": "^36.9.1",
+    "victory-create-container": "^36.9.1",
+    "victory-cursor-container": "^36.9.1",
+    "victory-group": "^36.9.1",
+    "victory-legend": "^36.9.1",
+    "victory-line": "^36.9.1",
+    "victory-pie": "^36.9.1",
+    "victory-scatter": "^36.9.1",
+    "victory-stack": "^36.9.1",
+    "victory-tooltip": "^36.9.1",
+    "victory-voronoi-container": "^36.9.1",
+    "victory-zoom-container": "^36.9.1"
   },
   "peerDependencies": {
     "react": "^17 || ^18",

diff --git a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`ChartArea 1`] = `
           </clippath>
         </defs>
         <path
-          d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50L400,250L393.0000000000002,250L386.0000000000002,250L379.0000000000002,250L372.00000000000017,250L365.00000000000017,250L358.00000000000017,250L351.00000000000017,250L344.00000000000017,250L337.00000000000017,250L330.00000000000017,250L323.00000000000017,250L316.0000000000001,250L309.0000000000001,250L302.0000000000001,250L295.0000000000001,250L288.0000000000001,250L281.0000000000001,250L274.0000000000001,250L267.00000000000006,250L260.00000000000006,250L253.00000000000009,250L246.00000000000006,250L239.00000000000006,250L232.00000000000006,250L225.00000000000006,250L218.00000000000006,250L211.00000000000006,250L204.00000000000006,250L197.00000000000003,250L190.00000000000003,250L183.00000000000003,250L176.00000000000003,250L169,250L162,250L155,250L148,250L141,250L134,250L126.99999999999999,250L120,250L113,250L106,250L99,250L92,250L85,250L78,250L71,250L64,250L57,250L50,250Z"
+          d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L127,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176,178L183,174L190,170L197,166.00000000000003L204,162L211,158L218,154L225,150L232,146L239,142L246.00000000000003,138L252.99999999999997,134L260,130L267,126L274,122L281,117.99999999999999L288,113.99999999999999L295,109.99999999999999L302,106L309,102L316,98L323,94L330,89.99999999999999L337,85.99999999999999L344,82L351,78L358,74L365,70L372,65.99999999999999L379,61.999999999999986L386,58.00000000000001L393,54.00000000000001L400,50L400,250L393,250L386,250L379,250L372,250L365,250L358,250L351,250L344,250L337,250L330,250L323,250L316,250L309,250L302,250L295,250L288,250L281,250L274,250L267,250L260,250L252.99999999999997,250L246.00000000000003,250L239,250L232,250L225,250L218,250L211,250L204,250L197,250L190,250L183,250L176,250L169,250L162,250L155,250L148,250L141,250L134,250L127,250L120,250L113,250L106,250L99,250L92,250L85,250L78,250L71,250L64,250L57,250L50,250Z"
           role="presentation"
           shape-rendering="auto"
           style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);"
@@ -83,7 +83,7 @@ exports[`ChartArea 2`] = `
           </clippath>
         </defs>
         <path
-          d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50L400,250L393.0000000000002,250L386.0000000000002,250L379.0000000000002,250L372.00000000000017,250L365.00000000000017,250L358.00000000000017,250L351.00000000000017,250L344.00000000000017,250L337.00000000000017,250L330.00000000000017,250L323.00000000000017,250L316.0000000000001,250L309.0000000000001,250L302.0000000000001,250L295.0000000000001,250L288.0000000000001,250L281.0000000000001,250L274.0000000000001,250L267.00000000000006,250L260.00000000000006,250L253.00000000000009,250L246.00000000000006,250L239.00000000000006,250L232.00000000000006,250L225.00000000000006,250L218.00000000000006,250L211.00000000000006,250L204.00000000000006,250L197.00000000000003,250L190.00000000000003,250L183.00000000000003,250L176.00000000000003,250L169,250L162,250L155,250L148,250L141,250L134,250L126.99999999999999,250L120,250L113,250L106,250L99,250L92,250L85,250L78,250L71,250L64,250L57,250L50,250Z"
+          d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L127,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176,178L183,174L190,170L197,166.00000000000003L204,162L211,158L218,154L225,150L232,146L239,142L246.00000000000003,138L252.99999999999997,134L260,130L267,126L274,122L281,117.99999999999999L288,113.99999999999999L295,109.99999999999999L302,106L309,102L316,98L323,94L330,89.99999999999999L337,85.99999999999999L344,82L351,78L358,74L365,70L372,65.99999999999999L379,61.999999999999986L386,58.00000000000001L393,54.00000000000001L400,50L400,250L393,250L386,250L379,250L372,250L365,250L358,250L351,250L344,250L337,250L330,250L323,250L316,250L309,250L302,250L295,250L288,250L281,250L274,250L267,250L260,250L252.99999999999997,250L246.00000000000003,250L239,250L232,250L225,250L218,250L211,250L204,250L197,250L190,250L183,250L176,250L169,250L162,250L155,250L148,250L141,250L134,250L127,250L120,250L113,250L106,250L99,250L92,250L85,250L78,250L71,250L64,250L57,250L50,250Z"
           role="presentation"
           shape-rendering="auto"
           style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);"

diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Helpers, CommonProps, Path } from 'victory-core';
+import { Helpers, OrientationTypes, Path, VictoryCommonPrimitiveProps } from 'victory-core';
 import isPlainObject from 'lodash/isPlainObject';
 
 const getVerticalPath = (props: any) => {
@@ -92,7 +91,26 @@ const evaluateProps = (props: any) => {
   return Object.assign({}, props, { id, style });
 };
 
-const ChartCursorFlyout = (props: any) => {
+interface ChartCursorFlyoutProps extends VictoryCommonPrimitiveProps {
+  center?: {
+    x: number;
+    y: number;
+  };
+  cornerRadius?: number;
+  datum?: object;
+  dx?: number;
+  dy?: number;
+  height?: number;
+  orientation?: OrientationTypes;
+  pathComponent?: React.ReactElement;
+  pointerLength?: number;
+  pointerWidth?: number;
+  width?: number;
+  x?: number;
+  y?: number;
+}
+
+const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => {
   props = evaluateProps(props);
 
   return React.cloneElement(props.pathComponent, {
@@ -107,23 +125,6 @@ const ChartCursorFlyout = (props: any) => {
   });
 };
 
-ChartCursorFlyout.propTypes = {
-  ...CommonProps.primitiveProps,
-  center: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
-  cornerRadius: PropTypes.number,
-  datum: PropTypes.object,
-  dx: PropTypes.number,
-  dy: PropTypes.number,
-  height: PropTypes.number,
-  orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  pathComponent: PropTypes.element,
-  pointerLength: PropTypes.number,
-  pointerWidth: PropTypes.number,
-  width: PropTypes.number,
-  x: PropTypes.number,
-  y: PropTypes.number
-};
-
 ChartCursorFlyout.defaultProps = {
   pathComponent: <Path />,
   role: 'presentation',

diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx
@@ -32,7 +32,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps {
   /**
    * The angle prop specifies the angle to rotate the tooltip around its origin point.
    */
-  angle?: string | number;
+  angle?: number;
   /**
    * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object
    * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for
@@ -226,7 +226,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps {
    *
    * @propType number | string | Function | string[] | number[]
    */
-  text?: StringOrNumberOrCallback | string[] | number[];
+  text?: string[] | StringOrNumberOrCallback;
   /**
    * 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.

diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx
@@ -49,7 +49,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
   /**
    * The angle prop specifies the angle to rotate the tooltip around its origin point.
    */
-  angle?: string | number;
+  angle?: number;
   /**
    * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object
    * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for
@@ -275,7 +275,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
    *
    * @propType number | string | Function | string[] | number[]
    */
-  text?: StringOrNumberOrCallback | string[] | number[];
+  text?: string[] | StringOrNumberOrCallback;
   /**
    * 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.
@@ -295,11 +295,8 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
   themeColor?: string;
   /**
    * The title prop specifies a title to render with the legend.
-   * This prop should be given as a string, or an array of strings for multi-line titles.
-   *
-   * Example: title={(datum) => datum.x}
    */
-  title?: string | string[] | Function;
+  title?: string;
   /**
    * This prop refers to the width of the svg that ChartLegendTooltip is rendered within. This prop is passed from
    * parents of ChartLegendTooltip, and should not be set manually. In versions before ^33.0.0 this prop referred to the

diff --git a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`ChartLine 1`] = `
           </clippath>
         </defs>
         <path
-          d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50"
+          d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L127,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176,178L183,174L190,170L197,166.00000000000003L204,162L211,158L218,154L225,150L232,146L239,142L246.00000000000003,138L252.99999999999997,134L260,130L267,126L274,122L281,117.99999999999999L288,113.99999999999999L295,109.99999999999999L302,106L309,102L316,98L323,94L330,89.99999999999999L337,85.99999999999999L344,82L351,78L358,74L365,70L372,65.99999999999999L379,61.999999999999986L386,58.00000000000001L393,54.00000000000001L400,50"
           role="presentation"
           shape-rendering="auto"
           style="fill: var(--pf-v5-chart-line--data--Fill, transparent); stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); pointer-events: stroke; opacity: 1; stroke-width: 2;"
@@ -83,7 +83,7 @@ exports[`ChartLine 2`] = `
           </clippath>
         </defs>
         <path
-          d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50"
+          d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L127,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176,178L183,174L190,170L197,166.00000000000003L204,162L211,158L218,154L225,150L232,146L239,142L246.00000000000003,138L252.99999999999997,134L260,130L267,126L274,122L281,117.99999999999999L288,113.99999999999999L295,109.99999999999999L302,106L309,102L316,98L323,94L330,89.99999999999999L337,85.99999999999999L344,82L351,78L358,74L365,70L372,65.99999999999999L379,61.999999999999986L386,58.00000000000001L393,54.00000000000001L400,50"
           role="presentation"
           shape-rendering="auto"
           style="fill: var(--pf-v5-chart-line--data--Fill, transparent); stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); pointer-events: stroke; opacity: 1; stroke-width: 2;"