Skip to content

Commit 1edd9f8

Browse files
MarcusNotheisMarcusNotheis
committed
refactor(Charts): Central Legend Handling, wrap chart into container
1 parent c7d9147 commit 1edd9f8

File tree

15 files changed

+135
-121
lines changed

15 files changed

+135
-121
lines changed

‎packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,5 +114,8 @@ exports[`BarChart loading placeholder 1`] = `
114114
</linearGradient>
115115
</defs>
116116
</svg>
117+
<div
118+
class="legend"
119+
/>
117120
</div>
118121
`;

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

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
22
import bestContrast from 'get-best-contrast-color';
3-
import React, { forwardRef, Ref, RefObject, useRef, useMemo } from 'react';
3+
import React, { forwardRef, Ref, useMemo } from 'react';
44
import { HorizontalBar } from 'react-chartjs-2';
55
import { useTheme } from 'react-jss';
66
import { DEFAULT_OPTIONS } from '../../config';
77
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
8-
import { withChartContainer } from '../../internal/withChartContainer';
8+
import { InternalProps } from '../../interfaces/InternalProps';
99
import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
10+
import { withChartContainer } from '../../internal/withChartContainer';
1011
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
1112
import { useChartData } from '../../util/populateData';
1213
import { formatTooltipLabel, getTextWidth, useMergedConfig } from '../../util/utils';
@@ -26,17 +27,14 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref<any>) =
2627
colors,
2728
width,
2829
height,
29-
noLegend
30-
} = props as BarChartPropTypes;
30+
noLegend,
31+
legendRef
32+
} = props as BarChartPropTypes & InternalProps;
3133

3234
const theme: any = useTheme();
3335
const data = useChartData(labels, datasets, colors, theme.theme);
3436

3537
const chartRef = useConsolidatedRef<any>(ref);
36-
const legendRef: RefObject<HTMLDivElement> = useRef();
37-
38-
const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
39-
useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
4038

4139
const barChartDefaultConfig = useMemo(() => {
4240
return {
@@ -89,24 +87,24 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref<any>) =
8987
}
9088
};
9189
}, [valueAxisFormatter, categoryAxisFormatter]);
92-
9390
const mergedOptions = useMergedConfig(barChartDefaultConfig, options);
9491

92+
const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
93+
useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
94+
9595
return (
96-
<>
97-
<HorizontalBar
98-
ref={chartRef}
99-
data={data}
100-
height={height}
101-
width={width}
102-
options={mergedOptions}
103-
getDatasetAtEvent={getDatasetAtEvent}
104-
getElementAtEvent={getElementAtEvent}
105-
/>
106-
<div ref={legendRef} className="legend" />
107-
</>
96+
<HorizontalBar
97+
ref={chartRef}
98+
data={data}
99+
height={height}
100+
width={width}
101+
options={mergedOptions}
102+
getDatasetAtEvent={getDatasetAtEvent}
103+
getElementAtEvent={getElementAtEvent}
104+
/>
108105
);
109106
});
107+
110108
// @ts-ignore
111109
BarChartComponent.LoadingPlaceholder = BarChartPlaceholder;
112110
const BarChart = withChartContainer(BarChartComponent);

‎packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,5 +114,8 @@ exports[`ColumnChart loading placeholder 1`] = `
114114
</linearGradient>
115115
</defs>
116116
</svg>
117+
<div
118+
class="legend"
119+
/>
117120
</div>
118121
`;

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
22
import bestContrast from 'get-best-contrast-color';
3-
import React, { forwardRef, Ref, RefObject, useRef, useMemo } from 'react';
3+
import React, { forwardRef, Ref, useMemo } from 'react';
44
import { Bar } from 'react-chartjs-2';
55
import { useTheme } from 'react-jss';
66
import { DEFAULT_OPTIONS } from '../../config';
77
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
8+
import { InternalProps } from '../../interfaces/InternalProps';
89
import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
910
import { withChartContainer } from '../../internal/withChartContainer';
1011
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
@@ -26,14 +27,14 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref<a
2627
options,
2728
width,
2829
height,
29-
noLegend
30-
} = props;
30+
noLegend,
31+
legendRef
32+
} = props as ColumnChartPropTypes & InternalProps;
3133

