dashboard-3

1"use client";
2 
3import { cn } from "@/lib/utils";
4import type { ComponentProps } from "react";
5import { LabelList, Pie, PieChart } from "recharts";
6import {
7	Card,
8	CardContent,
9	CardDescription,
10	CardHeader,
11	CardTitle,
12} from "@/components/ui/card";
13import {
14	type ChartConfig,
15	ChartContainer,
16	ChartLegend,
17	ChartLegendContent,
18} from "@/components/ui/chart";
19import { Delta, DeltaIcon, DeltaValue } from "@/components/delta";
20 
21type ChannelKey = "direct" | "email" | "social";
22 
23type ChannelDatum = {
24	channel: ChannelKey;
25	share: number;
26	fill: string;
27};
28 
29const chartData: ChannelDatum[] = [
30	{ channel: "direct", share: 44, fill: "var(--color-direct)" },
31	{ channel: "email", share: 36, fill: "var(--color-email)" },
32	{ channel: "social", share: 20, fill: "var(--color-social)" },
33];
34 
35const chartConfig = {
36	share: {
37		label: "Share",
38	},
39	direct: {
40		label: "Direct",
41		color: "var(--chart-1)",
42	},
43	email: {
44		label: "Email",
45		color: "var(--chart-3)",
46	},
47	social: {
48		label: "Social",
49		color: "var(--chart-5)",
50	},
51} satisfies ChartConfig;
52 
53export function ChannelBreakdownChart({
54	className,
55	...props
56}: ComponentProps<typeof Card>) {
57	return (
58		<Card
59			className={cn("flex flex-col shadow-none dark:ring-0", className)}
60			{...props}
61		>
62			<CardHeader className="items-center space-y-1 pb-0 sm:items-start">
63				<div className="flex flex-wrap items-center justify-center gap-2 sm:justify-start">
64					<CardTitle>Traffic by channel</CardTitle>
65					<Delta value={2.4} variant="badge">
66						<DeltaIcon variant="trend" />
67						<DeltaValue suffix="pp" />
68					</Delta>
69				</div>
70				<CardDescription>
71					Share of new conversations in last 7 days
72				</CardDescription>
73			</CardHeader>
74			<CardContent className="my-auto">
75				<ChartContainer
76					className="mx-auto aspect-square max-h-72 w-full"
77					config={chartConfig}
78				>
79					<PieChart accessibilityLayer>
80						<Pie
81							cornerRadius={8}
82							data={chartData}
83							dataKey="share"
84							innerRadius={36}
85							nameKey="channel"
86							outerRadius="88%"
87							stroke="var(--card)"
88							strokeWidth={4}
89						>
90							<LabelList
91								className="fill-background font-medium"
92								dataKey="share"
93								fill="currentColor"
94								fontWeight={500}
95								formatter={(label) => {
96									const n = Number(label);
97									return Number.isFinite(n) ? `${n}%` : String(label ?? "");
98								}}
99								position="inside"
100								stroke="none"
101							/>
102						</Pie>
103// … truncated