// Admin → System — fullscreen single-metric deep-dive overlay.
//
// Opens when the user hits "Expand" on a gauge, chart card, or any metric
// surface on the admin System page. Renders a large interactive chart with
// axes, gridlines, hover crosshair + tooltip, and a stat strip (now / peak /
// min / avg / Δ) — all driven from /api/system/history + the live SSE feed.
// Range picker (1h / 6h / 24h / 7d) re-fetches and animates between datasets.
//
// Zero dependencies — everything is hand-rolled SVG and pointer events. The
// overlay is a singleton instance attached to ; opening with a fresh
// metric reuses the same DOM.
class SystemDetail {
constructor() {
this.el = null;
this.metric = null;
this.rangeMin = 360; // default to 6 h
this.points = [];
this.unsubLive = null;
this.hoverIdx = -1;
this._rafHover = null;
this._onKey = this._onKey.bind(this);
this._onResize = this._onResize.bind(this);
}
// Public: open the overlay for a given metric definition.
// m = { key, label, unit, color, max, fmt, sublabel?, accentRgb? }
open(m) {
this.metric = m;
if (!this.el) this._mount();
this.el.classList.add('open');
this.el.setAttribute('aria-hidden', 'false');
document.body.classList.add('sys-detail-active');
document.addEventListener('keydown', this._onKey);
window.addEventListener('resize', this._onResize);
this._renderShell();
this._loadRange();
this._attachLive();
}
close() {
if (!this.el) return;
this.el.classList.remove('open');
this.el.setAttribute('aria-hidden', 'true');
document.body.classList.remove('sys-detail-active');
document.removeEventListener('keydown', this._onKey);
window.removeEventListener('resize', this._onResize);
this._detachLive();
this.points = [];
this.metric = null;
}
_onKey(e) { if (e.key === 'Escape') this.close(); }
_onResize() { this._renderChart(); }
_mount() {
const el = document.createElement('div');
el.className = 'sys-detail';
el.setAttribute('role', 'dialog');
el.setAttribute('aria-modal', 'true');
el.setAttribute('aria-hidden', 'true');
el.innerHTML = `