Version : 2025.11.22

components/OperationsChart.tsx

@@ -0,0 +1,85 @@
+
+import React, { useMemo } from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { Balance, Operation } from '../types';
+import { format, eachDayOfInterval, isBefore, isEqual } from 'date-fns';
+
+interface OperationsChartProps {
+    balances: Balance[];
+    allOperations: Operation[];
+    dateRange: { start: Date, end: Date };
+}
+
+const OperationsChart: React.FC<OperationsChartProps> = ({ balances, allOperations, dateRange }) => {
+
+    const chartData = useMemo(() => {
+        const days = eachDayOfInterval(dateRange);
+        
+        const balanceColors = ['#1f2937', '#6b7280', '#ef4444', '#10b981', '#3b82f6', '#a855f7'];
+
+        const data = days.map(day => {
+            const entry: { date: string, [key: string]: number | string } = {
+                date: format(day, 'MMM dd'),
+            };
+
+            balances.forEach(balance => {
+                const balanceAtStartOfRange = balance.initialAmount + allOperations
+                    .filter(op => op.balanceId === balance.id && isBefore(new Date(op.date), dateRange.start))
+                    .reduce((acc, op) => acc + (op.type === 'income' ? op.amount : -op.amount), 0);
+                
+                const dailyTotal = allOperations
+                    .filter(op => op.balanceId === balance.id && isBefore(new Date(op.date), day) && isEqual(new Date(op.date), day))
+                    .reduce((acc, op) => acc + (op.type === 'income' ? op.amount : -op.amount), balanceAtStartOfRange);
+                
+                const operationsInPeriodUntilDay = allOperations
+                    .filter(op => {
+                        const opDate = new Date(op.date);
+                        return op.balanceId === balance.id &&
+                               opDate >= dateRange.start &&
+                               opDate <= day;
+                    })
+                    .reduce((acc, op) => acc + (op.type === 'income' ? op.amount : -op.amount), 0);
+
+                entry[balance.name] = balanceAtStartOfRange + operationsInPeriodUntilDay;
+            });
+
+            return entry;
+        });
+        
+        return { data, colors: balanceColors };
+    }, [balances, allOperations, dateRange]);
+
+
+    if (!balances.length) {
+        return <p>No balances to display.</p>
+    }
+
+    return (
+        <div style={{ width: '100%', height: 300 }}>
+            <ResponsiveContainer>
+                <LineChart data={chartData.data}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+                    <XAxis dataKey="date" tick={{ fontSize: 12 }} stroke="#6b7280" />
+                    <YAxis tick={{ fontSize: 12 }} stroke="#6b7280" tickFormatter={(value) => new Intl.NumberFormat('fr-FR', { notation: 'compact', compactDisplay: 'short' }).format(value as number)}/>
+                    <Tooltip 
+                        contentStyle={{ backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0.5rem' }}
+                        formatter={(value) => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value as number)}
+                    />
+                    <Legend wrapperStyle={{fontSize: "14px"}}/>
+                    {balances.map((balance, index) => (
+                        <Line
+                            key={balance.id}
+                            type="monotone"
+                            dataKey={balance.name}
+                            stroke={chartData.colors[index % chartData.colors.length]}
+                            strokeWidth={2}
+                            dot={false}
+                        />
+                    ))}
+                </LineChart>
+            </ResponsiveContainer>
+        </div>
+    );
+};
+
+export default OperationsChart;