portal-mojo 0.2.12 → 0.2.14

package/docs/admin-modals.md

@@ -27,6 +27,12 @@ height; embedded/page hosts have no modal minimum or maximum and may omit
 `onClose`. A flush modal has a fallback close control while its body loads or
 fails; successful DetailView bodies supply the normal header close.
 
+`modal.open(render, { signal })` optionally binds a dialog to an AbortSignal.
+Already-aborted signals resolve null without adding an entry. Later abort removes
+only that entry immediately and resolves null, even before `ModalHost` mounts;
+normal close removes the listener. Owner disposal bypasses `canDismiss` because
+it ends the data scope. An owner must also abort its controller on unmount.
+
 ## Executable inventory
 
 `scripts/admin-modal-inventory.json` records file, owner, launcher/helper, body,

package/docs/charts.md

@@ -2,7 +2,7 @@
 
 ```ts
 import {
-    SeriesChart, MetricsChart, MiniChart, MetricsMiniWidget,
+    SeriesChart, MetricsChart, MetricsChartView, MiniChart, MetricsMiniWidget,
     KPITile, KPIStrip, CircularProgress, PieChart,
     showSeriesStats, showSeriesData, exportChartPng,
     computeSeriesStats, computeTrend, deltaBadge,   // pure math
@@ -67,7 +67,75 @@ daterange triple — `/api/metrics/fetch` ignores it silently. web-mojo sent
 
 Legend entries toggle series; hover shows the crosshair index tooltip;
 ticks are "nice"-rounded; container width is measured (no viewBox
-smearing).
+smearing). The left margin measures formatted Y-axis labels before paint and
+expands for values such as `100.0 MB`, preserving their leading digits inside
+clipped containers. Short percentage labels retain the compact 48px margin;
+switching formatters or hiding Y labels restores it. Plot geometry, numeric X
+ticks and pointer inspection share the adjusted origin.
+The margin is capped at 40% of chart width (at most 160px), preserving plot
+space for exceptional formatters. Longer labels shorten with ellipsis inside
+a clipping boundary; SVG titles and accessible labels retain the full text.
+Measurement always uses the full hidden text, so resizing cannot alternate
+between full and abbreviated widths.
+
+Sparse histories can opt into numeric X positions without changing categorical
+callers:
+
+```tsx
+<SeriesChart
+    labels={['10:01', '10:02', '10:03', '10:12', '10:13']}
+    xValues={[60, 120, 180, 720, 780]}
+    xDomain={[0, 900]}
+    maxGap={180}
+    datasets={[{ label: 'CPU', data: [12, 24, null, 40, 32] }]}
+    minValue={0} maxValue={100}
+    ariaLabel="Kiosk CPU history"
+    valueFormatter={(value) => `${value}%`}
+    onInspect={(index) => { /* selected original sample index, or null */ }}
+/>
+```
+
+- `Dataset.data` accepts `(number | null | undefined)[]`. Null, undefined,
+  `NaN`, and infinities are unavailable: no zero substitution, connecting
+  line, area fill across the gap, bar, or inspection dot. Tooltips say
+  **Unavailable**; incomplete stacked totals do too. A one-point run always
+  has a dot, even above 40 labels or with routine `showDots={false}`.
+- `xValues?: number[]` aligns with the original labels/data indices. Supply
+  ordered timestamps (seconds or milliseconds both work); labels are display
+  strings only. Numeric spacing uses actual values. A missing/nonfinite X
+  breaks the run and cannot be inspected. Reversed X movement breaks the run.
+  With no `xValues`, the existing evenly spaced category centers remain.
+- `xDomain?: [number, number]` fixes the visible window, including empty time
+  before/after the samples. Out-of-window samples are omitted from drawing,
+  inspection, and automatic Y scaling. Omit it to fit the finite X values;
+  a single distinct X is centered. Invalid/reversed domains fall back to fit.
+- Numeric axes use 2–6 evenly spaced ticks over that domain, including its
+  endpoints, independent of clustered sample positions. `xValueFormatter?:
+  (value: number) => string` formats those ticks in the same units as `xValues`;
+  for epoch seconds, for example, return `new Date(value * 1000).toLocaleTimeString([], {
+  hour: '2-digit', minute: '2-digit' })`. Without a formatter, ticks show numeric
+  values. Width and label length reduce tick density; very long labels shorten
+  with ellipsis inside nonoverlapping slots and retain full text in SVG titles.
+  Inspection tooltips and accessible readouts always retain the original
+  `labels`. No tick adds a sample or moves a data point. Categorical axes retain
+  their existing label thinning, and `showXLabels={false}` hides either axis.
+- `maxGap?: number` breaks line/area runs when the distance between consecutive
+  numeric X values exceeds the limit, in the **same units** as `xValues`.
+  It does not synthesize timestamps or missing buckets. Omit it for no extra
+  distance threshold. Negative/nonfinite limits are ignored.
+- `minValue` and `maxValue` set exact finite Y bounds; omitted ends are
+  automatically scaled. Geometry is clipped at the plot bounds. A reversed
+  pair falls back to automatic bounds. Percentage callers can use `0`/`100`.
+- `ariaLabel` names the focusable SVG. Left/Right inspect adjacent original
+  samples; Home/End inspect the first/last visible timestamp; Escape and blur
+  clear inspection. A live accessible readout announces the label and each
+  visible series value. Pointer movement and touch use that same index and
+  `onInspect(index: number | null)` callback. Touch selection stays after lift;
+  pointer cancellation clears it. Changing series, values, labels, X positions,
+  or domain clears inspection; equivalent new arrays do not.
+
+`npm run verify:series-chart` mounts the real component to cover these
+contracts alongside categorical stacked/grouped bars and container resize.
 
 ## MetricsChart (the django-mojo metrics widget)
 
@@ -125,6 +193,78 @@ smearing).
   `exportChartPng`), `withDelta` endpoint switching (KPIStrip covers the
   KPI use-case).
 
+## MetricsChartView (caller-owned data)
+
+`MetricsChart` renders this exact header, toolbar, legend, chart and dialogs.
+Use the view when a caller already owns a private snapshot or a different report
+endpoint. It has no query, cache, transport, timer or polling lifecycle.
+
+```tsx
+import { MetricsChartView, metricsQuickWindow, QUICK_RANGES } from 'portal-mojo/charts';
+import type { MetricsChartWindow } from 'portal-mojo/charts';
+
+const [window, setWindow] = useState<MetricsChartWindow>(() => metricsQuickWindow('1h', 'minutes'));
+<MetricsChartView
+    title="Resource history" window={window} onWindowChange={setWindow}
+    labels={snapshot.labels} datasets={snapshot.datasets}
+    xValues={snapshot.timestamps} xDomain={[window.dt_start, window.dt_end]}
+    maxGap={180} minValue={0} maxValue={100} smoothing={0}
+    valueFormatter={(n) => `${n.toFixed(1)}%`}
+    loading={loading} isFetching={refreshing} error={error}
+    onRefresh={refreshSnapshot} onRetry={refreshSnapshot}
+    allowedRanges={QUICK_RANGES.filter((r) => r.value !== '30d')}
+    allowedGranularities={['minutes', 'hours', 'days']}
+    minDate={retentionStart} maxDate={latestSupportedTime}
+    signal={scope.signal} height={240} className="resource-chart"
+/>
+```
+
+- `window` is controlled: `{dt_start, dt_end, granularity, range?}`. Bounds are
+  **epoch seconds**. `range` is the active quick-range identity; absent means
+  custom. `onWindowChange` emits one complete window for a quick range,
+  custom calendar Apply, or granularity change. The caller writes it back,
+  clears stale data and performs its request. The view does not request on mount.
+- `onRefresh` and `onRetry` are independent callbacks (Retry defaults to
+  Refresh). Refresh calls the owner once and never changes the window itself.
+  For rolling windows the owner may call `metricsQuickWindow(window.range,
+  window.granularity)` to re-anchor, then load exactly once. The fetch-owning
+  `MetricsChart` adapter retains its automatic re-anchoring and `refreshSignal`.
+- `allowedRanges` takes `{value, label, durationMs}[]` (default `QUICK_RANGES`).
+  The quick-range helper also accepts one such object. `allowedGranularities`
+  narrows the standard vocabulary, then range gating disables unsuitable
+  buckets. An explicit empty list exposes no available granularities.
+  `minDate` and `maxDate` remove unsupported quick/day presets and restrict
+  the calendar; partial first/last days are clamped at Apply to exact epochs.
+  The caller still validates its source contract before loading.
+- All `SeriesChartProps` pass through, including sparse values, numeric X,
+  domains, gap thresholds, exact Y bounds, stacking, accessible inspection,
+  labels and legend toggles. Stats/table/CSV exclude nonfinite or out-of-domain
+  X positions when numeric X is provided. They never synthesize samples.
+- `defaultType` defaults to line. To control type externally, supply
+  `chartType` and `onTypeChange`; otherwise the view owns this display choice.
+  Existing `showGranularity`, `showDateRange`, `showTypeSwitch`, `showRefresh`,
+  `showStats`, `showDataTable` flags default true. `disabled` disables controls;
+  loading and error states disable captured-data dialogs. `height` is the SVG
+  plot's pixel height, without scaling its text; `className` supports a host's
+  fixed-height/flex layout. Narrow containers use the granularity select.
+  `content` optionally replaces only the plot with an owner-rendered report
+  table; the same toolbar, status overlays and abort boundary remain. Hide
+  `showTypeSwitch`/`showDataTable` when an inline report already serves those
+  actions. `showGranularity={false}` also omits bucket nouns from dialogs.
+- `signal` must belong to the immutable data scope. Abort blanks the entire
+  view and removes its dialogs from the modal stack; unmount, replacement
+  signal, changed payload/window/bounds or loading/error/disabled transition
+  also dispose open dialogs. Equivalent arrays preserve them. The caller
+  remains responsible for clearing its data and cancelling its transport/cache.
+  A keyed snapshot generation is appropriate when replacement data is equal.
+- Render the usual `ModalHost`. Abort before the host mounts still disposes
+  pending entries. Already-aborted signals cannot reopen private data.
+
+Showcase → Charts includes owned-window, loading, error, narrow-container and
+snapshot-expiry examples. `npm run verify:metrics-chart` mounts the real view
+and legacy wrapper, covering callbacks, request counts, retention, sparse
+stats/CSV, replacement/unmount/abort and pre-host modal disposal.
+
 ## MiniChart (sparkline primitive)
 
 ```tsx
