Chart

1"use client";
2 
3import type { CSSProperties, ReactElement, ReactNode } from "react";
4import { ResponsiveContainer } from "recharts";
5import { cn } from "@/lib/utils";
6import { glass } from "@/lib/glass";
7 
8export type ChartConfig = Record<
9  string,
10  {
11    label?: ReactNode;
12    color?: string;
13  }
14>;
15 
16export function ChartContainer({
17  id,
18  className,
19  children,
20  config,
21  ...props
22}: React.ComponentProps<"div"> & {
23  config: ChartConfig;
24  children: React.ReactNode;
25}) {
26  const style = {
27    ...Object.fromEntries(
28      Object.entries(config).map(([key, item]) => [
29        `--color-${key}`,
30        item.color ?? "var(--fd-primary, #007AFF)",
31      ]),
32    ),
33  } as CSSProperties;
34 
35  return (
36    <div
37      data-slot="chart"
38      data-chart={id}
39      className={cn(
40        glass,
41        "w-full p-4 pt-6 text-xs",
42        "[&_.recharts-cartesian-axis-tick_text]:fill-current/55 [&_.recharts-text]:fill-current",
43        className,
44      )}
45      style={style}
46      {...props}
47    >
48      {/* `aspect` derives height from the measured width, so the chart renders
49          as long as it has a definite width (no reliance on parent height). */}
50      <ResponsiveContainer width="100%" aspect={16 / 9}>
51        {children as ReactElement}
52      </ResponsiveContainer>
53    </div>
54  );
55}
56 
57export {
58  Area,
59  AreaChart,
60  Bar,
61  BarChart,
62  CartesianGrid,
63  Cell,
64  Legend,
65  Line,
66  LineChart,
67  ResponsiveContainer,
68  Tooltip,
69  XAxis,
70  YAxis,
71} from "recharts";