6ef829f667
- Added recharts dependency to package.json for data visualization. - Implemented PointProgressionChart component to display team point progression over time. - Updated scoring-system.md to reflect completion of historical views and added implementation notes. - Created unit tests for PointProgressionChart to ensure correct rendering and data handling. - Developed season completion detection and percentage calculation functions in season-helpers.server.ts. - Added tests for season completion logic and point progression data formatting. - Enhanced league loader to fetch necessary data for current season and teams.
109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "~/components/ui/card";
|
|
|
|
interface Team {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
interface ChartDataPoint {
|
|
date: string;
|
|
[teamName: string]: string | number;
|
|
}
|
|
|
|
interface PointProgressionChartProps {
|
|
chartData: ChartDataPoint[];
|
|
teams: Team[];
|
|
}
|
|
|
|
// Color palette for team lines
|
|
const COLORS = [
|
|
'#3b82f6', // blue
|
|
'#ef4444', // red
|
|
'#10b981', // green
|
|
'#f59e0b', // amber
|
|
'#8b5cf6', // violet
|
|
'#ec4899', // pink
|
|
'#06b6d4', // cyan
|
|
'#f97316', // orange
|
|
'#84cc16', // lime
|
|
'#6366f1', // indigo
|
|
];
|
|
|
|
export function PointProgressionChart({ chartData, teams }: PointProgressionChartProps) {
|
|
if (chartData.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Point Progression</CardTitle>
|
|
<CardDescription>Track how team standings evolved over time</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
<p>No historical data available yet.</p>
|
|
<p className="text-sm mt-2">Point progression will appear once daily snapshots are recorded.</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Format date for display
|
|
const formatDate = (dateStr: string) => {
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Point Progression</CardTitle>
|
|
<CardDescription>
|
|
Track how team standings evolved over time ({chartData.length} day{chartData.length !== 1 ? 's' : ''} of data)
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={400}>
|
|
<LineChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis
|
|
dataKey="date"
|
|
tickFormatter={formatDate}
|
|
className="text-xs"
|
|
tick={{ fill: 'currentColor' }}
|
|
/>
|
|
<YAxis
|
|
label={{ value: 'Points', angle: -90, position: 'insideLeft' }}
|
|
className="text-xs"
|
|
tick={{ fill: 'currentColor' }}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--background))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '6px',
|
|
}}
|
|
labelFormatter={(label) => formatDate(label as string)}
|
|
formatter={(value: number) => [value.toFixed(1), '']}
|
|
/>
|
|
<Legend
|
|
wrapperStyle={{ paddingTop: '20px' }}
|
|
/>
|
|
{teams.map((team, index) => (
|
|
<Line
|
|
key={team.id}
|
|
type="monotone"
|
|
dataKey={team.name}
|
|
stroke={COLORS[index % COLORS.length]}
|
|
strokeWidth={2}
|
|
dot={{ r: 3 }}
|
|
activeDot={{ r: 5 }}
|
|
connectNulls
|
|
/>
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|