progress-charts

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[];   // ordered oldest to newest
  limit?: number;        // default 30 (last N sessions)
}

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;          // default 14
}

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