feat(metrics): persist the history-chart range in the URL

Clicking a range now writes ?range=<key> (replaceState — no history spam) and the
chart restores it on init, so reloading the SAME page keeps the chosen range. Opening
the page fresh (no param) still defaults to 24h.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
feat/v1-foundation
boban 2026-06-25 01:59:39 +02:00
parent fbd9c7e257
commit 1697a5d7c2
1 changed files with 15 additions and 1 deletions

View File

@ -261,13 +261,27 @@ document.addEventListener('alpine:init', () => {
W: 1000,
H: 260,
ranges: ['1h', '24h', '7d', '30d'],
init() {
// Restore the range from the URL (?range=) so a reload of the SAME page keeps the choice;
// opening the page fresh (no param) falls back to the 24h default.
const r = new URL(window.location.href).searchParams.get('range');
if (this.ranges.includes(r)) this.range = r;
this.reload();
this._timer = setInterval(() => this.reload(true), 60000); // keep it fresh
},
destroy() { clearInterval(this._timer); },
setRange(r) { if (r !== this.range) { this.range = r; this.reload(); } },
setRange(r) {
if (r === this.range || ! this.ranges.includes(r)) return;
this.range = r;
// Reflect the choice in the URL (replace, not push — no history spam) so it survives a reload.
const url = new URL(window.location.href);
url.searchParams.set('range', r);
window.history.replaceState(window.history.state, '', url);
this.reload();
},
reload(silent = false) {
if (! silent) this.loading = true;