44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
|
|
import React from 'react';
|
|
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
|
|
import { getCategoryColor } from '@/utils/categoryColorUtils';
|
|
|
|
interface ExpenseData {
|
|
name: string;
|
|
value: number;
|
|
color: string;
|
|
}
|
|
|
|
interface ExpenseChartProps {
|
|
data: ExpenseData[];
|
|
}
|
|
|
|
const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={50}
|
|
outerRadius={80}
|
|
paddingAngle={5}
|
|
dataKey="value"
|
|
labelLine={false}
|
|
label={({ name, percent }) => (
|
|
`${name} ${(percent * 100).toFixed(0)}%`
|
|
)}
|
|
fontSize={12}
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|
|
|
|
export default ExpenseChart;
|