feat: inline sparklines + trend chart toggle #6

New Issue

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

shcizo commented

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

Beskrivning

Lägg till en inline sparkline (mini trend-chart) per spelarrad i players-tabellen, plus en pill-toggle i tabellens toolbar som visar/döljer dem. Toggle-tillståndet persisteras mellan reloads.

Design

Sparkline

96×28 px SVG inline i rating-cellen (under stora rating-numret och Δ month-pillen)
Linje i --accent-färg, area-fill 10% opacity
Sista datapunkten markeras med 2.5px dot
Källdata: spelarens månadsvis rating-historia (oldest → newest)

Trend chart pill (toolbar-toggle)

Pill-knapp i övre högra hörnet av players-tabellens toolbar.

Pill-form, padding: 5px 12px 5px 10px, font 12/600
Off-state: --paper-2 bakgrund, --line-2 border, --ink-2 text. Hover = mörkare border + ink-färg.
On-state: color-mix(in oklab, var(--accent) 10%, white) bakgrund, color-mix(in oklab, var(--accent) 35%, var(--line-2)) border, --accent-text text
Innehåller: tiny trend-line ikon (14px), label "Trend chart", och en 7px dot:
- Off: grå, 40% opacity
- On: accent-färg, full opacity, 3px ring 20% opacity

Persistens

Spara state i localStorage (förslagsvis nyckel ratingtracker.trendchart). Återställ vid sidladdning.

Tekniska noteringar

Sparklinedata = player.history-arrayen (månadsvis snapshots). Idag finns rating-historik i rating_history-tabellen men ingen pre-aggregerad månadsserie returneras till frontend — antingen:
- Aggregera serverside och inkludera i player-modellens svar
- Eller hämta via HTMX/JSON-endpoint vid behov
Designen säger att toggle påverkar alla rader samtidigt via DOM-attribut (<html data-sparklines="on|off">). I HTMX-kontext kan detta vara enklast — en root-klass på <body> som CSS reagerar på.
Sparkline-SVG kan renderas serverside i EJS (inga deps) eller clientside med liten helper. Serverside passar bäst med existerande arkitektur.

Förslag till implementation

Lägg till monthlyHistory: number[] i player-service:s svar (kort månadsserie, t.ex. senaste 12 månaderna)
EJS-helper för att rendera SVG-sparkline från en array
Lägg in pill-toggle i tabellens toolbar
Liten JS-snippet i public/js/ som togglar root-attribut + skriver till localStorage
CSS: [data-sparklines="off"] .sparkline { display: none; }

Scope

Inkluderat: Sparkline-rendering, toolbar-pill, on/off-toggle med localStorage-persistens, datalager-uppdatering för att exponera månadsserien.

Exkluderat: Interaktiva sparklines (hover-tooltip etc.) — designen specificerar bara statisk inline-chart.

Beroenden

#4 (shared visual layer) för tokens
Kan bygga ovanpå #3 (Change-klargörande) men kräver inte den

Performance

12 datapunkter × N spelare = trivialt. Ingen prestandaoro.

## Beskrivning Lägg till en inline sparkline (mini trend-chart) per spelarrad i players-tabellen, plus en pill-toggle i tabellens toolbar som visar/döljer dem. Toggle-tillståndet persisteras mellan reloads. ## Design ### Sparkline - 96×28 px SVG inline i `rating`-cellen (under stora rating-numret och Δ month-pillen) - Linje i `--accent`-färg, area-fill 10% opacity - Sista datapunkten markeras med 2.5px dot - Källdata: spelarens månadsvis rating-historia (oldest → newest) ### Trend chart pill (toolbar-toggle) Pill-knapp i övre högra hörnet av players-tabellens toolbar. - Pill-form, `padding: 5px 12px 5px 10px`, font 12/600 - **Off-state:** `--paper-2` bakgrund, `--line-2` border, `--ink-2` text. Hover = mörkare border + ink-färg. - **On-state:** `color-mix(in oklab, var(--accent) 10%, white)` bakgrund, `color-mix(in oklab, var(--accent) 35%, var(--line-2))` border, `--accent-text` text - Innehåller: tiny trend-line ikon (14px), label "Trend chart", och en 7px dot: - Off: grå, 40% opacity - On: accent-färg, full opacity, 3px ring 20% opacity ### Persistens Spara state i `localStorage` (förslagsvis nyckel `ratingtracker.trendchart`). Återställ vid sidladdning. ## Tekniska noteringar - Sparklinedata = `player.history`-arrayen (månadsvis snapshots). Idag finns rating-historik i `rating_history`-tabellen men ingen pre-aggregerad månadsserie returneras till frontend — antingen: - Aggregera serverside och inkludera i player-modellens svar - Eller hämta via HTMX/JSON-endpoint vid behov - Designen säger att toggle påverkar **alla rader** samtidigt via DOM-attribut (`<html data-sparklines="on|off">`). I HTMX-kontext kan detta vara enklast — en root-klass på `<body>` som CSS reagerar på. - Sparkline-SVG kan renderas serverside i EJS (inga deps) eller clientside med liten helper. Serverside passar bäst med existerande arkitektur. ## Förslag till implementation 1. Lägg till `monthlyHistory: number[]` i player-service:s svar (kort månadsserie, t.ex. senaste 12 månaderna) 2. EJS-helper för att rendera SVG-sparkline från en array 3. Lägg in pill-toggle i tabellens toolbar 4. Liten JS-snippet i `public/js/` som togglar root-attribut + skriver till localStorage 5. CSS: `[data-sparklines="off"] .sparkline { display: none; }` ## Scope **Inkluderat:** Sparkline-rendering, toolbar-pill, on/off-toggle med localStorage-persistens, datalager-uppdatering för att exponera månadsserien. **Exkluderat:** Interaktiva sparklines (hover-tooltip etc.) — designen specificerar bara statisk inline-chart. ## Beroenden - #4 (shared visual layer) för tokens - Kan bygga ovanpå #3 (Change-klargörande) men kräver inte den ## Performance 12 datapunkter × N spelare = trivialt. Ingen prestandaoro.

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

shcizo referenced this issue

2026-05-21 11:33:46 +02:00

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

shcizo referenced this issue

2026-05-21 11:33:51 +02:00

feat: redesigna expanderad spelarrad med detail-grid + history chart #7

shcizo referenced this issue from a commit

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

feat: add monthlyHistory[] per player via getMonthlyHistory + bulk fetch (#6)

shcizo referenced this issue from a commit

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