3234
const theme: any = useTheme();
3335
const data = useChartData(labels, datasets, colors, theme.theme);
3436

3537
const chartRef = useConsolidatedRef<any>(ref);
36-
const legendRef: RefObject<HTMLDivElement> = useRef();
3738

3839
const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
3940
useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
@@ -96,18 +97,15 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref<a
9697
const mergedOptions = useMergedConfig(columnChartDefaultConfig, options);
9798

9899
return (
99-
<>
100-
<Bar
101-
ref={chartRef}
102-
data={data}
103-
height={height}
104-
width={width}
105-
options={mergedOptions}
106-
getDatasetAtEvent={getDatasetAtEvent}
107-
getElementAtEvent={getElementAtEvent}
108-
/>
109-
<div ref={legendRef} className="legend" />
110-
</>
100+
<Bar
101+
ref={chartRef}
102+
data={data}
103+
height={height}
104+
width={width}
105+
options={mergedOptions}
106+
getDatasetAtEvent={getDatasetAtEvent}
107+
getElementAtEvent={getElementAtEvent}
108+
/>
111109
);
112110
});
113111
// @ts-ignore

‎packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,5 +77,8 @@ exports[`DonutChart loading placeholder 1`] = `
7777
</linearGradient>
7878
</defs>
7979
</svg>
80+
<div
81+
class="legend"
82+
/>
8083
</div>
8184
`;

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
2-
import React, { forwardRef, Ref, RefObject, useMemo, useRef } from 'react';
2+
import React, { forwardRef, Ref, useMemo } from 'react';
33
import { Pie } from 'react-chartjs-2';
44
import { useTheme } from 'react-jss';
55
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
6+
import { InternalProps } from '../../interfaces/InternalProps';
67
import { useLegend, usePieLegendItemClickHandler } from '../../internal/ChartLegend';
78
import { withChartContainer } from '../../internal/withChartContainer';
89
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
@@ -24,8 +25,9 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Ref<any
2425
options,
2526
width,
2627
height,
27-
noLegend
28-
} = props;
28+
noLegend,
29+
legendRef
30+
} = props as DonutChartPropTypes & InternalProps;
2931

3032
const theme: any = useTheme();
3133
const data = useChartData(labels, datasets, colors, theme.theme, true);
@@ -54,24 +56,20 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Ref<any
5456
const mergedOptions = useMergedConfig(donutChartDefaultConfig, options);
5557

5658
const chartRef = useConsolidatedRef<any>(ref);
57-
const legendRef: RefObject<HTMLDivElement> = useRef();
5859

5960
const handleLegendItemPress = usePieLegendItemClickHandler(chartRef, legendRef);
6061
useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
6162

6263
return (
63-
<>
64-
<Pie
65-
ref={chartRef}
66-
data={data}
67-
height={height}
68-
width={width}
69-
options={mergedOptions}
70-
getDatasetAtEvent={getDatasetAtEvent}
71-
getElementAtEvent={getElementAtEvent}
72-
/>
73-
<div ref={legendRef} className="legend" />
74-
</>
64+
<Pie
65+
ref={chartRef}
66+
data={data}
67+
height={height}
68+
width={width}
69+
options={mergedOptions}
70+
getDatasetAtEvent={getDatasetAtEvent}
71+
getElementAtEvent={getElementAtEvent}
72+
/>
7573
);
7674
});
7775
// @ts-ignore

‎packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,5 +77,8 @@ exports[`LineChart loading placeholder 1`] = `
7777
</linearGradient>
7878
</defs>
7979
</svg>
80+
<div
81+
class="legend"
82+
/>
8083
</div>
8184
`;

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
2-
import React, { forwardRef, Ref, RefObject, useMemo, useRef } from 'react';
2+
import React, { forwardRef, Ref, useMemo } from 'react';
33
import { Line } from 'react-chartjs-2';
44
import { useTheme } from 'react-jss';
55
import { DEFAULT_OPTIONS } from '../../config';
66
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
7+
import { InternalProps } from '../../interfaces/InternalProps';
78
import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
89
import { withChartContainer } from '../../internal/withChartContainer';
910
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
@@ -25,8 +26,9 @@ const LineChartComponent = forwardRef((props: LineChartPropTypes, ref: Ref<any>)
2526
getDatasetAtEvent,
2627
width,
2728
height,
28-
noLegend
29-
} = props;
29+
noLegend,
30+
legendRef
31+
} = props as LineChartPropTypes & InternalProps;
3032

