Refactor/charts

packages/charts/package.json

@@ -17,7 +17,7 @@
     "postbuild": "rollup -c"
   },
   "devDependencies": {
-    "@types/chart.js": "^2.7.53"
+    "@types/chart.js": "^2.7.56"
   },
   "dependencies": {
     "@ui5/webcomponents-react-base": "0.4.2-rc.7",

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

@@ -114,5 +114,8 @@ exports[`BarChart loading placeholder 1`] = `
       </linearGradient>
     </defs>
   </svg>
+  <div
+    class="legend"
+  />
 </div>
 `;

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

@@ -1,11 +1,13 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
 import bestContrast from 'get-best-contrast-color';
-import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { forwardRef, Ref, 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 { InternalProps } from '../../interfaces/InternalProps';
+import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
+import { withChartContainer } from '../../internal/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
 import { formatTooltipLabel, getTextWidth, useMergedConfig } from '../../util/utils';
@@ -25,38 +27,14 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref<any>) =
     colors,
     width,
     height,
-    noLegend
-  } = props as BarChartPropTypes;
+    noLegend,
+    legendRef
+  } = props as BarChartPropTypes & InternalProps;
 
   const theme: any = useTheme();
   const data = useChartData(labels, datasets, colors, theme.theme);
 
   const chartRef = useConsolidatedRef<any>(ref);
-  const legendRef: RefObject<HTMLDivElement> = useRef();
-
-  const handleLegendItemPress = useCallback(
-    (e) => {
-      const clickTarget = (e.currentTarget as unknown) as HTMLLIElement;
-      const datasetIndex = parseInt(clickTarget.dataset.datasetindex);
-      const { chartInstance } = chartRef.current;
-      const meta = chartInstance.getDatasetMeta(datasetIndex);
-      meta.hidden = meta.hidden === null ? !chartInstance.data.datasets[datasetIndex].hidden : null;
-      chartInstance.update();
-      clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset';
-    },
-    [legendRef.current, chartRef.current]
-  );
-
-  useEffect(() => {
-    if (noLegend) {
-      legendRef.current.innerHTML = '';
-    } else {
-      legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend();
-      legendRef.current.querySelectorAll('li').forEach((legendItem) => {
-        legendItem.addEventListener('click', handleLegendItemPress);
-      });
-    }
-  }, [chartRef.current, legendRef.current, noLegend]);
 
   const barChartDefaultConfig = useMemo(() => {
     return {
@@ -109,24 +87,24 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref<any>) =
       }
     };
   }, [valueAxisFormatter, categoryAxisFormatter]);
-
   const mergedOptions = useMergedConfig(barChartDefaultConfig, options);
 
+  const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
+  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
+
   return (
-    <>
-      <HorizontalBar
-        ref={chartRef}
-        data={data}
-        height={height}
-        width={width}
-        options={mergedOptions}
-        getDatasetAtEvent={getDatasetAtEvent}
-        getElementAtEvent={getElementAtEvent}
-      />
-      <div ref={legendRef} className="legend" />
-    </>
+    <HorizontalBar
+      ref={chartRef}
+      data={data}
+      height={height}
+      width={width}
+      options={mergedOptions}
+      getDatasetAtEvent={getDatasetAtEvent}
+      getElementAtEvent={getElementAtEvent}
+    />
   );
 });
+
 // @ts-ignore
 BarChartComponent.LoadingPlaceholder = BarChartPlaceholder;
 const BarChart = withChartContainer(BarChartComponent);

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

@@ -114,5 +114,8 @@ exports[`ColumnChart loading placeholder 1`] = `
       </linearGradient>
     </defs>
   </svg>
+  <div
+    class="legend"
+  />
 </div>
 `;

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

@@ -1,11 +1,13 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
 import bestContrast from 'get-best-contrast-color';
