Chart

1"use client";
2 
3import { useMemo, useCallback, memo } from "react";
4import {
5  BarChart,
6  LineChart,
7  Bar,
8  Line,
9  XAxis,
10  YAxis,
11  CartesianGrid,
12} from "recharts";
13 
14import {
15  cn,
16  ChartContainer,
17  ChartTooltip,
18  ChartTooltipContent,
19  ChartLegend,
20  ChartLegendContent,
21  Card,
22  CardHeader,
23  CardTitle,
24  CardDescription,
25  CardContent,
26  type ChartConfig,
27} from "./_adapter";
28import type { ChartProps } from "./schema";
29 
30const DEFAULT_COLORS = [
31  "var(--chart-1)",
32  "var(--chart-2)",
33  "var(--chart-3)",
34  "var(--chart-4)",
35  "var(--chart-5)",
36];
37 
38export const Chart = memo(function Chart({
39  id,
40  type,
41  title,
42  description,
43  data,
44  xKey,
45  series,
46  colors,
47  showLegend = false,
48  showGrid = true,
49  className,
50  onDataPointClick,
51}: ChartProps) {
52  const palette = colors?.length ? colors : DEFAULT_COLORS;
53 
54  const seriesColors = useMemo(
55    () =>
56      series.map(
57        (seriesItem, index) =>
58          seriesItem.color ?? palette[index % palette.length],
59      ),
60    [series, palette],
61  );
62 
63  const chartConfig: ChartConfig = useMemo(
64    () =>
65      Object.fromEntries(
66        series.map((seriesItem, index) => [
67          seriesItem.key,
68          {
69            label: seriesItem.label,
70            color: seriesColors[index],
71          },
72        ]),
73      ),
74    [series, seriesColors],
75  );
76 
77  const handleDataPointClick = useCallback(
78    (
79      seriesKey: string,
80      seriesLabel: string,
81      payload: Record<string, unknown>,
82      index: number,
83    ) => {
84      onDataPointClick?.({
85        seriesKey,
86        seriesLabel,
87        xValue: payload[xKey],
88        yValue: payload[seriesKey],
89        index,
90        payload,
91      });
92    },
93    [onDataPointClick, xKey],
94  );
95 
96  const ChartComponent = type === "bar" ? BarChart : LineChart;
97 
98  const chartContent = (
99    <ChartContainer
100      config={chartConfig}
101      className="min-h-[200px] w-full"
102      data-tool-ui-id={id}
103    >
104      <ChartComponent data={data} accessibilityLayer>
105        {showGrid && <CartesianGrid vertical={false} />}
106        <XAxis
107          dataKey={xKey}
108          tickLine={false}
109          tickMargin={10}
110          axisLine={false}
111        />
112        <YAxis tickLine={false} axisLine={false} tickMargin={10} />
113        <ChartTooltip content={<ChartTooltipContent />} />
114        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
115 
116        {type === "bar" &&
117          series.map((s, i) => (
118            <Bar
119              key={s.key}
120// … truncated