chart

1import type { Ref } from "@solid-primitives/refs";
2import { mergeRefs } from "@solid-primitives/refs";
3import { cn } from "~/lib/utils.ts";
4 
5import type {
6  ChartComponent,
7  ChartData,
8  ChartItem,
9  ChartOptions,
10  ChartType,
11  ChartTypeRegistry,
12  Plugin as ChartPlugin,
13  TooltipModel,
14} from "chart.js";
15import {
16  ArcElement,
17  BarController,
18  BarElement,
19  BubbleController,
20  CategoryScale,
21  Chart,
22  Colors,
23  DoughnutController,
24  Filler,
25  Legend,
26  LinearScale,
27  LineController,
28  LineElement,
29  PieController,
30  PointElement,
31  PolarAreaController,
32  RadarController,
33  RadialLinearScale,
34  ScatterController,
35  Tooltip,
36} from "chart.js";
37import { merge } from "chart.js/helpers";
38import type { Component, ComponentProps } from "solid-js";
39import {
40  createEffect,
41  createSignal,
42  createUniqueId,
43  mergeProps,
44  on,
45  onCleanup,
46  onMount,
47  Show,
48  splitProps,
49} from "solid-js";
50 
51// Format: { THEME_NAME: CSS_SELECTOR }. Kobalte's color mode sets
52// `data-kb-theme` on the root element instead of radix's `.dark` class,
53// so the dark prefix matches both.
54const THEMES = {
55  light: "",
56  dark: ":where(.dark, [data-kb-theme=dark])",
57} as const;
58 
59export type ChartConfig = Record<
60  string,
61  & {
62    label?: string;
63  }
64  & (
65    | { color?: string; theme?: never }
66    | { color?: never; theme: Record<keyof typeof THEMES, string> }
67  )
68>;
69 
70const ChartContainer: Component<
71  ComponentProps<"div"> & {
72    config: ChartConfig;
73  }
74> = (props) => {
75  const [local, others] = splitProps(props, [
76    "id",
77    "class",
78    "children",
79    "config",
80  ]);
81  const uniqueId = createUniqueId();
82  const chartId = () => `chart-${local.id ?? uniqueId}`;
83 
84  return (
85    <div
86      data-slot="chart"
87      data-chart={chartId()}
88      class={cn(
89        "flex aspect-video justify-center text-xs",
90        local.class,
91      )}
92      {...others}
93    >
94      <ChartStyle id={chartId()} config={local.config} />
95      {local.children}
96    </div>
97  );
98};
99 
100const ChartStyle: Component<{ id: string; config: ChartConfig }> = (props) => {
101  const colorConfig = () =>
102    Object.entries(props.config).filter(
103      ([, config]) => config.theme ?? config.color,
104    );
105 
106  const styles = () =>
107    Object.entries(THEMES)
108      .map(
109        ([theme, prefix]) => `
110${prefix} [data-chart=${props.id}] {
111${
112          colorConfig()
113            .map(([key, itemConfig]) => {
114              const color =
115                itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
116// … truncated