react-native-livechart 1.0.0

package/src/draw/grid.ts

@@ -0,0 +1,174 @@
+import { lerp } from "../math/lerp";
+
+export interface YAxisEntry {
+  y: number;
+  label: string;
+  alpha: number;
+}
+
+/**
+ * Pick a nice Y-axis interval using TradingView's cycling divisor approach.
+ * Hysteresis: once chosen, sticks until pixel spacing falls outside [0.5x, 4x] of minGap.
+ */
+export function pickInterval(
+  valRange: number,
+  pxPerUnit: number,
+  minGap: number,
+  prev: number,
+): number {
+  "worklet";
+  if (prev > 0) {
+    const px = prev * pxPerUnit;
+    if (px >= minGap * 0.5 && px <= minGap * 4) return prev;
+  }
+
+  const divisorSets = [
+    [2, 2.5, 2],
+    [2, 2, 2.5],
+    [2.5, 2, 2],
+  ];
+  let best = Infinity;
+  for (let s = 0; s < divisorSets.length; s++) {
+    const divs = divisorSets[s];
+    let span = Math.pow(10, Math.ceil(Math.log10(valRange)));
+    let i = 0;
+    while ((span / divs[i % 3]) * pxPerUnit >= minGap) {
+      span /= divs[i % 3];
+      i++;
+    }
+    if (span < best) best = span;
+  }
+  if (best === Infinity) {
+    return valRange / 5;
+  }
+  return best;
+}
+
+/**
+ * Blend factor for fine (non-coarse) grid lines from pixel spacing.
+ * Exposed for unit tests; matches `computeGridEntries` behaviour.
+ */
+export function fineLineTargetAlpha(finePx: number, minGap = 36): number {
+  "worklet";
+  const fineMin = minGap * 1.1;
+  const fineMax = minGap * 1.7;
+  if (finePx < fineMin) return 0;
+  if (finePx >= fineMax) return 1;
+  return (finePx - fineMin) / (fineMax - fineMin);
+}
+
+function divisible(val: number, interval: number): boolean {
+  "worklet";
+  const ratio = val / interval;
+  // 1% tolerance for floating-point rounding in interval alignment
+  return Math.abs(ratio - Math.round(ratio)) < 0.01;
+}
+
+const FADE_IN = 0.18;
+const FADE_OUT = 0.12;
+
+/** Map data value → canvas Y (nested arrows inside worklets are not UI-thread-safe). */
+function gridValueToY(
+  val: number,
+  displayMax: number,
+  valRange: number,
+  padTop: number,
+  chartH: number,
+): number {
+  "worklet";
+  return padTop + ((displayMax - val) / valRange) * chartH;
+}
+
+/**
+ * Compute grid entries with per-label alpha fading.
+ * `labelAlphas` is mutated in place (persistent state across frames).
+ */
+export function computeGridEntries(
+  displayMin: number,
+  displayMax: number,
+  canvasHeight: number,
+  padTop: number,
+  padBottom: number,
+  prevInterval: number,
+  labelAlphas: Record<number, number>,
+  formatValue: (v: number) => string,
+  dt: number,
+  minGap = 36,
+): { entries: YAxisEntry[]; interval: number } {
+  "worklet";
+  const chartH = canvasHeight - padTop - padBottom;
+  if (chartH <= 0) return { entries: [], interval: prevInterval };
+
+  const valRange = displayMax - displayMin;
+  if (valRange <= 0) return { entries: [], interval: prevInterval };
+
+  const pxPerUnit = chartH / valRange;
+
+  const coarse = pickInterval(valRange, pxPerUnit, minGap, prevInterval);
+  const fine = coarse / 2;
+  const finePx = fine * pxPerUnit;
+  const fineTarget = fineLineTargetAlpha(finePx, minGap);
+
+  const fadeZone = 32;
+
+  // Phase 1: compute target alpha for every grid line
+  const targets: Record<number, number> = {};
+  const first = Math.ceil(displayMin / fine) * fine;
+  for (let val = first; val <= displayMax; val += fine) {
+    const y = gridValueToY(val, displayMax, valRange, padTop, chartH);
+    /* istanbul ignore next -- y stays in chart band for v in [first, displayMax] with consistent toY */
+    if (y < padTop - 2 || y > canvasHeight - padBottom + 2) continue;
+    const isCoarse = divisible(val, coarse);
+
+    const fromEdge = Math.min(y - padTop, canvasHeight - padBottom - y);
+    const edgeAlpha =
+      fromEdge >= fadeZone ? 1 : fromEdge <= 0 ? 0 : fromEdge / fadeZone;
+
+    const target = (isCoarse ? 1 : fineTarget) * edgeAlpha;
+    const key = Math.round(val * 1e10);
+    targets[key] = target;
+  }
+
+  // Phase 2: update tracked label alphas
+  const keys = Object.keys(labelAlphas);
+  for (let i = 0; i < keys.length; i++) {
+    const key = Number(keys[i]);
+    const alpha = labelAlphas[key];
+    const target = targets[key] ?? 0;
+    const speed = target >= alpha ? FADE_IN : FADE_OUT;
+    let next = lerp(alpha, target, speed, dt);
+    if (Math.abs(next - target) < 0.02) next = target;
+    if (next < 0.01 && target === 0) {
+      delete labelAlphas[key];
+    } else {
+      labelAlphas[key] = next;
+    }
+  }
+
+  // New labels not yet tracked
+  const targetKeys = Object.keys(targets);
+  for (let i = 0; i < targetKeys.length; i++) {
+    const key = Number(targetKeys[i]);
+    /* istanbul ignore else -- key already tracked after phase 2 when targets repeat across frames */
+    if (labelAlphas[key] === undefined) {
+      /* istanbul ignore next -- targets keys always map to a number; ?? keeps types safe */
+      labelAlphas[key] = (targets[key] ?? 0) * FADE_IN;
+    }
+  }
+
+  // Phase 3: build entries
+  const entries: YAxisEntry[] = [];
+  const allKeys = Object.keys(labelAlphas);
+  for (let i = 0; i < allKeys.length; i++) {
+    const key = Number(allKeys[i]);
+    const alpha = labelAlphas[key];
+    if (alpha < 0.02) continue;
+    const val = key / 1e10;
+    const y = gridValueToY(val, displayMax, valRange, padTop, chartH);
+    /* istanbul ignore next -- vertical clip; y stays in-band when val comes from tracked keys */
+    if (y < padTop - 10 || y > canvasHeight - padBottom + 10) continue;
+    entries.push({ y, label: formatValue(val), alpha });
+  }
+
+  return { entries, interval: coarse };
+}

