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

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

shcizo commented

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

Summary

Bundles the players-page redesign on top of the shared visual layer + topbar foundation.

Issues closed: closes #3, closes #4, closes #5, closes #6, closes #7

What's in this PR

#4 — shared visual layer + redesigned topbar (foundation work). New token system (--paper, --ink/2/3, --accent, --up/-soft, --down/-soft, etc.) bridging legacy aliases. Sticky topbar with brand, segmented nav, meta (Next update / Last refresh), Refresh-all button.
#3 — Δ-column clarification. Split the old "Change" column into two semantically distinct pills: Δ month (real change since last PDGA update, in rating cell) and Δ predicted (gap to next predicted rating, in predicted cell). Headers get small hint text.
#5 — Four KPI summary tiles above the table (Tracked / Avg rating / Climbing / Slipping). 4-col desktop → 2-col under 880px. Climbing/Slipping have green/red left-rails.
#6 — Inline 96×28 SVG sparkline per row from a new monthlyHistory field (12 most-recent months, oldest→newest). Toolbar pill "Trend chart" toggles all sparklines on/off, persisted in localStorage('ratingtracker.sparklines').
#7 — Redesigned expanded row: 240px 1fr grid with detail-grid (Current / Last month / Δ month / Predicted / Δ predicted) on the left and a redesigned 880×240 SVG history chart on the right. Only one row open at a time. Keyboard support (tabindex="0" + Enter/Space). 3px accent stripe on the open row's left edge. expandIn animation.
Cleanup — removed orphaned public/js/progress.js (dead since the topbar redesign).

Notes

Data contract introduced across the boundary: each player object now carries lastMonthRating, deltaPredicted, and monthlyHistory: number[]. The / page route also passes a kpis local. Both implemented as pure derivations / aggregates — no new DB columns.
The Δ-pill markup is centralized in views/partials/delta-pill.ejs (used at 4 EJS sites) and a renderDeltaPill() helper in public/js/players.js (used by refreshPlayer for in-place DOM updates).
The history chart in public/js/chart.js was rewritten to use the SVG DOM API instead of innerHTML, matching the design spec exactly (4 dashed grid ticks, 8% area fill, 2px accent stroke, 3px dots, 4px+halo last point, 5 evenly-spaced "MMM YY" x-labels).

Test plan

Browser-only — no test infra in the repo. Run npm start (or docker compose up) and open http://localhost:3000/.

KPI strip renders above the table with 4 tiles. Tracked/Avg/Climbing/Slipping show plausible numbers. Resize browser below 880px → tiles collapse to 2 columns.
Δ-month pill under each rating value (mint for positive, peach for negative, grey for zero/null). Header reads "Δ month" with "since last update" hint.
Δ-predicted pill under each predicted value. Header reads "Predicted" with "gap from today" or similar hint.
Sparklines render inline in each row's rating cell (96×28 SVG, accent line + 10% area fill + dot on last point).
Trend-chart pill in the table toolbar toggles all sparklines on/off. Reload preserves the state. aria-pressed flips correctly.
Click a row → expanded panel opens with the new detail-grid + chart. Chart shows dashed grid lines, 8% area fill, dots, halo on the last point, "MMM YY" x-labels.
Open a second row → first row closes automatically. Only one row open at a time.
Tab to a row + Enter or Space also toggles. Space does not scroll the page.
Refresh-all button in the topbar still works — table refreshes, topbar shows new "Last refresh" time.
Per-player refresh icons (rating cell, predicted cell) still work without triggering row expansion.
Tooltips on rating/predicted values still show std-dev info on hover.

