46 lines
1.1 KiB
TypeScript
46 lines
1.1 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 (
|
|
<div className="neuro-card h-64 desktop-card">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={50}
|
|
outerRadius={70}
|
|
paddingAngle={5}
|
|
dataKey="value"
|
|
labelLine={true}
|
|
label={({ name, percent }) => (
|
|
`${name} ${(percent * 100).toFixed(0)}%`
|
|
)}
|
|
fontSize={12}
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExpenseChart;
|