Area Chart

1"use client";
2 
3import type * as React from "react";
4import {
5	Area,
6	AreaChart as RechartsAreaChart,
7	XAxis,
8	YAxis,
9} from "recharts";
10import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
11import {
12	type ChartConfig,
13	ChartContainer,
14	ChartLegend,
15	ChartLegendContent,
16	ChartTooltip,
17	ChartTooltipContent,
18} from "@/components/ui/chart";
19 
20const CHART_COLORS = ["#00bbff", "#34d399", "#60a5fa", "#f472b6", "#fb923c"];
21 
22function toKeys(v: string | string[]): string[] {
23	return Array.isArray(v) ? v : [v];
24}
25 
26function ChartCard({
27	title,
28	description,
29	footer,
30	children,
31	dataPoints = 0,
32}: {
33	title?: string;
34	description?: string;
35	footer?: string;
36	children: React.ReactNode;
37	dataPoints?: number;
38}) {
39	const maxWidth =
40		dataPoints > 0 ? Math.min(768, Math.max(300, dataPoints * 80)) : undefined;
41	return (
42		<Card
43			className="w-full max-w-3xl"
44			style={maxWidth ? { maxWidth } : undefined}
45		>
46			{(title || description) && (
47				<CardHeader className="pb-0">
48					{title && (
49						<p className="text-sm font-semibold text-card-foreground">
50							{title}
51						</p>
52					)}
53					{description && (
54						<p className="text-xs text-muted-foreground">{description}</p>
55					)}
56				</CardHeader>
57			)}
58			<CardContent>{children}</CardContent>
59			{footer && (
60				<CardFooter>
61					<p className="text-xs text-muted-foreground">{footer}</p>
62				</CardFooter>
63			)}
64		</Card>
65	);
66}
67 
68export type AreaChartProps = {
69	data: Array<Record<string, string | number>>;
70	xKey: string;
71	yKeys: string | string[];
72	title?: string;
73	description?: string;
74	footer?: string;
75	colors?: string[];
76};
77 
78export function AreaChart(props: AreaChartProps) {
79	const keys = toKeys(props.yKeys);
80	const colors = props.colors ?? CHART_COLORS;
81	const chartConfig: ChartConfig = Object.fromEntries(
82		keys.map((key, i) => [
83			key,
84			{ label: key, color: colors[i % colors.length] },
85		]),
86	);
87	const showLegend = keys.length > 1;
88	return (
89		<ChartCard
90			title={props.title}
91			description={props.description}
92			footer={props.footer}
93			dataPoints={props.data.length}
94		>
95			<ChartContainer config={chartConfig} className="h-50 w-full">
96				<RechartsAreaChart data={props.data}>
97					<defs>
98						{keys.map((key) => (
99							<linearGradient
100								key={key}
101								id={`gradient-${key}`}
102								x1="0"
103								y1="0"
104								x2="0"
105								y2="1"
106							>
107								<stop
108									offset="0%"
109									stopColor={`var(--color-${key})`}
110									stopOpacity={0.4}
111								/>
112								<stop
113// … truncated