Skip to content

Commit 8a20459

Browse files
MarcusNotheisMarcusNotheis
authored
refactor(Charts - New): memoize chartConfig objects (#480)
1 parent 0ceec67 commit 8a20459

File tree

10 files changed

+156
-177
lines changed

10 files changed

+156
-177
lines changed

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

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingPara
22
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
33
import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
44
import { BarChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/BarChartPlaceholder';
5+
import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
6+
import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
7+
import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
58
import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
69
import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
7-
import React, { FC, forwardRef, Ref, useCallback } from 'react';
10+
import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react';
811
import {
912
Bar,
1013
BarChart as BarChartLib,
@@ -22,10 +25,7 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
2225
import { IChartDimension } from '../../interfaces/IChartDimension';
2326
import { IChartMeasure } from '../../interfaces/IChartMeasure';
2427
import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
25-
import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
26-
import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
27-
import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
28-
import { tickLineConfig, tooltipContentStyle } from '../../internal/staticProps';
28+
import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
2929

3030
const formatYAxisTicks = (tick = '') => {
3131
const splitTick = tick.split(' ');
@@ -106,7 +106,14 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
106106
noLegend = false,
107107
onDataPointClick,
108108
onLegendClick,
109-
chartConfig = {
109+
style,
110+
className,
111+
tooltip,
112+
slot
113+
} = props;
114+
115+
const chartConfig = useMemo(() => {
116+
return {
110117
margin: {},
111118
yAxisVisible: true,
112119
xAxisVisible: true,
@@ -116,17 +123,9 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
116123
legendPosition: 'top',
117124
barGap: 3,
118125
zoomingTool: false,
119-
referenceLine: {
120-
label: undefined,
121-
value: undefined,
122-
color: undefined
123-
}
124-
},
125-
style,
126-
className,
127-
tooltip,
128-
slot
129-
} = props;
126+
...props.chartConfig
127+
};
128+
}, [props.chartConfig]);
130129

131130
const { dimensions, measures } = usePrepareDimensionsAndMeasures(
132131
props.dimensions,
@@ -187,21 +186,21 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
187186
>
188187
<BarChartLib margin={marginChart} layout="vertical" data={dataset} barGap={chartConfig.barGap}>
189188
<CartesianGrid
190-
vertical={chartConfig.gridVertical ?? false}
189+
vertical={chartConfig.gridVertical}
191190
horizontal={chartConfig.gridHorizontal}
192-
stroke={chartConfig.gridStroke ?? ThemingParameters.sapList_BorderColor}
191+
stroke={chartConfig.gridStroke}
193192
/>
194-
{(chartConfig.xAxisVisible ?? true) && (
193+
{chartConfig.xAxisVisible && (
195194
<XAxis
196195
interval={0}
197196
type="number"
198197
tick={<XAxisTicks config={primaryMeasure} chartRef={chartRef} />}
199-
axisLine={chartConfig.xAxisVisible ?? false}
198+
axisLine={chartConfig.xAxisVisible}
200199
tickLine={tickLineConfig}
201200
tickFormatter={primaryMeasure?.formatter}
202201
/>
203202
)}
204-
{(chartConfig.yAxisVisible ?? true) &&
203+
{(chartConfig.yAxisVisible) &&
205204
dimensions.map((dimension, index) => {
206205
return (
207206
<YAxis
@@ -235,15 +234,15 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
235234
/>
236235
);
237236
})}
238-
{!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
237+
{!noLegend && <Legend verticalAlign={chartConfig.legendPosition} onClick={onItemLegendClick} />}
239238
{chartConfig.referenceLine && (
240239
<ReferenceLine
241240
stroke={chartConfig.referenceLine.color}
242241
x={chartConfig.referenceLine.value}
243242
label={chartConfig.referenceLine.label}
244243
/>
245244
)}
246-
<Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
245+
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
247246
{chartConfig.zoomingTool && (
248247
<Brush
249248
y={10}

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

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxis
77
import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
88
import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
99
import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
10-
import React, { FC, forwardRef, Ref, useCallback } from 'react';
10+
import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react';
1111
import {
1212
Bar as Column,
1313
BarChart as ColumnChartLib,
@@ -25,7 +25,7 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
2525
import { IChartDimension } from '../../interfaces/IChartDimension';
2626
import { IChartMeasure } from '../../interfaces/IChartMeasure';
2727
import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
28-
import { tickLineConfig, tooltipContentStyle } from '../../internal/staticProps';
28+
import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
2929

3030
interface MeasureConfig extends IChartMeasure {
3131
/**
@@ -95,33 +95,25 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
9595
noLegend = false,
9696
onDataPointClick,
9797
onLegendClick,
98-
chartConfig = {
99-
margin: {},
98+
style,
99+
className,
100+
tooltip,
101+
slot
102+
} = props;
103+
104+
const chartConfig = useMemo(() => {
105+
return {
100106
yAxisVisible: false,
101107
xAxisVisible: true,
102108
gridStroke: ThemingParameters.sapList_BorderColor,
103109
gridHorizontal: true,
104110
gridVertical: false,
105-
yAxisColor: ThemingParameters.sapList_BorderColor,
106111
legendPosition: 'top',
107112
barGap: 3,
108113
zoomingTool: false,
109-
secondYAxis: {
110-
dataKey: undefined,
111-
name: undefined,
112-
color: undefined
113-
},
114-
referenceLine: {
115-
label: undefined,
116-
value: undefined,
117-
color: undefined
118-
}
119-
},
120-
style,
121-
className,
122-
tooltip,
123-
slot
124-
} = props;
114+
...props.chartConfig
115+
};
116+
}, [props.chartConfig]);
125117

126118
const { dimensions, measures } = usePrepareDimensionsAndMeasures(
127119
props.dimensions,
@@ -139,7 +131,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
139131

140132
const dataKeys = measures.map(({ accessor }) => accessor);
141133
const colorSecondY = chartConfig.secondYAxis
142-
? dataKeys.findIndex((key) => key === chartConfig.secondYAxis.dataKey)
134+
? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
143135
: 0;
144136

145137
const onItemLegendClick = useLegendItemClick(onLegendClick);
@@ -189,11 +181,11 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
189181
>
190182
<ColumnChartLib margin={marginChart} data={dataset} barGap={chartConfig.barGap}>
191183
<CartesianGrid
192-
vertical={chartConfig.gridVertical ?? false}
184+
vertical={chartConfig.gridVertical}
193185
horizontal={chartConfig.gridHorizontal}
194-
stroke={chartConfig.gridStroke ?? ThemingParameters.sapList_BorderColor}
186+
stroke={chartConfig.gridStroke}
195187
/>
196-
{(chartConfig.xAxisVisible ?? true) &&
188+
{chartConfig.xAxisVisible &&
197189
dimensions.map((dimension, index) => {
198190
return (
199191
<XAxis
@@ -208,13 +200,13 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
208200
);
209201
})}
210202
<YAxis
211-
axisLine={chartConfig.yAxisVisible ?? false}
203+
axisLine={chartConfig.yAxisVisible}
212204
tickLine={tickLineConfig}
213205
yAxisId="left"
214206
interval={0}
215207
tick={<YAxisTicks config={primaryMeasure} />}
216208
/>
217-
{chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
209+
{chartConfig.secondYAxis?.dataKey && (
218210
<YAxis
219211
dataKey={chartConfig.secondYAxis.dataKey}
220212
stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
@@ -227,7 +219,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
227219
{measures.map((element, index) => {
228220
return (
229221
<Column
230-
yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
222+
yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
231223
stackId={element.stackId}
232224
fillOpacity={element.opacity}
233225
key={element.accessor}
@@ -243,7 +235,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
243235
/>
244236
);
245237
})}
246-
{!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
238+
{!noLegend && <Legend verticalAlign={chartConfig.legendPosition} onClick={onItemLegendClick} />}
247239
{chartConfig.referenceLine && (
248240
<ReferenceLine
249241
stroke={chartConfig.referenceLine.color}
@@ -252,7 +244,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
252244
yAxisId={'left'}
253245
/>
254246
)}
255-
<Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
247+
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
256248
{chartConfig.zoomingTool && (
257249
<Brush
258250
y={10}

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

Lines changed: 26 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxis
77
import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
88
import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
99
import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
10-
import React, { FC, forwardRef, Ref, useCallback, useState } from 'react';
10+
import React, { FC, forwardRef, Ref, useCallback, useState, useMemo } from 'react';
1111
import {
1212
Area,
1313
Bar,
@@ -28,7 +28,7 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
2828
import { IChartDimension } from '../../interfaces/IChartDimension';
2929
import { IChartMeasure } from '../../interfaces/IChartMeasure';
3030
import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
31-
import { tickLineConfig, tooltipContentStyle } from '../../internal/staticProps';
31+
import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
3232

3333
const dimensionDefaults = {
3434
formatter: (d) => d
@@ -116,29 +116,6 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
116116
noLegend = false,
117117
onLegendClick,
118118
layout = 'horizontal',
119-
chartConfig = {
120-
margin: {},
121-
yAxisVisible: false,
122-
xAxisVisible: true,
123-
gridStroke: ThemingParameters.sapList_BorderColor,
124-
gridHorizontal: true,
125-
gridVertical: false,
126-
yAxisId: '',
127-
yAxisColor: ThemingParameters.sapList_BorderColor,
128-
legendPosition: 'top',
129-
zoomingTool: false,
130-
barGap: undefined,
131-
referenceLine: {
132-
label: undefined,
133-
value: undefined,
134-
color: undefined
135-
},
136-
secondYAxis: {
137-
name: undefined,
138-
dataKey: undefined,
139-
color: undefined
140-
}
141-
},
142119
style,
143120
className,
144121
tooltip,
@@ -150,6 +127,19 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
150127
dataset.some(({ type }) => type === 'bar') ? BAR_DEFAULT_PADDING : 0
151128
);
152129

130+
const chartConfig = useMemo(() => {
131+
return {
132+
yAxisVisible: false,
133+
xAxisVisible: true,
134+
gridStroke: ThemingParameters.sapList_BorderColor,
135+
gridHorizontal: true,
136+
gridVertical: false,
137+
legendPosition: 'top',
138+
zoomingTool: false,
139+
...props.chartConfig
140+
};
141+
}, [props.chartConfig]);
142+
153143
const { dimensions, measures } = usePrepareDimensionsAndMeasures(
154144
props.dimensions,
155145
props.measures,
@@ -164,7 +154,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
164154

165155
const dataKeys = measures.map(({ accessor }) => accessor);
166156
const colorSecondY = chartConfig.secondYAxis
167-
? dataKeys.findIndex((key) => key === chartConfig.secondYAxis.dataKey)
157+
? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
168158
: 0;
169159

170160
const onDataPointClickInternal = useCallback(
@@ -217,7 +207,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
217207
);
218208

219209
const measureAxisProps = {
220-
axisLine: chartConfig.yAxisVisible ?? false,
210+
axisLine: chartConfig.yAxisVisible,
221211
tickLine: tickLineConfig,
222212
tickFormatter: primaryMeasure?.formatter,
223213
interval: 0
@@ -259,11 +249,11 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
259249
>
260250
<ComposedChartLib margin={marginChart} data={dataset} layout={layout}>
261251
<CartesianGrid
262-
vertical={chartConfig.gridVertical ?? false}
252+
vertical={chartConfig.gridVertical}
263253
horizontal={chartConfig.gridHorizontal}
264-
stroke={chartConfig.gridStroke ?? ThemingParameters.sapList_BorderColor}
254+
stroke={chartConfig.gridStroke}
265255
/>
266-
{(chartConfig.xAxisVisible ?? true) &&
256+
{chartConfig.xAxisVisible &&
267257
dimensions.map((dimension, index) => {
268258
let AxisComponent;
269259
const axisProps = {
@@ -302,7 +292,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
302292
/>
303293
)}
304294

305-
{chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'horizontal' && (
295+
{chartConfig.secondYAxis?.dataKey && layout === 'horizontal' && (
306296
<YAxis
307297
dataKey={chartConfig.secondYAxis.dataKey}
308298
stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
@@ -312,7 +302,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
312302
yAxisId="secondary"
313303
/>
314304
)}
315-
{chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'vertical' && (
305+
{chartConfig.secondYAxis?.dataKey && layout === 'vertical' && (
316306
<XAxis
317307
dataKey={chartConfig.secondYAxis.dataKey}
318308
stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
@@ -333,8 +323,8 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
333323
xAxisId={layout === 'vertical' ? 'primary' : undefined}
334324
/>
335325
)}
336-
<Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
337-
{!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
326+
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
327+
{!noLegend && <Legend verticalAlign={chartConfig.legendPosition} onClick={onItemLegendClick} />}
338328
{measures?.map((element, index) => {
339329
const ChartElement = (ChartTypes[element.type] as any) as FC<any>;
340330

@@ -375,11 +365,9 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
375365
}
376366

377367
if (layout === 'vertical') {
378-
chartElementProps.xAxisId =
379-
chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
368+
chartElementProps.xAxisId = chartConfig.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
380369
} else {
381-
chartElementProps.yAxisId =
382-
chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
370+
chartElementProps.yAxisId = chartConfig.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
383371
}
384372
return (
385373
<ChartElement

0 commit comments

Comments
 (0)