3133
const lineChartDefaultConfig = useMemo(() => {
3234
return {
@@ -61,23 +63,19 @@ const LineChartComponent = forwardRef((props: LineChartPropTypes, ref: Ref<any>)
6163
const data = useChartData(labels, datasets, colors, theme.theme);
6264

6365
const chartRef = useConsolidatedRef<any>(ref);
64-
const legendRef: RefObject<HTMLDivElement> = useRef();
6566
const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
6667
useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
6768

6869
return (
69-
<>
70-
<Line
71-
ref={chartRef}
72-
data={data}
73-
height={height}
74-
width={width}
75-
options={chartOptions}
76-
getDatasetAtEvent={getDatasetAtEvent}
77-
getElementAtEvent={getElementAtEvent}
78-
/>
79-
<div ref={legendRef} className="legend" />
80-
</>
70+
<Line
71+
ref={chartRef}
72+
data={data}
73+
height={height}
74+
width={width}
75+
options={chartOptions}
76+
getDatasetAtEvent={getDatasetAtEvent}
77+
getElementAtEvent={getElementAtEvent}
78+
/>
8179
);
8280
});
8381
// @ts-ignore

‎packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,5 +77,8 @@ exports[`PieChart loading placeholder 1`] = `
7777
</linearGradient>
7878
</defs>
7979
</svg>
80+
<div
81+
class="legend"
82+
/>
8083
</div>
8184
`;

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
2-
import React, { forwardRef, Ref, RefObject, useMemo, useRef } from 'react';
2+
import React, { forwardRef, Ref, useMemo } from 'react';
33
import { Pie } from 'react-chartjs-2';
44
import { useTheme } from 'react-jss';
55
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
6+
import { InternalProps } from '../../interfaces/InternalProps';
67
import { useLegend, usePieLegendItemClickHandler } from '../../internal/ChartLegend';
78
import { withChartContainer } from '../../internal/withChartContainer';
89
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
@@ -24,8 +25,9 @@ const PieChartComponent = forwardRef((props: PieChartPropTypes, ref: Ref<any>) =
2425
options,
2526
width,
2627
height,
27-
noLegend
28-
} = props;
28+
noLegend,
29+
legendRef
30+
} = props as PieChartPropTypes & InternalProps;
2931

3032
const theme: any = useTheme();
3133
const data = useChartData(labels, datasets, colors, theme.theme, true);
@@ -53,24 +55,20 @@ const PieChartComponent = forwardRef((props: PieChartPropTypes, ref: Ref<any>) =
5355
const mergedOptions = useMergedConfig(pieChartDefaultConfig, options);
5456

5557
const chartRef = useConsolidatedRef<any>(ref);
56-
const legendRef: RefObject<HTMLDivElement> = useRef();
5758

5859
const handleLegendItemPress = usePieLegendItemClickHandler(chartRef, legendRef);
5960
useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
6061

6162
return (
62-
<>
63-
<Pie
64-
ref={chartRef}
65-
data={data}
66-
height={height}
67-
width={width}
68-
options={mergedOptions}
69-
getDatasetAtEvent={getDatasetAtEvent}
70-
getElementAtEvent={getElementAtEvent}
71-
/>
72-
<div ref={legendRef} className="legend" />
73-
</>
63+
<Pie
64+
ref={chartRef}
65+
data={data}
66+
height={height}
67+
width={width}
68+
options={mergedOptions}
69+
getDatasetAtEvent={getDatasetAtEvent}
70+
getElementAtEvent={getElementAtEvent}
71+
/>
7472
);
7573
});
7674
// @ts-ignore

0 commit comments

Comments
 (0)