96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
|
|
import { VelocityTrend } from '@/services/metrics';
|
|
|
|
interface VelocityTrendChartProps {
|
|
data: VelocityTrend[];
|
|
className?: string;
|
|
}
|
|
|
|
export function VelocityTrendChart({ data, className }: VelocityTrendChartProps) {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: any[]; label?: string }) => {
|
|
if (active && payload && payload.length) {
|
|
const data = payload[0].payload;
|
|
return (
|
|
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 shadow-lg">
|
|
<p className="font-medium mb-2">{`Semaine du ${label}`}</p>
|
|
<p className="text-sm text-green-600">
|
|
Terminées: {data.completed}
|
|
</p>
|
|
<p className="text-sm text-blue-600">
|
|
Créées: {data.created}
|
|
</p>
|
|
<p className="text-sm text-purple-600">
|
|
Vélocité: {data.velocity.toFixed(1)}%
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
return (
|
|
<div className={className}>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<LineChart
|
|
data={data}
|
|
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
|
|
<XAxis
|
|
dataKey="date"
|
|
stroke="var(--muted-foreground)"
|
|
fontSize={12}
|
|
/>
|
|
<YAxis
|
|
yAxisId="count"
|
|
stroke="var(--muted-foreground)"
|
|
fontSize={12}
|
|
orientation="left"
|
|
/>
|
|
<YAxis
|
|
yAxisId="velocity"
|
|
stroke="var(--muted-foreground)"
|
|
fontSize={12}
|
|
orientation="right"
|
|
domain={[0, 100]}
|
|
tickFormatter={(value) => `${value}%`}
|
|
/>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Legend />
|
|
<Line
|
|
yAxisId="count"
|
|
type="monotone"
|
|
dataKey="completed"
|
|
stroke="#10b981"
|
|
strokeWidth={2}
|
|
dot={{ fill: "#10b981", strokeWidth: 2, r: 4 }}
|
|
name="Terminées"
|
|
/>
|
|
<Line
|
|
yAxisId="count"
|
|
type="monotone"
|
|
dataKey="created"
|
|
stroke="#3b82f6"
|
|
strokeWidth={2}
|
|
dot={{ fill: "#3b82f6", strokeWidth: 2, r: 4 }}
|
|
name="Créées"
|
|
/>
|
|
<Line
|
|
yAxisId="velocity"
|
|
type="monotone"
|
|
dataKey="velocity"
|
|
stroke="#8b5cf6"
|
|
strokeWidth={3}
|
|
dot={{ fill: "#8b5cf6", strokeWidth: 2, r: 5 }}
|
|
name="Vélocité (%)"
|
|
strokeDasharray="5 5"
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|