Skip to content

Commit

Permalink
Merge pull request #793 from dlabrecq/245-charts
Browse files Browse the repository at this point in the history 
Refactor charts to use PatternFly's legendAllowWrap function
  • Loading branch information
@dlabrecq
dlabrecq authored Oct 9, 2023
2 parents e247c38 + d37a6f3 commit 801e1ac
Show file tree
Hide file tree
Showing 9 changed files with 85 additions and 86 deletions.
22 changes: 16 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
65 changes: 32 additions & 33 deletions src/routes/components/charts/breakdown/BreakdownChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -53,18 +51,11 @@ interface BreakdownChartOwnProps {
type BreakdownChartProps = BreakdownChartOwnProps;

const BreakdownChart: React.FC<BreakdownChartProps> = ({
adjustContainerHeight,
containerHeight,
baseHeight,
formatter,
formatOptions,
height,
name,
padding = {
bottom: 75,
left: 55,
right: 40,
top: 8,
},
padding,
top1stData,
top2ndData,
top3rdData,
Expand All @@ -74,6 +65,7 @@ const BreakdownChart: React.FC<BreakdownChartProps> = ({
}) => {
const [containerRef] = useState(React.createRef<HTMLDivElement>());
const [cursorVoronoiContainer, setCursorVoronoiContainer] = useState<any>();
const [extraHeight, setExtraHeight] = useState(0);
const [hiddenSeries, setHiddenSeries] = useState(new Set<number>());
const [series, setSeries] = useState<ChartSeries[]>();
const [units, setUnits] = useState('USD');
Expand Down Expand Up @@ -102,16 +94,6 @@ const BreakdownChart: React.FC<BreakdownChartProps> = ({
: 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;
Expand Down Expand Up @@ -159,12 +141,7 @@ const BreakdownChart: React.FC<BreakdownChartProps> = ({
labels={({ datum }) => getTooltipLabel(datum, formatter, formatOptions)}
mouseFollowTooltips
voronoiDimension="x"
voronoiPadding={{
bottom: 75,
left: 55,
right: 40,
top: 8,
}}
voronoiPadding={getPadding()}
/>
);
};
Expand Down Expand Up @@ -201,6 +178,10 @@ const BreakdownChart: React.FC<BreakdownChartProps> = ({
return result;
};

const getHeight = () => {
return baseHeight + extraHeight;
};

const getLegend = () => {
return (
<ChartLegend
Expand All @@ -214,6 +195,17 @@ const BreakdownChart: React.FC<BreakdownChartProps> = ({
);
};

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;
Expand All @@ -236,6 +228,12 @@ const BreakdownChart: React.FC<BreakdownChartProps> = ({
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);
Expand Down Expand Up @@ -392,23 +390,24 @@ const BreakdownChart: React.FC<BreakdownChartProps> = ({
}, [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 (
<div className="chartOverride" ref={containerRef} style={{ height: getAdjustedContainerHeight() }}>
<div style={{ height, width }}>
<div className="chartOverride" ref={containerRef}>
<div style={{ height: chartHeight }}>
<Chart
containerComponent={cloneContainer()}
domain={getDomain()}
domainPadding={30}
events={getEvents()}
height={height}
legendAllowWrap
height={chartHeight}
legendAllowWrap={handleLegendAllowWrap}
legendComponent={getLegend()}
legendData={getLegendData(series, hiddenSeries)}
legendPosition="bottom-left"
name={name}
padding={padding}
padding={getPadding()}
theme={ChartTheme}
themeColor={ChartThemeColor.multiOrdered}
width={width}
Expand Down
68 changes: 33 additions & 35 deletions src/routes/components/charts/trend/TrendChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,9 @@ import { formatCurrencyAbbreviation } from 'utils/format';
import { styles } from './TrendChart.styles';

interface TrendChartOwnProps {
adjustContainerHeight?: boolean;
baseHeight?: number;
containerHeight?: number;
currentData?: any;
height?: number;
name?: string;
padding?: any;
previousData?: any;
Expand All @@ -49,25 +48,19 @@ interface TrendChartOwnProps {
type TrendChartProps = TrendChartOwnProps;

const TrendChart: React.FC<TrendChartProps> = ({
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<HTMLDivElement>());
const [cursorVoronoiContainer, setCursorVoronoiContainer] = useState<any>();
const [extraHeight, setExtraHeight] = useState(0);
const [hiddenSeries, setHiddenSeries] = useState(new Set<number>());
const [series, setSeries] = useState<ChartSeries[]>();
const [units, setUnits] = useState('USD');
Expand Down Expand Up @@ -96,18 +89,6 @@ const TrendChart: React.FC<TrendChartProps> = ({
: 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 (
<ChartArea
Expand All @@ -131,12 +112,7 @@ const TrendChart: React.FC<TrendChartProps> = ({
labels={({ datum }) => getTooltipLabel(datum, formatter, formatOptions)}
mouseFollowTooltips
voronoiDimension="x"
voronoiPadding={{
bottom: 75,
left: 55,
right: 40,
top: 8,
}}
voronoiPadding={getPadding()}
/>
);
};
Expand All @@ -152,13 +128,16 @@ const TrendChart: React.FC<TrendChartProps> = ({
return result;
};

const getHeight = () => {
return baseHeight + extraHeight;
};

const getLegend = () => {
return (
<ChartLegend
data={getLegendData(series, hiddenSeries)}
gutter={20}
height={25}
itemsPerRow={width < 550 ? 1 : undefined}
name={`${name}-legend`}
responsive={false}
y={240}
Expand All @@ -183,6 +162,23 @@ const TrendChart: React.FC<TrendChartProps> = ({
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);
Expand Down Expand Up @@ -292,26 +288,28 @@ const TrendChart: React.FC<TrendChartProps> = ({
};
}, [containerRef]);

const chartHeight = getHeight();

return (
<>
{title && (
<Title headingLevel="h3" size="md">
{title}
</Title>
)}
<div className="chartOverride" ref={containerRef} style={{ height: getAdjustedContainerHeight() }}>
<div style={{ height, width }}>
<div className="chartOverride" ref={containerRef}>
<div style={{ height: chartHeight }}>
<Chart
containerComponent={cloneContainer()}
domain={getDomain(series, hiddenSeries)}
events={getEvents()}
height={height}
legendAllowWrap
height={chartHeight}
legendAllowWrap={handleLegendAllowWrap}
legendComponent={getLegend()}
legendData={getLegendData(series, hiddenSeries)}
legendPosition="bottom-left"
name={name}
padding={padding}
padding={getPadding()}
theme={ChartTheme}
width={width}
>
Expand Down
1 change: 0 additions & 1 deletion src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
4 changes: 1 addition & 3 deletions src/routes/overview/components/actual-spend-breakdown/ActualSpendBreakdownChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ const ActualSpendBreakdownChart: React.FC<ActualSpendBreakdownChartProps> = ({ c
const getChart = () => {
return (
<BreakdownChart
adjustContainerHeight
containerHeight={chartStyles.chartContainerHeight}
height={chartStyles.chartHeight}
baseHeight={chartStyles.chartHeight}
name={chartName}
top1stData={data.length > 0 ? data[0] : []}
top2ndData={data.length > 1 ? data[1] : []}
Expand Down
1 change: 0 additions & 1 deletion src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
4 changes: 1 addition & 3 deletions src/routes/overview/components/committed-spend-trend/CommittedSpendTrendChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@ const CommittedSpendTrendChart: React.FC<CommittedSpendTrendChartProps> = ({
}) => {
return (
<TrendChart
adjustContainerHeight
containerHeight={chartStyles.chartContainerHeight}
baseHeight={chartStyles.chartHeight}
currentData={currentData}
height={chartStyles.chartHeight}
name={chartName}
thresholdData={thresholdData}
/>
Expand Down
4 changes: 1 addition & 3 deletions src/routes/overview/components/committed-spend-trend/CommittedSpendTrendOverChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,8 @@ const CommittedSpendTrendOverChart: React.FC<CommittedSpendTrendOverChartProps>
}) => {
return (
<TrendChart
adjustContainerHeight
containerHeight={chartStyles.chartContainerHeight}
baseHeight={chartStyles.chartHeight}
currentData={currentData}
height={chartStyles.chartHeight}
name={chartName}
previousData={previousData}
thresholdData={thresholdData}
Expand Down

0 comments on commit 801e1ac

Please sign in to comment.