Chart

1"use client";
2 
3import {
4  type ComponentProps,
5  type ComponentType,
6  type CSSProperties,
7  createContext,
8  type ReactNode,
9  useContext,
10  useId,
11  useMemo,
12} from "react";
13import { Legend, ResponsiveContainer, Tooltip } from "recharts";
14 
15import styles from "./chart.module.css";
16 
17const THEMES = { light: "", dark: ".dark" } as const;
18 
19export type ChartConfig = {
20  [k in string]: {
21    label?: ReactNode;
22    icon?: ComponentType;
23  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
24};
25 
26type ChartContextProps = {
27  config: ChartConfig;
28};
29 
30const ChartContext = createContext<ChartContextProps | null>(null);
31 
32function useChart() {
33  const context = useContext(ChartContext);
34 
35  if (!context) {
36    throw new Error("useChart must be used within a <ChartContainer />");
37  }
38 
39  return context;
40}
41 
42function ChartContainer({
43  id,
44  className,
45  children,
46  config,
47  ...props
48}: ComponentProps<"div"> & {
49  config: ChartConfig;
50  children: ComponentProps<typeof ResponsiveContainer>["children"];
51}) {
52  const uniqueId = useId();
53  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
54 
55  return (
56    <ChartContext.Provider value={{ config }}>
57      <div {...props} className={`${styles.chartContainer} ${className || ""}`} data-chart={chartId} data-slot="chart">
58        <ChartStyle config={config} id={chartId} />
59        <ResponsiveContainer>{children}</ResponsiveContainer>
60      </div>
61    </ChartContext.Provider>
62  );
63}
64 
65const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
66  const colorConfig = Object.entries(config).filter(([, itemConfig]) => itemConfig.theme || itemConfig.color);
67 
68  if (!colorConfig.length) {
69    return null;
70  }
71 
72  return (
73    <style
74      // biome-ignore lint/security/noDangerouslySetInnerHtml: Safe - content is generated from config object, not user input
75      dangerouslySetInnerHTML={{
76        __html: Object.entries(THEMES)
77          .map(
78            ([theme, prefix]) => `
79${prefix} [data-chart=${id}] {
80${colorConfig
81  .map(([key, itemConfig]) => {
82    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
83    return color ? `  --color-${key}: ${color};` : null;
84  })
85  .join("\n")}
86}
87`
88          )
89          .join("\n"),
90      }}
91    />
92  );
93};
94 
95const ChartTooltip = Tooltip;
96 
97// Helper to get indicator style class
98function getIndicatorStyleClass(indicator: "line" | "dot" | "dashed"): string {
99  if (indicator === "dot") {
100// … truncated