Chart

1"use client";
2 
3import * as React from "react";
4import * as RechartsPrimitive from "recharts";
5 
6import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
7import { cn } from "@/lib/utils";
8 
9// Format: { THEME_NAME: CSS_SELECTOR }
10const THEMES = {
11  light: "",
12  dark: ".dark",
13} as const;
14 
15/* Roles: the container and legend are bordered adaptive glass;
16   the tooltip is bordered + veiled. */
17const SURFACE_ROLE = {
18  border: true,
19};
20const TOOLTIP_ROLE = {
21  border: true,
22  veil: true,
23};
24 
25export type ChartConfig = {
26  [key in string]: {
27    label?: React.ReactNode;
28    icon?: React.ComponentType;
29  } & (
30    | {
31        color?: string;
32        theme?: never;
33      }
34    | {
35        color?: never;
36        theme: {
37          light?: string;
38          dark?: string;
39        };
40      }
41  );
42};
43 
44type ChartContextProps = {
45  config: ChartConfig;
46};
47 
48const ChartContext = React.createContext<ChartContextProps | null>(null);
49 
50function useChart() {
51  const context = React.useContext(ChartContext);
52 
53  if (!context) {
54    throw new Error("useChart must be used within a <ChartContainer />");
55  }
56 
57  return context;
58}
59 
60const ChartContainer = React.forwardRef<
61  HTMLDivElement,
62  React.ComponentProps<"div"> & {
63    config: ChartConfig;
64    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
65  } & MaterialAxisProps & {
66      variant?: "default" | "glass";
67    }
68>(({ id, className, children, config, variant = "glass", ...props }, ref) => {
69  const [axes, rest] = splitAxisProps(props);
70  const uniqueId = React.useId();
71  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
72 
73  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
74  const variants = {
75    default: "",
76    glass: "rounded-lg p-4",
77  };
78 
79  const m = materialSurface(variant === "default" ? null : SURFACE_ROLE, axes);
80 
81  return (
82    <ChartContext.Provider
83      value={{
84        config,
85      }}
86    >
87      <div
88        data-chart={chartId}
89        data-material={m?.["data-material"]}
90        ref={ref}
91        className={cn(
92          m?.className,
93// … truncated