recharts-chart

1"use client";
2 
3import * as RechartsPrimitive from "recharts";
4import { cn } from "@/lib/utils";
5import * as React from "react";
6 
7// Format: { THEME_NAME: CSS_SELECTOR }
8const THEMES = { light: "", dark: ".dark" } as const;
9 
10type ThemeKey = keyof typeof THEMES;
11 
12// All Keys are optional at first
13type ThemeColorsBase = {
14  [K in ThemeKey]?: string[];
15};
16 
17// Require at least one theme key
18type AtLeastOneThemeColor = {
19  [K in ThemeKey]: Required<Pick<ThemeColorsBase, K>> & Partial<Omit<ThemeColorsBase, K>>;
20}[ThemeKey];
21 
22const VALID_THEME_KEYS = Object.keys(THEMES) as ThemeKey[];
23 
24// Validation for chart config colors at runtime
25function validateChartConfigColors(config: ChartConfig): void {
26  for (const [key, value] of Object.entries(config)) {
27    if (value.colors) {
28      const hasValidThemeKey = VALID_THEME_KEYS.some(
29        (themeKey) => value.colors?.[themeKey] !== undefined,
30      );
31 
32      if (!hasValidThemeKey) {
33        throw new Error(
34          `[EvilCharts] Invalid chart config for "${key}": colors object must have at least one theme key (${VALID_THEME_KEYS.join(", ")}). Received empty object or invalid keys.`,
35        );
36      }
37    }
38  }
39}
40 
41export type ChartConfig = Record<
42  string,
43  {
44    label?: React.ReactNode;
45    icon?: React.ComponentType;
46    colors?: AtLeastOneThemeColor;
47  }
48>;
49 
50interface ChartContextProps {
51  config: ChartConfig;
52}
53 
54const ChartContext = React.createContext<ChartContextProps | null>(null);
55 
56export function useChart() {
57  const context = React.useContext(ChartContext);
58 
59  if (!context) {
60    throw new Error("useChart must be used within a <ChartContainer />");
61  }
62 
63  return context;
64}
65 
66interface ChartContainerProps
67  extends
68    Omit<React.ComponentProps<"div">, "children">,
69    Pick<
70      React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>,
71      | "initialDimension"
72      | "aspect"
73      | "debounce"
74      | "minHeight"
75      | "minWidth"
76      | "maxHeight"
77      | "height"
78      | "width"
79      | "onResize"
80      | "children"
81    > {
82  config: ChartConfig;
83  innerResponsiveContainerStyle?: React.ComponentProps<
84    typeof RechartsPrimitive.ResponsiveContainer
85  >["style"];
86  /** Optional content rendered below the chart (e.g. EvilBrush) */
87  footer?: React.ReactNode;
88}
89 
90function ChartContainer({
91  id,
92  config,
93  initialDimension = { width: 320, height: 200 },
94  className,
95  children,
96  footer,
97  ...props
98}: Readonly<ChartContainerProps>) {
99  const uniqueId = React.useId();
100// … truncated