Skip to content

Commit 4a415f6

Browse files
MarcusNotheisMarcusNotheis
committed
WIP: useMemo for config
1 parent c547ce0 commit 4a415f6

File tree

9 files changed

+82
-65
lines changed

9 files changed

+82
-65
lines changed

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
22
import bestContrast from 'get-best-contrast-color';
3-
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
3+
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, 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';
88
import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
99
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
1010
import { useChartData } from '../../util/populateData';
11-
import { formatTooltipLabel, getTextWidth, mergeConfig } from '../../util/utils';
11+
import { formatTooltipLabel, getTextWidth, useMergedConfig } from '../../util/utils';
1212
import { BarChartPlaceholder } from './Placeholder';
1313

1414
export interface BarChartPropTypes extends ChartBaseProps {}
@@ -59,8 +59,8 @@ const BarChart = withChartContainer(
5959
}
6060
}, [chartRef.current, legendRef.current, noLegend]);
6161

62-
const mergedOptions = mergeConfig(
63-
{
62+
const barChartDefaultConfig = useMemo(() => {
63+
return {
6464
scales: {
6565
xAxes: [
6666
{
@@ -108,9 +108,10 @@ const BarChart = withChartContainer(
108108
}
109109
}
110110
}
111-
},
112-
options
113-
);
111+
};
112+
}, [valueAxisFormatter, categoryAxisFormatter]);
113+
114+
const mergedOptions = useMergedConfig(barChartDefaultConfig, options);
114115

115116
return (
116117
<>

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
22
import bestContrast from 'get-best-contrast-color';
3-
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
3+
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, 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';
88
import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
99
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
1010
import { useChartData } from '../../util/populateData';
11-
import { formatTooltipLabel, getTextHeight, getTextWidth, mergeConfig } from '../../util/utils';
11+
import { formatTooltipLabel, getTextHeight, getTextWidth, useMergedConfig } from '../../util/utils';
1212
import { ColumnChartPlaceholder } from './Placeholder';
1313

1414
export interface ColumnChartPropTypes extends ChartBaseProps {}
@@ -59,8 +59,8 @@ const ColumnChart = withChartContainer(
5959
}
6060
}, [chartRef.current, legendRef.current, noLegend]);
6161