@@ -267,15 +407,22 @@ Pure helpers (`parsePieInput`, `buildPieGeometry`, `goldenAngleColor`,
 ## Stats + view-data dialogs (shared)
 
 ```ts
-showSeriesStats({ title, labels, datasets, granularity, formatter });
-showSeriesData({ title, labels, datasets, granularity, formatter });  // + Download CSV
+showSeriesStats({ title, labels, datasets, granularity, formatter, signal });
+showSeriesData({ title, labels, datasets, granularity, formatter, signal });  // + Download CSV
 ```
 
 Awaitable native-`<dialog>`s (modal manager). Stats: per-series
 Latest/Min/Max/Avg/Median/Sum with the "Hourly · N points" header. Data:
 one row per label, one column per series; CSV downloads as
 `<title-slug>-<date>.csv` (RFC-safe quoting via `buildCsv`). Empty data
-renders "No data to display." — never a blank dialog.
+renders "No data to display." — never a blank dialog. `signal` is optional;
+abort removes the dialog even if its host is not mounted. Numeric zero remains
+zero. Null, undefined and nonfinite observations show **Unavailable** and export
+as empty CSV cells. Aggregates use finite observations only; each series lists
+its observed Samples count. Latest means the final slot, so a missing final
+observation stays unavailable instead of substituting an earlier reading.
+`computeSeriesStats` keeps numeric result field types: unavailable results are
+`NaN`; always guard custom formatters with `Number.isFinite` (the dialogs do).
 
 ## exportChartPng
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.12",
+    "version": "0.2.14",
     "description": "React portal toolkit for django-mojo — typed client + params store, mission-control UI, dependency-free SVG charts, admin section bundles.",
     "type": "module",
     "license": "Apache-2.0",

package/src/charts/MetricsChart.tsx

@@ -1,29 +1,12 @@
-// MetricsChart — the django-mojo metrics surface: fetches /api/metrics/fetch
-// and owns the control bar. Ported from web-mojo's MetricsChart:
-//   · inline granularity toggle  MIN HR DAY WK MO   (collapses to a <select>)
-//   · quick ranges               1H 24H 7D 30D      + Custom range… dialog
-//   · chart type switch          line / bar / area  (bars stack by default)
-//   · stats summary + view-data dialogs (native <dialog>, CSV download)
-//   · refresh + loading/error overlays with retry
-//
-// Wire note (C2): /api/metrics/fetch takes `dt_start`/`dt_end` (epoch
-// SECONDS — objict.parse_date reads digit strings as epochs). web-mojo sent
-// `dr_start`/`dr_end` here, which the metrics endpoint silently IGNORES
-// (`dr_*` is the model-LIST daterange triple) — its custom ranges never
-// reached the backend. This port sends dt_*. The `range` param rides along
-// for quick ranges because the shipped mock windows off it; each side
-// ignores the other's param.
+// Query-owning django-mojo adapter over the shared MetricsChartView.
 import { useEffect, useRef, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { mojoMetrics, type MetricsResponse } from '../client/client';
 import type { Params } from '../client/types';
-import { DateRangePicker } from '../ui/date/DateRangePicker';
-import { modal } from '../ui/modal';
-import { showSeriesData, showSeriesStats } from './chart-dialogs';
-import { SeriesChart, type ChartType } from './SeriesChart';
-import { granularitiesForSpanMs, quickRangeWindow, ymdRangeToEpochSeconds } from './stats';
-
-export interface Granularity { value: string; label: string; short: string }
+import type { ChartType } from './SeriesChart';
+import { MetricsChartView } from './MetricsChartView';
+import { metricsGranularities, metricsQuickWindow, type MetricsChartWindow } from './metrics-window';
+export { GRANULARITIES, QUICK_RANGES, type Granularity } from './metrics-window';
 
 export interface MetricsFetchParams extends Params {
     slugs: string;
@@ -37,35 +20,6 @@ export interface MetricsFetchParams extends Params {
 
 export type MetricsSeriesLoader = (params: MetricsFetchParams) => Promise<MetricsResponse>;
 
-export const GRANULARITIES: Granularity[] = [
-    { value: 'minutes', label: 'Minutes', short: 'MIN' },
-    { value: 'hours', label: 'Hours', short: 'HR' },
-    { value: 'days', label: 'Days', short: 'DAY' },
-    { value: 'weeks', label: 'Weeks', short: 'WK' },
-    { value: 'months', label: 'Months', short: 'MO' },
-];
-
-export const QUICK_RANGES = [
-    { value: '1h', label: '1H' },
-    { value: '24h', label: '24H' },
-    { value: '7d', label: '7D' },
-    { value: '30d', label: '30D' },
-];
-
-/** Granularities that make sense for a range — mirrors the backend's buckets. */
-const RANGE_GRANULARITY: Record<string, string[]> = {
-    '1h': ['minutes'],
-    '24h': ['minutes', 'hours'],
-    '7d': ['hours', 'days'],
-    '30d': ['days', 'weeks', 'months'],
-};
-
-const TYPES: { value: ChartType; icon: string; title: string }[] = [
-    { value: 'line', icon: 'bi-graph-up', title: 'Line' },
-    { value: 'bar', icon: 'bi-bar-chart-fill', title: 'Bar (stacked)' },
-    { value: 'area', icon: 'bi-graph-up-arrow', title: 'Area' },
-];
-
 /** 'api_calls' → 'Api Calls' — the default legend name for an unmapped slug. */
 function humanizeSlug(slug: string): string {
     return slug.split(/[_-]/).map((w) => (w ? w[0]!.toUpperCase() + w.slice(1) : w)).join(' ');
@@ -102,38 +56,6 @@ export function remapMetricSeriesIdentity(response: MetricsResponse, requestedSl
     };
 }
 
-/** The active window: a quick range anchored at pick time, or custom days. */
-type RangeState =
-    | { kind: 'quick'; value: string; anchor: number }
-    | { kind: 'custom'; start: string; end: string };
-
-// ── Custom-range dialog (DateRangePicker inline + explicit Apply) ─────
-function RangeDialog({ initial, onDone }: {
-    initial: { start: string; end: string };
-    onDone: (range: { start: string; end: string } | null) => void;
-}) {
-    const [range, setRange] = useState(initial);
-    const complete = !!range.start && !!range.end;
-    return (
-        <div className="modal-pad chart-range-dialog">
-            <h2 className="modal-title">Custom date range</h2>
-            <DateRangePicker
-                inline
-                presets="default"
-                start={range.start}
-                end={range.end}
-                onChange={(e) => setRange({ start: e.start, end: e.end })}
-            />
-            <div className="modal-actions">
-                <button className="btn" onClick={() => onDone(null)}>Cancel</button>
-                <button className="btn btn-primary" disabled={!complete} onClick={() => onDone(range)}>
-                    Apply
-                </button>
-            </div>
-        </div>
-    );
-}
-
 export interface MetricsChartProps {
     title: string;
     slugs: string[];
@@ -178,92 +100,29 @@ export interface MetricsChartProps {
     refreshSignal?: unknown;
 }
 
-function constrainGranularities(values: readonly string[], configured?: readonly string[]): string[] {
-    if (!configured) return [...values];
-    const supported = new Set(GRANULARITIES.map((item) => item.value));
-    return values.filter((value) => configured.includes(value) && supported.has(value));
-}
-
 export function MetricsChart({
-    title,
-    slugs,
-    seriesLabels = {},
-    preserveSeriesLabels = false,
-    account = 'global',
-    defaultRange = '24h',
-    defaultGranularity = 'hours',
-    defaultType = 'line',
-    height = 280,
-    valueFormatter,
-    apiParams,
-    loadSeries = mojoMetrics,
-    seriesCacheKey = 'metrics/fetch',
-    childKind,
-    breakdown,
-    showGranularity = true,
-    showDateRange = true,
-    showTypeSwitch = true,
-    showRefresh = true,
-    showStats = true,
-    showDataTable = true,
-    allowedGranularities,
-    refreshSignal,
+    title, slugs, seriesLabels = {}, preserveSeriesLabels = false, account = 'global',
+    defaultRange = '24h', defaultGranularity = 'hours', defaultType = 'line',
+    height = 280, valueFormatter, apiParams, loadSeries = mojoMetrics,
+    seriesCacheKey = 'metrics/fetch', childKind, breakdown, allowedGranularities,
+    refreshSignal, ...controls
 }: MetricsChartProps) {
-    const [range, setRange] = useState<RangeState>(() => ({ kind: 'quick', value: defaultRange, anchor: Date.now() }));
-    const [granularity, setGranularity] = useState(defaultGranularity);
-    const [chartType, setChartType] = useState<ChartType>(defaultType);
-
-    // ── Window → wire params + granularity gating ─────────────────────
-    let allowed: string[];
-    let dtStart: number;
-    let dtEnd: number;
-    if (range.kind === 'quick') {
-        allowed = RANGE_GRANULARITY[range.value] ?? ['days'];
-        const w = quickRangeWindow(range.value, range.anchor);
-        dtStart = Math.floor(w.startMs / 1000);
-        dtEnd = Math.floor(w.endMs / 1000);
-    } else {
-        const epochs = ymdRangeToEpochSeconds(range.start, range.end);
-        // The dialog can only apply a complete pair; a bad pair degrades to
-        // the default quick window rather than crashing the fetch.
-        if (!epochs) {
-            console.warn('MetricsChart: invalid custom range — falling back to 24h', range);
-            const w = quickRangeWindow('24h');
-            dtStart = Math.floor(w.startMs / 1000);
-            dtEnd = Math.floor(w.endMs / 1000);
-            allowed = RANGE_GRANULARITY['24h']!;
-        } else {
-            dtStart = epochs.dtStart;
-            dtEnd = epochs.dtEnd;
-            allowed = granularitiesForSpanMs((dtEnd - dtStart) * 1000);
-        }
-    }
-    const configured = constrainGranularities(GRANULARITIES.map((item) => item.value), allowedGranularities);
-    const constrained = constrainGranularities(allowed, allowedGranularities);
-    const available = constrained.length > 0 ? constrained : configured.length > 0 ? configured : constrainGranularities(allowed);
-    const effective = available.includes(granularity) ? granularity : available[available.length - 1]!;
-
+    const [window, setWindow] = useState<MetricsChartWindow>(() => metricsQuickWindow(defaultRange, defaultGranularity));
+    const available = metricsGranularities(window, allowedGranularities);
+    const effective = available.includes(window.granularity) ? window.granularity : available.at(-1) ?? window.granularity;
     const wire: MetricsFetchParams = {
         ...apiParams,
         ...(childKind ? { child_kind: childKind } : {}),
         ...(breakdown !== undefined ? { breakdown } : {}),
-        slugs: slugs.join(','),
-        granularity: effective,
-        account,
-        // `range` windows the shipped mock; dt_start/dt_end (epoch seconds)
-        // window the real backend. Each ignores the other's param.
-        ...(range.kind === 'quick' ? { range: range.value } : {}),
-        dt_start: dtStart,
-        dt_end: dtEnd,
+        slugs: slugs.join(','), granularity: effective, account,
+        ...(window.range ? { range: window.range } : {}),
+        dt_start: window.dt_start, dt_end: window.dt_end,
     };
-
     const query = useQuery({
         queryKey: ['metrics', seriesCacheKey, wire],
         queryFn: () => loadSeries(wire),
         select: (res) => {
-            const identitySafe = loadSeries === mojoMetrics
-                ? remapMetricSeriesIdentity(res, slugs)
-                : res;
+            const identitySafe = loadSeries === mojoMetrics ? remapMetricSeriesIdentity(res, slugs) : res;
             return {
                 ...identitySafe,
                 datasets: identitySafe.datasets.map((d) => ({
@@ -273,40 +132,13 @@ export function MetricsChart({
             };
         },
     });
-
-    // Switching range re-points granularity at the nearest sensible bucket
-    // rather than firing a request the backend would bucket differently.
-    const pickRange = (next: string) => {
-        setRange({ kind: 'quick', value: next, anchor: Date.now() });
-        const rangeGranularities = RANGE_GRANULARITY[next] ?? ['days'];
-        const constrainedNext = constrainGranularities(rangeGranularities, allowedGranularities);
-        const ok = constrainedNext.length > 0 ? constrainedNext : configured.length > 0 ? configured : rangeGranularities;
-        if (!ok.includes(granularity)) setGranularity(ok[ok.length - 1]!);
-    };
-
-    const openCustomRange = async () => {
-        const initial = range.kind === 'custom' ? { start: range.start, end: range.end } : { start: '', end: '' };
-        const picked = await modal.open<{ start: string; end: string } | null>((close) => (
-            <RangeDialog initial={initial} onDone={close} />
-        ), { size: 'md' });
-        if (!picked) return;
-        setRange({ kind: 'custom', start: picked.start, end: picked.end });
-        const epochs = ymdRangeToEpochSeconds(picked.start, picked.end);
-        if (epochs) {
-            const rangeGranularities = granularitiesForSpanMs((epochs.dtEnd - epochs.dtStart) * 1000);
-            const constrainedNext = constrainGranularities(rangeGranularities, allowedGranularities);
-            const ok = constrainedNext.length > 0 ? constrainedNext : configured.length > 0 ? configured : rangeGranularities;
-            if (!ok.includes(granularity)) setGranularity(ok[ok.length - 1]!);
-        }
-    };
-
-    // Refresh re-anchors a quick window at NOW (web-mojo kept the stale
-    // window — deliberate fix, documented in charts.md).
     const refresh = () => {
-        if (range.kind === 'quick') setRange({ ...range, anchor: Math.max(Date.now(), range.anchor + 1) });
+        const next = window.range ? metricsQuickWindow(window.range, effective) : window;
+        // A pick and refresh in the same second have the same query key: refetch
+        // once. Otherwise the re-anchored key itself owns the one request.
+        if (next.dt_start !== window.dt_start || next.dt_end !== window.dt_end) setWindow(next);
         else void query.refetch();
     };
-
     const priorRefreshSignal = useRef(refreshSignal);
     useEffect(() => {
         if (Object.is(priorRefreshSignal.current, refreshSignal)) return;
@@ -314,146 +146,12 @@ export function MetricsChart({
         refresh();
     }, [refreshSignal]);
 
-    const openStats = () => {
-        void showSeriesStats({
-            title: `${title} — Stats`,
-            labels: query.data?.labels ?? [],
-            datasets: query.data?.datasets ?? [],
-            granularity: effective,
-            formatter: valueFormatter,
-        });
-    };
-    const openData = () => {
-        void showSeriesData({
-            title,
-            labels: query.data?.labels ?? [],
-            datasets: query.data?.datasets ?? [],
-            granularity: effective,
-            formatter: valueFormatter,
-        });
-    };
-
-    const customActive = range.kind === 'custom';
-    const customTitle = customActive ? `Custom range: ${range.start} – ${range.end}` : 'Custom range…';
-
-    return (
-        <div className="panel panel-pad chart-panel">
-            <div className="chart-head">
-                <div>
-                    <div className="eyebrow">Metrics</div>
-                    <h3 className="panel-subtitle">
-                        {title}
-                        {customActive && <span className="chart-range-chip">{range.start} – {range.end}</span>}
-                    </h3>
-                </div>
-                <div className="chart-controls">
-                    {showGranularity && (
-                        <>
-                            <div className="seg seg-xs gran-toggle" role="group" aria-label="Granularity">
-                                {GRANULARITIES.filter((g) => !allowedGranularities || configured.length === 0 || configured.includes(g.value)).map((g) => {
-                                    const enabled = available.includes(g.value);
-                                    return (
-                                        <button
-                                            key={g.value}
-                                            className={`seg-btn${effective === g.value ? ' seg-active' : ''}`}
-                                            disabled={!enabled}
-                                            title={enabled ? g.label : `${g.label} — not available for this range`}
-                                            onClick={() => setGranularity(g.value)}
-                                        >
-                                            {g.short}
-                                        </button>
-                                    );
-                                })}
-                            </div>
-                            <select
-                                className="input input-compact gran-select"
-                                value={effective}
-                                onChange={(e) => setGranularity(e.target.value)}
-                                aria-label="Granularity"
-                            >
-                                {GRANULARITIES.filter((g) => available.includes(g.value)).map((g) => (
-                                    <option key={g.value} value={g.value}>{g.label}</option>
-                                ))}
-                            </select>
-                        </>
-                    )}
-
-                    {showDateRange && (
-                        <div className="seg seg-xs" role="group" aria-label="Date range">
-                            {QUICK_RANGES.map((r) => (
-                                <button
-                                    key={r.value}
-                                    className={`seg-btn${range.kind === 'quick' && range.value === r.value ? ' seg-active' : ''}`}
-                                    onClick={() => pickRange(r.value)}
-                                >
-                                    {r.label}
-                                </button>
-                            ))}
-                            <button
-                                className={`seg-btn${customActive ? ' seg-active' : ''}`}
-                                title={customTitle}
-                                aria-label="Custom date range"
-                                onClick={() => void openCustomRange()}
-                            >
-                                <i className="bi bi-calendar-range" />
-                            </button>
-                        </div>
-                    )}
-
-                    {showTypeSwitch && (
-                        <div className="seg seg-xs" role="group" aria-label="Chart type">
-                            {TYPES.map((t) => (
-                                <button
-                                    key={t.value}
-                                    className={`seg-btn${chartType === t.value ? ' seg-active' : ''}`}
-                                    title={t.title}
-                                    onClick={() => setChartType(t.value)}
-                                >
-                                    <i className={`bi ${t.icon}`} />
-                                </button>
-                            ))}
-                        </div>
-                    )}
-
-                    {showStats && (
-                        <button className="btn-icon" title="Stats" aria-label="Stats" onClick={openStats}>
-                            <i className="bi bi-info-circle" />
-                        </button>
-                    )}
-                    {showDataTable && (
-                        <button className="btn-icon" title="View data" aria-label="View data" onClick={openData}>
-                            <i className="bi bi-table" />
-                        </button>
-                    )}
-                    {showRefresh && (
-                        <button className="btn-icon" title="Refresh" aria-label="Refresh" onClick={refresh}>
-                            <i className={`bi bi-arrow-repeat${query.isFetching ? ' spin' : ''}`} />
-                        </button>
-                    )}
-                </div>
-            </div>
-
-            <div className="chart-body" style={{ minHeight: height }}>
-                {query.isPending ? (
-                    <div className="chart-overlay"><span className="skel skel-block" /></div>
-                ) : query.isError ? (
-                    <div className="chart-overlay">
-                        <div className="chart-error">
-                            <i className="bi bi-exclamation-triangle" />
-                            <span>{query.error instanceof Error ? query.error.message : 'Failed to load metrics'}</span>
-                            <button className="btn btn-compact" onClick={() => void query.refetch()}>Retry</button>
-                        </div>
-                    </div>
-                ) : (
-                    <SeriesChart
-                        labels={query.data!.labels}
-                        datasets={query.data!.datasets}
-                        chartType={chartType}
-                        height={height}
-                        valueFormatter={valueFormatter}
-                    />
-                )}
-            </div>
-        </div>
-    );
+    return <MetricsChartView {...controls}
+        title={title} window={{ ...window, granularity: effective }} onWindowChange={setWindow}
+        labels={query.data?.labels ?? []} datasets={query.data?.datasets ?? []}
+        defaultType={defaultType} height={height} valueFormatter={valueFormatter}
+        allowedGranularities={allowedGranularities} onRefresh={refresh}
+        onRetry={() => { void query.refetch(); }} loading={query.isPending}
+        isFetching={query.isFetching} error={query.isError ? query.error : undefined}
+    />;
 }