Chart

1"use client";
2
3import { CSSProperties, ComponentProps, ComponentType, ReactNode, createContext, useContext, useId, useMemo } from "react";
4
5import * as RechartsPrimitive from "recharts";
6import type { TooltipValueType } from "recharts";
7
8import { cn } from "@/lib/utils";
9
10// Format: { THEME_NAME: CSS_SELECTOR }
11const THEMES = { light: "", dark: ".dark" } as const;
12
13const INITIAL_DIMENSION = { width: 320, height: 200 } as const;
14type TooltipNameType = number | string;
15
16export type ChartConfig = Record<
17  string,
18  {
19    label?: ReactNode;
20    icon?: ComponentType;
21  } & (
22    | { color?: string; theme?: never }
23    | { color?: never; theme: Record<keyof typeof THEMES, string> }
24  )
25>;
26
27type ChartContextProps = {
28  config: ChartConfig;
29};
30
31const ChartContext = createContext<ChartContextProps | null>(null);
32
33function useChart() {
34  const context = useContext(ChartContext);
35
36  if (!context) {
37    throw new Error("useChart must be used within a <ChartContainer />");
38  }
39
40  return context;
41}
42
43function ChartContainer({
44  id,
45  className,
46  children,
47  config,
48  initialDimension = INITIAL_DIMENSION,
49  ...props
50}: ComponentProps<"div"> & {
51  config: ChartConfig;
52  children: ComponentProps<
53    typeof RechartsPrimitive.ResponsiveContainer
54  >["children"];
55  initialDimension?: {
56    width: number;
57    height: number;
58  };
59}) {
60  const uniqueId = useId();
61  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
62
63  return (
64    <ChartContext.Provider value={{ config }}>
65      <div
66        data-slot="chart"
67        data-chart={chartId}
68        className={cn(
69          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
70          className
71        )}
72        {...props}
73      >
74        <ChartStyle id={chartId} config={config} />
75        <RechartsPrimitive.ResponsiveContainer
76// … truncated