62-
const mergedOptions = mergeConfig(
63-
{
62+
const columnChartDefaultConfig = useMemo(() => {
63+
return {
6464
scales: {
6565
xAxes: [
6666
{
@@ -111,9 +111,10 @@ const ColumnChart = withChartContainer(
111111
}
112112
}
113113
}
114-
},
115-
options
116-
);
114+
};
115+
}, [categoryAxisFormatter, valueAxisFormatter]);
116+
117+
const mergedOptions = useMergedConfig(columnChartDefaultConfig, options);
117118

118119
return (
119120
<>

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
2-
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
2+
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
33
import { Pie } from 'react-chartjs-2';
44
import { useTheme } from 'react-jss';
55
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
66
import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
77
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
88
import { useChartData } from '../../util/populateData';
9-
import { formatTooltipLabelForPieCharts, mergeConfig } from '../../util/utils';
9+
import { formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/utils';
1010
import { PieChartPlaceholder } from '../PieChart/Placeholder';
1111

1212
export interface DonutChartPropTypes extends ChartBaseProps {}
@@ -30,8 +30,8 @@ const DonutChart = withChartContainer(
3030
const theme: any = useTheme();
3131
const data = useChartData(labels, datasets, colors, theme.theme, true);
3232

33-
const mergedOptions = mergeConfig(
34-
{
33+
const donutChartDefaultConfig = useMemo(() => {
34+
return {
3535
cutoutPercentage: 70,
3636
tooltips: {
3737
callbacks: {
@@ -48,9 +48,10 @@ const DonutChart = withChartContainer(
4848
formatter: valueAxisFormatter
4949
}
5050
}
51-
},
52-
options
53-
);
51+
};
52+
}, [categoryAxisFormatter, valueAxisFormatter]);
53+
54+
const mergedOptions = useMergedConfig(donutChartDefaultConfig, options);
5455

5556
const chartRef = useConsolidatedRef<any>(ref);
5657
const legendRef: RefObject<HTMLDivElement> = useRef();

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
2-
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
2+
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, 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';
77
import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
88
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
99
import { useChartData } from '../../util/populateData';
10-
import { formatTooltipLabel, mergeConfig } from '../../util/utils';
10+
import { formatTooltipLabel, useMergedConfig } from '../../util/utils';
1111
import { LineChartPlaceholder } from './Placeholder';
1212

1313
export interface LineChartPropTypes extends ChartBaseProps {}
@@ -28,8 +28,8 @@ const LineChart = withChartContainer(
2828
noLegend
2929
} = props;
3030

31-
const chartOptions = mergeConfig(
32-
{
31+
const lineChartDefaultConfig = useMemo(() => {
32+
return {
3333
scales: {
3434
yAxes: [
3535
{
@@ -53,9 +53,9 @@ const LineChart = withChartContainer(
5353
formatter: valueAxisFormatter
5454
}
5555
}
56-
},
57-
options
58-
);
56+
};
57+
}, [categoryAxisFormatter, valueAxisFormatter]);
58+
const chartOptions = useMergedConfig(lineChartDefaultConfig, options);
5959

6060
const theme: any = useTheme();
6161
const data = useChartData(labels, datasets, colors, theme.theme);

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
2-
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
2+
import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
33
import { Pie } from 'react-chartjs-2';
44
import { useTheme } from 'react-jss';
55
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
66
import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
77
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
88
import { useChartData } from '../../util/populateData';
9-
import { formatTooltipLabelForPieCharts, mergeConfig } from '../../util/utils';
9+
import { formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/utils';
1010
import { PieChartPlaceholder } from './Placeholder';
1111

1212
export interface PieChartPropTypes extends ChartBaseProps {}
@@ -30,8 +30,8 @@ const PieChart = withChartContainer(
3030
const theme: any = useTheme();
3131
const data = useChartData(labels, datasets, colors, theme.theme, true);
3232

33-
const mergedOptions = mergeConfig(
34-
{
33+
const pieChartDefaultConfig = useMemo(() => {
34+
return {
3535
tooltips: {
3636
callbacks: {
3737
label: formatTooltipLabelForPieCharts(categoryAxisFormatter, valueAxisFormatter)
@@ -47,9 +47,10 @@ const PieChart = withChartContainer(
4747
formatter: valueAxisFormatter
4848
}
4949
}
50-
},
51-
options
52-
);
50+
};
51+
}, [categoryAxisFormatter, valueAxisFormatter]);
52+
53+
const mergedOptions = useMergedConfig(pieChartDefaultConfig, options);
5354

5455
const chartRef = useConsolidatedRef<any>(ref);
5556
const legendRef: RefObject<HTMLDivElement> = useRef();

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
2-
import React, { FC, forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
2+
import React, { FC, forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
33
import { Radar } from 'react-chartjs-2';
44
import { useTheme } from 'react-jss';
55
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
66
import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
77
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
88
import { useChartData } from '../../util/populateData';
9-
import { formatTooltipLabel, mergeConfig } from '../../util/utils';
9+
import { formatTooltipLabel, useMergedConfig } from '../../util/utils';
1010

1111
export interface RadarChartPropTypes extends ChartBaseProps {}
1212

@@ -29,8 +29,8 @@ const RadarChart: FC<RadarChartPropTypes> = withChartContainer(
2929
const theme: any = useTheme();
3030
const data = useChartData(labels, datasets, colors, theme.theme);
3131

32-
const mergedOptions = mergeConfig(
33-
{
32+
const radarChartDefaultConfig = useMemo(() => {
33+
return {
3434
scale: {
3535
ticks: {
3636
callback: valueAxisFormatter
@@ -44,9 +44,9 @@ const RadarChart: FC<RadarChartPropTypes> = withChartContainer(
4444
plugins: {
4545
datalabels: false
4646
}
47-
},
48-
options
49-
);
47+
};
48+
}, [categoryAxisFormatter, valueAxisFormatter]);
49+
const mergedOptions = useMergedConfig(radarChartDefaultConfig, options);
5050

5151
const chartRef = useConsolidatedRef<any>(ref);
5252
const legendRef: RefObject<HTMLDivElement> = useRef();

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

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { StyleClassHelper } from '@ui5/webcomponents-react-base';
22
import { ChartOptions } from 'chart.js';
3-
import React, { CSSProperties, forwardRef, Ref } from 'react';
3+
import React, { CSSProperties, forwardRef, Ref, useMemo } from 'react';
44
// @ts-ignore
55
import { createUseStyles } from 'react-jss';
66
import { CommonProps } from '../../interfaces/CommonProps';
77
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
8-
import { mergeConfig } from '../../util/utils';
8+
import { useMergedConfig } from '../../util/utils';
99
import { DonutChart } from '../DonutChart';
1010

1111
export interface RadialChartPropTypes extends CommonProps {
@@ -42,26 +42,29 @@ const RadialChart = forwardRef((props: RadialChartPropTypes, ref: Ref<HTMLDivEle
4242
const { maxValue, value, displayValue, style, className, colors, options, width, height } = props;
4343

4444
const data = [value, maxValue - value];
45-
const mergedOptions = mergeConfig(
46-
{
45+
const radialChartDefaultConfig = useMemo(() => {
46+
return {
4747
cutoutPercentage: 90,
4848
tooltips: {
4949
enabled: false
5050
},
5151
plugins: {
5252
datalabels: false
5353
}
54-
},
55-
options
56-
);
54+
};
55+
}, []);
56+
const mergedOptions = useMergedConfig(radialChartDefaultConfig, options);
5757

5858
const classes = useStyles();
5959

60-
const radialChartContainerStyles = {
61-
width: `${width}px`,
62-
height: `${height}px`,
63-
...style
64-
};
60+
const radialChartContainerStyles = useMemo(
61+
() => ({
62+
width: `${width}px`,
63+
height: `${height}px`,
64+
...style
65+
}),
66+
[width, height, style]
67+
);
6568

6669
const outerClasses = StyleClassHelper.of(classes.radialChart);
6770
if (className) {

‎packages/charts/src/internal/ChartContainer/withChartContainer.tsx

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ComponentType, CSSProperties, forwardRef, Ref } from 'react';
1+
import React, { ComponentType, CSSProperties, forwardRef, Ref, useMemo } from 'react';
22
// @ts-ignore
33
import { createUseStyles } from 'react-jss';
44
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
@@ -37,17 +37,22 @@ export const withChartContainer = (Component: ComponentType<any>) => {
3737
classNames = `${classNames} ${className}`;
3838
}
3939

40-
const loadingIndicator = getLoadingState(loading, datasets, (Component as any).LoadingPlaceholder);
40+
const loadingIndicator = useMemo(() => {
41+
return getLoadingState(loading, datasets, (Component as any).LoadingPlaceholder);
42+
}, [loading, datasets, Component]);
4143

42-
const inlineStyle: CSSProperties = {
43-
position: 'relative',
44-
paddingTop: '6px',
45-
width: `${props.width}px`,
46-
height: `${props.height}px`,
47-
...style
48-
};
44+
const inlineStyle: CSSProperties = useMemo(
45+
() => ({
46+
position: 'relative',
47+
paddingTop: '6px',
48+
width: `${props.width}px`,
49+
height: `${props.height}px`,
50+
...style
51+
}),
52+
[props.width, props.height, style]
53+
);
4954

50-
const chartHeight = noLegend ? height : height - 60;
55+
const chartHeight = useMemo(() => (noLegend ? height : height - 60), [noLegend, height]);
5156

5257
return (
5358
<div className={classNames} style={inlineStyle} title={tooltip} slot={slot}>

‎packages/charts/src/util/utils.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import merge from 'deepmerge';
22
import { defaultFont } from '../config';
3+
import { useMemo } from 'react';
34

45
export const getCurrentChartElementFromContext = (context) => {
56
const datasetMeta = context.chart.getDatasetMeta(context.datasetIndex);
@@ -27,7 +28,11 @@ const combineMerge = (target, source, options) => {
2728
return destination;
2829
};
2930

30-
export const mergeConfig = (x, y, options?) => merge(x, y, { ...options, arrayMerge: combineMerge });
31+
export const useMergedConfig = (x, y) => {
32+
return useMemo(() => {
33+
return merge(x, y, { arrayMerge: combineMerge });
34+
}, [x, y]);
35+
};
3136

3237
export const formatTooltipLabel = (categoryFormatter, valueFormatter, valueAccessor = 'yLabel') => (
3338
tooltipItem,

0 commit comments

Comments
 (0)