## Summary Bundles the players-page redesign on top of the shared visual layer + topbar foundation. **Issues closed**: closes #3, closes #4, closes #5, closes #6, closes #7 ### What's in this PR - **#4** — shared visual layer + redesigned topbar (foundation work). New token system (`--paper`, `--ink/2/3`, `--accent`, `--up/-soft`, `--down/-soft`, etc.) bridging legacy aliases. Sticky topbar with brand, segmented nav, meta (Next update / Last refresh), Refresh-all button. - **#3** — Δ-column clarification. Split the old "Change" column into two semantically distinct pills: `Δ month` (real change since last PDGA update, in rating cell) and `Δ predicted` (gap to next predicted rating, in predicted cell). Headers get small hint text. - **#5** — Four KPI summary tiles above the table (Tracked / Avg rating / Climbing / Slipping). 4-col desktop → 2-col under 880px. Climbing/Slipping have green/red left-rails. - **#6** — Inline 96×28 SVG sparkline per row from a new `monthlyHistory` field (12 most-recent months, oldest→newest). Toolbar pill "Trend chart" toggles all sparklines on/off, persisted in `localStorage('ratingtracker.sparklines')`. - **#7** — Redesigned expanded row: `240px 1fr` grid with detail-grid (Current / Last month / Δ month / Predicted / Δ predicted) on the left and a redesigned 880×240 SVG history chart on the right. Only one row open at a time. Keyboard support (`tabindex="0"` + Enter/Space). 3px accent stripe on the open row's left edge. `expandIn` animation. - **Cleanup** — removed orphaned `public/js/progress.js` (dead since the topbar redesign). ### Notes - Data contract introduced across the boundary: each player object now carries `lastMonthRating`, `deltaPredicted`, and `monthlyHistory: number[]`. The `/` page route also passes a `kpis` local. Both implemented as pure derivations / aggregates — no new DB columns. - The Δ-pill markup is centralized in `views/partials/delta-pill.ejs` (used at 4 EJS sites) and a `renderDeltaPill()` helper in `public/js/players.js` (used by `refreshPlayer` for in-place DOM updates). - The history chart in `public/js/chart.js` was rewritten to use the SVG DOM API instead of `innerHTML`, matching the design spec exactly (4 dashed grid ticks, 8% area fill, 2px accent stroke, 3px dots, 4px+halo last point, 5 evenly-spaced "MMM YY" x-labels). ## Test plan Browser-only — no test infra in the repo. Run `npm start` (or `docker compose up`) and open `http://localhost:3000/`. - [ ] **KPI strip** renders above the table with 4 tiles. Tracked/Avg/Climbing/Slipping show plausible numbers. Resize browser below 880px → tiles collapse to 2 columns. - [ ] **Δ-month pill** under each rating value (mint for positive, peach for negative, grey for zero/null). Header reads "Δ month" with "since last update" hint. - [ ] **Δ-predicted pill** under each predicted value. Header reads "Predicted" with "gap from today" or similar hint. - [ ] **Sparklines** render inline in each row's rating cell (96×28 SVG, accent line + 10% area fill + dot on last point). - [ ] **Trend-chart pill** in the table toolbar toggles all sparklines on/off. Reload preserves the state. `aria-pressed` flips correctly. - [ ] **Click a row** → expanded panel opens with the new detail-grid + chart. Chart shows dashed grid lines, 8% area fill, dots, halo on the last point, "MMM YY" x-labels. - [ ] **Open a second row** → first row closes automatically. Only one row open at a time. - [ ] **Tab to a row + Enter or Space** also toggles. Space does not scroll the page. - [ ] **Refresh-all** button in the topbar still works — table refreshes, topbar shows new "Last refresh" time. - [ ] **Per-player refresh icons** (rating cell, predicted cell) still work without triggering row expansion. - [ ] **Tooltips** on rating/predicted values still show std-dev info on hover.

shcizo added 15 commits 2026-05-21 14:40:37 +02:00

