Skip to content

Commit c83632f

Browse files
dlabrecqtlabaj
authored andcommitted
fix(charts): adjust for Victory types changes (patternfly#10082)
Fixes patternfly#10078 Fixes patternfly#10064
1 parent c9f4ecd commit c83632f

File tree

10 files changed

+243
-265
lines changed

10 files changed

+243
-265
lines changed

packages/react-charts/package.json

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,23 @@
3333
"hoist-non-react-statics": "^3.3.0",
3434
"lodash": "^4.17.21",
3535
"tslib": "^2.5.0",
36-
"victory-area": "^36.8.1",
37-
"victory-axis": "^36.8.1",
38-
"victory-bar": "^36.8.1",
39-
"victory-box-plot": "^36.8.1",
40-
"victory-chart": "^36.8.1",
41-
"victory-core": "^36.8.1",
42-
"victory-create-container": "^36.8.1",
43-
"victory-cursor-container": "^36.8.1",
44-
"victory-group": "^36.8.1",
45-
"victory-legend": "^36.8.1",
46-
"victory-line": "^36.8.1",
47-
"victory-pie": "^36.8.1",
48-
"victory-scatter": "^36.8.1",
49-
"victory-stack": "^36.8.1",
50-
"victory-tooltip": "^36.8.1",
51-
"victory-voronoi-container": "^36.8.1",
52-
"victory-zoom-container": "^36.8.1"
36+
"victory-area": "^36.9.1",
37+
"victory-axis": "^36.9.1",
38+
"victory-bar": "^36.9.1",
39+
"victory-box-plot": "^36.9.1",
40+
"victory-chart": "^36.9.1",
41+
"victory-core": "^36.9.1",
42+
"victory-create-container": "^36.9.1",
43+
"victory-cursor-container": "^36.9.1",
44+
"victory-group": "^36.9.1",
45+
"victory-legend": "^36.9.1",
46+
"victory-line": "^36.9.1",
47+
"victory-pie": "^36.9.1",
48+
"victory-scatter": "^36.9.1",
49+
"victory-stack": "^36.9.1",
50+
"victory-tooltip": "^36.9.1",
51+
"victory-voronoi-container": "^36.9.1",
52+
"victory-zoom-container": "^36.9.1"
5353
},
5454
"peerDependencies": {
5555
"react": "^17 || ^18",

packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ exports[`ChartArea 1`] = `
3131
</clippath>
3232
</defs>
3333
<path
34-
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"
34+
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"
3535
role="presentation"
3636
shape-rendering="auto"
3737
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`] = `
8383
</clippath>
8484
</defs>
8585
<path
86-
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"
86+
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"
8787
role="presentation"
8888
shape-rendering="auto"
8989
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);"

packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
2-
import PropTypes from 'prop-types';
3-
import { Helpers, CommonProps, Path } from 'victory-core';
2+
import { Helpers, OrientationTypes, Path, VictoryCommonPrimitiveProps } from 'victory-core';
43
import isPlainObject from 'lodash/isPlainObject';
54

65
const getVerticalPath = (props: any) => {
@@ -92,7 +91,26 @@ const evaluateProps = (props: any) => {
9291
return Object.assign({}, props, { id, style });
9392
};
9493

95-
const ChartCursorFlyout = (props: any) => {
94+
interface ChartCursorFlyoutProps extends VictoryCommonPrimitiveProps {
95+
center?: {
96+
x: number;
97+
y: number;
98+
};
99+
cornerRadius?: number;
100+
datum?: object;
101+
dx?: number;
102+
dy?: number;
103+
height?: number;
104+
orientation?: OrientationTypes;
105+
pathComponent?: React.ReactElement;
106+
pointerLength?: number;
107+
pointerWidth?: number;
108+
width?: number;
109+
x?: number;
110+
y?: number;
111+
}
112+
113+
const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => {
96114
props = evaluateProps(props);
97115

98116
return React.cloneElement(props.pathComponent, {
@@ -107,23 +125,6 @@ const ChartCursorFlyout = (props: any) => {
107125
});
108126
};
109127

110-
ChartCursorFlyout.propTypes = {
111-
...CommonProps.primitiveProps,
112-
center: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
113-
cornerRadius: PropTypes.number,
114-
datum: PropTypes.object,
115-
dx: PropTypes.number,
116-
dy: PropTypes.number,
117-
height: PropTypes.number,
118-
orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
119-
pathComponent: PropTypes.element,
120-
pointerLength: PropTypes.number,
121-
pointerWidth: PropTypes.number,
122-
width: PropTypes.number,
123-
x: PropTypes.number,
124-
y: PropTypes.number
125-
};
126-
127128
ChartCursorFlyout.defaultProps = {
128129
pathComponent: <Path />,
129130
role: 'presentation',

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps {
3232
/**
3333
* The angle prop specifies the angle to rotate the tooltip around its origin point.
3434
*/
35-
angle?: string | number;
35+
angle?: number;
3636
/**
3737
* The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object
3838
* 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 {
226226
*
227227
* @propType number | string | Function | string[] | number[]
228228
*/
229-
text?: StringOrNumberOrCallback | string[] | number[];
229+
text?: string[] | StringOrNumberOrCallback;
230230
/**
231231
* The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or
232232
* props defined in theme may be overwritten by props specified on the component instance.

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
4949
/**
5050
* The angle prop specifies the angle to rotate the tooltip around its origin point.
5151
*/
52-
angle?: string | number;
52+
angle?: number;
5353
/**
5454
* The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object
5555
* 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 {
275275
*
276276
* @propType number | string | Function | string[] | number[]
277277
*/
278-
text?: StringOrNumberOrCallback | string[] | number[];
278+
text?: string[] | StringOrNumberOrCallback;
279279
/**
280280
* The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or
281281
* props defined in theme may be overwritten by props specified on the component instance.
@@ -295,11 +295,8 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps {
295295
themeColor?: string;
296296
/**
297297
* The title prop specifies a title to render with the legend.
298-
* This prop should be given as a string, or an array of strings for multi-line titles.
299-
*
300-
* Example: title={(datum) => datum.x}
301298
*/
302-
title?: string | string[] | Function;
299+
title?: string;
303300
/**
304301
* This prop refers to the width of the svg that ChartLegendTooltip is rendered within. This prop is passed from
305302
* parents of ChartLegendTooltip, and should not be set manually. In versions before ^33.0.0 this prop referred to the

packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ exports[`ChartLine 1`] = `
3131
</clippath>
3232
</defs>
3333
<path
34-
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"
34+
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"
3535
role="presentation"
3636
shape-rendering="auto"
3737
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`] = `
8383
</clippath>
8484
</defs>
8585
<path
86-
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"
86+
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"
8787
role="presentation"
8888
shape-rendering="auto"
8989
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;"

0 commit comments

Comments
 (0)