feat: summary tiles (KPI-strip) på players-sidan #5

New Issue

2026-05-21T11:31:43+02:00

shcizo commented

2026-05-21 11:31:43 +02:00

Beskrivning

Lägg till en KPI-strip med fyra summary tiles ovanför players-tabellen som ger en snabb översikt av tracket-läget.

Design

Fyra tiles i en rad (14px gap) ovanför players-tabellen:

Tracked — totalt antal spelare + "X active" subtitle
Avg rating — snittrating över aktiva spelare
Climbing — antal spelare som gått upp den senaste månaden (grön left-rail)
Slipping — antal spelare som gått ner (röd left-rail)

Per tile:

Vit kort, 12px radius, 1px line-border, 14×16px padding
3px-wide left-rail (grå default; grön för Climbing, röd för Slipping)
Stor siffra: JetBrains Mono 28/600 med letter-spacing: -0.02em
Label + subtitle i mindre grå text

Responsive: 4 kolumner desktop → 2 kolumner under 880px.

Tekniska noteringar

Beräknas som härledda värden (pure functions över players-arrayen) — lagra inte i DB
Climbing/Slipping baseras på samma rating_change-fält som Δ month-pillen (#3 — Change-klargörande)
Avg rating — antingen alla trackade eller bara de med non-null current_rating (designen säger "across active players" — välj enklast)
Rendera serverside i samma EJS-template som players-tabellen, eller som separat partial som inkluderas

Användarinställning

Designen markerar tilesen som "toggleable" — det finns en preference för att visa/dölja dem. Implementation:

Persistera i localStorage (samma mönster som planeras för sparkline-toggle, #6)
Toggle-control finns inte specificerad utanför prototypens Tweaks-panel — föreslå antingen en liten settings-meny i topbar, eller utelämna toggle helt i v1 och alltid visa tilesen

Scope

Inkluderat: Markup, styling, serverside-beräkning av de fyra värdena, responsive collapse till 2 kolumner.

Exkluderat: Toggle-UI (om det inte är trivialt) — kan komma som följdissue. Settings-menyn är inte designad ännu.

Beroenden

Bygger på #4 (shared visual layer) för tokens och typografi. Hänger även ihop semantiskt med #3 (Change-klargörande) eftersom Climbing/Slipping använder samma månadsdelta.

## Beskrivning Lägg till en KPI-strip med fyra summary tiles ovanför players-tabellen som ger en snabb översikt av tracket-läget. ## Design Fyra tiles i en rad (14px gap) ovanför players-tabellen: 1. **Tracked** — totalt antal spelare + "X active" subtitle 2. **Avg rating** — snittrating över aktiva spelare 3. **Climbing** — antal spelare som gått upp den senaste månaden (grön left-rail) 4. **Slipping** — antal spelare som gått ner (röd left-rail) **Per tile:** - Vit kort, 12px radius, 1px line-border, 14×16px padding - 3px-wide left-rail (grå default; grön för Climbing, röd för Slipping) - Stor siffra: JetBrains Mono 28/600 med `letter-spacing: -0.02em` - Label + subtitle i mindre grå text **Responsive:** 4 kolumner desktop → 2 kolumner under 880px. ## Tekniska noteringar - Beräknas som **härledda värden** (pure functions över players-arrayen) — lagra inte i DB - Climbing/Slipping baseras på samma `rating_change`-fält som Δ month-pillen (#3 — Change-klargörande) - Avg rating — antingen alla trackade eller bara de med non-null `current_rating` (designen säger "across active players" — välj enklast) - Rendera serverside i samma EJS-template som players-tabellen, eller som separat partial som inkluderas ## Användarinställning Designen markerar tilesen som "toggleable" — det finns en preference för att visa/dölja dem. Implementation: - Persistera i localStorage (samma mönster som planeras för sparkline-toggle, #6) - Toggle-control finns inte specificerad utanför prototypens Tweaks-panel — föreslå antingen en liten settings-meny i topbar, eller utelämna toggle helt i v1 och alltid visa tilesen ## Scope **Inkluderat:** Markup, styling, serverside-beräkning av de fyra värdena, responsive collapse till 2 kolumner. **Exkluderat:** Toggle-UI (om det inte är trivialt) — kan komma som följdissue. Settings-menyn är inte designad ännu. ## Beroenden Bygger på #4 (shared visual layer) för tokens och typografi. Hänger även ihop semantiskt med #3 (Change-klargörande) eftersom Climbing/Slipping använder samma månadsdelta.

shcizo added the enhancement label 2026-05-21 11:31:43 +02:00

shcizo referenced this issue from a commit

2026-05-21 14:39:50 +02:00

feat: wire computeKpis into the page render (#5)

shcizo referenced this issue from a commit

2026-05-21 14:39:50 +02:00

feat: add KPI summary tiles above players table (#5)

shcizo referenced a pull request that will close this issue

2026-05-21 14:40:36 +02:00

feat: players page redesign — deltas, KPI tiles, sparklines, expanded row #9

shcizo referenced this issue from a commit

2026-05-21 15:03:06 +02:00