style(stats): better responsiveness & dark theme

app/javascript/controllers/lazy/chartkick_controller.ts

@@ -1,44 +1,43 @@
 import { Controller } from '@hotwired/stimulus';
-import { toggle, delegate } from '@utils';
-import Highcharts from 'highcharts';
 import Chartkick from 'chartkick';
-
-export class ChartkickController extends Controller {
-  async connect() {
-    delegate('click', '[data-toggle-chart]', (event) =>
-      toggleChart(event as MouseEvent)
-    );
-  }
-}
+import Highcharts from 'highcharts';
+import invariant from 'tiny-invariant';
 
 Chartkick.use(Highcharts);
-function reflow(nextChartId?: string) {
-  nextChartId && Chartkick.charts[nextChartId]?.getChartObject()?.reflow();
-}
-
-function toggleChart(event: MouseEvent) {
-  const nextSelectorItem = event.target as HTMLButtonElement,
-    chartClass = nextSelectorItem.dataset.toggleChart,
-    nextChart = chartClass
-      ? document.querySelector<HTMLDivElement>(chartClass)
-      : undefined,
-    nextChartId = nextChart?.children[0]?.id,
-    currentSelectorItem = nextSelectorItem.parentElement?.querySelector(
-      '.segmented-control-item-active'
-    ),
-    currentChart =
-      nextSelectorItem.parentElement?.parentElement?.querySelector<HTMLDivElement>(
-        '.chart:not(.hidden)'
-      );
-
-  // Change the current selector and the next selector states
-  currentSelectorItem?.classList.toggle('segmented-control-item-active');
-  nextSelectorItem.classList.toggle('segmented-control-item-active');
-
-  // Hide the currently shown chart and show the new one
-  currentChart && toggle(currentChart);
-  nextChart && toggle(nextChart);
-
-  // Reflow needed, see https://github.com/highcharts/highcharts/issues/1979
-  reflow(nextChartId);
+
+export default class ChartkickController extends Controller {
+  static targets = ['chart'];
+
+  declare readonly chartTargets: HTMLElement[];
+
+  toggleChart(event: Event) {
+    const target = event.currentTarget as HTMLInputElement;
+    const chartClass = target.dataset.toggleChart;
+
+    invariant(chartClass, 'Missing data-toggle-chart attribute');
+
+    const nextChart = document.querySelector(chartClass);
+    const currentChart = this.chartTargets.find(
+      (chart) => !chart.classList.contains('hidden')
+    );
+
+    if (currentChart) {
+      currentChart.classList.add('hidden');
+    }
+
+    if (nextChart) {
+      nextChart.classList.remove('hidden');
+      const nextChartId = nextChart.children[0]?.id;
+      this.reflow(nextChartId);
+    }
+  }
+
+  reflow(chartId: string) {
+    if (chartId) {
+      const chart = Chartkick.charts[chartId];
+      if (chart) {
+        chart.getChartObject()?.reflow();
+      }
+    }
+  }
 }