e9798263b5
- Add new /rules route with official league rules covering rosters, scoring, major-based QP scoring, tiebreakers, draft, and season rules - Rewrite how-to-play page with a tutorial/marketing tone, highlighting the Fischer increment draft clock as a novel feature - Add Rules link to navbar (desktop and mobile) - Align QP values in both pages with DEFAULT_QP_VALUES in code - Fix tiebreaker description to match placement-count logic in code - Update all fantasy point displays from toFixed(1) to toFixed(2) across StandingsTable, TeamScoreBreakdown, and PointProgressionChart - Update tests to match new two-decimal-place point display format Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
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(2), '']}
|
|
/>
|
|
<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>
|
|
);
|
|
}
|