| name | progress-charts |
| description | Recharts-based WPM progress visualization for typing-trainer. Use when implementing or modifying the WPM over time chart, sessions per day bar chart, or any data visualization in the progress dashboard. |
progress-charts
Recharts integration for typing-trainer progress visualization.
When to use
- Building the WPM over time line chart
- Building the sessions per day bar chart
- Adding new chart types to the progress or stats pages
- Modifying chart colors, axes, or tooltips
Chart components
ChartWpm (WPM over time)
Located at src/components/ChartWpm.tsx.
Props:
interface ChartWpmProps {
sessions: Session[];
limit?: number;
}
Renders a Recharts LineChart with:
- X-axis: session index or short date label
- Y-axis: WPM, domain [0, maxWpm + 20]
- Line:
--primary color (#15803d), stroke-width 2
- Dot: filled circle,
--primary, radius 4
- Tooltip: styled card with WPM, accuracy, language, date
ChartSessionsPerDay (bar chart)
Located at src/components/ChartWpm.tsx (exported as named export).
Props:
interface ChartSessionsProps {
sessions: Session[];
days?: number;
}
Renders a Recharts BarChart with:
- X-axis: day labels (Mon, Tue, etc.)
- Y-axis: session count
- Bar fill:
--primary-light, stroke --primary-muted
Dependencies
pnpm add recharts
Recharts requires React and ReactDOM as peer dependencies (already installed).
Styling rules
- All chart colors use CSS variables, NOT hardcoded hex values
- Grid lines:
--border color with 50% opacity
- Axis tick labels:
--font-mono, 11px, --text-muted
- Tooltip:
--bg-surface, border --border, shadow --shadow-md, radius --radius-lg
- Responsive: wrap in
<ResponsiveContainer width="100%" height={200}>
Accessibility
- All charts have an ARIA label describing what they show
- Tooltip content is also readable via keyboard (Recharts handles this)
- Color is not the only differentiator - tooltips show values
