Chart

1'use client'
2 
3import * as React from 'react'
4import type { ComponentType, ReactNode, CSSProperties } from 'react'
5import * as RechartsPrimitive from 'recharts'
6 
7import { cn } from '@/lib/utils'
8 
9// Format: { THEME_NAME: CSS_SELECTOR }
10const THEMES = { light: '', dark: '.dark' } as const
11 
12export type ChartConfig = {
13    [k in string]: {
14        label?: ReactNode
15        icon?: ComponentType
16    } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })
17}
18 
19type ChartContextProps = {
20    config: ChartConfig
21}
22 
23const ChartContext = React.createContext<ChartContextProps | null>(null)
24 
25function useChart() {
26    const context = React.useContext(ChartContext)
27 
28    if (!context) {
29        throw new Error('useChart must be used within a <ChartContainer />')
30    }
31 
32    return context
33}
34 
35function ChartContainer({
36    id,
37    className,
38    children,
39    config,
40    ...props
41}: React.ComponentProps<'div'> & {
42    config: ChartConfig
43    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']
44}) {
45    const uniqueId = React.useId()
46    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
47 
48    return (
49        <ChartContext.Provider value={{ config }}>
50            <div
51                data-slot="chart"
52                data-chart={chartId}
53                className={cn(
54                    "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-sector[stroke='#fff']]:stroke-transparent",
55                    className
56                )}
57                {...props}>
58                <ChartStyle
59                    id={chartId}
60                    config={config}
61                />
62                <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
63            </div>
64        </ChartContext.Provider>
65    )
66}
67 
68const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
69// … truncated