import * as React from "react"; import * as RechartsPrimitive from "recharts"; import { cn } from "@/shared/lib/cn"; // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const; export type ChartConfig = { [k in string]: { label?: React.ReactNode; icon?: React.ComponentType; } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ); }; type ChartContextProps = { config: ChartConfig; }; const ChartContext = React.createContext(null); function useChart() { const context = React.useContext(ChartContext); if (!context) { throw new Error("useChart must be used within a "); } return context; } function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & { config: ChartConfig; children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"]; }) { const uniqueId = React.useId(); const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`; const containerRef = React.useRef(null); const [dimensions, setDimensions] = React.useState<{ width: number; height: number; }>({ width: 0, height: 0 }); React.useEffect(() => { const el = containerRef.current; if (!el) return; const observer = new ResizeObserver((entries) => { const entry = entries[0]; if (entry) { const { width, height } = entry.contentRect; if (width > 0 && height > 0) { setDimensions({ width, height }); } } }); observer.observe(el); return () => observer.disconnect(); }, []); return (

{dimensions.width > 0 && dimensions.height > 0 && React.cloneElement( children as React.ReactElement>, { width: dimensions.width, height: dimensions.height, }, )}

); } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([, config]) => config.theme || config.color, ); if (!colorConfig.length) { return null; } return (