Fixed chart rendering when using date nav buttons.

src/components/charts/Chart.tsx

@@ -1,29 +1,25 @@
 import { useState, useRef, useEffect, useMemo } from 'react';
-import { Loading, Box, Column, BoxProps } from '@umami/react-zen';
-import ChartJS, { LegendItem, ChartOptions } from 'chart.js/auto';
+import { Box, Column, BoxProps } from '@umami/react-zen';
+import ChartJS, { LegendItem, ChartOptions, ChartData, UpdateMode } from 'chart.js/auto';
 import { Legend } from '@/components/metrics/Legend';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 
+ChartJS.defaults.font.family = 'Inter';
+
 export interface ChartProps extends BoxProps {
   type?: 'bar' | 'bubble' | 'doughnut' | 'pie' | 'line' | 'polarArea' | 'radar' | 'scatter';
-  data?: object;
-  isLoading?: boolean;
-  animationDuration?: number;
-  updateMode?: string;
-  onCreate?: (chart: any) => void;
-  onUpdate?: (chart: any) => void;
-  onTooltip?: (model: any) => void;
+  chartData?: ChartData & { focusLabel?: string };
   chartOptions?: ChartOptions;
+  updateMode?: UpdateMode;
+  animationDuration?: number;
+  onTooltip?: (model: any) => void;
 }
 
 export function Chart({
   type,
-  data,
-  isLoading = false,
+  chartData,
   animationDuration = DEFAULT_ANIMATION_DURATION,
   updateMode,
-  onCreate,
-  onUpdate,
   onTooltip,
   chartOptions,
   ...props
@@ -59,53 +55,6 @@ export function Chart({
     };
   }, [chartOptions]);
 
-  const createChart = (data: any) => {
-    ChartJS.defaults.font.family = 'Inter';
-
-    chart.current = new ChartJS(canvas.current, {
-      type,
-      data,
-      options,
-    });
-
-    onCreate?.(chart.current);
-
-    setLegendItems(chart.current.legend.legendItems);
-  };
-
-  const updateChart = (data: any) => {
-    if (data.datasets) {
-      if (data.datasets.length === chart.current.data.datasets.length) {
-        chart.current.data.datasets.forEach((dataset: { data: any }, index: string | number) => {
-          if (data?.datasets[index]) {
-            dataset.data = data?.datasets[index]?.data;
-
-            if (chart.current.legend.legendItems[index]) {
-              chart.current.legend.legendItems[index].text = data.datasets[index]?.label;
-            }
-          }
-        });
-      } else {
-        chart.current.data.datasets = data.datasets;
-      }
-    }
-
-    if (data.focusLabel !== null) {
-      chart.current.data.datasets.forEach(ds => {
-        ds.hidden = data.focusLabel ? ds.label !== data.focusLabel : false;
-      });
-    }
-
-    chart.current.options = options;
-
-    // Allow config changes before update
-    onUpdate?.(chart.current);
-
-    chart.current.update(updateMode);
-
-    setLegendItems(chart.current.legend.legendItems);
-  };
-
   const handleLegendClick = (item: LegendItem) => {
     if (type === 'bar') {
       const { datasetIndex } = item;
@@ -127,20 +76,47 @@ export function Chart({
     setLegendItems(chart.current.legend.legendItems);
   };
 
+  // Create chart
   useEffect(() => {
-    if (data) {
-      if (!chart.current) {
-        createChart(data);
-      } else {
-        updateChart(data);
-      }
+    if (canvas.current) {
+      chart.current = new ChartJS(canvas.current, {
+        type,
+        data: chartData,
+        options,
+      });
+
+      setLegendItems(chart.current.legend.legendItems);
     }
-  }, [data, options]);
+
+    return () => {
+      chart.current?.destroy();
+    };
+  }, []);
+
+  // Update chart
+  useEffect(() => {
+    if (chart.current && chartData) {
+      // Replace labels and datasets *in-place*
+      chart.current.data.labels = chartData.labels;
+      chart.current.data.datasets = chartData.datasets;
+
+      if (chartData.focusLabel !== null) {
+        chart.current.data.datasets.forEach((ds: { hidden: boolean; label: any }) => {
+          ds.hidden = chartData.focusLabel ? ds.label !== chartData.focusLabel : false;
+        });
+      }
+
+      chart.current.options = options;
+
+      chart.current.update(updateMode);
+
+      setLegendItems(chart.current.legend.legendItems);
+    }
+  }, [chartData, options, updateMode]);
 
   return (
     <Column gap="6">
       <Box {...props}>
-        {isLoading && <Loading position="page" icon="dots" />}
         <canvas ref={canvas} />
       </Box>
       <Legend items={legendItems} onClick={handleLegendClick} />