@jorgerdz/timeview 0.1.0

package/src/timeview/MetricTimeline.tsx

@@ -0,0 +1,993 @@
+// MetricTimeline.tsx - Timeview numeric metric visualizer.
+//
+// A primary metric line over time plus contextual state intervals, shown as a
+// separate state band or by tinting the line itself. The viewport is navigable
+// and represented in a minimap so static exports preserve the active window.
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { KeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, WheelEvent } from "react";
+import { DAY_MS, fmt, tvScale } from "./core/time";
+import {
+  METRIC_MIN_SPAN,
+  tvClampViewport,
+  tvDefaultViewport,
+  tvLineSegments,
+  tvMetricModel,
+  tvMetricTimeTicks,
+  tvNearest,
+  tvNiceTicks,
+  tvStateAt,
+} from "./core/metric";
+import type { MetricModel, MetricPoint, MetricState } from "./core/metric";
+import { colorMap, labelName, mix } from "./core/labels";
+import { Caption } from "./shared/Caption";
+import { EmptyState } from "./shared/EmptyState";
+import { useMeasuredWidth } from "./shared/useMeasuredWidth";
+import type { Density, MetricTimelineSpec, TimeDataset } from "./types";
+
+export interface MetricTimelineProps {
+  dataset: TimeDataset;
+  spec: MetricTimelineSpec;
+  palette: string[];
+}
+
+const METRIC_INK = "#15181e";
+
+interface DensitySpec {
+  pad: number;
+  plotH: number;
+  bandH: number;
+  miniH: number;
+  axisW: number;
+  xAxisH: number;
+  dot: number;
+  line: number;
+  valueLabel: number;
+}
+
+const DENS: Record<Density, DensitySpec> = {
+  comfortable: { pad: 22, plotH: 300, bandH: 30, miniH: 56, axisW: 50, xAxisH: 30, dot: 3.4, line: 2.2, valueLabel: 11 },
+  compact: { pad: 16, plotH: 226, bandH: 24, miniH: 46, axisW: 44, xAxisH: 26, dot: 2.8, line: 2, valueLabel: 10 },
+};
+
+type Hover =
+  | { kind: "sample"; point: MetricPoint; mx: number; my: number }
+  | { kind: "state"; state: MetricState; mx: number; my: number }
+  | { kind: "event"; event: MetricModel["events"][number]; mx: number; my: number };
+
+function spanLabel(ms: number) {
+  const days = Math.round(ms / DAY_MS);
+  return days <= 90 ? `${days} days` : `${Math.round(days / 30)} months`;
+}
+
+function nearlySameViewport(a: [number, number], b: [number, number]) {
+  return Math.abs(a[0] - b[0]) < DAY_MS && Math.abs(a[1] - b[1]) < DAY_MS;
+}
+
+function valueText(value: number) {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
+export function MetricTimeline({ dataset, spec, palette }: MetricTimelineProps) {
+  const [wrapRef, width] = useMeasuredWidth<HTMLDivElement>(1100);
+  const [hover, setHover] = useState<Hover | null>(null);
+  const [selected, setSelected] = useState<{ kind: "sample" | "state"; id: string | number } | null>(null);
+  const [focusIdx, setFocusIdx] = useState<number | null>(null);
+  const dragRef = useRef(false);
+
+  const density: Density = spec.density || "comfortable";
+  const D = DENS[density] || DENS.comfortable;
+  const mode = spec.stateMode || "band";
+  const showStates = mode !== "off";
+  const showPointsPref = spec.showPoints !== false;
+  const showValues = !!spec.showValues;
+  const showTarget = spec.showTarget !== false;
+  const showEvents = spec.events?.showMarkers !== false;
+  const showMinimap = spec.minimap !== false;
+  const yFull = spec.yAxis === "full";
+  const legendPos = spec.legend?.position || "bottom";
+  const captionPos = spec.caption?.position || "bottom";
+  const captionText = spec.caption?.text || "";
+  const captionOn = captionPos !== "off" && !!captionText;
+
+  const model = useMemo(() => tvMetricModel(dataset), [dataset]);
+  const cmap = useMemo(() => colorMap(dataset, palette), [dataset, palette]);
+  const defaultVp = useMemo(() => tvDefaultViewport(model, spec.defaultDays || 90, spec.today), [model, spec.defaultDays, spec.today]);
+  const [viewport, setViewport] = useState<[number, number]>(defaultVp);
+
+  useEffect(() => {
+    setViewport(defaultVp);
+    setHover(null);
+    setSelected(null);
+    setFocusIdx(null);
+  }, [defaultVp]);
+
+  const [v0, v1] = viewport;
+  const narrow = width < 560;
+  const isEmpty = model.samples.length === 0;
+  const legendOn = legendPos !== "off" && showStates && (dataset.labels || []).length > 0;
+  const axisW = narrow ? Math.max(36, D.axisW - 12) : D.axisW;
+  const legendW = legendPos === "right" && !narrow ? Math.min(210, Math.max(160, width * 0.2)) : 0;
+  const plotW = Math.max(140, width - D.pad * 2 - axisW - (legendW ? legendW + D.pad : 0));
+  const plotH = narrow ? Math.max(180, D.plotH - 70) : D.plotH;
+
+  const x = useMemo(() => tvScale(v0, v1, plotW), [v0, v1, plotW]);
+  const samplesInView = useMemo(() => model.samples.filter((point) => point.t >= v0 && point.t <= v1), [model.samples, v0, v1]);
+  const ySamples = yFull ? model.samples : samplesInView.length ? samplesInView : model.samples;
+
+  let vMin = ySamples.length ? Math.min(...ySamples.map((point) => point.value)) : 0;
+  let vMax = ySamples.length ? Math.max(...ySamples.map((point) => point.value)) : 1;
+  if (showTarget && model.target) {
+    vMin = Math.min(vMin, model.target.value);
+    vMax = Math.max(vMax, model.target.value);
+  }
+  const yPad = (vMax - vMin) * 0.12 || 1;
+  const yTicks = tvNiceTicks(vMin - yPad, vMax + yPad, narrow ? 4 : 5);
+  const yOf = (value: number) => (1 - (value - yTicks.lo) / Math.max(1e-9, yTicks.hi - yTicks.lo)) * plotH;
+  const xTicks = useMemo(() => tvMetricTimeTicks(v0, v1), [v0, v1]);
+  const segments = useMemo(() => tvLineSegments(model.samples, model.states), [model.samples, model.states]);
+
+  const full = model.T1 - model.T0;
+  const atFull = v1 - v0 >= full - 1;
+  const atMin = v1 - v0 <= METRIC_MIN_SPAN + 1;
+  const isDefault = nearlySameViewport(viewport, defaultVp);
+  const visiblePoints = showPointsPref && samplesInView.length <= 130;
+
+  const linePath = (points: MetricPoint[]) =>
+    points.map((point, index) => `${index ? "L" : "M"}${x(point.t).toFixed(1)} ${yOf(point.value).toFixed(1)}`).join(" ");
+
+  const areaPath = (points: MetricPoint[]) => {
+    if (points.length < 2) return "";
+    return `M${x(points[0].t).toFixed(1)} ${plotH} L${points
+      .map((point) => `${x(point.t).toFixed(1)} ${yOf(point.value).toFixed(1)}`)
+      .join(" L")} L${x(points[points.length - 1].t).toFixed(1)} ${plotH} Z`;
+  };
+
+  const tintRuns = useMemo(() => {
+    const runs: { labelId: string | null; points: MetricPoint[] }[] = [];
+    segments.forEach((segment) => {
+      const current = runs[runs.length - 1];
+      if (!current || current.labelId !== segment.labelId) runs.push({ labelId: segment.labelId, points: [segment.a, segment.b] });
+      else current.points.push(segment.b);
+    });
+    return runs;
+  }, [segments]);
+
+  const zoom = useCallback(
+    (direction: -1 | 1) => {
+      const center = (v0 + v1) / 2;
+      const span = (v1 - v0) * (direction < 0 ? 0.62 : 1 / 0.62);
+      setViewport(tvClampViewport(center - span / 2, center + span / 2, model, "zoom"));
+    },
+    [model, v0, v1],
+  );
+
+  const zoomAt = useCallback(
+    (anchor: number, scale: number) => {
+      const currentSpan = v1 - v0;
+      const nextSpan = currentSpan * scale;
+      const ratio = Math.max(0, Math.min(1, (anchor - v0) / currentSpan));
+      const next0 = anchor - ratio * nextSpan;
+      setViewport(tvClampViewport(next0, next0 + nextSpan, model, "zoom"));
+    },
+    [model, v0, v1],
+  );
+
+  const pan = useCallback(
+    (direction: -1 | 1) => {
+      const shift = direction * (v1 - v0) * 0.5;
+      setViewport(tvClampViewport(v0 + shift, v1 + shift, model, "pan"));
+    },
+    [model, v0, v1],
+  );
+
+  const reset = useCallback(() => setViewport(defaultVp), [defaultVp]);
+  const scrub = useCallback((next0: number, next1: number) => setViewport(tvClampViewport(next0, next1, model, "pan")), [model]);
+
+  const track = (event: { clientX: number; clientY: number }) => {
+    const rect = wrapRef.current?.getBoundingClientRect();
+    return rect ? { mx: event.clientX - rect.left, my: event.clientY - rect.top } : { mx: 0, my: 0 };
+  };
+
+  const onPlotDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const startX = event.clientX;
+    const start: [number, number] = [v0, v1];
+    let moved = false;
+    dragRef.current = true;
+
+    const move = (ev: PointerEvent) => {
+      const dx = ev.clientX - startX;
+      if (Math.abs(dx) > 3) moved = true;
+      const dt = -(dx / plotW) * (start[1] - start[0]);
+      setViewport(tvClampViewport(start[0] + dt, start[1] + dt, model, "pan"));
+    };
+
+    const up = (ev: PointerEvent) => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      dragRef.current = false;
+      if (!moved && model.samples.length && wrapRef.current) {
+        const rect = wrapRef.current.getBoundingClientRect();
+        const mx = ev.clientX - rect.left - (D.pad + axisW);
+        const point = tvNearest(model.samples, x.invert(mx));
+        if (!point) return;
+        const idx = model.samples.indexOf(point);
+        setSelected((current) => (current?.kind === "sample" && current.id === point.t ? null : { kind: "sample", id: point.t }));
+        setFocusIdx(idx);
+      }
+    };
+
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+
+  const onPlotMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (dragRef.current || !model.samples.length || !wrapRef.current) return;
+    const rect = wrapRef.current.getBoundingClientRect();
+    const mx = event.clientX - rect.left - (D.pad + axisW);
+    if (mx < -2 || mx > plotW + 2) {
+      setHover(null);
+      return;
+    }
+    const point = tvNearest(model.samples, x.invert(mx));
+    if (point) setHover({ kind: "sample", point, ...track(event) });
+  };
+
+  const onPlotWheel = (event: WheelEvent<HTMLDivElement>) => {
+    if (isEmpty || !wrapRef.current) return;
+    const rect = wrapRef.current.getBoundingClientRect();
+    const plotLeft = rect.left + D.pad + axisW;
+    const px = event.clientX - plotLeft;
+    const overPlot = px >= 0 && px <= plotW;
+    if (!overPlot) return;
+
+    const wantsPan = event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY);
+
+    event.preventDefault();
+    if (wantsPan) {
+      const delta = event.shiftKey && Math.abs(event.deltaY) > Math.abs(event.deltaX) ? event.deltaY : event.deltaX;
+      const shift = (delta / Math.max(1, plotW)) * (v1 - v0);
+      setViewport(tvClampViewport(v0 + shift, v1 + shift, model, "pan"));
+      return;
+    }
+
+    const rawScale = Math.exp(event.deltaY * 0.0015);
+    const scale = Math.max(0.88, Math.min(1.14, rawScale));
+    zoomAt(x.invert(px).getTime(), scale);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!model.samples.length) return;
+    let idx = focusIdx == null ? model.samples.findIndex((point) => point.t >= v0) : focusIdx;
+    if (idx < 0) idx = 0;
+
+    if (event.key === "ArrowRight") idx = Math.min(model.samples.length - 1, idx + 1);
+    else if (event.key === "ArrowLeft") idx = Math.max(0, idx - 1);
+    else if (event.key === "Home") idx = 0;
+    else if (event.key === "End") idx = model.samples.length - 1;
+    else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const point = model.samples[idx];
+      setSelected((current) => (current?.kind === "sample" && current.id === point.t ? null : { kind: "sample", id: point.t }));
+      return;
+    } else if (event.key === "+" || event.key === "=") {
+      event.preventDefault();
+      zoom(-1);
+      return;
+    } else if (event.key === "-") {
+      event.preventDefault();
+      zoom(1);
+      return;
+    } else {
+      return;
+    }
+
+    event.preventDefault();
+    setFocusIdx(idx);
+    const point = model.samples[idx];
+    if (point.t < v0 || point.t > v1) {
+      const span = v1 - v0;
+      setViewport(tvClampViewport(point.t - span / 2, point.t + span / 2, model, "pan"));
+    }
+    setHover({ kind: "sample", point, mx: D.pad + axisW + x(point.t), my: D.pad + plotH / 2 });
+  };
+
+  const activePoint =
+    hover?.kind === "sample"
+      ? hover.point
+      : selected?.kind === "sample"
+        ? model.samples.find((point) => point.t === selected.id) || null
+        : focusIdx != null
+          ? model.samples[focusIdx] || null
+          : null;
+
+  let lastValueLabelX = -1e9;
+  const frameLabel = `${fmt.monDay(new Date(v0))} - ${fmt.monDay(new Date(v1))}`;
+
+  return (
+    <div
+      ref={wrapRef}
+      className="tv-component"
+      style={{
+        background: "var(--tv-canvas)",
+        border: "1px solid var(--tv-line)",
+        borderRadius: "var(--tv-r-lg)",
+        boxShadow: "var(--tv-shadow-1)",
+        padding: D.pad,
+        fontFamily: "var(--tv-font)",
+        color: "var(--tv-ink)",
+        position: "relative",
+        width: "100%",
+        overflow: "hidden",
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 4, flexWrap: "wrap" }}>
+        <div style={{ fontSize: narrow ? 15 : 17, fontWeight: 600, letterSpacing: 0, color: "var(--tv-ink)", lineHeight: 1.25, minWidth: 0 }}>
+          {spec.title || dataset.meta?.title || model.name}
+        </div>
+        <div style={{ fontFamily: "var(--tv-mono)", fontSize: 11, color: "var(--tv-ink-3)", whiteSpace: "nowrap", flex: "none" }}>{frameLabel}</div>
+      </div>
+
+      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 14, flexWrap: "wrap" }}>
+        <div style={{ fontFamily: "var(--tv-mono)", fontSize: 11, color: "var(--tv-ink-4)" }}>
+          {model.name.toLowerCase()} · {model.samples.length} log{model.samples.length === 1 ? "" : "s"}
+          {model.unit ? ` · ${model.unit}` : ""}
+        </div>
+        <MetricControls onZoom={zoom} onPan={pan} onReset={reset} span={spanLabel(v1 - v0)} atFull={atFull} atMin={atMin} isDefault={isDefault} />
+      </div>
+
+      {captionOn && captionPos === "top" && <Caption position={captionPos} text={captionText} narrow={narrow} />}
+      {legendOn && legendPos === "top" && (
+        <div style={{ paddingBottom: 14 }}>
+          <MetricLegend dataset={dataset} cmap={cmap} mode={mode} />
+        </div>
+      )}
+
+      <div style={{ display: "flex", gap: D.pad, alignItems: "flex-start" }}>
+        <div style={{ flex: "1 1 auto", minWidth: 0 }}>
+          <div style={{ display: "flex", alignItems: "stretch" }}>
+            <div style={{ width: axisW, height: plotH, position: "relative", flex: "none" }}>
+              {!isEmpty &&
+                yTicks.ticks.map((tick) => (
+                  <div
+                    key={tick}
+                    style={{
+                      position: "absolute",
+                      right: 8,
+                      top: yOf(tick),
+                      transform: "translateY(-50%)",
+                      fontFamily: "var(--tv-mono)",
+                      fontSize: narrow ? 10 : 11,
+                      color: "var(--tv-ink-4)",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {tick}
+                  </div>
+                ))}
+            </div>
+
+            <div style={{ position: "relative", width: plotW, flex: "none" }}>
+              <div
+                style={{
+                  position: "relative",
+                  width: plotW,
+                  height: plotH,
+                  overflow: "hidden",
+                  border: "1px solid var(--tv-line)",
+                  borderRadius: "var(--tv-r-sm)",
+                  background: "var(--tv-canvas)",
+                }}
+              >
+                <svg width={plotW} height={plotH} style={{ position: "absolute", inset: 0, pointerEvents: "none", display: "block" }}>
+                  {!isEmpty &&
+                    yTicks.ticks.map((tick) => <line key={`y-${tick}`} x1={0} x2={plotW} y1={yOf(tick)} y2={yOf(tick)} stroke="var(--tv-grid)" strokeWidth={1} />)}
+                  {xTicks.map((tick, index) => (
+                    <line key={`x-${index}`} x1={x(tick.t)} x2={x(tick.t)} y1={0} y2={plotH} stroke={tick.strong ? "var(--tv-grid-week)" : "var(--tv-grid)"} strokeWidth={1} />
+                  ))}
+
+                  {!isEmpty && mode === "tint"
+                    ? tintRuns.map(
+                        (run, index) =>
+                          run.labelId &&
+                          run.points.length > 1 && <path key={`area-${index}`} d={areaPath(run.points)} fill={mix(cmap[run.labelId] || METRIC_INK, 9)} stroke="none" />,
+                      )
+                    : !isEmpty && model.samples.length > 1 && <path d={areaPath(model.samples)} fill="rgba(21,24,30,0.045)" stroke="none" />}
+
+                  {!isEmpty && mode === "tint"
+                    ? segments.map((segment, index) => (
+                        <line
+                          key={`segment-${index}`}
+                          x1={x(segment.a.t)}
+                          y1={yOf(segment.a.value)}
+                          x2={x(segment.b.t)}
+                          y2={yOf(segment.b.value)}
+                          stroke={segment.labelId ? cmap[segment.labelId] || METRIC_INK : "var(--tv-ink-4)"}
+                          strokeWidth={D.line}
+                          strokeLinecap="round"
+                        />
+                      ))
+                    : !isEmpty && model.samples.length > 1 && <path d={linePath(model.samples)} fill="none" stroke={METRIC_INK} strokeWidth={D.line} strokeLinecap="round" strokeLinejoin="round" />}
+
+                  {!isEmpty && showTarget && model.target && model.target.value >= yTicks.lo && model.target.value <= yTicks.hi && (
+                    <g>
+                      <line x1={0} x2={plotW} y1={yOf(model.target.value)} y2={yOf(model.target.value)} stroke="var(--tv-ink-3)" strokeWidth={1.4} strokeDasharray="4 3" />
+                      <rect x={Math.max(4, plotW - 72)} y={yOf(model.target.value) - 9} width={68} height={16} rx={3} fill="#fff" opacity={0.92} />
+                      <text x={plotW - 7} y={yOf(model.target.value) + 3.5} textAnchor="end" fontFamily="var(--tv-mono)" fontSize={10.5} fill="var(--tv-ink-3)">
+                        {model.target.label} {valueText(model.target.value)}
+                      </text>
+                    </g>
+                  )}
+
+                  {!isEmpty &&
+                    visiblePoints &&
+                    model.samples.map((point) => {
+                      const px = x(point.t);
+                      if (px < -6 || px > plotW + 6) return null;
+                      const state = tvStateAt(model.states, point.t);
+                      const color = mode === "tint" && state?.labelIds?.[0] ? cmap[state.labelIds[0]] : METRIC_INK;
+                      return <circle key={point.t} cx={px} cy={yOf(point.value)} r={D.dot} fill={color} stroke="#fff" strokeWidth={1.25} />;
+                    })}
+
+                  {!isEmpty &&
+                    showValues &&
+                    model.samples.map((point) => {
+                      const px = x(point.t);
+                      if (px < 8 || px > plotW - 8 || px - lastValueLabelX < 34) return null;
+                      lastValueLabelX = px;
+                      return (
+                        <text key={`value-${point.t}`} x={px} y={yOf(point.value) - D.dot - 4} textAnchor="middle" fontFamily="var(--tv-mono)" fontSize={D.valueLabel} fill="var(--tv-ink-3)">
+                          {valueText(point.value)}
+                        </text>
+                      );
+                    })}
+                </svg>
+
+                {!isEmpty &&
+                  showEvents &&
+                  model.events.map((event) => {
+                    const px = x(event._t);
+                    if (px < -2 || px > plotW + 2) return null;
+                    const hue = showStates && event.labelIds?.[0] ? cmap[event.labelIds[0]] : "var(--tv-ink-3)";
+                    return (
+                      <span key={event.id}>
+                        <span style={{ position: "absolute", left: px, top: 0, bottom: 0, width: 1, background: "var(--tv-grid-week)", pointerEvents: "none" }} />
+                        <span
+                          tabIndex={0}
+                          role="button"
+                          aria-label={event.title}
+                          onMouseEnter={(ev) => setHover({ kind: "event", event, ...track(ev) })}
+                          onMouseMove={(ev) => setHover({ kind: "event", event, ...track(ev) })}
+                          onMouseLeave={() => setHover(null)}
+                          onFocus={() => setHover({ kind: "event", event, mx: D.pad + axisW + px, my: 120 })}
+                          onBlur={() => setHover(null)}
+                          style={{ position: "absolute", left: px, top: 3, transform: "translateX(-50%)", cursor: "pointer", outline: "none", padding: 3 }}
+                        >
+                          <span style={{ display: "block", width: 11, height: 11, transform: "rotate(45deg)", background: "#fff", border: `2px solid ${hue}`, borderRadius: 2 }} />
+                        </span>
+                      </span>
+                    );
+                  })}
+
+                {activePoint && !isEmpty && x(activePoint.t) >= -2 && x(activePoint.t) <= plotW + 2 && (
+                  <ActiveMarker
+                    x={x(activePoint.t)}
+                    y={yOf(activePoint.value)}
+                    color={mode === "tint" && tvStateAt(model.states, activePoint.t)?.labelIds?.[0] ? cmap[tvStateAt(model.states, activePoint.t)!.labelIds![0]] : METRIC_INK}
+                    selected={selected?.kind === "sample" && selected.id === activePoint.t}
+                    dot={D.dot}
+                  />
+                )}
+
+                {!isEmpty && (
+                  <div
+                    tabIndex={0}
+                    role="application"
+                    aria-label={`${model.name} chart, ${frameLabel}. Arrow keys move between readings; plus and minus zoom. Vertical scroll zooms around the cursor; horizontal or shift-scroll pans.`}
+                    onPointerDown={onPlotDown}
+                    onMouseMove={onPlotMove}
+                    onMouseLeave={() => setHover(null)}
+                    onWheel={onPlotWheel}
+                    onKeyDown={onKeyDown}
+                    style={{ position: "absolute", inset: 0, cursor: "crosshair", outline: "none", touchAction: "pan-y" }}
+                  />
+                )}
+
+                {isEmpty && (
+                  <EmptyState
+                    title="No measurements in this window"
+                    description="Log a value to start the trend line."
+                    icon="trend"
+                    narrow={narrow}
+                  />
+                )}
+              </div>
+
+              <div style={{ position: "relative", width: plotW, height: D.xAxisH, marginTop: 6 }}>
+                {xTicks.map((tick, index) => (
+                  <div key={index} style={{ position: "absolute", left: x(tick.t), top: 0, transform: "translateX(-50%)", textAlign: "center", whiteSpace: "nowrap" }}>
+                    <div
+                      style={{
+                        fontFamily: "var(--tv-mono)",
+                        fontSize: narrow ? 10.5 : 11.5,
+                        fontWeight: tick.strong ? 600 : 500,
+                        color: tick.strong ? "var(--tv-ink-2)" : "var(--tv-ink-4)",
+                        lineHeight: 1,
+                      }}
+                    >
+                      {tick.label}
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {!isEmpty && mode === "band" && model.states.length > 0 && (
+                <MetricBandRow
+                  states={model.states}
+                  x={(time) => x(time)}
+                  plotW={plotW}
+                  cmap={cmap}
+                  height={D.bandH}
+                  narrow={narrow}
+                  selected={selected?.kind === "state" ? String(selected.id) : null}
+                  onSelect={(id) => setSelected((current) => (current?.kind === "state" && current.id === id ? null : { kind: "state", id }))}
+                  onHover={(state, event) =>
+                    setHover({
+                      kind: "state",
+                      state,
+                      ...(event ? track(event) : { mx: D.pad + axisW + (x(state._s) + x(state._e)) / 2, my: plotH + 100 }),
+                    })
+                  }
+                  onLeave={() => setHover(null)}
+                />
+              )}
+
+              {showMinimap && !isEmpty && (
+                <div style={{ marginTop: 12 }}>
+                  <div style={{ fontFamily: "var(--tv-mono)", fontSize: 9.5, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--tv-ink-4)", marginBottom: 5 }}>
+                    Full history · drag to move window
+                  </div>
+                  <MetricMinimap model={{ ...model, states: showStates ? model.states : [] }} viewport={viewport} cmap={cmap} width={plotW} height={D.miniH} onScrub={scrub} />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {legendOn && legendPos === "right" && !narrow && (
+          <div style={{ width: legendW, flex: "none", paddingTop: 2 }}>
+            <div style={{ fontFamily: "var(--tv-mono)", fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--tv-ink-4)", marginBottom: 12 }}>Phases</div>
+            <MetricLegend dataset={dataset} cmap={cmap} mode={mode} vertical />
+          </div>
+        )}
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, flexWrap: "wrap", padding: "14px 0 2px", borderTop: "1px solid var(--tv-line)", marginTop: 14 }}>
+        <MetricShapeKey mode={mode} hasTarget={showTarget && !!model.target} hasEvents={showEvents && model.events.length > 0} seriesName={model.name.toLowerCase()} />
+        {legendOn && legendPos === "bottom" && <MetricLegend dataset={dataset} cmap={cmap} mode={mode} />}
+      </div>
+
+      {captionOn && captionPos === "bottom" && <Caption position={captionPos} text={captionText} narrow={narrow} />}
+
+      {hover && !isEmpty && (
+        <MetricTooltip
+          hover={hover}
+          model={model}
+          dataset={dataset}
+          cmap={cmap}
+          showStates={showStates}
+          showTarget={showTarget}
+          width={width}
+          stateAt={(time) => tvStateAt(model.states, time)}
+        />
+      )}
+    </div>
+  );
+}
+
+function ActiveMarker({ x, y, color, selected, dot }: { x: number; y: number; color: string; selected: boolean; dot: number }) {
+  return (
+    <>
+      <div style={{ position: "absolute", left: x, top: 0, bottom: 0, width: 1, background: "var(--tv-accent)", opacity: 0.5, pointerEvents: "none" }} />
+      <div
+        style={{
+          position: "absolute",
+          left: x,
+          top: y,
+          width: dot * 2 + 4,
+          height: dot * 2 + 4,
+          transform: "translate(-50%,-50%)",
+          borderRadius: "50%",
+          background: color,
+          border: "2px solid #fff",
+          boxShadow: selected ? "var(--tv-focus-ring)" : "0 1px 3px rgba(16,24,40,.25)",
+          pointerEvents: "none",
+        }}
+      />
+    </>
+  );
+}
+
+function MetricLegend({ dataset, cmap, mode, vertical = false }: { dataset: TimeDataset; cmap: Record<string, string>; mode: string; vertical?: boolean }) {
+  return (
+    <div style={{ display: "flex", flexDirection: vertical ? "column" : "row", flexWrap: "wrap", gap: vertical ? 8 : "8px 16px", alignItems: vertical ? "stretch" : "center" }}>
+      {(dataset.labels || []).map((label) => (
+        <div key={label.id} style={{ display: "inline-flex", alignItems: "center", gap: 8, minWidth: 0, flex: "none", maxWidth: vertical ? "100%" : "none" }}>
+          <span
+            style={{
+              width: 16,
+              height: 9,
+              borderRadius: 3,
+              background: mix(cmap[label.id], mode === "tint" ? 30 : 22),
+              flex: "none",
+              boxShadow: `inset 3px 0 0 0 ${cmap[label.id]}, inset 0 0 0 1px ${mix(cmap[label.id], 34)}`,
+            }}
+          />
+          <span style={{ fontFamily: "var(--tv-font)", fontSize: 12.5, color: "var(--tv-ink-2)", fontWeight: 500, lineHeight: 1.3, whiteSpace: vertical ? "normal" : "nowrap" }}>{label.name}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function MetricShapeKey({ mode, hasTarget, hasEvents, seriesName }: { mode: string; hasTarget: boolean; hasEvents: boolean; seriesName: string }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 15, flexWrap: "wrap" }}>
+      <span style={{ fontFamily: "var(--tv-mono)", fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--tv-ink-4)" }}>Key</span>
+      <KeyItem label={seriesName}>
+        <svg width="26" height="12" aria-hidden="true">
+          <line x1="1" y1="6" x2="25" y2="6" stroke={mode === "tint" ? "var(--tv-ink-3)" : METRIC_INK} strokeWidth="2" />
+          <circle cx="13" cy="6" r="2.6" fill={mode === "tint" ? "var(--tv-ink-3)" : METRIC_INK} />
+        </svg>
+      </KeyItem>
+      {hasTarget && (
+        <KeyItem label="goal">
+          <svg width="26" height="12" aria-hidden="true">
+            <line x1="1" y1="6" x2="25" y2="6" stroke="var(--tv-ink-3)" strokeWidth="1.5" strokeDasharray="4 3" />
+          </svg>
+        </KeyItem>
+      )}
+      {mode === "tint" && (
+        <KeyItem label="line tinted by phase">
+          <svg width="26" height="12" aria-hidden="true">
+            <line x1="1" y1="6" x2="13" y2="6" stroke="#2f6fed" strokeWidth="2.4" />
+            <line x1="13" y1="6" x2="25" y2="6" stroke="#0f9f6e" strokeWidth="2.4" />
+          </svg>
+        </KeyItem>
+      )}
+      {hasEvents && (
+        <KeyItem label="milestone">
+          <span style={{ width: 11, height: 11, transform: "rotate(45deg)", borderRadius: 2, background: "#fff", border: "2px solid var(--tv-ink-3)" }} />
+        </KeyItem>
+      )}
+    </div>
+  );
+}
+
+function KeyItem({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
+      {children}
+      <span style={{ fontFamily: "var(--tv-font)", fontSize: 11.5, color: "var(--tv-ink-3)" }}>{label}</span>
+    </span>
+  );
+}
+
+function MetricControls({
+  onZoom,
+  onPan,
+  onReset,
+  span,
+  atFull,
+  atMin,
+  isDefault,
+}: {
+  onZoom: (direction: -1 | 1) => void;
+  onPan: (direction: -1 | 1) => void;
+  onReset: () => void;
+  span: string;
+  atFull: boolean;
+  atMin: boolean;
+  isDefault: boolean;
+}) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+      <span style={{ fontFamily: "var(--tv-mono)", fontSize: 11, color: "var(--tv-ink-4)", letterSpacing: ".02em", marginRight: 2 }}>{span}</span>
+      <div style={{ display: "flex", gap: 4 }}>
+        <MetricButton label="‹" title="Pan back" onClick={() => onPan(-1)} />
+        <MetricButton label="›" title="Pan forward" onClick={() => onPan(1)} />
+      </div>
+      <div style={{ display: "flex", gap: 4 }}>
+        <MetricButton label="-" title="Zoom out" onClick={() => onZoom(1)} disabled={atFull} />
+        <MetricButton label="+" title="Zoom in" onClick={() => onZoom(-1)} disabled={atMin} />
+      </div>
+      <MetricButton label="Reset" title="Reset to default viewport" onClick={onReset} disabled={isDefault} wide />
+    </div>
+  );
+}
+
+function MetricButton({ label, title, onClick, disabled, wide }: { label: string; title: string; onClick: () => void; disabled?: boolean; wide?: boolean }) {
+  return (
+    <button
+      type="button"
+      aria-label={title}
+      title={title}
+      onClick={onClick}
+      disabled={disabled}
+      style={{
+        appearance: "none",
+        height: 28,
+        minWidth: wide ? "auto" : 28,
+        padding: wide ? "0 10px" : 0,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "1px solid var(--tv-line)",
+        borderRadius: 7,
+        background: disabled ? "var(--tv-rail)" : "#fff",
+        color: disabled ? "var(--tv-ink-5)" : "var(--tv-ink-2)",
+        cursor: disabled ? "default" : "pointer",
+        fontFamily: "var(--tv-mono)",
+        fontSize: 12,
+        fontWeight: 600,
+        boxShadow: disabled ? "none" : "var(--tv-shadow-1)",
+      }}
+    >
+      {label}
+    </button>
+  );
+}
+
+function MetricBandRow({
+  states,
+  x,
+  plotW,
+  cmap,
+  height,
+  narrow,
+  selected,
+  onSelect,
+  onHover,
+  onLeave,
+}: {
+  states: MetricState[];
+  x: (time: number) => number;
+  plotW: number;
+  cmap: Record<string, string>;
+  height: number;
+  narrow: boolean;
+  selected: string | null;
+  onSelect: (id: string) => void;
+  onHover: (state: MetricState, event: { clientX: number; clientY: number } | null) => void;
+  onLeave: () => void;
+}) {
+  return (
+    <div style={{ position: "relative", width: plotW, height, marginTop: 8 }}>
+      {states.map((state) => {
+        const hue = cmap[state.labelIds?.[0] || ""] || "#64748b";
+        const raw0 = x(state._s);
+        const raw1 = x(state._e);
+        const x0 = Math.max(0, raw0);
+        const x1 = Math.min(plotW, raw1);
+        if (x1 - x0 < 0.5) return null;
+        const startsIn = raw0 >= -0.5;
+        const isSelected = selected === state.id;
+        return (
+          <div
+            key={state.id}
+            role="button"
+            tabIndex={0}
+            onMouseEnter={(event) => onHover(state, event)}
+            onMouseMove={(event) => onHover(state, event)}
+            onMouseLeave={onLeave}
+            onFocus={() => onHover(state, null)}
+            onBlur={onLeave}
+            onClick={() => onSelect(state.id)}
+            style={{
+              position: "absolute",
+              left: x0,
+              width: x1 - x0,
+              top: 0,
+              bottom: 0,
+              cursor: "pointer",
+              outline: "none",
+              background: mix(hue, 17),
+              borderRadius: 6,
+              borderTop: `1px solid ${mix(hue, 32)}`,
+              borderBottom: `1px solid ${mix(hue, 32)}`,
+              boxShadow: [startsIn ? `inset 3px 0 0 0 ${hue}` : null, isSelected ? "var(--tv-focus-ring)" : null].filter(Boolean).join(", ") || "none",
+              display: "flex",
+              alignItems: "center",
+              gap: 7,
+              padding: "0 9px",
+              overflow: "hidden",
+            }}
+          >
+            {startsIn && <span style={{ width: 6, height: 6, borderRadius: "50%", background: hue, flex: "none" }} />}
+            {x1 - x0 > 52 && (
+              <span style={{ fontFamily: "var(--tv-font)", fontSize: narrow ? 11 : 12, fontWeight: 500, color: "var(--tv-ink-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {state.title}
+              </span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function MetricMinimap({
+  model,
+  viewport,
+  cmap,
+  width,
+  height,
+  onScrub,
+}: {
+  model: MetricModel;
+  viewport: [number, number];
+  cmap: Record<string, string>;
+  width: number;
+  height: number;
+  onScrub: (v0: number, v1: number) => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const padY = 7;
+  const bandH = 5;
+  const lineH = height - bandH - padY * 2;
+  const xFull = (time: number) => ((time - model.T0) / Math.max(1, model.T1 - model.T0)) * width;
+  const vSpan = Math.max(1, model.vMax - model.vMin);
+  const yOf = (value: number) => padY + (1 - (value - model.vMin) / vSpan) * lineH;
+  const path = model.samples.map((point, index) => `${index ? "L" : "M"}${xFull(point.t).toFixed(1)} ${yOf(point.value).toFixed(1)}`).join(" ");
+  const [w0, w1] = viewport;
+  const wx0 = xFull(w0);
+  const wx1 = xFull(w1);
+
+  const timeAt = (clientX: number) => {
+    const rect = ref.current?.getBoundingClientRect();
+    if (!rect) return model.T0;
+    const f = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    return model.T0 + f * (model.T1 - model.T0);
+  };
+
+  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const span = w1 - w0;
+    const rect = ref.current?.getBoundingClientRect();
+    const inside = rect ? event.clientX >= rect.left + wx0 - 6 && event.clientX <= rect.left + wx1 + 6 : false;
+    const startCenter = (w0 + w1) / 2;
+    const grabOffset = inside ? timeAt(event.clientX) - startCenter : 0;
+    const apply = (clientX: number) => {
+      const center = timeAt(clientX) - grabOffset;
+      onScrub(center - span / 2, center + span / 2);
+    };
+    apply(event.clientX);
+    const move = (ev: PointerEvent) => apply(ev.clientX);
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+
+  return (
+    <div
+      ref={ref}
+      onPointerDown={onPointerDown}
+      style={{ position: "relative", width, height, cursor: "ew-resize", background: "var(--tv-frame)", border: "1px solid var(--tv-line)", borderRadius: "var(--tv-r-md)", overflow: "hidden", touchAction: "none" }}
+    >
+      <svg width={width} height={height} style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
+        {model.states.map((state) => {
+          const hue = cmap[state.labelIds?.[0] || ""] || "#64748b";
+          const x0 = Math.max(0, xFull(state._s));
+          const x1 = Math.min(width, xFull(state._e));
+          if (x1 - x0 < 0.5) return null;
+          return <rect key={state.id} x={x0} y={height - bandH} width={x1 - x0} height={bandH} fill={mix(hue, 60)} />;
+        })}
+        {model.samples.length > 1 && <path d={path} fill="none" stroke="var(--tv-ink-3)" strokeWidth={1.4} strokeLinejoin="round" strokeLinecap="round" />}
+      </svg>
+      <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, width: Math.max(0, wx0), background: "rgba(245,247,249,0.74)", pointerEvents: "none" }} />
+      <div style={{ position: "absolute", top: 0, bottom: 0, left: Math.min(width, wx1), right: 0, background: "rgba(245,247,249,0.74)", pointerEvents: "none" }} />
+      <div style={{ position: "absolute", top: 0, bottom: 0, left: wx0, width: Math.max(8, wx1 - wx0), border: "1.5px solid var(--tv-accent)", borderRadius: 5, background: "var(--tv-accent-soft)", pointerEvents: "none" }}>
+        <span style={{ position: "absolute", left: -1, top: "50%", transform: "translateY(-50%)", width: 3, height: 16, background: "var(--tv-accent)", borderRadius: 2 }} />
+        <span style={{ position: "absolute", right: -1, top: "50%", transform: "translateY(-50%)", width: 3, height: 16, background: "var(--tv-accent)", borderRadius: 2 }} />
+      </div>
+    </div>
+  );
+}
+
+function MetricTooltip({
+  hover,
+  model,
+  dataset,
+  cmap,
+  showStates,
+  showTarget,
+  width,
+  stateAt,
+}: {
+  hover: Hover;
+  model: MetricModel;
+  dataset: TimeDataset;
+  cmap: Record<string, string>;
+  showStates: boolean;
+  showTarget: boolean;
+  width: number;
+  stateAt: (time: number) => MetricState | null;
+}) {
+  const tooltipW = 230;
+  const left = Math.max(8, Math.min(width - tooltipW - 8, hover.mx - tooltipW / 2));
+  const top = Math.max(8, hover.my - 104);
+  let title = "";
+  let line = "";
+  let kind = "Reading";
+  let color = METRIC_INK;
+  let body: ReactNode = null;
+
+  if (hover.kind === "sample") {
+    const state = stateAt(hover.point.t);
+    color = showStates && state?.labelIds?.[0] ? cmap[state.labelIds[0]] : METRIC_INK;
+    const delta = showTarget && model.target ? Math.round((hover.point.value - model.target.value) * 10) / 10 : null;
+    body = (
+      <>
+        <div style={{ display: "flex", alignItems: "baseline", gap: 5, marginBottom: 3 }}>
+          <span style={{ fontFamily: "var(--tv-mono)", fontSize: 21, fontWeight: 600, color: "var(--tv-ink)", lineHeight: 1 }}>{valueText(hover.point.value)}</span>
+          <span style={{ fontFamily: "var(--tv-mono)", fontSize: 12, color: "var(--tv-ink-4)" }}>{model.unit}</span>
+          {delta != null && (
+            <span style={{ fontFamily: "var(--tv-mono)", fontSize: 11, marginLeft: "auto", color: delta > 0 ? "#c2410c" : delta < 0 ? "#0f9f6e" : "var(--tv-ink-4)" }}>
+              {delta > 0 ? "+" : ""}
+              {valueText(delta)} vs goal
+            </span>
+          )}
+        </div>
+        <div style={{ fontFamily: "var(--tv-mono)", fontSize: 11, color: "var(--tv-ink-3)", lineHeight: 1.45 }}>{fmt.full(new Date(hover.point.t))}</div>
+        {showStates && state?.labelIds?.[0] && (
+          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 6 }}>
+            <span style={{ width: 8, height: 8, borderRadius: 2, background: mix(color, 26), boxShadow: `inset 2px 0 0 0 ${color}`, flex: "none" }} />
+            <span style={{ fontFamily: "var(--tv-font)", fontSize: 11.5, color: "var(--tv-ink-2)" }}>{labelName(dataset, state.labelIds[0])}</span>
+          </div>
+        )}
+      </>
+    );
+  } else if (hover.kind === "state") {
+    kind = "Phase";
+    title = hover.state.title;
+    color = cmap[hover.state.labelIds?.[0] || ""] || "#64748b";
+    line = `${fmt.full(new Date(hover.state._s))} - ${fmt.full(new Date(hover.state._e - DAY_MS))}`;
+  } else {
+    kind = "Milestone";
+    title = hover.event.title;
+    color = showStates && hover.event.labelIds?.[0] ? cmap[hover.event.labelIds[0]] : "var(--tv-ink-3)";
+    line = fmt.full(new Date(hover.event._t));
+  }
+
+  const isEvent = hover.kind === "event";
+  return (
+    <div data-tv-transient style={{ position: "absolute", left, top, width: tooltipW, pointerEvents: "none", zIndex: 50 }}>
+      <div style={{ background: "#fff", border: "1px solid var(--tv-line)", borderRadius: "var(--tv-r-md)", boxShadow: "var(--tv-shadow-pop)", padding: "10px 13px" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 5 }}>
+          <span
+            style={{
+              width: 9,
+              height: 9,
+              borderRadius: isEvent ? 1 : "50%",
+              background: isEvent ? "#fff" : color,
+              border: isEvent ? `2px solid ${color}` : "none",
+              transform: isEvent ? "rotate(45deg)" : "none",
+              flex: "none",
+            }}
+          />
+          <span style={{ fontFamily: "var(--tv-mono)", fontSize: 10, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--tv-ink-4)" }}>{kind}</span>
+        </div>
+        {body || (
+          <>
+            <div style={{ fontSize: 14, fontWeight: 600, color: "var(--tv-ink)", marginBottom: 4, lineHeight: 1.3 }}>{title}</div>
+            <div style={{ fontFamily: "var(--tv-mono)", fontSize: 11, color: "var(--tv-ink-3)", lineHeight: 1.45 }}>{line}</div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}