portal-mojo 0.2.13 → 0.2.14

package/src/charts/MetricsChartView.tsx

@@ -0,0 +1,280 @@
+// Shared MetricsChart presentation. The owner supplies every payload and request.
+import { useLayoutEffect, useRef, useState, useSyncExternalStore, type ReactNode } from 'react';
+import { DateRangePicker } from '../ui/date/DateRangePicker';
+import { dayPresets, type PresetEntry } from '../ui/date/PresetRail';
+import { formatByPrecision } from '../ui/date/fns';
+import { modal } from '../ui/modal';
+import { showSeriesData, showSeriesStats } from './chart-dialogs';
+import { SeriesChart, type ChartType, type SeriesChartProps } from './SeriesChart';
+import { ymdRangeToEpochSeconds } from './stats';
+import { GRANULARITIES, QUICK_RANGES, metricsDateLabel, metricsGranularities, metricsQuickWindow, type MetricsChartWindow, type MetricsQuickRange } from './metrics-window';
+
+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' },
+];
+
+export interface MetricsChartViewProps extends SeriesChartProps {
+    title: string;
+    className?: string;
+    /** Replace the plot with an owner-rendered report; status and toolbar remain shared. */
+    content?: ReactNode;
+    window: MetricsChartWindow;
+    onWindowChange: (window: MetricsChartWindow) => void;
+    /** Refresh never fetches or changes the window itself; the owner does both. */
+    onRefresh?: () => void;
+    onRetry?: () => void;
+    loading?: boolean;
+    isFetching?: boolean;
+    error?: unknown;
+    disabled?: boolean;
+    defaultType?: ChartType;
+    onTypeChange?: (type: ChartType) => void;
+    allowedRanges?: readonly MetricsQuickRange[];
+    allowedGranularities?: readonly string[];
+    /** Exact supported history bounds, epoch seconds (including partial days). */
+    minDate?: number;
+    maxDate?: number;
+    /** Abort blanks this view and removes its open dialogs from the shared stack. */
+    signal?: AbortSignal;
+    showGranularity?: boolean;
+    showDateRange?: boolean;
+    showTypeSwitch?: boolean;
+    showRefresh?: boolean;
+    showStats?: boolean;
+    showDataTable?: boolean;
+}
+
+function RangeDialog({ initial, minDate, maxDate, onDone }: {
+    initial: { start: string; end: string };
+    minDate?: number; maxDate?: number;
+    onDone: (range: { dt_start: number; dt_end: number } | null) => void;
+}) {
+    const [range, setRange] = useState(initial);
+    const min = minDate == null ? undefined : metricsDateLabel(minDate);
+    const max = maxDate == null ? undefined : metricsDateLabel(maxDate);
+    const epochs = ymdRangeToEpochSeconds(range.start, range.end);
+    const dt_start = epochs ? Math.max(epochs.dtStart, minDate ?? -Infinity) : NaN;
+    const dt_end = epochs ? Math.min(epochs.dtEnd, maxDate ?? Infinity) : NaN;
+    const complete = !!epochs && dt_start <= dt_end && (!min || range.start >= min) && (!max || range.end <= max);
+    // Picker presets do not enforce min/max. Offer only supported calendar days,
+    // then clamp partial first/last days to exact epoch bounds on Apply.
+    const presets: PresetEntry[] = dayPresets().filter((preset) => {
+        if (preset.divider) return minDate == null && maxDate == null;
+        const r = preset.range();
+        const start = formatByPrecision(r.start, 'day');
+        const end = formatByPrecision(r.end, 'day');
+        return (!min || start >= min) && (!max || end <= max);
+    });
+    return <div className="modal-pad chart-range-dialog">
+        <h2 className="modal-title">Custom date range</h2>
+        <DateRangePicker inline months={1} presets={presets} min={min} max={max}
+            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({ dt_start, dt_end })}>Apply</button>
+        </div>
+    </div>;
+}
+
+export function MetricsChartView({
+    title, className = '', content, window: selectedWindow, onWindowChange, onRefresh, onRetry = onRefresh,
+    loading = false, isFetching = false, error, disabled = false,
+    chartType: controlledType, defaultType = 'line', onTypeChange,
+    allowedRanges = QUICK_RANGES, allowedGranularities, minDate, maxDate, signal,
+    showGranularity = true, showDateRange = true, showTypeSwitch = true,
+    showRefresh = true, showStats = true, showDataTable = true,
+    height = 280, labels, datasets, valueFormatter, ...seriesProps
+}: MetricsChartViewProps) {
+    const [localType, setLocalType] = useState(defaultType);
+    const chartType = controlledType ?? localType;
+    const setChartType = (next: ChartType) => { if (controlledType == null) setLocalType(next); onTypeChange?.(next); };
+    const aborted = useSyncExternalStore(
+        (changed) => { signal?.addEventListener('abort', changed); return () => signal?.removeEventListener('abort', changed); },
+        () => signal?.aborted ?? false,
+        () => signal?.aborted ?? false,
+    );
+    const owner = useRef<AbortController | null>(null);
+    // Compare content rather than array identity: inspection often re-renders
+    // parents with equivalent arrays. Expired/replaced data must close snapshots.
+    const dialogIdentity = JSON.stringify([title, selectedWindow, labels, datasets,
+        seriesProps.xValues, seriesProps.xDomain, loading, !!error, disabled, minDate, maxDate, allowedGranularities, allowedRanges]);
+    useLayoutEffect(() => {
+        const controller = new AbortController();
+        owner.current = controller;
+        const abort = () => controller.abort();
+        signal?.addEventListener('abort', abort, { once: true });
+        if (signal?.aborted) abort();
+        return () => { signal?.removeEventListener('abort', abort); controller.abort(); };
+    }, [signal, dialogIdentity]);
+    const available = metricsGranularities(selectedWindow, allowedGranularities);
+    const configured = GRANULARITIES.filter((g) => !allowedGranularities || allowedGranularities.includes(g.value));
+    const effective = selectedWindow.granularity;
+    const active = () => !disabled && !signal?.aborted && !!owner.current && !owner.current.signal.aborted;
+    const setWindow = (next: MetricsChartWindow) => {
+        const supported = metricsGranularities(next, allowedGranularities);
+        if (!active() || !supported.length) return;
+        onWindowChange({ ...next, granularity: supported.includes(next.granularity) ? next.granularity : supported.at(-1)! });
+    };
+    const quickWindow = (r: MetricsQuickRange) => metricsQuickWindow(r, effective, Math.min(Date.now(), (maxDate ?? Infinity) * 1000));
+    const ranges = allowedRanges.filter((r) => Number.isFinite(r.durationMs) && r.durationMs > 0 && quickWindow(r).dt_start >= (minDate ?? -Infinity));
+    const pickRange = (next: MetricsQuickRange) => setWindow(quickWindow(next));
+    const setGranularity = (granularity: string) => setWindow({ ...selectedWindow, granularity });
+    const openCustomRange = async () => {
+        if (!active()) return;
+        const dialogSignal = owner.current!.signal;
+        const initial = selectedWindow.range ? { start: '', end: '' } : { start: metricsDateLabel(selectedWindow.dt_start), end: metricsDateLabel(selectedWindow.dt_end) };
+        const picked = await modal.open<{ dt_start: number; dt_end: number } | null>((close) => (
+            <RangeDialog initial={initial} minDate={minDate} maxDate={maxDate} onDone={close} />
+        ), { size: 'md', signal: dialogSignal });
+        if (!picked || dialogSignal.aborted) return;
+        setWindow({ ...picked, granularity: effective });
+    };
+    const refresh = () => { if (active()) onRefresh?.(); };
+    const openDialog = (stats: boolean) => {
+        if (!active() || loading || error) return;
+        const { xValues, xDomain } = seriesProps;
+        const bounded = xDomain && Number.isFinite(xDomain[0]) && Number.isFinite(xDomain[1]) && xDomain[1] > xDomain[0];
+        const indices = labels.flatMap((_, i) => !xValues || (Number.isFinite(xValues[i]) && (!bounded || (xValues[i]! >= xDomain[0] && xValues[i]! <= xDomain[1]))) ? [i] : []);
+        void (stats ? showSeriesStats : showSeriesData)({
+            title: stats ? `${title} — Stats` : title,
+            labels: indices.map((i) => labels[i]!),
+            datasets: datasets.map((d) => ({ ...d, data: indices.map((i) => d.data[i]) })),
+            granularity: showGranularity ? effective : undefined, formatter: valueFormatter, signal: owner.current!.signal,
+        });
+    };
+    const openStats = () => openDialog(true);
+    const openData = () => openDialog(false);
+    const customActive = !selectedWindow.range;
+    const range = { start: metricsDateLabel(selectedWindow.dt_start), end: metricsDateLabel(selectedWindow.dt_end) };
+    const customTitle = customActive ? `Custom range: ${range.start} – ${range.end}` : 'Custom range…';
+    if (aborted) return null;
+
+    return (
+        <div className={`panel panel-pad chart-panel ${className}`.trim()}>
+            <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">
+                                {configured.map((g) => {
+                                    const enabled = available.includes(g.value);
+                                    return (
+                                        <button
+                                            key={g.value}
+                                            className={`seg-btn${effective === g.value ? ' seg-active' : ''}`}
+                                            disabled={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}
+                                disabled={disabled || available.length === 0}
+                                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">
+                            {ranges.map((r) => (
+                                <button
+                                    key={r.value}
+                                    className={`seg-btn${selectedWindow.range === r.value ? ' seg-active' : ''}`}
+                                    disabled={disabled}
+                                    onClick={() => pickRange(r)}
+                                >
+                                    {r.label}
+                                </button>
+                            ))}
+                            <button
+                                className={`seg-btn${customActive ? ' seg-active' : ''}`}
+                                title={customTitle}
+                                aria-label="Custom date range"
+                                disabled={disabled || available.length === 0}
+                                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}
+                                    aria-label={t.title}
+                                    disabled={disabled}
+                                    onClick={() => setChartType(t.value)}
+                                >
+                                    <i className={`bi ${t.icon}`} />
+                                </button>
+                            ))}
+                        </div>
+                    )}
+
+                    {showStats && (
+                        <button className="btn-icon" title="Stats" aria-label="Stats" disabled={disabled || loading || !!error} onClick={openStats}>
+                            <i className="bi bi-info-circle" />
+                        </button>
+                    )}
+                    {showDataTable && (
+                        <button className="btn-icon" title="View data" aria-label="View data" disabled={disabled || loading || !!error} onClick={openData}>
+                            <i className="bi bi-table" />
+                        </button>
+                    )}
+                    {showRefresh && (
+                        <button className="btn-icon" title="Refresh" aria-label="Refresh" disabled={disabled || !onRefresh || isFetching} onClick={refresh}>
+                            <i className={`bi bi-arrow-repeat${isFetching ? ' spin' : ''}`} />
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            <div className="chart-body" style={{ minHeight: height }}>
+                {loading ? (
+                    <div className="chart-overlay"><span className="skel skel-block" /></div>
+                ) : !!error ? (
+                    <div className="chart-overlay">
+                        <div className="chart-error">
+                            <i className="bi bi-exclamation-triangle" />
+                            <span>{error instanceof Error ? error.message : typeof error === 'string' ? error : 'Failed to load metrics'}</span>
+                            <button className="btn btn-compact" disabled={disabled || !onRetry} onClick={() => { if (active()) onRetry?.(); }}>Retry</button>
+                        </div>
+                    </div>
+                ) : content !== undefined ? content : (
+                    <SeriesChart
+                        {...seriesProps}
+                        labels={labels}
+                        datasets={datasets}
+                        chartType={chartType}
+                        height={height}
+                        valueFormatter={valueFormatter}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

package/src/charts/SeriesChart.tsx

@@ -35,6 +35,8 @@ export interface SeriesChartProps {
     xValues?: number[];
     /** Visible numeric X window, in the same units as xValues. */
     xDomain?: [number, number];
+    /** Numeric X axis ticks only; inspection keeps the original full labels. */
+    xValueFormatter?: (value: number) => string;
     /** Split line/area runs when consecutive numeric X values exceed this gap. */
     maxGap?: number;
     /** Exact Y bounds; omitted bounds are computed from visible data. */
@@ -83,6 +85,39 @@ function defaultFormat(v: number): string {
     return Number.isInteger(v) ? String(v) : v.toFixed(1);
 }
 
+// Axis labels use 10.5px monospace. Budget conservatively, then clip each
+// label to its own slot so custom fonts/long strings cannot overlap a neighbour.
+const axisTextWidth = (text: string) => Array.from(text).reduce((width, char) => width + (char.codePointAt(0)! < 128 ? 7 : 11), 0);
+function fitAxisLabel(text: string, width: number): string {
+    if (axisTextWidth(text) <= width) return text;
+    let shortened = '';
+    for (const char of text) {
+        if (axisTextWidth(shortened + char + '…') > width) break;
+        shortened += char;
+    }
+    return `${shortened}…`;
+}
+
+function numericAxisTicks(domain: [number, number], plotW: number, left: number, format: (value: number) => string) {
+    const [min, max] = domain;
+    const make = (count: number) => Array.from({ length: count }, (_, index) => {
+        const fraction = count === 1 ? 0.5 : index / (count - 1);
+        // Weighted interpolation avoids overflowing max - min on extreme feeds.
+        const value = index === 0 ? min : index === count - 1 ? max : min * (1 - fraction) + max * fraction;
+        const x = left + fraction * plotW;
+        const step = count === 1 ? plotW : plotW / (count - 1);
+        const start = index === 0 ? left : x - step / 2 + 6;
+        const end = index === count - 1 ? left + plotW : x + step / 2 - 6;
+        const full = format(value);
+        return { value, x, start, width: Math.max(1, end - start), full,
+            anchor: count === 1 ? 'middle' as const : index === 0 ? 'start' as const : index === count - 1 ? 'end' as const : 'middle' as const };
+    });
+    let count = min === max ? 1 : Math.max(2, Math.min(6, Math.floor(plotW / 64) + 1));
+    let ticks = make(count);
+    while (count > 2 && ticks.some((tick) => axisTextWidth(tick.full) > tick.width)) ticks = make(--count);
+    return ticks.map((tick) => ({ ...tick, text: fitAxisLabel(tick.full, tick.width) }));
+}
+
 /** Catmull-Rom → cubic bezier, matching web-mojo's `smoothing` option. */
 function smoothPath(pts: [number, number][], tension: number): string {
     if (pts.length < 2) return '';
@@ -119,6 +154,7 @@ export function SeriesChart({
     emptyText = 'No data for this range',
     xValues,
     xDomain,
+    xValueFormatter,
     maxGap,
     minValue,
     maxValue,
@@ -143,6 +179,8 @@ export function SeriesChart({
     const id = useId();
     const tipRef = useRef<HTMLDivElement>(null);
     const [tipWidth, setTipWidth] = useState(180);
+    const yLabelsRef = useRef<SVGGElement>(null);
+    const [yLabelWidth, setYLabelWidth] = useState(0);
 
     // Measure the container — real pixel geometry keeps text unscaled
     // (a viewBox + preserveAspectRatio="none" would smear the labels).
@@ -165,28 +203,38 @@ export function SeriesChart({
     const shown = datasets.filter((d) => !visible.has(d.label));
     const isStacked = stacked === 'auto' ? chartType === 'bar' : !!stacked;
 
-    const plotW = Math.max(40, width - PAD.left - PAD.right);
+    // Keep most of the canvas available to data, even for verbose formatters.
+    const maxLeft = Math.min(160, width * 0.4, Math.max(0, width - PAD.right - 40));
+    const left = Math.min(maxLeft, Math.max(PAD.left, showYLabels ? Math.ceil(yLabelWidth) + 16 : 0));
+    const plotW = Math.max(1, width - left - PAD.right);
     const plotH = Math.max(40, height - PAD.top - PAD.bottom);
     const n = labels.length;
     const colW = n > 0 ? plotW / n : plotW;
-    const xPositions = useMemo(() => {
-        if (!xValues) return labels.map((_, i) => PAD.left + colW * (i + 0.5));
+    const numericDomain = useMemo<[number, number] | null>(() => {
+        if (!xValues) return null;
         const values = xValues.slice(0, n).filter(isFiniteNumber);
         let min = values.reduce((a, b) => Math.min(a, b), Infinity);
         let max = values.reduce((a, b) => Math.max(a, b), -Infinity);
         if (xDomain && isFiniteNumber(xDomain[0]) && isFiniteNumber(xDomain[1]) && xDomain[1] > xDomain[0]) {
             [min, max] = xDomain;
         }
+        return isFiniteNumber(min) && isFiniteNumber(max) ? [min, max] : null;
+    }, [xValues, xDomain, n]);
+    const xPositions = useMemo(() => {
+        if (!xValues) return labels.map((_, i) => left + colW * (i + 0.5));
+        if (!numericDomain) return labels.map(() => null);
+        const [min, max] = numericDomain;
         return labels.map((_, i) => {
             const x = xValues[i];
             if (!isFiniteNumber(x) || x < min || x > max) return null;
             // Half-scaled differences also work for finite domains spanning
             // more than Number.MAX_VALUE, without overflowing the subtraction.
             const fraction = max === min ? 0.5 : (x / 2 - min / 2) / (max / 2 - min / 2);
-            return Number.isFinite(fraction) ? PAD.left + fraction * plotW : null;
+            return Number.isFinite(fraction) ? left + fraction * plotW : null;
         });
-    }, [labels, xValues, xDomain, n, colW, plotW]);
+    }, [labels, xValues, numericDomain, colW, plotW, left]);
     const inspectable = xPositions.flatMap((x, i) => x == null ? [] : [i]);
+    const hasData = n > 0 && datasets.length > 0 && inspectable.length > 0;
     const active = hover != null && xPositions[hover] != null ? hover : null;
     const lastInspection = useRef<number | null | undefined>(undefined);
     // Compare content, not array identity: callers often construct props during
@@ -261,14 +309,20 @@ export function SeriesChart({
         return out;
     }, [scale]);
 
-    // Thin X labels to whatever fits — ~54px per label.
+    // Numeric ticks describe the whole scale, independent of sample clusters.
+    const xTicks = numericDomain ? numericAxisTicks(numericDomain, plotW, left, xValueFormatter ?? String) : null;
+    const yLabels = showYLabels && hasData ? ticks.map((tick) => fmt(tick)) : [];
+    const yLabelsKey = JSON.stringify(yLabels);
+    const yLabelSpace = Math.max(0, left - 16);
+    const fittedYLabels = yLabels.map((label) => yLabelWidth > yLabelSpace ? fitAxisLabel(label, yLabelSpace) : label);
+    // Categorical callers keep their existing label thinning.
     const labelStride = Math.max(1, Math.ceil((n * 54) / Math.max(plotW, 1)));
 
     const colorOf = (ds: Dataset, i: number) => ds.color ?? CHART_PALETTE[i % CHART_PALETTE.length]!;
 
     const onMove = (e: React.PointerEvent<SVGRectElement>) => {
         const rect = e.currentTarget.getBoundingClientRect();
-        const x = PAD.left + (e.clientX - rect.left) * (plotW / (rect.width || plotW));
+        const x = left + (e.clientX - rect.left) * (plotW / (rect.width || plotW));
         let nearest: number | null = null;
         for (const i of inspectable) {
             if (nearest == null || Math.abs(xCenter(i) - x) < Math.abs(xCenter(nearest) - x)) nearest = i;
@@ -296,7 +350,15 @@ export function SeriesChart({
         if (measured && Number.isFinite(measured)) setTipWidth(measured);
     }, [readout, width]);
 
-    const hasData = n > 0 && datasets.length > 0 && inspectable.length > 0;
+    // Always measure full, hidden labels, never their abbreviated display text:
+    // clipping must not shrink the next measurement and oscillate the layout.
+    useLayoutEffect(() => {
+        const sizes = [...(yLabelsRef.current?.querySelectorAll('text') ?? [])].map((node) => {
+            const measured = node.getComputedTextLength?.();
+            return isFiniteNumber(measured) && measured > 0 ? measured : axisTextWidth(node.textContent ?? '');
+        });
+        setYLabelWidth(Math.max(0, ...sizes));
+    }, [yLabelsKey, showYLabels, hasData, width]);
 
     return (
         <div className="chart-wrap" ref={wrapRef}>
@@ -334,23 +396,37 @@ export function SeriesChart({
                         onKeyDown={onKeyDown} onBlur={() => setHover(null)}>
                         <defs>
                             <clipPath id={`${id}-plot`}>
-                                <rect x={PAD.left - 4} y={PAD.top} width={plotW + 8} height={plotH} />
+                                <rect x={left - 4} y={PAD.top} width={plotW + 8} height={plotH} />
+                            </clipPath>
+                            <clipPath id={`${id}-y-labels`}>
+                                <rect x={8} y={0} width={yLabelSpace} height={height} />
                             </clipPath>
+                            {showXLabels && xTicks?.map((tick, i) => (
+                                <clipPath key={i} id={`${id}-x-label-${i}`}>
+                                    <rect x={tick.start} y={height - PAD.bottom} width={tick.width} height={PAD.bottom} />
+                                </clipPath>
+                            ))}
                         </defs>
                         {/* gridlines + Y ticks */}
                         {showGrid && ticks.map((t) => (
                             <line
                                 key={`g${t}`}
-                                x1={PAD.left} x2={PAD.left + plotW}
+                                x1={left} x2={left + plotW}
                                 y1={yOf(t)} y2={yOf(t)}
                                 className={t === 0 && scale.min < 0 ? 'grid-line grid-zero' : 'grid-line'}
                             />
                         ))}
-                        {showYLabels && ticks.map((t) => (
-                            <text key={`yl${t}`} x={PAD.left - 8} y={yOf(t)} className="axis-label" textAnchor="end" dominantBaseline="middle">
-                                {fmt(t)}
-                            </text>
-                        ))}
+                        {showYLabels && <>
+                            <g ref={yLabelsRef} visibility="hidden" aria-hidden="true">
+                                {yLabels.map((label, i) => <text key={i} className="axis-label">{label}</text>)}
+                            </g>
+                            <g clipPath={`url(#${id}-y-labels)`}>{ticks.map((t, i) => (
+                                <text key={`yl${t}`} x={left - 8} y={yOf(t)} className="axis-label" textAnchor="end" dominantBaseline="middle" aria-label={yLabels[i]}>
+                                    {fittedYLabels[i] !== yLabels[i] && <title>{yLabels[i]}</title>}
+                                    <tspan>{fittedYLabels[i]}</tspan>
+                                </text>
+                            ))}</g>
+                        </>}
 
                         {/* bars */}
                         {chartType === 'bar' && labels.map((_, i) => {
@@ -469,17 +545,22 @@ export function SeriesChart({
                         })}
 
                         {/* X labels */}
-                        {showXLabels && labels.map((label, i) => (
+                        {showXLabels && (xTicks ? xTicks.map((tick, i) => (
+                            <text key={`xt${i}`} x={tick.x} y={height - 8} className="axis-label series-x-label"
+                                textAnchor={tick.anchor} clipPath={`url(#${id}-x-label-${i})`} aria-label={tick.full}>
+                                <title>{tick.full}</title><tspan>{tick.text}</tspan>
+                            </text>
+                        )) : labels.map((label, i) => (
                             i % labelStride === 0 && xPositions[i] != null ? (
                                 <text key={`xl${i}`} x={xCenter(i)} y={height - 8} className="axis-label" textAnchor="middle">
                                     {label}
                                 </text>
                             ) : null
-                        ))}
+                        )))}
 
                         {/* hit area — one overlay drives index-mode hover */}
                         <rect
-                            x={PAD.left} y={PAD.top} width={plotW} height={plotH}
+                            x={left} y={PAD.top} width={plotW} height={plotH}
                             fill="transparent"
                             style={{ touchAction: 'pan-y' }}
                             onPointerMove={onMove}

package/src/charts/chart-dialogs.tsx

@@ -10,7 +10,6 @@ import {
     computeSeriesStats,
     csvFilename,
     defaultStatFormat,
-    toNumber,
     type SeriesLike,
 } from './stats';
 
@@ -23,6 +22,8 @@ export interface ChartDialogOptions {
     granularity?: string;
     /** Value formatter; default = int/2dp locale formatting. */
     formatter?: (n: number) => string;
+    /** Owner disposal removes this dialog and its captured data. */
+    signal?: AbortSignal;
 }
 
 function pointsLine(granularity: string | undefined, points: number): string {
@@ -44,6 +45,7 @@ function EmptyBody({ onClose }: { onClose: () => void }) {
 
 /** Per-series Latest / Min / Max / Avg / Median / Sum summary dialog. */
 export function showSeriesStats(opts: ChartDialogOptions): Promise<unknown> {
+    if (opts.signal?.aborted) return Promise.resolve(null);
     const stats = computeSeriesStats(opts.datasets);
     const fmt = opts.formatter ?? defaultStatFormat;
     const cols = ['Latest', 'Min', 'Max', 'Avg', 'Median', 'Sum'] as const;
@@ -58,12 +60,13 @@ export function showSeriesStats(opts: ChartDialogOptions): Promise<unknown> {
                 <EmptyBody onClose={() => close(null)} />
             ) : (
                 <>
-                    <div className="chart-dialog-sub">{pointsLine(opts.granularity, stats[0]!.count)}</div>
+                    <div className="chart-dialog-sub">{pointsLine(opts.granularity, opts.labels.length)}</div>
                     <div className="chart-dialog-scroll">
                         <table className="chart-stats-table">
                             <thead>
                                 <tr>
                                     <th>Series</th>
+                                    <th className="num">Samples</th>
                                     {cols.map((c) => <th key={c} className="num">{c}</th>)}
                                 </tr>
                             </thead>
@@ -71,7 +74,8 @@ export function showSeriesStats(opts: ChartDialogOptions): Promise<unknown> {
                                 {stats.map((s) => (
                                     <tr key={s.label}>
                                         <td>{s.label}</td>
-                                        {cols.map((c) => <td key={c} className="num">{fmt(pick(s, c))}</td>)}
+                                        <td className="num">{s.count}</td>
+                                        {cols.map((c) => <td key={c} className="num">{Number.isFinite(pick(s, c)) ? fmt(pick(s, c)) : 'Unavailable'}</td>)}
                                     </tr>
                                 ))}
                             </tbody>
@@ -83,7 +87,7 @@ export function showSeriesStats(opts: ChartDialogOptions): Promise<unknown> {
                 </>
             )}
         </div>
-    ), { size: 'md' });
+    ), { size: 'lg', signal: opts.signal });
 }
 
 /** Trigger a text-file download (the CSV button). */
@@ -101,13 +105,15 @@ function downloadText(text: string, filename: string, mime: string): void {
 
 /** The raw series as a table: one row per label, one column per series, + CSV. */
 export function showSeriesData(opts: ChartDialogOptions): Promise<unknown> {
+    if (opts.signal?.aborted) return Promise.resolve(null);
     const { labels, datasets } = opts;
     const hasData = labels.length > 0 && datasets.length > 0;
     const fmt = opts.formatter ?? defaultStatFormat;
     const headers = ['Label', ...datasets.map((d) => d.label ?? '')];
-    const rows = labels.map((label, i) => [label, ...datasets.map((d) => toNumber(d.data?.[i]))] as const);
+    const rows = labels.map((label, i) => [label, ...datasets.map((d) => typeof d.data?.[i] === 'number' && Number.isFinite(d.data[i]) ? d.data[i] : null)] as const);
 
     const downloadCsv = () => {
+        if (opts.signal?.aborted) return;
         downloadText(buildCsv(headers, rows), csvFilename(opts.title), 'text/csv;charset=utf-8');
     };
 
@@ -130,7 +136,7 @@ export function showSeriesData(opts: ChartDialogOptions): Promise<unknown> {
                                 {rows.map((row, ri) => (
                                     <tr key={ri}>
                                         <td>{row[0]}</td>
-                                        {row.slice(1).map((v, ci) => <td key={ci} className="num">{fmt(v as number)}</td>)}
+                                        {row.slice(1).map((v, ci) => <td key={ci} className="num">{typeof v === 'number' && Number.isFinite(v) ? fmt(v) : 'Unavailable'}</td>)}
                                     </tr>
                                 ))}
                             </tbody>
@@ -145,5 +151,5 @@ export function showSeriesData(opts: ChartDialogOptions): Promise<unknown> {
                 </>
             )}
         </div>
-    ), { size: 'lg' });
+    ), { size: 'lg', signal: opts.signal });
 }

package/src/charts/index.ts

@@ -7,6 +7,8 @@
 // and the exportChartPng SVG→PNG serializer.
 export * from './SeriesChart';
 export * from './MetricsChart';
+export * from './MetricsChartView';
+export * from './metrics-window';
 export * from './MiniChart';
 export * from './MetricsMiniWidget';
 export * from './KPITile';

package/src/charts/metrics-window.ts

@@ -0,0 +1,57 @@
+import { granularitiesForSpanMs, QUICK_RANGE_MS } from './stats';
+
+export interface Granularity { value: string; label: string; short: string }
+/** All bounds are epoch seconds. Absence of range denotes a custom window. */
+export interface MetricsChartWindow {
+    dt_start: number;
+    dt_end: number;
+    granularity: string;
+    range?: string;
+}
+export interface MetricsQuickRange { value: string; label: string; durationMs: number }
+
+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: MetricsQuickRange[] = [
+    { value: '1h', label: '1H', durationMs: QUICK_RANGE_MS['1h']! },
+    { value: '24h', label: '24H', durationMs: QUICK_RANGE_MS['24h']! },
+    { value: '7d', label: '7D', durationMs: QUICK_RANGE_MS['7d']! },
+    { value: '30d', label: '30D', durationMs: QUICK_RANGE_MS['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'],
+};
+
+/** Range gating narrows the source capability list; an explicit empty list stays empty. */
+export function metricsGranularities(window: MetricsChartWindow, configured?: readonly string[]): string[] {
+    const supported = GRANULARITIES.map((g) => g.value).filter((g) => !configured || configured.includes(g));
+    const fit = window.range && RANGE_GRANULARITY[window.range]
+        || granularitiesForSpanMs((window.dt_end - window.dt_start) * 1000);
+    const available = supported.filter((g) => fit.includes(g));
+    return available.length ? available : supported;
+}
+
+export function metricsQuickWindow(range: string | MetricsQuickRange, granularity = 'hours', nowMs = Date.now()): MetricsChartWindow {
+    let preset = typeof range === 'string' ? QUICK_RANGES.find((r) => r.value === range) : range;
+    if (!preset || !Number.isFinite(preset.durationMs) || preset.durationMs <= 0) {
+        console.warn('MetricsChart: invalid quick range — falling back to 24h');
+        preset = QUICK_RANGES[1]!;
+    }
+    return { range: preset.value, granularity, dt_start: Math.floor((nowMs - preset.durationMs) / 1000), dt_end: Math.floor(nowMs / 1000) };
+}
+
+export function metricsDateLabel(seconds: number): string {
+    const d = new Date(seconds * 1000);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}