First iteration to migrate to Chart.js 3. Making it compile

2026-03-10 17:43:51 +00:00 · 2021-08-29 21:54:21 +02:00
parent aceb2350cf
commit 0572bc2854
6 changed files with 113 additions and 154 deletions
--- a/src/visits/helpers/DefaultChart.tsx
+++ b/src/visits/helpers/DefaultChart.tsx
@@ -1,12 +1,12 @@
-import { useState } from 'react';
-import { Doughnut, HorizontalBar } from 'react-chartjs-2';
+import { useRef } from 'react';
+import { Doughnut, Bar } from 'react-chartjs-2';
 import { keys, values } from 'ramda';
 import classNames from 'classnames';
-import Chart, { ChartData, ChartDataSets, ChartOptions } from 'chart.js';
+import { Chart, ChartData, ChartDataset, ChartOptions, LegendItem } from 'chart.js';
 import { fillTheGaps } from '../../utils/helpers/visits';
 import { Stats } from '../types';
 import { prettify } from '../../utils/helpers/numbers';
-import { pointerOnHover, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
+import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
 import {
  HIGHLIGHTED_COLOR,
  HIGHLIGHTED_COLOR_ALPHA,
@@ -66,7 +66,7 @@ const generateGraphData = (
      borderColor: HIGHLIGHTED_COLOR,
      borderWidth: 2,
    },
-  ].filter(Boolean) as ChartDataSets[],
+  ].filter(Boolean) as ChartDataset[],
 });

 const dropLabelIfHidden = (label: string) => label.startsWith('hidden') ? '' : label;
@@ -79,27 +79,34 @@ const determineHeight = (isBarChart: boolean, labels: string[]): number | undefi
  return isBarChart && labels.length > 20 ? labels.length * 8 : undefined;
 };

