File size: 2,495 Bytes
24d40b9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
import { cn } from "@/lib/utils";
interface SpendingCategory {
name: string;
value: number;
color: string;
}
interface SpendingAnalyticsProps {
data: SpendingCategory[];
currency?: string;
}
const SpendingAnalytics = ({
data,
currency = "$"
}: SpendingAnalyticsProps) => {
const totalSpending = data.reduce((sum, item) => sum + item.value, 0);
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'symbol',
}).format(amount).replace('$', '');
};
return (
<div className="animate-slide-up py-2">
<h2 className="text-lg font-medium mb-4">Spending by Category</h2>
<div className="flex">
<div className="w-1/2 h-48">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
innerRadius={48}
outerRadius={68}
paddingAngle={2}
dataKey="value"
stroke="none"
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Pie>
</PieChart>
</ResponsiveContainer>
</div>
<div className="w-1/2 space-y-2 my-auto">
{data.map((category, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<div
className="w-3 h-3 rounded-full"
style={{ backgroundColor: category.color }}
/>
<span className="text-sm">{category.name}</span>
</div>
<div className="flex flex-col items-end">
<span className="text-sm font-medium">
{currency}{formatCurrency(category.value)}
</span>
<span className="text-xs text-muted-foreground">
{Math.round((category.value / totalSpending) * 100)}%
</span>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default SpendingAnalytics;
|