Charts

1import type { Component } from "solid-js"
2import { createEffect, createSignal, mergeProps, on, onCleanup, onMount } from "solid-js"
3import { unwrap } from "solid-js/store"
4 
5import type { Ref } from "@solid-primitives/refs"
6import { mergeRefs } from "@solid-primitives/refs"
7import type {
8  ChartComponent,
9  ChartData,
10  ChartItem,
11  ChartOptions,
12  Plugin as ChartPlugin,
13  ChartType,
14  ChartTypeRegistry,
15  TooltipModel
16} from "chart.js"
17import {
18  ArcElement,
19  BarController,
20  BarElement,
21  BubbleController,
22  CategoryScale,
23  Chart,
24  Colors,
25  DoughnutController,
26  Filler,
27  Legend,
28  LinearScale,
29  LineController,
30  LineElement,
31  PieController,
32  PointElement,
33  PolarAreaController,
34  RadarController,
35  RadialLinearScale,
36  ScatterController,
37  Tooltip
38} from "chart.js"
39 
40type TypedChartProps = {
41  data: ChartData
42  options?: ChartOptions
43  plugins?: ChartPlugin[]
44  ref?: Ref<HTMLCanvasElement | null>
45  width?: number | undefined
46  height?: number | undefined
47}
48 
49type ChartProps = TypedChartProps & {
50  type: ChartType
51}
52 
53type ChartContext = {
54  chart: Chart
55  tooltip: TooltipModel<keyof ChartTypeRegistry>
56}
57 
58const BaseChart: Component<ChartProps> = (rawProps) => {
59  const [canvasRef, setCanvasRef] = createSignal<HTMLCanvasElement | null>()
60  const [chart, setChart] = createSignal<Chart>()
61 
62  const props = mergeProps(
63    {
64      width: 512,
65      height: 512,
66      options: { responsive: true } as ChartOptions,
67      plugins: [] as ChartPlugin[]
68    },
69    rawProps
70  )
71 
72  const init = () => {
73    const ctx = canvasRef()?.getContext("2d") as ChartItem
74    const config = unwrap(props)
75    const chart = new Chart(ctx, {
76      type: config.type,
77      data: config.data,
78      options: config.options,
79      plugins: config.plugins
80    })
81    setChart(chart)
82  }
83 
84  onMount(() => init())
85 
86  createEffect(
87    on(
88      () => props.data,
89      () => {
90        chart()!.data = props.data
91        chart()!.update()
92      },
93      { defer: true }
94    )
95  )
96 
97  createEffect(
98    on(
99      () => props.options,
100      () => {
101        chart()!.options = props.options
102        chart()!.update()
103      },
104      { defer: true }
105    )
106  )
107 
108  createEffect(
109    on(
110      [() => props.width, () => props.height],
111      () => {
112        chart()!.resize(props.width, props.height)
113      },
114      { defer: true }
115    )
116  )
117 
118  createEffect(
119    on(
120      () => props.type,
121      () => {
122        const dimensions = [chart()!.width, chart()!.height]
123        chart()!.destroy()
124        init()
125// … truncated