From d37a6f3ec183e25310ae2fbddc820aaa496dd6e6 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Sun, 8 Oct 2023 22:31:17 -0400 Subject: [PATCH] Refactor charts to use PatternFly's legendAllowWrap function https://issues.redhat.com/browse/HCS-245 --- package-lock.json | 22 ++++-- package.json | 2 +- .../charts/breakdown/BreakdownChart.tsx | 65 +++++++++--------- .../components/charts/trend/TrendChart.tsx | 68 +++++++++---------- .../ActualSpendBreakdownChart.styles.ts | 1 - .../ActualSpendBreakdownChart.tsx | 4 +- .../CommittedSpendTrendChart.styles.ts | 1 - .../CommittedSpendTrendChart.tsx | 4 +- .../CommittedSpendTrendOverChart.tsx | 4 +- 9 files changed, 85 insertions(+), 86 deletions(-) diff --git a/package-lock.json b/package-lock.json index ec0ffa34..1140741d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "GNU AGPLv3", "dependencies": { "@patternfly/patternfly": "^5.1.0", - "@patternfly/react-charts": "^7.1.1", + "@patternfly/react-charts": "^7.2.0-prerelease.2", "@patternfly/react-core": "^5.1.1", "@patternfly/react-icons": "^5.1.1", "@patternfly/react-table": "^5.1.1", @@ -2202,12 +2202,12 @@ "integrity": "sha512-wzVgL/0xPsmuRKWc6lMNEo5gDcTUtyU231eJSBTapOKXiwBOv2flvLEHPYLO6oDYXO+hwUrVgbcZFWMd1UlLwA==" }, "node_modules/@patternfly/react-charts": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-7.1.1.tgz", - "integrity": "sha512-X5T+wlbh+sNKIVScx3ykivu1+EIEcQvEdjv6vfyBlsBU8CzACgMRQff4buBL6um3Zv2kT4LPefd6zxoaerJdkg==", + "version": "7.2.0-prerelease.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-7.2.0-prerelease.2.tgz", + "integrity": "sha512-K+oTb5u9SthknZ7ui+0+RJGMOtLMNl3bV7pn65jivOhLgAd8aFenPX5iGJIbI2PmkMhwv2y90N0/DLbmI/dPfQ==", "dependencies": { - "@patternfly/react-styles": "^5.1.1", - "@patternfly/react-tokens": "^5.1.1", + "@patternfly/react-styles": "^5.2.0-prerelease.1", + "@patternfly/react-tokens": "^5.2.0-prerelease.1", "hoist-non-react-statics": "^3.3.0", "lodash": "^4.17.19", "tslib": "^2.5.0", @@ -2234,6 +2234,16 @@ "react-dom": "^17 || ^18" } }, + "node_modules/@patternfly/react-charts/node_modules/@patternfly/react-styles": { + "version": "5.2.0-prerelease.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.2.0-prerelease.1.tgz", + "integrity": "sha512-jIMOdMkwFuQsNUiw5755WjeABRbN9Wv5djj/39Hz64ICmDZ1FHF/RMyjR1ssGSFt6nmPScgoWrFUkPyAT7BabA==" + }, + "node_modules/@patternfly/react-charts/node_modules/@patternfly/react-tokens": { + "version": "5.2.0-prerelease.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.2.0-prerelease.1.tgz", + "integrity": "sha512-yqVFYsDIuGXSnSLwn7/pUW363StWjasc8jAUIDWUQ9PwidMv8Vp4TLdZ9QwycwNlkZyl+TVHroU0+2Oylkjhvw==" + }, "node_modules/@patternfly/react-component-groups": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-1.2.1.tgz", diff --git a/package.json b/package.json index 19559940..a1fa82ca 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ }, "dependencies": { "@patternfly/patternfly": "^5.1.0", - "@patternfly/react-charts": "^7.1.1", + "@patternfly/react-charts": "^7.2.0-prerelease.2", "@patternfly/react-core": "^5.1.1", "@patternfly/react-icons": "^5.1.1", "@patternfly/react-table": "^5.1.1", diff --git a/src/routes/components/charts/breakdown/BreakdownChart.tsx b/src/routes/components/charts/breakdown/BreakdownChart.tsx index ec3e0c14..4a460b71 100644 --- a/src/routes/components/charts/breakdown/BreakdownChart.tsx +++ b/src/routes/components/charts/breakdown/BreakdownChart.tsx @@ -34,11 +34,9 @@ import { formatCurrencyAbbreviation } from 'utils/format'; import { styles } from './BreakdownChart.styles'; interface BreakdownChartOwnProps { - adjustContainerHeight?: boolean; - containerHeight?: number; + baseHeight?: number; formatOptions?: FormatOptions; formatter?: Formatter; - height?: number; legendItemsPerRow?: number; name?: string; padding?: any; @@ -53,18 +51,11 @@ interface BreakdownChartOwnProps { type BreakdownChartProps = BreakdownChartOwnProps; const BreakdownChart: React.FC = ({ - adjustContainerHeight, - containerHeight, + baseHeight, formatter, formatOptions, - height, name, - padding = { - bottom: 75, - left: 55, - right: 40, - top: 8, - }, + padding, top1stData, top2ndData, top3rdData, @@ -74,6 +65,7 @@ const BreakdownChart: React.FC = ({ }) => { const [containerRef] = useState(React.createRef()); const [cursorVoronoiContainer, setCursorVoronoiContainer] = useState(); + const [extraHeight, setExtraHeight] = useState(0); const [hiddenSeries, setHiddenSeries] = useState(new Set()); const [series, setSeries] = useState(); const [units, setUnits] = useState('USD'); @@ -102,16 +94,6 @@ const BreakdownChart: React.FC = ({ : undefined; }; - const getAdjustedContainerHeight = () => { - let adjustedContainerHeight = containerHeight; - if (adjustContainerHeight) { - if (width < 550) { - adjustedContainerHeight += 25; - } - } - return adjustedContainerHeight; - }; - // If bar width exceeds max and domainPadding is true, extra width is returned to help center bars horizontally const getBarWidth = (domainPadding = false) => { const maxWidth = 10; @@ -159,12 +141,7 @@ const BreakdownChart: React.FC = ({ labels={({ datum }) => getTooltipLabel(datum, formatter, formatOptions)} mouseFollowTooltips voronoiDimension="x" - voronoiPadding={{ - bottom: 75, - left: 55, - right: 40, - top: 8, - }} + voronoiPadding={getPadding()} /> ); }; @@ -201,6 +178,10 @@ const BreakdownChart: React.FC = ({ return result; }; + const getHeight = () => { + return baseHeight + extraHeight; + }; + const getLegend = () => { return ( = ({ ); }; + const getPadding = () => { + return padding + ? padding + : { + bottom: 75 + extraHeight, // Maintain chart aspect ratio + left: 55, + right: 40, + top: 8, + }; + }; + const getTruncatedString = (str: string) => { const maxChars = 20; return str.length > maxChars ? str.substring(0, maxChars - 1) + '...' : str; @@ -236,6 +228,12 @@ const BreakdownChart: React.FC = ({ return 'USD'; }; + const handleLegendAllowWrap = value => { + if (value !== extraHeight) { + setExtraHeight(value); + } + }; + // Hide each data series individually const handleOnLegendClick = (index: number) => { const newHiddenSeries = initHiddenSeries(series, hiddenSeries, index); @@ -392,23 +390,24 @@ const BreakdownChart: React.FC = ({ }, [containerRef]); const barWidth = getBarWidth(); + const chartHeight = getHeight(); // Note: For tooltip values to match properly, chart groups must be rendered in the order given as legend data return ( -
-
+
+
= ({ - adjustContainerHeight, - containerHeight, + baseHeight, currentData, formatter, formatOptions, - height, name, - padding = { - bottom: 75, - left: 55, - right: 40, - top: 8, - }, + padding, previousData, thresholdData, title, }) => { const [containerRef] = useState(React.createRef()); const [cursorVoronoiContainer, setCursorVoronoiContainer] = useState(); + const [extraHeight, setExtraHeight] = useState(0); const [hiddenSeries, setHiddenSeries] = useState(new Set()); const [series, setSeries] = useState(); const [units, setUnits] = useState('USD'); @@ -96,18 +89,6 @@ const TrendChart: React.FC = ({ : undefined; }; - const getAdjustedContainerHeight = () => { - let adjustedContainerHeight = containerHeight; - if (adjustContainerHeight) { - if (width > 950 && width < 1150) { - adjustedContainerHeight += 25; - } else if (width <= 950) { - adjustedContainerHeight += 50; - } - } - return adjustedContainerHeight; - }; - const getChart = (serie: ChartSeries, index: number) => { return ( = ({ labels={({ datum }) => getTooltipLabel(datum, formatter, formatOptions)} mouseFollowTooltips voronoiDimension="x" - voronoiPadding={{ - bottom: 75, - left: 55, - right: 40, - top: 8, - }} + voronoiPadding={getPadding()} /> ); }; @@ -152,13 +128,16 @@ const TrendChart: React.FC = ({ return result; }; + const getHeight = () => { + return baseHeight + extraHeight; + }; + const getLegend = () => { return ( = ({ return 'USD'; }; + const getPadding = () => { + return padding + ? padding + : { + bottom: 75 + extraHeight, // Maintain chart aspect ratio + left: 55, + right: 40, + top: 8, + }; + }; + + const handleLegendAllowWrap = value => { + if (value !== extraHeight) { + setExtraHeight(value); + } + }; + // Hide each data series individually const handleOnLegendClick = (index: number) => { const newHiddenSeries = initHiddenSeries(series, hiddenSeries, index); @@ -292,6 +288,8 @@ const TrendChart: React.FC = ({ }; }, [containerRef]); + const chartHeight = getHeight(); + return ( <> {title && ( @@ -299,19 +297,19 @@ const TrendChart: React.FC = ({ {title} )} -
-
+
+
diff --git a/src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.styles.ts b/src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.styles.ts index 2ad3c092..be2769ef 100644 --- a/src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.styles.ts +++ b/src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.styles.ts @@ -2,7 +2,6 @@ import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg' export const chartStyles = { chartHeight: 265, - chartContainerHeight: 265, }; export const styles = { diff --git a/src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.tsx b/src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.tsx index afce2a86..d4523cab 100644 --- a/src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.tsx +++ b/src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.tsx @@ -14,9 +14,7 @@ const ActualSpendBreakdownChart: React.FC = ({ c const getChart = () => { return ( 0 ? data[0] : []} top2ndData={data.length > 1 ? data[1] : []} diff --git a/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.styles.ts b/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.styles.ts index 2ad3c092..be2769ef 100644 --- a/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.styles.ts +++ b/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.styles.ts @@ -2,7 +2,6 @@ import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg' export const chartStyles = { chartHeight: 265, - chartContainerHeight: 265, }; export const styles = { diff --git a/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.tsx b/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.tsx index b93d09c0..9b807451 100644 --- a/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.tsx +++ b/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.tsx @@ -20,10 +20,8 @@ const CommittedSpendTrendChart: React.FC = ({ }) => { return ( diff --git a/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendOverChart.tsx b/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendOverChart.tsx index 5298148d..af5114a4 100644 --- a/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendOverChart.tsx +++ b/src/routes/overview/components/committed-spend-trend/CommittedSpendTrendOverChart.tsx @@ -21,10 +21,8 @@ const CommittedSpendTrendOverChart: React.FC }) => { return (