Skip to content

Commit 0a57b51

Browse files
kleinju1017kleinju1017
authored
fix(Charts - New): make secondary dimension configurable (#395)
1 parent 8d34535 commit 0a57b51

File tree

13 files changed

+189
-28
lines changed

13 files changed

+189
-28
lines changed

‎packages/charts/src/components/BarChart/BarChart.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
3333
color,
3434
loading,
3535
labelKey = 'name',
36+
secondaryDimensionKey,
3637
dataKeys,
3738
width = '100%',
3839
height = '500px',
@@ -76,7 +77,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
7677

7778
const chartRef = useConsolidatedRef<any>(ref);
7879

79-
const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset);
80+
const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset, secondaryDimensionKey);
8081

8182
const onItemLegendClick = useLegendItemClick(onLegendClick);
8283

@@ -121,8 +122,6 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
121122
const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
122123
const SecondaryDimensionLabel = useSecondaryDimensionLabel(true, yAxisFormatter);
123124

124-
const secondaryDimension = dataset && dataset[0].hasOwnProperty('dimension');
125-
126125
return (
127126
<ChartContainer
128127
dataset={dataset}
@@ -153,7 +152,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
153152
interval={0}
154153
yAxisId={0}
155154
/>
156-
{secondaryDimension && (
155+
{secondaryDimensionKey && (
157156
<YAxis
158157
interval={0}
159158
type={'category'}

‎packages/charts/src/components/BarChart/BarRechart.stories.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,8 @@ export const withSecondardDimension = () => (
139139
onDataPointClick={action('onDataPointClick')}
140140
dataset={secondaryDimensionDataSet}
141141
labelKey={'name'}
142-
color={'red'}
142+
secondaryDimensionKey={'dimension'}
143+
color={'lightblue'}
143144
width={text('width', '95%')}
144145
height={text('height', '70vh')}
145146
chartConfig={{ dataLabel: true, barSize: 20 }}

‎packages/charts/src/components/ColumnChart/ColumnChart.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
3333
color,
3434
loading,
3535
labelKey = 'name',
36+
secondaryDimensionKey,
3637
width = '100%',
3738
height = '300px',
3839
dataset,
@@ -83,7 +84,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
8384

8485
const chartRef = useConsolidatedRef<any>(ref);
8586

86-
const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset);
87+
const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset, secondaryDimensionKey);
8788

8889
const colorSecondY = useMemo(
8990
() => (chartConfig.secondYAxis ? currentDataKeys.findIndex((key) => key === chartConfig.secondYAxis.dataKey) : 0),
@@ -122,11 +123,16 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
122123

123124
const SecondaryDimensionLabel = useSecondaryDimensionLabel();
124125

125-
const secondaryDimension = dataset && dataset[0].hasOwnProperty('dimension');
126+
const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
126127

127-
const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit, secondaryDimension);
128-
129-
const marginChart = useChartMargin(dataset, labelKey, yAxisFormatter, chartConfig.margin, false, secondaryDimension);
128+
const marginChart = useChartMargin(
129+
dataset,
130+
labelKey,
131+
yAxisFormatter,
132+
chartConfig.margin,
133+
false,
134+
secondaryDimensionKey
135+
);
130136

131137
return (
132138
<ChartContainer
@@ -148,7 +154,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
148154
stroke={chartConfig.gridStroke ?? ThemingParameters.sapList_BorderColor}
149155
/>
150156
{(chartConfig.xAxisVisible ?? true) && <XAxis interval={0} tick={XAxisLabel} dataKey={labelKey} xAxisId={0} />}
151-
{secondaryDimension && (
157+
{secondaryDimensionKey && (
152158
<XAxis
153159
interval={0}
154160
dataKey={'dimension'}

‎packages/charts/src/components/ColumnChart/ColumnRechart.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const withSecondaryDimension = () => (
4141
<ColumnChart
4242
onDataPointClick={action('onDataPointClick')}
4343
dataset={secondaryDimensionDataSet}
44+
secondaryDimensionKey={'dimension'}
4445
color={'red'}
4546
width={'100%'}
4647
height={'50vh'}

‎packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { action } from '@storybook/addon-actions';
22
import { ComposedChart } from '@ui5/webcomponents-react-charts/lib/next/ComposedChart';
33
import React from 'react';
4-
import { complexDataSet } from '../../resources/DemoProps';
4+
import {
5+
complexDataSet,
6+
secondaryDimensionComposedDataSet,
7+
secondaryDimensionDataSet
8+
} from '../../resources/DemoProps';
59

610
export const renderComposedChart = () => (
711
<ComposedChart
@@ -31,6 +35,35 @@ renderComposedChart.story = {
3135
name: 'Default'
3236
};
3337

38+
export const withSecondaryDimension = () => (
39+
<ComposedChart
40+
width={'95%'}
41+
height={'500px'}
42+
secondaryDimensionKey={'dimension'}
43+
dataset={secondaryDimensionComposedDataSet}
44+
onLegendClick={action('onLegendClick')}
45+
onDataPointClick={action('onDataPointClick')}
46+
elements={[
47+
{
48+
type: 'bar',
49+
accessor: 'sessions'
50+
},
51+
{
52+
type: 'area',
53+
accessor: 'users'
54+
},
55+
{
56+
type: 'line',
57+
accessor: 'volume'
58+
}
59+
]}
60+
/>
61+
);
62+
63+
withSecondaryDimension.story = {
64+
name: 'With secondary dimension'
65+
};
66+
3467
export const renderComposedChartPlaceholder = () => (
3568
<ComposedChart
3669
width={'30%'}

‎packages/charts/src/components/ComposedChart/index.tsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
6767
loading,
6868
dataset,
6969
labelKey = 'name',
70+
secondaryDimensionKey,
7071
onDataPointClick,
7172
noLegend = false,
7273
xAxisFormatter = (el) => el,
@@ -173,9 +174,14 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
173174
const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
174175
const SecondaryDimensionLabel = useSecondaryDimensionLabel();
175176

176-
const secondaryDimension = dataset && dataset[0].hasOwnProperty('dimension');
177-
178-
const marginChart = useChartMargin(dataset, yAxisFormatter, labelKey, chartConfig.margin);
177+
const marginChart = useChartMargin(
178+
dataset,
179+
yAxisFormatter,
180+
labelKey,
181+
chartConfig.margin,
182+
false,
183+
secondaryDimensionKey
184+
);
179185

180186
return (
181187
<ChartContainer
@@ -205,10 +211,10 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
205211
xAxisId={0}
206212
/>
207213
)}
208-
{secondaryDimension && (
214+
{secondaryDimensionKey && (
209215
<XAxis
210216
interval={0}
211-
dataKey={'dimension'}
217+
dataKey={secondaryDimensionKey}
212218
tickLine={false}
213219
tick={SecondaryDimensionLabel}
214220
axisLine={false}

‎packages/charts/src/components/LineChart/LineChart.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
3333
color,
3434
loading,
3535
labelKey = 'name',
36+
secondaryDimensionKey,
3637
width = '100%',
3738
height = '500px',
3839
dataset,
@@ -79,7 +80,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
7980

8081
const chartRef = useConsolidatedRef<any>(ref);
8182

82-
const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset);
83+
const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset, secondaryDimensionKey);
8384

8485
const colorSecondY = useMemo(
8586
() => (chartConfig.secondYAxis ? currentDataKeys.findIndex((key) => key === chartConfig.secondYAxis.dataKey) : 0),
@@ -109,9 +110,14 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
109110
const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
110111
const SecondaryDimensionLabel = useSecondaryDimensionLabel();
111112

112-
const secondaryDimension = dataset && dataset[0].hasOwnProperty('dimension');
113-
114-
const marginChart = useChartMargin(dataset, yAxisFormatter, labelKey, chartConfig.margin);
113+
const marginChart = useChartMargin(
114+
dataset,
115+
yAxisFormatter,
116+
labelKey,
117+
chartConfig.margin,
118+
false,
119+
secondaryDimensionKey
120+
);
115121

116122
return (
117123
<ChartContainer
@@ -133,10 +139,10 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
133139
stroke={chartConfig.gridStroke ?? ThemingParameters.sapList_BorderColor}
134140
/>
135141
{(chartConfig.xAxisVisible ?? true) && <XAxis dataKey={labelKey} xAxisId={0} interval={0} tick={XAxisLabel} />}
136-
{secondaryDimension && (
142+
{secondaryDimensionKey && (
137143
<XAxis
138144
interval={0}
139-
dataKey={'dimension'}
145+
dataKey={secondaryDimensionKey}
140146
tickLine={false}
141147
tick={SecondaryDimensionLabel}
142148
axisLine={false}

‎packages/charts/src/components/LineChart/LineRechart.stories.tsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { action } from '@storybook/addon-actions';
22
import { LineChart } from '@ui5/webcomponents-react-charts/lib/next/LineChart';
33
import React from 'react';
4-
import { complexDataSet, simpleDataSet } from '../../resources/DemoProps';
4+
import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
55

66
export default {
77
title: 'Charts - Unstable / LineChart',
@@ -45,6 +45,27 @@ renderStoryWithCustomColor.story = {
4545
name: 'With custom color'
4646
};
4747

48+
export const withSecondaryDimension = () => (
49+
<LineChart
50+
onDataPointClick={action('onDataPointClick')}
51+
labelKey={'name'}
52+
dataset={secondaryDimensionDataSet}
53+
secondaryDimensionKey={'dimension'}
54+
color={'red'}
55+
width={'95%'}
56+
height={'60vh'}
57+
chartConfig={{
58+
dataLabel: true,
59+
strokeWidth: 2,
60+
strokeOpacity: 0.5
61+
}}
62+
/>
63+
);
64+
65+
withSecondaryDimension.story = {
66+
name: 'With secondary dimension'
67+
};
68+
4869
export const renderLabelStory = () => {
4970
return (
5071
<LineChart

‎packages/charts/src/hooks/useChartMargin.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ export const useChartMargin = (dataset, formatter, labelKey, margin, bar?, secon
1616
right: margin?.right ?? 30,
1717
top: margin?.top ?? 40,
1818
bottom: margin?.bottom ?? secondaryDimension ? 100 : 30,
19-
left: margin?.left ?? marginLeft / 2
19+
left: margin?.left ?? bar ? marginLeft / 2 : secondaryDimension ? 20 : 0
2020
};
2121
}, [dataset, labelKey, margin]);

‎packages/charts/src/hooks/useResolveDataKeys.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { useMemo } from 'react';
22

3-
export const useResolveDataKeys = (dataKeys, labelKey, dataset): string[] => {
3+
export const useResolveDataKeys = (dataKeys, labelKey, dataset, secondaryDimensionKey): string[] => {
44
return useMemo(() => {
55
if (dataKeys) {
66
// manually provided, let the user decide
77
return dataKeys;
88
}
99
if (dataset && dataset[0]) {
10-
return Object.keys(dataset[0]).filter((key) => key !== labelKey && key !== 'dimension');
10+
return Object.keys(dataset[0]).filter((key) => key !== labelKey && key !== secondaryDimensionKey);
1111
}
1212
return [];
1313
}, [dataKeys, labelKey, dataset]);

‎packages/charts/src/interfaces/RechartBaseProps.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ChartContainerProps } from './ChartContainerProps';
44

55
export interface RechartBaseProps extends ChartContainerProps {
66
labelKey?: string;
7+
secondaryDimensionKey?: string;
78
dataKeys?: string[];
89
noLegend?: boolean;
910
onDataPointClick?: (event: CustomEvent) => void;

‎packages/charts/src/internal/CustomElements.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const XAxisTicks = (props, formatter, unit = '', rotate) => {
1010
? formatter(payload.value).length > 10
1111
? `${formatter(payload.value).slice(0, 8)}...`
1212
: formatter(payload.value)
13-
: payload.value;
13+
: formatter(payload.value);
1414
return (
1515
<g transform={`translate(${x},${y + 10})`}>
1616
<text

0 commit comments

Comments
 (0)