60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useTheme } from "next-themes";
|
|
import { colors } from "@/lib/colors";
|
|
import { useConfig } from "@/hooks/use-config";
|
|
import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
|
|
|
|
const data = [
|
|
{ name: 'Group A', value: 400 },
|
|
{ name: 'Group B', value: 300 },
|
|
{ name: 'Group C', value: 300 },
|
|
{ name: 'Group D', value: 200 },
|
|
];
|
|
|
|
const RADIAN = Math.PI / 180;
|
|
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }: any) => {
|
|
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
const x = cx + radius * Math.cos(-midAngle * RADIAN);
|
|
const y = cy + radius * Math.sin(-midAngle * RADIAN);
|
|
|
|
return (
|
|
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
|
|
{`${(percent * 100).toFixed(0)}%`}
|
|
</text>
|
|
);
|
|
};
|
|
|
|
const CustomizedLabelPie = ({ height = 300 }) => {
|
|
|
|
const { theme: mode } = useTheme();
|
|
|
|
const COLORS = [
|
|
colors.primary,
|
|
colors.info,
|
|
colors.warning,
|
|
colors.success
|
|
]
|
|
return (
|
|
<ResponsiveContainer width="100%" height={height}>
|
|
<PieChart height={height}>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={renderCustomizedLabel}
|
|
outerRadius={130}
|
|
fill={colors.info}
|
|
dataKey="value"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|
|
|
|
export default CustomizedLabelPie; |