86 lines
3.7 KiB
TypeScript
86 lines
3.7 KiB
TypeScript
|
|
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;
|