Bar Chart

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