package/src/draw/line.ts

@@ -0,0 +1,257 @@
+import {
+  BADGE_DOT_GAP,
+  BADGE_MARGIN_RIGHT,
+  BADGE_PILL_PAD_X,
+  BADGE_PILL_PAD_Y,
+  BADGE_TAIL_LEN,
+} from "../constants";
+import type { ChartInsets, LiveChartPoint } from "../types";
+export {
+  BADGE_DOT_GAP,
+  BADGE_MARGIN_RIGHT,
+  BADGE_PILL_PAD_X,
+  BADGE_PILL_PAD_Y,
+  BADGE_TAIL_LEN
+} from "../constants";
+
+export interface ChartPadding {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export const DEFAULT_PADDING: ChartPadding = {
+  top: 12,
+  right: 12,
+  bottom: 28,
+  left: 12,
+};
+
+/**
+ * Combined tail + rounded-cap offset.
+ * The pill body starts `tl` px to the right of the gutter left edge (= dot x),
+ * so the tail spans the gap between the dot and the pill body.
+ *
+ * When `showTail` is false the tail spike is omitted and only the round cap
+ * radius is returned, letting callers shrink the right gutter.
+ */
+export function badgeTailAndCap(fontSize: number, showTail = true): number {
+  "worklet";
+  const pillH = fontSize + BADGE_PILL_PAD_Y * 2;
+  return (showTail ? BADGE_TAIL_LEN : 0) + pillH / 2;
+}
+
+/**
+ * Text left-edge X so the label is horizontally centered in the badge pill.
+ * Uses the ASYMMETRIC layout: tail gap (`tl`) on the left, `BADGE_MARGIN_RIGHT` on
+ * the right. Both `useBadge` and `GridOverlay` (when badge is shown) call this so
+ * the badge text and y-axis labels share the exact same horizontal position.
+ *
+ * Layout: |dot| tl |PAD_X| text |PAD_X| BADGE_MARGIN_RIGHT |canvas edge
+ *                         ↑ same x for grid labels and badge text
+ */
+export function pillTextLeftX(
+  canvasWidth: number,
+  paddingRight: number,
+  tl: number,
+  textWidth: number,
+): number {
+  "worklet";
+  const bodyLeft = canvasWidth - paddingRight + tl;
+  const bodyRight = canvasWidth - BADGE_MARGIN_RIGHT;
+  return (bodyLeft + bodyRight - textWidth) / 2;
+}
+
+/**
+ * Symmetric gutter centering — used for y-axis labels when badge is NOT shown.
+ * When badge IS shown, use `pillTextLeftX` instead so labels align with badge text.
+ */
+export function gutterCenteredTextLeftX(
+  canvasWidth: number,
+  paddingRight: number,
+  textWidth: number,
+): number {
+  "worklet";
+  return canvasWidth - paddingRight / 2 - textWidth / 2;
+}
+
+/**
+ * Right-aligned text positioning — used for y-axis labels when inline series
+ * labels occupy the left portion of the right gutter.
+ */
+export function gutterRightAlignedTextLeftX(
+  canvasWidth: number,
+  textWidth: number,
+  rightMargin = 4,
+): number {
+  "worklet";
+  return canvasWidth - textWidth - rightMargin;
+}
+
+/**
+ * Minimum `padding.right` for the badge gutter.
+ *
+ * Layout: |dot| BADGE_DOT_GAP | tl | PAD_X | text | PAD_X | BADGE_MARGIN_RIGHT |canvas edge
+ */
+export function minPaddingRightForBadgeYAxisAlign(
+  fontSize: number,
+  textWidth: number,
+  showTail = true,
+): number {
+  const tl = badgeTailAndCap(fontSize, showTail);
+  return Math.ceil(
+    BADGE_DOT_GAP + tl + 2 * BADGE_PILL_PAD_X + textWidth + BADGE_MARGIN_RIGHT,
+  );
+}
+
+/** Auto-right-padding: badge needs space for the pill, y-axis labels need less. */
+export function resolveAutoRight(
+  yAxis: boolean,
+  badge: boolean,
+  showTail = true,
+): number {
+  if (badge) return minPaddingRightForBadgeYAxisAlign(12, 49, showTail);
+  if (yAxis) return 44;
+  return DEFAULT_PADDING.right;
+}
+
+/**
+ * Minimum `padding.left` for a badge pill drawn in the left chart margin (label width + horizontal padding + dot gap).
+ * `resolveChartLayout` does not call this; it remains available for custom layouts or `resolvePadding(..., badgeOnLeft: true)`.
+ */
+export function minPaddingLeftForBadge(textWidth: number): number {
+  return Math.ceil(
+    BADGE_MARGIN_RIGHT + 2 * BADGE_PILL_PAD_X + textWidth + BADGE_DOT_GAP,
+  );
+}
+
+/** Default left inset, or a wider inset when `badgeOnLeft` is true (see `minPaddingLeftForBadge`). */
+export function resolveAutoLeft(badgeOnLeft: boolean): number {
+  if (badgeOnLeft) return minPaddingLeftForBadge(49);
+  return DEFAULT_PADDING.left;
+}
+
+/**
+ * Minimum inset from the canvas edge so the live-dot pulse ring is not clipped.
+ * Matches `DotOverlay`: circle radius up to `maxRadius` with a centered stroke.
+ *
+ * Used by `resolveChartLayout` when `pulse` is set; keep in sync with `DotOverlay` pulse rendering.
+ *
+ * @see `resolveChartLayout` in `hooks/resolveChartLayout.ts`
+ * @see `DotOverlay` in `components/DotOverlay.tsx`
+ */
+export function pulseRadialOutset(
+  maxRadius: number,
+  strokeWidth: number,
+): number {
+  return Math.ceil(maxRadius + strokeWidth / 2);
+}
+
+/** Extra space beyond label width so the pulse ring does not touch glyphs. */
+const PULSE_Y_AXIS_LABEL_GAP = 8;
+
+/**
+ * Minimum `padding.right` when the live dot (and pulse) sit on the inner edge of the
+ * right gutter and y-axis labels are centered in that gutter (`gutterCenteredTextLeftX`).
+ * Otherwise the pulse can overlap labels to the right of the dot.
+ */
+export function minPaddingRightForYAxisWithPulse(
+  pulseOutlet: number,
+  yAxisLabelTextWidth: number,
+  gap = PULSE_Y_AXIS_LABEL_GAP,
+): number {
+  return Math.ceil(2 * pulseOutlet + yAxisLabelTextWidth + gap);
+}
+
+export function resolvePadding(
+  override?: ChartInsets,
+  yAxis = false,
+  badge = false,
+  badgeOnLeft = false,
+  xAxis = true,
+  showTail = true,
+): ChartPadding {
+  const autoRight = resolveAutoRight(yAxis, badge && !badgeOnLeft, showTail);
+  const autoLeft = resolveAutoLeft(badgeOnLeft);
+  const autoBottom = xAxis ? DEFAULT_PADDING.bottom : 8;
+  if (!override) {
+    return {
+      ...DEFAULT_PADDING,
+      right: autoRight,
+      left: autoLeft,
+      bottom: autoBottom,
+    };
+  }
+  return {
+    top: override.top ?? DEFAULT_PADDING.top,
+    right: override.right ?? autoRight,
+    bottom: override.bottom ?? autoBottom,
+    left: override.left ?? autoLeft,
+  };
+}
+
+/**
+ * Build screen-space points as a flat number array [x0, y0, x1, y1, ...].
+ * Includes one point before the window for smooth left-edge entry,
+ * and appends a live tip at (now, displayValue).
+ *
+ * Flat layout avoids ~150 tuple object allocations per frame.
+ *
+ * Pass `out` to reuse a persistent array instead of allocating a fresh one each
+ * frame (it is cleared and refilled). The per-frame allocation otherwise scales
+ * with the visible point count, so pooling it cuts UI-thread GC pressure on
+ * busy / wide-window charts. Callers that pool `out` must ping-pong two buffers
+ * so the returned reference still changes each frame (Reanimated's value-equality
+ * check skips notifying subscribers when the reference is unchanged).
+ */
+export function buildLinePoints(
+  data: LiveChartPoint[],
+  displayValue: number,
+  now: number,
+  windowSecs: number,
+  displayMin: number,
+  displayMax: number,
+  canvasWidth: number,
+  canvasHeight: number,
+  padding: ChartPadding,
+  out?: number[],
+): number[] {
+  "worklet";
+  const pts: number[] = out ?? [];
+  if (out) out.length = 0;
+  const chartW = canvasWidth - padding.left - padding.right;
+  const chartH = canvasHeight - padding.top - padding.bottom;
+  const valRange = displayMax - displayMin;
+
+  if (valRange === 0 || chartW <= 0 || chartH <= 0 || data.length === 0)
+    return pts;
+
+  const winStart = now - windowSecs;
+
+  // Binary search for first point >= winStart
+  let lo = 0;
+  let hi = data.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (data[mid].time < winStart) lo = mid + 1;
+    else hi = mid;
+  }
+  const startIdx = Math.max(0, lo - 1);
+
+  for (let i = startIdx; i < data.length; i++) {
+    if (data[i].time > now) break;
+    pts.push(
+      padding.left + ((data[i].time - winStart) / windowSecs) * chartW,
+      padding.top + ((displayMax - data[i].value) / valRange) * chartH,
+    );
+  }
+
+  // Live tip at current time with smoothed value
+  pts.push(
+    padding.left + chartW,
+    padding.top + ((displayMax - displayValue) / valRange) * chartH,
+  );
+
+  return pts;
+}

