WIP: useMemo for config

SAP · Jul 19, 2019 · 4a415f6 · 4a415f6
1 parent c547ce0
commit 4a415f6
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 65 deletions.
diff --git a/packages/charts/src/components/BarChart/index.tsx b/packages/charts/src/components/BarChart/index.tsx
@@ -1,14 +1,14 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
 import bestContrast from 'get-best-contrast-color';
-import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
+import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
 import { HorizontalBar } from 'react-chartjs-2';
 import { useTheme } from 'react-jss';
 import { DEFAULT_OPTIONS } from '../../config';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
 import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatTooltipLabel, getTextWidth, mergeConfig } from '../../util/utils';
+import { formatTooltipLabel, getTextWidth, useMergedConfig } from '../../util/utils';
 import { BarChartPlaceholder } from './Placeholder';
 
 export interface BarChartPropTypes extends ChartBaseProps {}
@@ -59,8 +59,8 @@ const BarChart = withChartContainer(
       }
     }, [chartRef.current, legendRef.current, noLegend]);
 
-    const mergedOptions = mergeConfig(
-      {
+    const barChartDefaultConfig = useMemo(() => {
+      return {
         scales: {
           xAxes: [
             {
@@ -108,9 +108,10 @@ const BarChart = withChartContainer(
             }
           }
         }
-      },
-      options
-    );
+      };
+    }, [valueAxisFormatter, categoryAxisFormatter]);
+
+    const mergedOptions = useMergedConfig(barChartDefaultConfig, options);
 
     return (
       <>

diff --git a/packages/charts/src/components/ColumnChart/index.tsx b/packages/charts/src/components/ColumnChart/index.tsx
@@ -1,14 +1,14 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
 import bestContrast from 'get-best-contrast-color';
-import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
+import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
 import { Bar } from 'react-chartjs-2';
 import { useTheme } from 'react-jss';
 import { DEFAULT_OPTIONS } from '../../config';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
 import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatTooltipLabel, getTextHeight, getTextWidth, mergeConfig } from '../../util/utils';
+import { formatTooltipLabel, getTextHeight, getTextWidth, useMergedConfig } from '../../util/utils';
 import { ColumnChartPlaceholder } from './Placeholder';
 
 export interface ColumnChartPropTypes extends ChartBaseProps {}
@@ -59,8 +59,8 @@ const ColumnChart = withChartContainer(
       }
     }, [chartRef.current, legendRef.current, noLegend]);
 
