Chart

1import * as React from "react"
2import * as RechartsPrimitive from "recharts"
3import type { TooltipValueType } from "recharts"
4 
5import { cn } from "@/lib/utils"
6 
7// Format: { THEME_NAME: CSS_SELECTOR }
8const THEMES = { light: "", dark: ".dark" } as const
9 
10const INITIAL_DIMENSION = { width: 320, height: 200 } as const
11type TooltipNameType = number | string
12 
13export type ChartConfig = Record<
14  string,
15  {
16    label?: React.ReactNode
17    icon?: React.ComponentType
18  } & (
19    | { color?: string; theme?: never }
20    | { color?: never; theme: Record<keyof typeof THEMES, string> }
21  )
22>
23 
24type ChartContextProps = {
25  config: ChartConfig
26}
27 
28const ChartContext = React.createContext<ChartContextProps | null>(null)
29 
30function useChart() {
31  const context = React.useContext(ChartContext)
32 
33  if (!context) {
34    throw new Error("useChart must be used within a <ChartContainer />")
35  }
36 
37  return context
38}
39 
40function ChartContainer({
41  id,
42  className,
43  children,
44  config,
45  initialDimension = INITIAL_DIMENSION,
46  ...props
47}: React.ComponentProps<"div"> & {
48  config: ChartConfig
49  children: React.ComponentProps<
50    typeof RechartsPrimitive.ResponsiveContainer
51  >["children"]
52  initialDimension?: {
53    width: number
54    height: number
55  }
56}) {
57  const uniqueId = React.useId()
58  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
59 
60  return (
61    <ChartContext.Provider value={{ config }}>
62      <div
63        data-slot="chart"
64        data-chart={chartId}
65        className={cn(
66          "flex aspect-video justify-center text-xs [&_.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-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
67          className
68        )}
69        {...props}
70      >
71        <ChartStyle id={chartId} config={config} />
72        <RechartsPrimitive.ResponsiveContainer
73          initialDimension={initialDimension}
74        >
75          {children}
76        </RechartsPrimitive.ResponsiveContainer>
77      </div>
78    </ChartContext.Provider>
79  )
80}
81// … truncated