49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
|
|
import { ChartData } from '../../types';
|
|
|
|
interface PieChartProps {
|
|
data: ChartData[];
|
|
title?: string;
|
|
colors?: string[];
|
|
}
|
|
|
|
const DEFAULT_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
|
|
|
|
export const PieChart = ({ data, title, colors = DEFAULT_COLORS }: PieChartProps) => {
|
|
return (
|
|
<div className="card p-6">
|
|
{title && (
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
|
{title}
|
|
</h3>
|
|
)}
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<RechartsPieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'var(--tooltip-bg)',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
|
}}
|
|
labelStyle={{ color: 'var(--tooltip-text)' }}
|
|
/>
|
|
</RechartsPieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
};
|