-    const mergedOptions = mergeConfig(
-      {
+    const columnChartDefaultConfig = useMemo(() => {
+      return {
         scales: {
           xAxes: [
             {
@@ -111,9 +111,10 @@ const ColumnChart = withChartContainer(
             }
           }
         }
-      },
-      options
-    );
+      };
+    }, [categoryAxisFormatter, valueAxisFormatter]);
+
+    const mergedOptions = useMergedConfig(columnChartDefaultConfig, options);
 
     return (
       <>

diff --git a/packages/charts/src/components/DonutChart/index.tsx b/packages/charts/src/components/DonutChart/index.tsx
@@ -1,12 +1,12 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
-import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
+import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
 import { Pie } from 'react-chartjs-2';
 import { useTheme } from 'react-jss';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
 import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatTooltipLabelForPieCharts, mergeConfig } from '../../util/utils';
+import { formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/utils';
 import { PieChartPlaceholder } from '../PieChart/Placeholder';
 
 export interface DonutChartPropTypes extends ChartBaseProps {}
@@ -30,8 +30,8 @@ const DonutChart = withChartContainer(
     const theme: any = useTheme();
     const data = useChartData(labels, datasets, colors, theme.theme, true);
 
-    const mergedOptions = mergeConfig(
-      {
+    const donutChartDefaultConfig = useMemo(() => {
+      return {
         cutoutPercentage: 70,
         tooltips: {
           callbacks: {
@@ -48,9 +48,10 @@ const DonutChart = withChartContainer(
             formatter: valueAxisFormatter
           }
         }
-      },
-      options
-    );
+      };
+    }, [categoryAxisFormatter, valueAxisFormatter]);
+
+    const mergedOptions = useMergedConfig(donutChartDefaultConfig, options);
 
     const chartRef = useConsolidatedRef<any>(ref);
     const legendRef: RefObject<HTMLDivElement> = useRef();

diff --git a/packages/charts/src/components/LineChart/index.tsx b/packages/charts/src/components/LineChart/index.tsx
@@ -1,13 +1,13 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
-import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
+import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
 import { Line } from 'react-chartjs-2';
 import { useTheme } from 'react-jss';
 import { DEFAULT_OPTIONS } from '../../config';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
 import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatTooltipLabel, mergeConfig } from '../../util/utils';
+import { formatTooltipLabel, useMergedConfig } from '../../util/utils';
 import { LineChartPlaceholder } from './Placeholder';
 
 export interface LineChartPropTypes extends ChartBaseProps {}
@@ -28,8 +28,8 @@ const LineChart = withChartContainer(
       noLegend
     } = props;
 
-    const chartOptions = mergeConfig(
-      {
+    const lineChartDefaultConfig = useMemo(() => {
+      return {
         scales: {
           yAxes: [
             {
@@ -53,9 +53,9 @@ const LineChart = withChartContainer(
             formatter: valueAxisFormatter
           }
         }
-      },
-      options
-    );
+      };
+    }, [categoryAxisFormatter, valueAxisFormatter]);
+    const chartOptions = useMergedConfig(lineChartDefaultConfig, options);
 
     const theme: any = useTheme();
     const data = useChartData(labels, datasets, colors, theme.theme);

diff --git a/packages/charts/src/components/PieChart/index.tsx b/packages/charts/src/components/PieChart/index.tsx
@@ -1,12 +1,12 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
-import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
+import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
 import { Pie } from 'react-chartjs-2';
 import { useTheme } from 'react-jss';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
 import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatTooltipLabelForPieCharts, mergeConfig } from '../../util/utils';
+import { formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/utils';
 import { PieChartPlaceholder } from './Placeholder';
 
 export interface PieChartPropTypes extends ChartBaseProps {}
@@ -30,8 +30,8 @@ const PieChart = withChartContainer(
     const theme: any = useTheme();
     const data = useChartData(labels, datasets, colors, theme.theme, true);
 
-    const mergedOptions = mergeConfig(
-      {
+    const pieChartDefaultConfig = useMemo(() => {
+      return {
         tooltips: {
           callbacks: {
             label: formatTooltipLabelForPieCharts(categoryAxisFormatter, valueAxisFormatter)
@@ -47,9 +47,10 @@ const PieChart = withChartContainer(
             formatter: valueAxisFormatter
           }
         }
-      },
-      options
-    );
+      };
+    }, [categoryAxisFormatter, valueAxisFormatter]);
+
+    const mergedOptions = useMergedConfig(pieChartDefaultConfig, options);
 
     const chartRef = useConsolidatedRef<any>(ref);
     const legendRef: RefObject<HTMLDivElement> = useRef();

diff --git a/packages/charts/src/components/RadarChart/index.tsx b/packages/charts/src/components/RadarChart/index.tsx
@@ -1,12 +1,12 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
-import React, { FC, forwardRef, Ref, RefObject, useCallback, useEffect, useRef } from 'react';
+import React, { FC, forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
 import { Radar } from 'react-chartjs-2';
 import { useTheme } from 'react-jss';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
 import { withChartContainer } from '../../internal/ChartContainer/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatTooltipLabel, mergeConfig } from '../../util/utils';
+import { formatTooltipLabel, useMergedConfig } from '../../util/utils';
 
 export interface RadarChartPropTypes extends ChartBaseProps {}
 
@@ -29,8 +29,8 @@ const RadarChart: FC<RadarChartPropTypes> = withChartContainer(
     const theme: any = useTheme();
     const data = useChartData(labels, datasets, colors, theme.theme);
 
-    const mergedOptions = mergeConfig(
-      {
+    const radarChartDefaultConfig = useMemo(() => {
+      return {
         scale: {
           ticks: {
             callback: valueAxisFormatter
@@ -44,9 +44,9 @@ const RadarChart: FC<RadarChartPropTypes> = withChartContainer(
         plugins: {
           datalabels: false
         }
-      },
-      options
-    );
+      };
+    }, [categoryAxisFormatter, valueAxisFormatter]);
+    const mergedOptions = useMergedConfig(radarChartDefaultConfig, options);
 
     const chartRef = useConsolidatedRef<any>(ref);
     const legendRef: RefObject<HTMLDivElement> = useRef();

diff --git a/packages/charts/src/components/RadialChart/index.tsx b/packages/charts/src/components/RadialChart/index.tsx
@@ -1,11 +1,11 @@
 import { StyleClassHelper } from '@ui5/webcomponents-react-base';
 import { ChartOptions } from 'chart.js';
-import React, { CSSProperties, forwardRef, Ref } from 'react';
+import React, { CSSProperties, forwardRef, Ref, useMemo } from 'react';
 // @ts-ignore
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
-import { mergeConfig } from '../../util/utils';
+import { useMergedConfig } from '../../util/utils';
 import { DonutChart } from '../DonutChart';
 
 export interface RadialChartPropTypes extends CommonProps {
@@ -42,26 +42,29 @@ const RadialChart = forwardRef((props: RadialChartPropTypes, ref: Ref<HTMLDivEle
   const { maxValue, value, displayValue, style, className, colors, options, width, height } = props;
 
   const data = [value, maxValue - value];
-  const mergedOptions = mergeConfig(
-    {
+  const radialChartDefaultConfig = useMemo(() => {
+    return {
       cutoutPercentage: 90,
       tooltips: {
         enabled: false
       },
       plugins: {
         datalabels: false
       }
-    },
-    options
-  );
+    };
+  }, []);
+  const mergedOptions = useMergedConfig(radialChartDefaultConfig, options);
 
   const classes = useStyles();
 
-  const radialChartContainerStyles = {
-    width: `${width}px`,
-    height: `${height}px`,
-    ...style
-  };
+  const radialChartContainerStyles = useMemo(
+    () => ({
+      width: `${width}px`,
+      height: `${height}px`,
+      ...style
+    }),
+    [width, height, style]
+  );
 
   const outerClasses = StyleClassHelper.of(classes.radialChart);
   if (className) {

diff --git a/packages/charts/src/internal/ChartContainer/withChartContainer.tsx b/packages/charts/src/internal/ChartContainer/withChartContainer.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentType, CSSProperties, forwardRef, Ref } from 'react';
+import React, { ComponentType, CSSProperties, forwardRef, Ref, useMemo } from 'react';
 // @ts-ignore
 import { createUseStyles } from 'react-jss';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
@@ -37,17 +37,22 @@ export const withChartContainer = (Component: ComponentType<any>) => {
       classNames = `${classNames} ${className}`;
     }
 
-    const loadingIndicator = getLoadingState(loading, datasets, (Component as any).LoadingPlaceholder);
+    const loadingIndicator = useMemo(() => {
+      return getLoadingState(loading, datasets, (Component as any).LoadingPlaceholder);
+    }, [loading, datasets, Component]);
 
-    const inlineStyle: CSSProperties = {
-      position: 'relative',
-      paddingTop: '6px',
-      width: `${props.width}px`,
-      height: `${props.height}px`,
-      ...style
-    };
+    const inlineStyle: CSSProperties = useMemo(
+      () => ({
+        position: 'relative',
+        paddingTop: '6px',
+        width: `${props.width}px`,
+        height: `${props.height}px`,
+        ...style
+      }),
+      [props.width, props.height, style]
+    );
 
-    const chartHeight = noLegend ? height : height - 60;
+    const chartHeight = useMemo(() => (noLegend ? height : height - 60), [noLegend, height]);
 
     return (
       <div className={classNames} style={inlineStyle} title={tooltip} slot={slot}>

diff --git a/packages/charts/src/util/utils.ts b/packages/charts/src/util/utils.ts
@@ -1,5 +1,6 @@
 import merge from 'deepmerge';
 import { defaultFont } from '../config';
+import { useMemo } from 'react';
 
 export const getCurrentChartElementFromContext = (context) => {
   const datasetMeta = context.chart.getDatasetMeta(context.datasetIndex);
@@ -27,7 +28,11 @@ const combineMerge = (target, source, options) => {
   return destination;
 };
 
-export const mergeConfig = (x, y, options?) => merge(x, y, { ...options, arrayMerge: combineMerge });
+export const useMergedConfig = (x, y) => {
+  return useMemo(() => {
+    return merge(x, y, { arrayMerge: combineMerge });
+  }, [x, y]);
+};
 
 export const formatTooltipLabel = (categoryFormatter, valueFormatter, valueAccessor = 'yLabel') => (
   tooltipItem,