nuzlocke-tracker/.beans/nuzlocke-tracker-9ngw--stats-screen.md

---
# nuzlocke-tracker-9ngw
title: Stats Screen
status: completed
type: feature
priority: normal
created_at: 2026-02-07T19:19:40Z
updated_at: 2026-02-07T19:45:55Z
---

A dedicated stats page aggregating data across all runs. Accessible from the main navigation.

## Sections

### 1. Run Overview
- Total runs, active runs, completed runs, failed runs
- Win rate (completed / (completed + failed), excluding active)
- Average run duration (started_at → completed_at for finished runs)
- Pie or bar chart: runs by game (using game.name / game.color)
- Pie or bar chart: runs by region (game.region)
- Pie or bar chart: runs by generation (game.generation)

### 2. Encounter Stats
- Total encounters across all runs
- Breakdown by status: caught / fainted / missed (counts + percentages)
- Catch rate: caught / total encounters
- Average encounters per run

### 3. Pokemon Rankings
- Top N most-caught Pokemon (by pokemon_id frequency across encounters with status=caught), showing sprite + name + count
- Top N most-encountered Pokemon (any status), same display
- Configurable N (default 5, expandable to 10/all)

### 4. Team & Deaths
- Total Pokemon caught, total deaths (caught with faint_level != null)
- Mortality rate: deaths / caught
- Most common death causes (death_cause field, grouped + counted, top 5)
- Average catch level, average faint level
- Type distribution of caught Pokemon (bar chart of pokemon.types, counted across all caught encounters)

## Data Access

### Option A — Frontend-only (compute from existing data)
The list-runs endpoint already returns all runs with encounters. Stats can be computed client-side by fetching all runs. This is simpler but won't scale well with many runs.

### Option B — Dedicated backend endpoint (recommended for scale)
Add `GET /api/stats` that runs aggregate queries server-side and returns pre-computed stats. This is more work but performs better and keeps the frontend thin.

**Recommendation:** Start with Option A for simplicity. If performance becomes an issue, migrate to Option B.

## UI Notes
- New route: `/stats`
- Add "Stats" link to the main nav/sidebar
- Use the existing `StatCard` component for top-level numbers
- Charts: consider a lightweight library (e.g., recharts) or simple CSS bar charts to avoid heavy dependencies
- Responsive grid layout matching the existing design system (dark mode support)

## Checklist
- [x] Add `/stats` route and page component
- [x] Add "Stats" navigation link
- [x] Fetch all runs with encounters (or add backend stats endpoint)
- [x] Run Overview section (counts, win rate, duration)
- [x] Encounter Stats section (caught/fainted/missed breakdown)
- [x] Pokemon Rankings section (top caught, top encountered, expandable)
- [x] Team & Deaths section (mortality, death causes, type distribution)
- [x] Charts for region/generation/type breakdowns
- [x] Responsive layout + dark mode styling