30c76a2e1a
The card width was too wide on desktop. Adjusted the width to be slightly smaller than the four icon area at the bottom.
42 lines
992 B
TypeScript
42 lines
992 B
TypeScript
|
|
import React from 'react';
|
|
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
|
|
|
|
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={false}
|
|
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExpenseChart;
|