-const renderPieChartLegend = ({ config }: Chart) => {
-  const { labels = [], datasets = [] } = config.data ?? {};
-  const { defaultColor } = config.options ?? {} as any;
-  const [{ backgroundColor: colors }] = datasets;
+const renderPieChartLegend = ({ config }: Chart): LegendItem[] => {
+  const { labels = [] /* , datasets = [] */ } = config.data ?? {};
+  // const { defaultColor } = config.options ?? {} as any;
+  // const [{ backgroundColor: colors }] = datasets;

-  return (
-    <ul className="default-chart__pie-chart-legend">
-      {labels.map((label, index) => (
-        <li key={label as string} className="default-chart__pie-chart-legend-item d-flex">
-          <div
-            className="default-chart__pie-chart-legend-item-color"
-            style={{ backgroundColor: (colors as string[])[index] || defaultColor }}
-          />
-          <small className="default-chart__pie-chart-legend-item-text flex-fill">{label}</small>
-        </li>
-      ))}
-    </ul>
-  );
+  return labels.map((label, datasetIndex) => ({
+    datasetIndex,
+    text: label as string,
+  }));
+
+  // TODO
+  // return (
+  //   <ul className="default-chart__pie-chart-legend">
+  //     {labels.map((label, index) => (
+  //       <li key={label as string} className="default-chart__pie-chart-legend-item d-flex">
+  //         <div
+  //           className="default-chart__pie-chart-legend-item-color"
+  //           style={{ backgroundColor: (colors as string[])[index] || defaultColor }}
+  //         />
+  //         <small className="default-chart__pie-chart-legend-item-text flex-fill">{label}</small>
+  //       </li>
+  //     ))}
+  //   </ul>
+  // );
 };

 const chartElementAtEvent = (onClick?: (label: string) => void) => ([ chart ]: [{ _index: number; _chart: Chart }]) => {
+  // TODO Check this function actually works with Chart.js 3
  if (!onClick || !chart) {
    return;
  }
@@ -115,7 +122,8 @@ const statsAreDefined = (stats: Stats | undefined): stats is Stats => !!stats &&
 const DefaultChart = (
  { title, isBarChart = false, stats, max, highlightedStats, highlightedLabel, onClick }: DefaultChartProps,
 ) => {
-  const Component = isBarChart ? HorizontalBar : Doughnut;
+  const Component = isBarChart ? Bar : Doughnut;
+  const chartRef = useRef<typeof Component | undefined>();
  const labels = keys(stats).map(dropLabelIfHidden);
  const data = values(
    !statsAreDefined(highlightedStats) ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
@@ -127,34 +135,38 @@ const DefaultChart = (
    }, { ...stats }),
  );
  const highlightedData = statsAreDefined(highlightedStats) ? fillTheGaps(highlightedStats, labels) : undefined;
-  const [ chartRef, setChartRef ] = useState<HorizontalBar | Doughnut | undefined>();

  const options: ChartOptions = {
-    legend: { display: false },
-    legendCallback: !isBarChart && renderPieChartLegend as any,
-    scales: !isBarChart ? undefined : {
-      xAxes: [
-        {
-          ticks: {
-            beginAtZero: true,
-            precision: 0,
-            callback: prettify,
-            max,
-          },
-          stacked: true,
+    plugins: {
+      legend: {
+        display: false,
+        labels: isBarChart ? undefined : {
+          generateLabels: renderPieChartLegend,
+        },
+      },
+      tooltip: {
+        intersect: !isBarChart,
+        // Do not show tooltip on items with empty label when in a bar chart
+        filter: ({ label }) => !isBarChart || label !== '',
+        callbacks: {
+          label: renderChartLabel,
        },
-      ],
-      yAxes: [{ stacked: true }],
-    },
-    tooltips: {
-      intersect: !isBarChart,
-      // Do not show tooltip on items with empty label when in a bar chart
-      filter: ({ yLabel }) => !isBarChart || yLabel !== '',
-      callbacks: {
-        label: isBarChart ? renderNonDoughnutChartLabel('xLabel') : renderDoughnutChartLabel,
      },
    },
-    onHover: !isBarChart ? undefined : (pointerOnHover) as any, // TODO Types seem to be incorrectly defined in @types/chart.js
+    scales: !isBarChart ? undefined : {
+      x: {
+        beginAtZero: true,
+        stacked: true,
+        max,
+        ticks: {
+          precision: 0,
+          callback: prettify,
+        },
+      },
+      y: { stacked: true },
+    },
+    onHover: isBarChart ? pointerOnHover : undefined,
+    indexAxis: isBarChart ? 'y' : 'x',
  };
  const graphData = generateGraphData(title, isBarChart, labels, data, highlightedData, highlightedLabel);
  const height = determineHeight(isBarChart, labels);
@@ -164,17 +176,20 @@ const DefaultChart = (
    <div className="row">
      <div className={classNames('col-sm-12', { 'col-md-7': !isBarChart })}>
        <Component
-          ref={(element) => setChartRef(element ?? undefined)}
+          ref={(element) => {
+            chartRef.current = element ?? undefined;
+          }}
          key={height}
          data={graphData}
          options={options}
          height={height}
-          getElementAtEvent={chartElementAtEvent(onClick)}
+          getElementAtEvent={chartElementAtEvent(onClick) as any} /* TODO */
        />
      </div>
      {!isBarChart && (
        <div className="col-sm-12 col-md-5">
-          {chartRef?.chartInstance.generateLegend()}
+          No Legend in v3.0 unfortunately :(
+          {/* {chartRef?.chartInstance.generateLegend()} */}
        </div>
      )}
    </div>
--- a/src/visits/helpers/LineChartCard.tsx
+++ b/src/visits/helpers/LineChartCard.tsx
@@ -21,14 +21,14 @@ import {
  startOfISOWeek,
  endOfISOWeek,
 } from 'date-fns';
-import Chart, { ChartData, ChartDataSets, ChartOptions } from 'chart.js';
+import { Chart, ChartData, ChartDataset, ChartOptions } from 'chart.js';
 import { NormalizedVisit, Stats } from '../types';
 import { fillTheGaps } from '../../utils/helpers/visits';
 import { useToggle } from '../../utils/helpers/hooks';
 import { rangeOf } from '../../utils/utils';
 import ToggleSwitch from '../../utils/ToggleSwitch';
 import { prettify } from '../../utils/helpers/numbers';
-import { pointerOnHover, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
+import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
 import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme';
 import './LineChartCard.scss';

@@ -134,11 +134,11 @@ const generateLabelsAndGroupedVisits = (
  return [ labels, fillTheGaps(groupedVisitsWithGaps, labels) ];
 };

-const generateDataset = (data: number[], label: string, color: string): ChartDataSets => ({
+const generateDataset = (data: number[], label: string, color: string): ChartDataset => ({
  label,
  data,
  fill: false,
-  lineTension: 0.2,
+  tension: 0.2,
  borderColor: color,
  backgroundColor: color,
 });
@@ -189,32 +189,28 @@ const LineChartCard = (
    datasets: [
      generateDataset(groupedVisits, 'Visits', MAIN_COLOR),
      highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, HIGHLIGHTED_COLOR),
-    ].filter(Boolean) as ChartDataSets[],
+    ].filter(Boolean) as ChartDataset[],
  };
  const options: ChartOptions = {
    maintainAspectRatio: false,
-    legend: { display: false },
-    scales: {
-      yAxes: [
-        {
-          ticks: {
-            beginAtZero: true,
-            precision: 0,
-            callback: prettify,
-          },
-        },
-      ],
-      xAxes: [
-        {
-          scaleLabel: { display: true, labelString: STEPS_MAP[step] },
-        },
-      ],
+    plugins: {
+      legend: { display: false },
+      tooltip: {
+        intersect: false,
+        axis: 'x',
+        callbacks: { label: renderChartLabel },
+      },
    },
-    tooltips: {
-      intersect: false,
-      axis: 'x',
-      callbacks: {
-        label: renderNonDoughnutChartLabel('yLabel'),
+    scales: {
+      y: {
+        beginAtZero: true,
+        ticks: {
+          precision: 0,
+          callback: prettify,
+        },
+      },
+      x: {
+        title: { display: true, text: STEPS_MAP[step] },
      },
    },
    onHover: (pointerOnHover) as any, // TODO Types seem to be incorrectly defined in @types/chart.js
@@ -248,7 +244,7 @@ const LineChartCard = (
        <Line
          data={data}
          options={options}
-          getElementAtEvent={chartElementAtEvent(datasetsByPoint, setSelectedVisits)}
+          getElementAtEvent={chartElementAtEvent(datasetsByPoint, setSelectedVisits) as any} // TODO
        />
      </CardBody>
    </Card>