dashboard-4

1"use client";
2 
3import React from "react";
4import { LabelList, Pie, PieChart } from "recharts";
5import {
6	Card,
7	CardContent,
8	CardDescription,
9	CardHeader,
10	CardTitle,
11} from "@/components/ui/card";
12import {
13	type ChartConfig,
14	ChartContainer,
15	ChartLegend,
16	ChartLegendContent,
17} from "@/components/ui/chart";
18 
19export type CategoryMixDatum = {
20	category: string;
21	/** Percent of total (0–100). Usually sums to 100. */
22	share: number;
23};
24 
25const SLICE_PALETTE = [
26	"var(--chart-1)",
27	"var(--chart-2)",
28	"var(--chart-3)",
29	"var(--chart-4)",
30	"var(--chart-5)",
31] as const;
32 
33/** At most four named slices; remaining share rolls into a fifth slice, “Others”. */
34const MAX_NAMED_SLICES = 4;
35 
36/** Rolling window for the mix (days). */
37const periodDays = 7;
38 
39/** Demo mix (sums to 100). Replace or pass `data` on the component. */
40const data = [
41	{ category: "Apparel", share: 22 },
42	{ category: "Accessories", share: 22 },
43	{ category: "Footwear", share: 18 },
44	{ category: "Home & living", share: 14 },
45	{ category: "Beauty", share: 11 },
46	{ category: "Outlet", share: 8 },
47	{ category: "Sports", share: 5 },
48] as const satisfies readonly CategoryMixDatum[];
49 
50/** Sort by share descending, keep top four, merge the rest into “Others” (max five slices). */
51function consolidateTopFourAndOthers(
52	data: readonly CategoryMixDatum[]
53): CategoryMixDatum[] {
54	if (data.length <= MAX_NAMED_SLICES) {
55		return [...data];
56	}
57 
58	const sorted = [...data].sort((a, b) => b.share - a.share);
59	const head = sorted.slice(0, MAX_NAMED_SLICES);
60	const tail = sorted.slice(MAX_NAMED_SLICES);
61	const othersShare = tail.reduce((sum, row) => sum + row.share, 0);
62 
63	return [...head, { category: "Others", share: othersShare }];
64}
65 
66type SliceRow = {
67	key: string;
68	category: string;
69	share: number;
70	fill: string;
71};
72 
73function buildSlices(data: readonly CategoryMixDatum[]): {
74	chartConfig: ChartConfig;
75	pieData: SliceRow[];
76} {
77	const chartConfig: ChartConfig = {
78		share: {
79			label: "Share",
80		},
81	};
82 
83	const pieData: SliceRow[] = data.map((row, i) => {
84		const key = `s${i}`;
85		const color = SLICE_PALETTE[i % SLICE_PALETTE.length];
86		chartConfig[key] = {
87			label: row.category,
88			color,
89		};
90		return {
91			key,
92			category: row.category,
93			share: row.share,
94			fill: `var(--color-${key})`,
95		};
96	});
97 
98	return { chartConfig, pieData };
99}
100 
101export function CategoryRankChart() {
102	const { chartConfig, pieData } = React.useMemo(
103		() => buildSlices(consolidateTopFourAndOthers(data)),
104		[]
105	);
106 
107	return (
108		<Card>
109// … truncated