impr: enhance ChartJs component with theme handling and data updates

!nuf

Author: Miodec

frontend/src/ts/components/common/ChartJs.tsx

@@ -8,17 +8,23 @@ import {
   ScaleChartOptions,
 } from "chart.js";
 import chartTrendline from "chartjs-plugin-trendline";
-import { createEffect, JSXElement, onCleanup, onMount } from "solid-js";
+import { createDeferred, JSXElement, onCleanup, onMount } from "solid-js";
 
 import { Theme } from "../../constants/themes";
+import { createEffectOn } from "../../hooks/effects";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { getTheme } from "../../states/theme";
 
+function getThemeHash(): string {
+  return Object.values(getTheme()).join("");
+}
+
 Chart.register(chartTrendline);
 type ChartJSProps<
   T extends ChartType = ChartType,
   TData = DefaultDataPoint<T>,
 > = {
+  name: string;
   type: T;
   data: ChartData<T, TData>;
   options?: ChartOptions<T>;
@@ -32,28 +38,44 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   const [canvasRef, canvasEl] = useRefWithUtils<HTMLCanvasElement>();
 
   let chart: Chart<T, TData> | undefined;
+  let theme = "";
 
   onMount(() => {
     const canvas = canvasEl();
     if (canvas === undefined) return;
+    if (chart !== undefined) return;
+
     chart = new Chart(canvas.native, {
       type: props.type,
       data: props.data,
       options: addColorsToOptions(props.options as ChartOptions<T>, getTheme),
     });
-
+    theme = getThemeHash();
     props.onChartInit?.(chart);
   });
 
-  createEffect(() => {
+  const updateChart = (data: ChartData<T, TData>): void => {
     if (!chart) return;
 
-    chart.config.type = props.type;
-    chart.data = props.data;
+    chart.data = data;
+
     if (props.options) {
       chart.options = addColorsToOptions(props.options, getTheme);
     }
-    chart.update();
+
+    chart.update("none");
+  };
+
+  const deferredData = createDeferred(() => props.data, { timeoutMs: 500 });
+
+  createEffectOn(deferredData, (data) => updateChart(data));
+
+  createEffectOn(getTheme, () => {
+    if (!chart) return;
+    const newTheme = getThemeHash();
+    if (theme === newTheme) return;
+    theme = newTheme;
+    updateChart(deferredData());
   });
 
   onCleanup(() => {

frontend/src/ts/components/pages/AboutPage.tsx

@@ -105,6 +105,7 @@ export function AboutPage(): JSXElement {
           {({ speedHistogramData }) => (
             <>
               <ChartJs
+                name="SpeedHistogram"
                 type="bar"
                 data={{
                   labels: speedHistogramData()?.labels ?? [],