Pie Chart

1"use client";
2 
3import * as React from "react";
4import {
5	Cell,
6	Label,
7	Pie,
8	PieChart as RechartsPieChart,
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 PIE_COLORS = ["#00bbff", "#34d399", "#60a5fa", "#a78bfa", "#f472b6"];
21 
22function ChartCard({
23	title,
24	description,
25	footer,
26	children,
27	dataPoints = 0,
28}: {
29	title?: string;
30	description?: string;
31	footer?: string;
32	children: React.ReactNode;
33	dataPoints?: number;
34}) {
35	const maxWidth =
36		dataPoints > 0 ? Math.min(768, Math.max(300, dataPoints * 80)) : undefined;
37	return (
38		<Card
39			className="w-full max-w-3xl"
40			style={maxWidth ? { maxWidth } : undefined}
41		>
42			{(title || description) && (
43				<CardHeader className="pb-0">
44					{title && (
45						<p className="text-sm font-semibold text-card-foreground">
46							{title}
47						</p>
48					)}
49					{description && (
50						<p className="text-xs text-muted-foreground">{description}</p>
51					)}
52				</CardHeader>
53			)}
54			<CardContent>{children}</CardContent>
55			{footer && (
56				<CardFooter>
57					<p className="text-xs text-muted-foreground">{footer}</p>
58				</CardFooter>
59			)}
60		</Card>
61	);
62}
63 
64export type PieChartProps = {
65	data: Array<Record<string, string | number>>;
66	nameKey: string;
67	valueKey: string;
68	title?: string;
69	description?: string;
70	footer?: string;
71	mode?: "donut" | "legend" | "label";
72};
73 
74export function PieChart(props: PieChartProps) {
75	const mode = props.mode ?? "donut";
76	const chartConfig: ChartConfig = Object.fromEntries(
77		props.data.map((entry, i) => {
78			const name = String(entry[props.nameKey] ?? i);
79			return [name, { label: name, color: PIE_COLORS[i % PIE_COLORS.length] }];
80		}),
81	);
82	const total = React.useMemo(
83		() =>
84			props.data.reduce((sum, entry) => {
85				const val = entry[props.valueKey];
86				return sum + (typeof val === "number" ? val : 0);
87			}, 0),
88		[props.data, props.valueKey],
89	);
90	return (
91		<ChartCard
92			title={props.title}
93			description={props.description}
94			footer={props.footer}
95			dataPoints={props.data.length}
96		>
97			<ChartContainer
98				config={chartConfig}
99				className={`h-50 w-full ${mode === "label" ? "[&_.recharts-pie-label-text]:fill-foreground" : ""}`}
100			>
101				<RechartsPieChart>
102					{mode === "donut" ? (
103						<Pie
104							data={props.data}
105							dataKey={props.valueKey}
106// … truncated