Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(charts): adjust for Victory type changes #10082

Merged
merged 1 commit into from
Feb 14, 2024
Merged

fix(charts): adjust for Victory type changes #10082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions packages/react-charts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);"
Expand Down Expand Up @@ -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);"
Expand Down
41 changes: 21 additions & 20 deletions packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down Expand Up @@ -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, {
Expand All @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down
9 changes: 3 additions & 6 deletions packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this break people who are passing a string?

Copy link
Member Author

@dlabrecq dlabrecq Feb 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This must match the current Victory type exactly in order to compile. I suspect Victory corrected the type because only a number is supported.

/**
* 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
Expand Down Expand Up @@ -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.
Expand All @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same question here about whether this would break people passing a one of the removed types.

Copy link
Member Author

@dlabrecq dlabrecq Feb 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This must match the current Victory type exactly in order to compile.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahhh. So it is a breaking change from Victory then.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, not much we can do but match the Victory changes

/**
* 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
Expand Down
4 changes: 2 additions & 2 deletions packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down
Loading
Loading