feat: shared visual layer + redesigned topbar (#4 ) 8c977d6624

Introduce new design token set (paper/ink/line/accent + radius/shadow)
with backward-compat aliases for legacy --surface/--navy/--text names.
Swap DM Sans for Plus Jakarta Sans, add JetBrains Mono with tabular
numerics. Replace .app-header with sticky .topbar partial (brand +
segmented nav + Next update / Last refresh meta + Refresh all button).

Add POST /api/refresh-all that runs refreshAllPlayersInDB() with an
in-memory mutex and returns the rendered topbar so HTMX can swap it
in. "Next update" is computed as first Tuesday of next month
(approximation of PDGA's monthly cycle). "Last refresh" derives
from MAX(players.last_updated).

fix: address code review for visual layer + topbar (#4 ) de99d4ede7

chore: remove redundant "Load All" link from players page (#4 ) 53bc6e571d

The topbar's "Refresh all" button (introduced in #4) supersedes this
link. Leaving the gear icon for clearCache() — that's a separate
concern.

chore: remove dead code orphaned by topbar redesign (#4 ) 3f7a1bb7bf

The new topbar's "Refresh all" button replaces the old SSE-driven
"Load All" link and progress UI. With those gone, several pieces of
infrastructure had no callers left:

- GET /api/load-all-players, POST /api/populate-database, and
  GET /api/database-status — SSE endpoints with no frontend consumers
- #progress-section / #loading divs in players + courses pages
- .progress-container / .progress-bar / .progress-text / .loading CSS
- public/js/progress.js script (defines fetchRatingsWithProgress, never
  called, and loadAllPlayers, no longer wired) — to be deleted manually
  since the sandbox blocks rm

feat: expose lastMonthRating and deltaPredicted on player objects (#3 ) 19756b80e5

Add two derived fields to all player objects returned by
getPlayerDataFromDB and the error branch in getAllRatingsFromDB.
No new DB columns — both fields are pure arithmetic derivations.
monthlyHistory placeholder [] included ahead of A2 implementation.

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

Add getMonthlyHistory() to models/player for single-player use and
getAllMonthlyHistoriesFromDB() for bulk fetches (one query, grouped in
memory). Wire monthlyHistory into all player objects returned by
getPlayerDataFromDB and getAllRatingsFromDB. Bulk path pre-fetches in
one query to avoid N extra per-player queries.

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

feat: render sparklines + wire trend-chart pill toggle (#6 ) b51ae19ae1

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

feat: pass player record into player-history partial render (#7 ) e5f16e624e

feat: redesign expanded row with detail-grid + history chart (#7 ) b75e60da65

fix: return latest N months in getMonthlyHistory (#6 ) 9df151f109

fix: address code review findings — DRY delta-pill, var→const/let, tokenize colors 0ded27f9df

fix: drop unused html field from renderDeltaPill (#3 ) cc223a4b8a

chore: delete dead progress.js (#4 ) ac6008aa14

shcizo added 1 commit 2026-05-21 15:03:06 +02:00

fix: use template-literal interpolation for KPI strip inside body string (#5 ) 686d7ca00c

The page body is assembled as a JS template literal inside <% ... %>;
EJS tags inside that string break the EJS parser (it sees the first %>
as the close of the outer tag). Switch to ${kpis.x} interpolation since
we're already inside a backtick string.

shcizo added 4 commits 2026-05-21 15:18:47 +02:00

refactor: design-fidelity pass on players page 16d375ae10

fix: null-safe icon selectors after table restructure (#4 ) 7af9d8d69e

feat: add 'View calculation details' link to expanded row (#4 ) 7fb8cab5e2

chore: remove dead .refresh-section CSS (#4 ) 259a3fadf1

shcizo added 1 commit 2026-05-21 15:23:56 +02:00

fix: place history chart in right grid column of expanded row (#7 ) 88df98f269

The dl + button + chart were 3 direct children of .player-detail (a
2-column grid). Auto-placement put the button in the right column,
forcing the chart to wrap to a second row in the left column.
Wrap dl + button in .player-detail-left so the chart occupies col 2.

shcizo added 1 commit 2026-05-21 15:27:12 +02:00

fix: remove sticky thead — overlapped table toolbar (#4 ) 9feb5c2c43

The thead had position: sticky; top: var(--topbar-height), pinning it
to 64px from the viewport. Inside the new .table-card with a toolbar
above, this pulled the header up out of its natural flow and overlapped
the toolbar and first data row. Let thead flow normally — design
doesn't require sticky behavior.

shcizo added 1 commit 2026-05-21 15:34:45 +02:00

fix CSS for rating row 96ae7d7dac

shcizo added 1 commit 2026-05-21 15:51:26 +02:00

render flat delta pill for null values per design spec 4b145094bf

shcizo added 1 commit 2026-05-21 15:59:08 +02:00

fallback to monthlyHistory for lastMonthRating a7562e9b47

shcizo added 1 commit 2026-05-21 16:04:27 +02:00

wire refresh button to update both rating and prediction b6c674e4c7

shcizo added 1 commit 2026-05-21 16:11:40 +02:00

re-swap table after refresh for consistent in-place updates

Release Please / release-please (push) Failing after 44s

Details

Release Please / docker (push) Has been skipped

Details

15adddc2f1

shcizo merged commit 15adddc2f1 into main

2026-05-21 16:14:01 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: shcizo/pdga-rating#9