Dashboard charts: drag across one to zoom

jcoffey-dev commented

2026-10-05 22:06:22 +00:00

Owner

Admin UX roadmap item 15, the "charts you can zoom" half.

What it does

Drag across any trend chart (trend pages, cluster view) and every panel narrows to that window. "Drag to zoom" sits in each zoomable chart's heading; the pointer is a crosshair over the plot.
A Zoom chip beside 24H · 7D · 30D · 90D shows the window ("Oct 4 08:04 PM – Oct 5 04:34 AM"); clicking it goes back to the preset it came from. Picking a preset ends the zoom too.
A click isn't a drag: only a sweep over two slices or more zooms.

Choices

History is sampled hourly by default (metricsCollectionInterval), so a zoomed window gets a slice per hour, 3 to 60 of them, and is never under three hours; a shorter sweep widens around its middle, inside the chart's own window.
The store saves only the preset (zoomedFrom ?? period), so a reload never lands in an old window and a custom period never has to come back out of JSON.
The slice under the pointer is read from its position against the chart's grid, not from recharts' hover state, which runs a frame behind: a fast sweep ended on the slice it started from.
The x axis is now the slice index with the time as its label, so two slices that print alike stay apart.
After a drag the chart no longer keeps a mouse-focus outline; keyboard focus still shows it.

Strings: 3 new English strings (cc.zoomed, cc.zoomReset, cc.dragToZoom). No other catalogues yet.

Checked

npm test (61 files, 591 tests; 13 new in features/dashboard/zoom.test.ts), typecheck, lint, i18n check, build.
In Chrome against a throwaway local server: a fast drag on Network › HTTP connections zoomed to 8½ h with hourly ticks; the chip appeared, no preset lit, readouts said "Chosen period"; a reload came back on 24H; the chip went back to 24H.

Not in this PR: sparklines in tables, the other half of item 15. It needs a decision about which tables, since per-object history doesn't exist on the server.

Admin UX roadmap item 15, the "charts you can zoom" half. **What it does** - Drag across any trend chart (trend pages, cluster view) and every panel narrows to that window. "Drag to zoom" sits in each zoomable chart's heading; the pointer is a crosshair over the plot. - A **Zoom** chip beside 24H · 7D · 30D · 90D shows the window ("Oct 4 08:04 PM – Oct 5 04:34 AM"); clicking it goes back to the preset it came from. Picking a preset ends the zoom too. - A click isn't a drag: only a sweep over two slices or more zooms. **Choices** - History is sampled hourly by default (`metricsCollectionInterval`), so a zoomed window gets a slice per hour, 3 to 60 of them, and is never under three hours; a shorter sweep widens around its middle, inside the chart's own window. - The store saves only the preset (`zoomedFrom ?? period`), so a reload never lands in an old window and a custom period never has to come back out of JSON. - The slice under the pointer is read from its position against the chart's grid, not from recharts' hover state, which runs a frame behind: a fast sweep ended on the slice it started from. - The x axis is now the slice index with the time as its label, so two slices that print alike stay apart. - After a drag the chart no longer keeps a mouse-focus outline; keyboard focus still shows it. **Strings:** 3 new English strings (`cc.zoomed`, `cc.zoomReset`, `cc.dragToZoom`). No other catalogues yet. **Checked** - `npm test` (61 files, 591 tests; 13 new in `features/dashboard/zoom.test.ts`), typecheck, lint, i18n check, build. - In Chrome against a throwaway local server: a fast drag on Network › HTTP connections zoomed to 8½ h with hourly ticks; the chip appeared, no preset lit, readouts said "Chosen period"; a reload came back on 24H; the chip went back to 24H. **Not in this PR:** sparklines in tables, the other half of item 15. It needs a decision about which tables, since per-object history doesn't exist on the server.

jcoffey-dev added 1 commit 2026-10-05 22:06:22 +00:00

Dashboard charts: drag across one to zoom

ci / github (pull_request) Skipped

Details

github/ci (branch) GitHub Actions

Details

ci / build (pull_request) Successful in 1m42s

Details

ci / publish (pull_request) Skipped

Details

383f51eb48

Admin UX roadmap item 15, "charts you can zoom". Dragging across a
trend chart narrows every panel to that window; a Zoom chip beside the
period keys shows it, and clicking the chip goes back to the preset.

- History is sampled hourly unless set otherwise, so a zoomed window
  gets a slice per hour (3 to 60) and is never under three hours; a
  shorter sweep widens around its middle.
- Only the preset is saved, so a reload is back at it rather than in an
  old window.
- The slice under the pointer comes from its position on the plot, not
  from recharts' hover state, which runs a frame behind and made a
  quick sweep end where it began.
- Charts are plotted by slice rather than by label, so two slices that
  print alike stay apart.

3 new English strings; no other catalogues yet.

jcoffey-dev merged commit 772ff85b88 into main

2026-10-05 22:08:19 +00:00

jcoffey-dev deleted branch feat/chart-zoom

2026-10-05 22:08:21 +00:00

Dashboard charts: drag across one to zoom #79