Chart

1import * as React from 'react'
2import * as RechartsPrimitive from 'recharts'
3import { cva, type VariantProps } from 'class-variance-authority'
4import { cn, sanitizeCssValue } from '@/lib/utils'
5 
6// Format: { THEME_NAME: CSS_SELECTOR }
7const THEMES = { light: '', dark: '.dark' } as const
8 
9// Neubrutalism color palettes for charts
10export const CHART_PALETTES = {
11  bold: [
12    'hsl(var(--primary))',
13    'hsl(var(--secondary))',
14    'hsl(var(--accent))',
15    'hsl(var(--success))',
16    'hsl(var(--warning))',
17    'hsl(var(--info))',
18  ],
19  vibrant: [
20    'hsl(0 84% 60%)',      // Coral red
21    'hsl(174 62% 50%)',    // Teal
22    'hsl(49 100% 60%)',    // Yellow
23    'hsl(280 65% 60%)',    // Purple
24    'hsl(145 63% 49%)',    // Green
25    'hsl(212 100% 60%)',   // Blue
26  ],
27  pastel: [
28    'hsl(0 84% 75%)',      // Light coral
29    'hsl(174 62% 70%)',    // Light teal
30    'hsl(49 100% 75%)',    // Light yellow
31    'hsl(280 65% 75%)',    // Light purple
32    'hsl(145 63% 70%)',    // Light green
33    'hsl(212 100% 75%)',   // Light blue
34  ],
35  monochrome: [
36    'hsl(var(--foreground))',
37    'hsl(var(--foreground) / 0.8)',
38    'hsl(var(--foreground) / 0.6)',
39    'hsl(var(--foreground) / 0.4)',
40    'hsl(var(--foreground) / 0.2)',
41    'hsl(var(--foreground) / 0.1)',
42  ],
43} as const
44 
45export type ChartPalette = keyof typeof CHART_PALETTES
46 
47// Helper to get colors from a palette
48export function getChartColor(palette: ChartPalette, index: number): string {
49  const colors = CHART_PALETTES[palette]
50  return colors[index % colors.length]
51}
52 
53// Generate ChartConfig from palette
54export function createChartConfig(
55  keys: string[],
56  labels: string[],
57  palette: ChartPalette = 'bold'
58): ChartConfig {
59  const config: ChartConfig = {}
60  keys.forEach((key, index) => {
61    config[key] = {
62      label: labels[index] || key,
63      color: getChartColor(palette, index),
64    }
65  })
66  return config
67}
68 
69export type ChartConfig = {
70  [k in string]: {
71    label?: React.ReactNode
72    icon?: React.ComponentType
73  } & (
74    | { color?: string; theme?: never }
75    | { color?: never; theme: Record<keyof typeof THEMES, string> }
76  )
77}
78 
79type ChartContextProps = {
80  config: ChartConfig
81}
82 
83const ChartContext = React.createContext<ChartContextProps | null>(null)
84 
85function useChart() {
86  const context = React.useContext(ChartContext)
87 
88  if (!context) {
89    throw new Error('useChart must be used within a <ChartContainer />')
90  }
91 
92  return context
93}
94 
95const chartContainerVariants = cva(
96// … truncated