Line Chart

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