package/src/draw/trade.ts

@@ -0,0 +1,202 @@
+import type { TradeEvent } from "../types";
+
+// ── Output type consumed by the overlay ────────────────────────────────────────
+
+export interface TradeMarker {
+  y: number;
+  label: string;
+  green: boolean;
+  alpha: number;
+}
+
+// ── Internal state for the scrolling tape ──────────────────────────────────────
+
+export interface StreamLabel {
+  y: number;
+  text: string;
+  green: boolean;
+  life: number;
+  maxLife: number;
+  intensity: number;
+}
+
+export interface TradeStreamState {
+  labels: StreamLabel[];
+  spawnTimer: number;
+  smoothSpeed: number;
+  lastSeenTime: number;
+}
+
+export function createTradeStreamState(): TradeStreamState {
+  return {
+    labels: [],
+    spawnTimer: 0,
+    smoothSpeed: BASE_SPEED,
+    lastSeenTime: 0,
+  };
+}
+
+// ── Trade stream label layout constants ────────────────────────────────────────
+
+export const MAX_LABELS = 50;
+export const LABEL_LIFETIME = 6;
+const SPAWN_INTERVAL = 40;
+const MIN_LABEL_GAP = 22;
+const BASE_SPEED = 60;
+const MAX_SPEED = 160;
+
+// ── Size formatter ─────────────────────────────────────────────────────────────
+
+function formatSize(size: number): string {
+  "worklet";
+  if (size >= 10) return `$${Math.round(size)}`;
+  if (size >= 1) return `$${size.toFixed(1)}`;
+  return `$${size.toFixed(2)}`;
+}
+
+// ── Tick: spawn, move, expire ──────────────────────────────────────────────────
+
+/**
+ * Advance the trade stream state by one frame.
+ * Spawns labels from new trades at `chartBottom`, scrolls them upward with
+ * deceleration, and expires labels that reach the top or run out of life.
+ *
+ * Pure worklet — no Skia imports. Mutates `state` in place.
+ */
+export function tickTradeStream(
+  state: TradeStreamState,
+  trades: TradeEvent[],
+  dtMs: number,
+  chartTop: number,
+  chartBottom: number,
+): void {
+  "worklet";
+  const dtSec = dtMs / 1000;
+  const range = chartBottom - chartTop;
+  if (range <= 0) return;
+
+  const newCount = trades.length;
+  const newestTime =
+    newCount > 0 ? trades[newCount - 1].time : /* istanbul ignore next */ 0;
+  const hasNewTrades = newestTime > state.lastSeenTime && newCount > 0;
+
+  // Count how many trades arrived since last seen time
+  let newTradesDelta = 0;
+  if (hasNewTrades) {
+    for (let i = newCount - 1; i >= 0; i--) {
+      if (trades[i].time <= state.lastSeenTime) break;
+      newTradesDelta++;
+    }
+  }
+  const activity = Math.min(newTradesDelta / 5, 1);
+
+  // Smooth speed lerp (fast attack, slow decay)
+  const targetSpeed = BASE_SPEED + activity * (MAX_SPEED - BASE_SPEED);
+  const speedLerp = activity > 0 ? 0.3 : 0.05;
+  state.smoothSpeed += (targetSpeed - state.smoothSpeed) * speedLerp;
+  const speed = state.smoothSpeed;
+
+  // Find max size among recent trades for intensity normalisation
+  let maxSize = 0;
+  const recentStart = Math.max(0, newCount - 20);
+  for (let i = recentStart; i < newCount; i++) {
+    if (trades[i].size > maxSize) maxSize = trades[i].size;
+  }
+
+  // Spawn new labels at bottom
+  state.spawnTimer += dtMs;
+  while (
+    state.spawnTimer >= SPAWN_INTERVAL &&
+    hasNewTrades &&
+    state.labels.length < MAX_LABELS
+  ) {
+    state.spawnTimer -= SPAWN_INTERVAL;
+
+    // Overlap check
+    let tooClose = false;
+    for (let j = 0; j < state.labels.length; j++) {
+      if (Math.abs(state.labels[j].y - chartBottom) < MIN_LABEL_GAP) {
+        tooClose = true;
+        break;
+      }
+    }
+    if (tooClose) break;
+
+    // Pick a recent trade (weighted random by size)
+    const windowStart = Math.max(0, newCount - 10);
+    let totalWeight = 0;
+    for (let i = windowStart; i < newCount; i++) totalWeight += trades[i].size;
+    let r = Math.random() * totalWeight;
+    let picked = trades[newCount - 1];
+    for (let i = windowStart; i < newCount; i++) {
+      r -= trades[i].size;
+      if (r <= 0) {
+        picked = trades[i];
+        break;
+      }
+    }
+
+    const sizeRatio =
+      maxSize > 0 ? picked.size / maxSize : /* istanbul ignore next */ 0.5;
+
+    const sym =
+      "symbol" in picked && typeof picked.symbol === "string" && picked.symbol
+        ? `${picked.symbol} `
+        : "";
+    state.labels.push({
+      y: chartBottom,
+      text: `${sym}${picked.side === "buy" ? "+" : "-"} ${formatSize(picked.size)}`,
+      green: picked.side === "buy",
+      life: LABEL_LIFETIME,
+      maxLife: LABEL_LIFETIME,
+      intensity: 0.5 + sizeRatio * 0.5,
+    });
+  }
+
+  state.lastSeenTime = newestTime;
+
+  // Move labels upward with deceleration + expire
+  let writeIdx = 0;
+  for (let i = 0; i < state.labels.length; i++) {
+    const l = state.labels[i];
+    l.life -= dtSec;
+    if (l.life <= 0) continue;
+    const yProgress = (l.y - chartTop) / range; // 1 at bottom, 0 at top
+    l.y -= speed * (0.7 + 0.3 * yProgress) * dtSec;
+    if (l.y < chartTop - 14) continue;
+    state.labels[writeIdx++] = l;
+  }
+  state.labels.length = writeIdx;
+}
+
+// ── Project labels for the overlay ─────────────────────────────────────────────
+
+/**
+ * Convert internal StreamLabel state to TradeMarker array for the overlay.
+ * Computes per-label alpha from fadeIn, fadeOut, and intensity.
+ */
+export function projectLabels(
+  state: TradeStreamState,
+  chartTop: number,
+  chartH: number,
+): TradeMarker[] {
+  "worklet";
+  const out: TradeMarker[] = [];
+  for (let i = 0; i < state.labels.length; i++) {
+    const l = state.labels[i];
+    const lifeRatio = l.life / l.maxLife;
+    const fadeIn = Math.min((1 - lifeRatio) * 10, 1);
+    const yRatio =
+      chartH > 0 ? (l.y - chartTop) / chartH : /* istanbul ignore next */ 1;
+    const fadeOut = yRatio < 0.45 ? yRatio / 0.45 : 1;
+    const alpha = l.intensity * fadeIn * fadeOut;
+
+    out.push({
+      y: l.y,
+      label: l.text,
+      green: l.green,
+      alpha: Math.max(0, Math.min(1, alpha)),
+    });
+  }
+  return out;
+}