-import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { forwardRef, Ref, 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 { InternalProps } from '../../interfaces/InternalProps';
+import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
+import { withChartContainer } from '../../internal/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
 import { formatTooltipLabel, getTextHeight, getTextWidth, useMergedConfig } from '../../util/utils';
@@ -25,38 +27,17 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref<a
     options,
     width,
     height,
-    noLegend
-  } = props;
+    noLegend,
+    legendRef
+  } = props as ColumnChartPropTypes & InternalProps;
 
   const theme: any = useTheme();
   const data = useChartData(labels, datasets, colors, theme.theme);
 
   const chartRef = useConsolidatedRef<any>(ref);
-  const legendRef: RefObject<HTMLDivElement> = useRef();
 
-  const handleLegendItemPress = useCallback(
-    (e) => {
-      const clickTarget = (e.currentTarget as unknown) as HTMLLIElement;
-      const datasetIndex = parseInt(clickTarget.dataset.datasetindex);
-      const { chartInstance } = chartRef.current;
-      const meta = chartInstance.getDatasetMeta(datasetIndex);
-      meta.hidden = meta.hidden === null ? !chartInstance.data.datasets[datasetIndex].hidden : null;
-      chartInstance.update();
-      clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset';
-    },
-    [legendRef.current, chartRef.current]
-  );
-
-  useEffect(() => {
-    if (noLegend) {
-      legendRef.current.innerHTML = '';
-    } else {
-      legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend();
-      legendRef.current.querySelectorAll('li').forEach((legendItem) => {
-        legendItem.addEventListener('click', handleLegendItemPress);
-      });
-    }
-  }, [chartRef.current, legendRef.current, noLegend]);
+  const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
+  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
 
   const columnChartDefaultConfig = useMemo(() => {
     return {
@@ -116,18 +97,15 @@ const ColumnChartComponent = forwardRef((props: ColumnChartPropTypes, ref: Ref<a
   const mergedOptions = useMergedConfig(columnChartDefaultConfig, options);
 
   return (
-    <>
-      <Bar
-        ref={chartRef}
-        data={data}
-        height={height}
-        width={width}
-        options={mergedOptions}
-        getDatasetAtEvent={getDatasetAtEvent}
-        getElementAtEvent={getElementAtEvent}
-      />
-      <div ref={legendRef} className="legend" />
-    </>
+    <Bar
+      ref={chartRef}
+      data={data}
+      height={height}
+      width={width}
+      options={mergedOptions}
+      getDatasetAtEvent={getDatasetAtEvent}
+      getElementAtEvent={getElementAtEvent}
+    />
   );
 });
 // @ts-ignore

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

@@ -77,5 +77,8 @@ exports[`DonutChart loading placeholder 1`] = `
       </linearGradient>
     </defs>
   </svg>
+  <div
+    class="legend"
+  />
 </div>
 `;

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

@@ -1,9 +1,11 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
-import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { forwardRef, Ref, 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 { InternalProps } from '../../interfaces/InternalProps';
+import { useLegend, usePieLegendItemClickHandler } from '../../internal/ChartLegend';
+import { withChartContainer } from '../../internal/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
 import { formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/utils';
@@ -23,8 +25,9 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Ref<any
     options,
     width,
     height,
-    noLegend
-  } = props;
+    noLegend,
+    legendRef
+  } = props as DonutChartPropTypes & InternalProps;
 
   const theme: any = useTheme();
   const data = useChartData(labels, datasets, colors, theme.theme, true);
@@ -53,45 +56,20 @@ const DonutChartComponent = forwardRef((props: DonutChartPropTypes, ref: Ref<any
   const mergedOptions = useMergedConfig(donutChartDefaultConfig, options);
 
   const chartRef = useConsolidatedRef<any>(ref);
-  const legendRef: RefObject<HTMLDivElement> = useRef();
 
-  const handleLegendItemPress = useCallback(
-    (e) => {
-      const clickTarget = (e.currentTarget as unknown) as HTMLLIElement;
-      const datasetIndex = parseInt(clickTarget.dataset.datasetindex);
-      const { chartInstance } = chartRef.current;
-      const meta = chartInstance.getDatasetMeta(0).data[datasetIndex];
-      meta.hidden = !meta.hidden;
-      chartInstance.update();
-      clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset';
-    },
-    [legendRef.current, chartRef.current]
-  );
-
-  useEffect(() => {
-    if (noLegend) {
-      legendRef.current.innerHTML = '';
-    } else {
-      legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend();
-      legendRef.current.querySelectorAll('li').forEach((legendItem) => {
-        legendItem.addEventListener('click', handleLegendItemPress);
-      });
-    }
-  }, [chartRef.current, legendRef.current, noLegend]);
+  const handleLegendItemPress = usePieLegendItemClickHandler(chartRef, legendRef);
+  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
 
   return (
-    <>
-      <Pie
-        ref={chartRef}
-        data={data}
-        height={height}
-        width={width}
-        options={mergedOptions}
-        getDatasetAtEvent={getDatasetAtEvent}
-        getElementAtEvent={getElementAtEvent}
-      />
-      <div ref={legendRef} className="legend" />
-    </>
+    <Pie
+      ref={chartRef}
+      data={data}
+      height={height}
+      width={width}
+      options={mergedOptions}
+      getDatasetAtEvent={getDatasetAtEvent}
+      getElementAtEvent={getElementAtEvent}
+    />
   );
 });
 // @ts-ignore

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

@@ -77,5 +77,8 @@ exports[`LineChart loading placeholder 1`] = `
       </linearGradient>
     </defs>
   </svg>
+  <div
+    class="legend"
+  />
 </div>
 `;

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

@@ -1,10 +1,12 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
-import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { forwardRef, Ref, 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 { InternalProps } from '../../interfaces/InternalProps';
+import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
+import { withChartContainer } from '../../internal/withChartContainer';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
 import { formatTooltipLabel, useMergedConfig } from '../../util/utils';
@@ -24,8 +26,9 @@ const LineChartComponent = forwardRef((props: LineChartPropTypes, ref: Ref<any>)
     getDatasetAtEvent,
     width,
     height,
-    noLegend
-  } = props;
+    noLegend,
+    legendRef
+  } = props as LineChartPropTypes & InternalProps;
 
   const lineChartDefaultConfig = useMemo(() => {
     return {
@@ -60,44 +63,19 @@ const LineChartComponent = forwardRef((props: LineChartPropTypes, ref: Ref<any>)
   const data = useChartData(labels, datasets, colors, theme.theme);
 
   const chartRef = useConsolidatedRef<any>(ref);
-  const legendRef: RefObject<HTMLDivElement> = useRef();
-  const handleLegendItemPress = useCallback(
-    (e) => {
-      const clickTarget = (e.currentTarget as unknown) as HTMLLIElement;
-      const datasetIndex = parseInt(clickTarget.dataset.datasetindex);
-      const { chartInstance } = chartRef.current;
-      const meta = chartInstance.getDatasetMeta(datasetIndex);
-      meta.hidden = meta.hidden === null ? !chartInstance.data.datasets[datasetIndex].hidden : null;
-      chartInstance.update();
-      clickTarget.style.textDecoration = meta.hidden ? 'line-through' : 'unset';
-    },
-    [legendRef.current, chartRef.current]
-  );
-
-  useEffect(() => {
-    if (noLegend) {
-      legendRef.current.innerHTML = '';
-    } else {
-      legendRef.current.innerHTML = chartRef.current.chartInstance.generateLegend();
-      legendRef.current.querySelectorAll('li').forEach((legendItem) => {
-        legendItem.addEventListener('click', handleLegendItemPress);
-      });
-    }
-  }, [chartRef.current, legendRef.current, noLegend]);
+  const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
+  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);
 
   return (
-    <>
-      <Line
-        ref={chartRef}
-        data={data}
-        height={height}
-        width={width}
-        options={chartOptions}
-        getDatasetAtEvent={getDatasetAtEvent}
-        getElementAtEvent={getElementAtEvent}
-      />
-      <div ref={legendRef} className="legend" />
-    </>
+    <Line
+      ref={chartRef}
+      data={data}
+      height={height}
+      width={width}
+      options={chartOptions}
+      getDatasetAtEvent={getDatasetAtEvent}
+      getElementAtEvent={getElementAtEvent}
+    />
   );
 });
 // @ts-ignore