progress-charts

# 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:
```typescript
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:
```typescript
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

```bash
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