package/src/hooks/crosshairSeries.ts

@@ -0,0 +1,78 @@
+import { type SkFont } from "@shopify/react-native-skia";
+import { type ChartPadding } from "../draw/line";
+import { interpolateAtTime } from "../math/interpolate";
+import type { ScrubSeriesValue, SeriesConfig } from "../types";
+import {
+  computeTooltipLayoutMulti,
+  HIDDEN_TOOLTIP,
+  type TooltipLayout,
+} from "./crosshairShared";
+
+export function interpolateSeriesAtTime(
+  series: SeriesConfig[],
+  time: number,
+): { primary: number | null; seriesValues: ScrubSeriesValue[] } {
+  "worklet";
+  const seriesValues: ScrubSeriesValue[] = [];
+  let primary: number | null = null;
+  for (let i = 0; i < series.length; i++) {
+    if (series[i].visible === false) continue;
+    const v = interpolateAtTime(series[i].data, time);
+    if (v === null) continue;
+    seriesValues.push({
+      id: series[i].id,
+      label: series[i].label,
+      value: v,
+    });
+    if (primary === null) primary = v;
+  }
+  return { primary, seriesValues };
+}
+
+/** Series-chart scrub primary value at window time — extracted for tests. */
+export function deriveScrubValueSeries(
+  scrubActive: boolean,
+  scrubTime: number,
+  series: SeriesConfig[],
+): number | null {
+  "worklet";
+  if (!scrubActive || scrubTime < 0) return null;
+  return interpolateSeriesAtTime(series, scrubTime).primary;
+}
+
+/** Series-chart stacked tooltip at scrub time — extracted for tests. */
+export function computeSeriesScrubTooltipLayout(
+  scrubActive: boolean,
+  scrubX: number,
+  scrubTime: number,
+  series: SeriesConfig[],
+  padding: ChartPadding,
+  canvasWidth: number,
+  formatValue: (v: number) => string,
+  formatTime: (t: number) => string,
+  font: SkFont,
+): TooltipLayout {
+  "worklet";
+  if (!scrubActive || scrubTime < 0) return HIDDEN_TOOLTIP;
+  const r = interpolateSeriesAtTime(series, scrubTime);
+  if (r.primary === null) return HIDDEN_TOOLTIP;
+  const lineObjs: { text: string; dim: boolean }[] = [
+    { text: formatTime(scrubTime), dim: true },
+  ];
+  for (let k = 0; k < r.seriesValues.length; k++) {
+    const sv = r.seriesValues[k];
+    const label = sv.label ?? sv.id;
+    lineObjs.push({
+      text: `${label}: ${formatValue(sv.value)}`,
+      dim: false,
+    });
+  }
+  return computeTooltipLayoutMulti(
+    scrubActive,
+    scrubX,
+    lineObjs,
+    padding,
+    canvasWidth,
+    font,
+  );
+}