File size: 2,411 Bytes
6aaff3e eb17fc6 6aaff3e eb17fc6 6aaff3e eb17fc6 6aaff3e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
"use client"
import { Cell, LabelList, Pie, PieChart } from "recharts"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart"
interface PieChartProps {
title: string
description?: string
data: Array<{ name: string; value: number; fill: string }>
dataKey: string
}
const chartConfig: ChartConfig = {
value: {
label: "Value",
},
}
export function CustomPieChart({
title,
description,
data,
dataKey,
}: PieChartProps) {
const chartColors = [
"hsl(var(--chart-5))",
"hsl(var(--chart-4))",
"hsl(var(--chart-3))",
"hsl(var(--chart-2))",
"hsl(var(--chart-1))",
]
const sortedData = [...data].sort((a, b) => b.value - a.value)
const topItems = sortedData.slice(0, 4)
const otherValue = sortedData
.slice(4)
.reduce((sum, item) => sum + item.value, 0)
const chartData =
otherValue > 0
? [
...topItems,
{ name: "Other", value: otherValue, fill: chartColors[4] },
]
: topItems
return (
<Card className="bg-[var(--card-background)]">
<CardHeader className="items-center pb-0">
<CardTitle className="text-[var(--card-text)]">{title}</CardTitle>
{description && (
<CardDescription className="text-[var(--card-text)]">
{description}
</CardDescription>
)}
</CardHeader>
<CardContent className="flex-1 pb-0">
<ChartContainer
config={chartConfig}
className="mx-auto aspect-square max-h-[500px]"
>
<PieChart>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideIndicator hideLabel />}
/>
<Pie data={chartData} dataKey={dataKey} nameKey="name">
{chartData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={chartColors[index % chartColors.length]}
/>
))}
<LabelList
dataKey="name"
className="fill-background"
stroke="none"
fontSize={12}
/>
</Pie>
</PieChart>
</ChartContainer>
</CardContent>
</Card>
)
}
|