4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1b44,import type { Component, ComponentProps, JSX } from "solid-js" import { createContext, createEffect, mergeProps, onCleanup, splitProps, useContext } from "solid-js" import type { ChartConfiguration, ChartData, ChartOptions, ChartType } from "chart.js" import { ArcElement, BarController, BarElement, CategoryScale, Chart as ChartJS, Tooltip as ChartJSTooltip, DoughnutController, Filler, Legend, LinearScale, LineController, LineElement, PieController, PointElement, RadarController, RadialLinearScale, ScatterController } from "chart.js" import { cn } from "@/lib/utils" ChartJS.register( ArcElement, BarController, BarElement, CategoryScale, DoughnutController, Filler, Legend, LineController, LineElement, LinearScale, PieController, PointElement, RadarController, RadialLinearScale, ScatterController, ChartJSTooltip ) // --------------------------------------------------------------------------- // Chart config types // --------------------------------------------------------------------------- export type ChartConfig = Record< string, { label?: string color?: string icon?: Component } > // --------------------------------------------------------------------------- // Context // --------------------------------------------------------------------------- type ChartContextValue = { config: ChartConfig } const ChartContext = createContext({ config: {} }) function useChart() { return useContext(ChartContext) } // --------------------------------------------------------------------------- // CSS variables helper // --------------------------------------------------------------------------- function chartConfigToCssVars(config: ChartConfig): Record { const vars: Record = {} let index = 0 for (const [, value] of Object.entries(config)) { if (value.color) { vars[`--chart-${index + 1}`] = value.color } index++ } return vars } // --------------------------------------------------------------------------- // ChartContainer // --------------------------------------------------------------------------- type ChartContainerProps = ComponentProps<"div"> & { config: ChartConfig children: JSX.Element } const ChartContainer: Component = (rawProps) => { const [local, others] = splitProps(rawProps, ["class", "children", "config", "style"]) const cssVars = () => chartConfigToCssVars(local.config) return (

{local.children}

) } // --------------------------------------------------------------------------- // Core Chart component // --------------------------------------------------------------------------- type ChartProps = ComponentProps<"canvas"> & { type: T data: ChartData options?: ChartOptions } function Chart(rawProps: ChartProps) { const props = mergeProps({ options: {} as ChartOptions }, rawProps) const [local, others] = splitProps(props, ["type", "data", "options", "class"]) let canvasRef!: HTMLCanvasElement let chartInstance: ChartJS | undefined const resolvedOptions = (): ChartOptions => { const base: ChartOptions = { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: true, position: "bottom" as const, labels: { usePointStyle: true, padding: 16 } }, tooltip: { enabled: true, backgroundColor: "hsl(var(--popover))", titleColor: "hsl(var(--popover-foreground))", bodyColor: "hsl(var(--popover-foreground))", borderColor: "hsl(var(--border))", borderWidth: 1, cornerRadius: 6, padding: 8, boxPadding: 4 } } } return mergeChartOptions(base, local.options ?? {}) as ChartOptions } createEffect(() => { const type = local.type const data = local.data const options = resolvedOptions() if (chartInstance) { chartInstance.data = data as ChartData chartInstance.options = options as ChartOptions chartInstance.update() } else if (canvasRef) { chartInstance = new ChartJS(canvasRef, { type, data: data as ChartData, options: options as ChartOptions } as ChartConfiguration) } }) onCleanup(() => { chartInstance?.destroy() chartInstance = undefined }) return (