react-native-livechart 4.10.0 → 4.12.0

package/src/draw/particleAtlas.ts

@@ -62,7 +62,8 @@ export interface ParticleInstance {
  *   scale = r / spriteRadius
  *   alpha = life * particleOpacity
  * Inactive (active <= 0.5), pre-spawn (dt < 0) and fully-faded (life <= 0)
- * slots are skipped.
+ * slots are skipped. Pass distinct `out` and `pool` arrays to retain inactive
+ * instance objects for later bursts while returning only the active prefix.
  */
 export function buildParticleInstances(
   buf: Float64Array,
@@ -71,9 +72,13 @@ export function buildParticleInstances(
   burstDur: number,
   particleOpacity: number,
   spriteRadius: number,
+  out?: ParticleInstance[],
+  pool?: ParticleInstance[],
 ): ParticleInstance[] {
   "worklet";
-  const out: ParticleInstance[] = [];
+  const target = out ?? [];
+  const instances = pool ?? target;
+  let count = 0;
   for (let i = 0; i < slots; i++) {
     const base = i * DEGEN_STRIDE;
     if (!(buf[base + 5] > 0.5)) continue;
@@ -83,13 +88,19 @@ export function buildParticleInstances(
     if (life <= 0) continue;
     const size = buf[base + 6] || 1;
     const r = size * (0.5 + life * 0.5);
-    out.push({
-      x: buf[base + 0],
-      y: buf[base + 1],
-      scale: r / spriteRadius,
-      alpha: life * particleOpacity,
-      colorIndex: Math.max(0, Math.floor(buf[base + 7])),
-    });
+    let instance = instances[count];
+    if (!instance) {
+      instance = { x: 0, y: 0, scale: 0, alpha: 0, colorIndex: 0 };
+      instances[count] = instance;
+    }
+    instance.x = buf[base + 0];
+    instance.y = buf[base + 1];
+    instance.scale = r / spriteRadius;
+    instance.alpha = life * particleOpacity;
+    instance.colorIndex = Math.max(0, Math.floor(buf[base + 7]));
+    target[count] = instance;
+    count += 1;
   }
-  return out;
+  target.length = count;
+  return target;
 }

package/src/hooks/crosshairSeries.ts

@@ -1,13 +1,25 @@
 import { type SkFont } from "@shopify/react-native-skia";
+import { MAX_MULTI_SERIES } from "../constants";
+import type { ResolvedPerSeriesTooltipConfig } from "../core/resolveConfig";
 import { type ChartPadding } from "../draw/line";
+import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import { interpolateAtTime } from "../math/interpolate";
 import type { ScrubSeriesValue, SeriesConfig } from "../types";
 import {
-  computeTooltipLayoutMulti,
   HIDDEN_TOOLTIP,
   type TooltipLayout,
 } from "./crosshairShared";
 
+const TOOLTIP_EDGE_GAP = 4;
+const TOOLTIP_SIDE_GAP = 8;
+const TOOLTIP_STACK_GAP = 4;
+const TOOLTIP_TOP_GAP = 4;
+
+function valueAtTime(series: SeriesConfig, time: number): number | null {
+  "worklet";
+  return interpolateAtTime(series.data, time);
+}
+
 export function interpolateSeriesAtTime(
   series: SeriesConfig[],
   time: number,
@@ -17,7 +29,7 @@ export function interpolateSeriesAtTime(
   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);
+    const v = valueAtTime(series[i], time);
     if (v === null) continue;
     seriesValues.push({
       id: series[i].id,
@@ -29,50 +41,267 @@ export function interpolateSeriesAtTime(
   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 {
+/** Infer a bucket width from the latest positive interval in a visible series. */
+export function estimateSeriesBucketSeconds(series: SeriesConfig[]): number {
   "worklet";
-  if (!scrubActive || scrubTime < 0) return null;
-  return interpolateSeriesAtTime(series, scrubTime).primary;
+  for (let i = 0; i < series.length; i++) {
+    if (series[i].visible === false) continue;
+    const points = series[i].data;
+    for (let j = points.length - 1; j > 0; j--) {
+      const delta = points[j].time - points[j - 1].time;
+      if (delta > 0) return delta;
+    }
+  }
+  return 0;
+}
+
+/** Truncate a series label with the same ellipsis treatment as Morfi web. */
+export function truncateSeriesTooltipLabel(
+  label: string,
+  maxChars: number,
+): string {
+  "worklet";
+  if (label.length <= maxChars) return label;
+  return `${label.slice(0, Math.max(1, maxChars - 1))}…`;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  "worklet";
+  if (max < min) return min;
+  return value < min ? min : value > max ? max : value;
 }
 
-/** Series-chart stacked tooltip at scrub time — extracted for tests. */
-export function computeSeriesScrubTooltipLayout(
+/**
+ * Morfi-style per-series scrub tooltip geometry. Pure/worklet-safe so the
+ * entire readout can be recomputed on the UI thread without React renders.
+ */
+export function computePerSeriesTooltipLayout(
   scrubActive: boolean,
   scrubX: number,
   scrubTime: number,
   series: SeriesConfig[],
+  displaySeriesValues: number[],
+  colors: string[],
+  displayMin: number,
+  displayMax: number,
   padding: ChartPadding,
   canvasWidth: number,
-  formatValue: (v: number) => string,
-  formatTime: (t: number) => string,
+  canvasHeight: number,
+  maxTime: number,
+  formatValue: (value: number) => string,
+  formatTime: (time: number) => string,
   font: SkFont,
+  config: ResolvedPerSeriesTooltipConfig,
 ): 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,
+  const pinned = !scrubActive && config.alwaysShow;
+  if ((!scrubActive && !pinned) || canvasWidth <= 0 || canvasHeight <= 0) {
+    return HIDDEN_TOOLTIP;
+  }
+
+  const plotLeft = padding.left;
+  const plotRight = canvasWidth - padding.right;
+  const plotTop = padding.top;
+  const plotBottom = canvasHeight - padding.bottom;
+  if (plotRight <= plotLeft || plotBottom <= plotTop) return HIDDEN_TOOLTIP;
+
+  const anchorX = pinned
+    ? plotRight
+    : clamp(scrubX, plotLeft, plotRight);
+  const activeTime = Math.min(scrubTime, maxTime);
+  if (!pinned && activeTime < 0) return HIDDEN_TOOLTIP;
+
+  const fm = font.getMetrics();
+  const lineH = Math.max(1, -fm.ascent + fm.descent);
+  const seriesPillH = lineH + config.seriesPillPaddingY * 2;
+  const maxPillW = Math.max(1, plotRight - plotLeft - TOOLTIP_EDGE_GAP * 2);
+  const valueFormatter = config.formatSeriesValue;
+
+  const pills: NonNullable<
+    NonNullable<TooltipLayout["perSeries"]>["pills"]
+  > = [];
+  const preferredY: number[] = [];
+  const renderedSeriesCount = Math.min(series.length, MAX_MULTI_SERIES);
+  for (let i = 0; i < renderedSeriesCount; i++) {
+    const item = series[i];
+    if (item.visible === false || item.data.length === 0) continue;
+    const value = pinned
+      ? (displaySeriesValues[i] ?? item.value)
+      : valueAtTime(item, activeTime);
+    if (value === null || !Number.isFinite(value)) continue;
+
+    const label = truncateSeriesTooltipLabel(
+      item.label ?? item.id,
+      config.maxLabelChars,
+    );
+    const valueText = valueFormatter
+      ? valueFormatter(value, item.id)
+      : formatValue(value);
+    const labelW = measureFontTextWidth(font, label);
+    const valueW = measureFontTextWidth(font, valueText);
+    const labelGap = label.length > 0 ? config.seriesPillLabelValueGap : 0;
+    const rawPillW =
+      config.seriesPillPaddingX * 2 +
+      config.seriesPillDotSize +
+      config.seriesPillDotGap +
+      labelW +
+      labelGap +
+      valueW;
+    const pillW = Math.min(rawPillW, maxPillW);
+    let pillX = anchorX + TOOLTIP_SIDE_GAP;
+    if (pillX + pillW > plotRight - TOOLTIP_EDGE_GAP) {
+      pillX = anchorX - pillW - TOOLTIP_SIDE_GAP;
+    }
+    pillX = clamp(
+      pillX,
+      plotLeft + TOOLTIP_EDGE_GAP,
+      plotRight - TOOLTIP_EDGE_GAP - pillW,
+    );
+
+    const chartH = plotBottom - plotTop;
+    const valRange = displayMax - displayMin;
+    const anchorY =
+      valRange === 0
+        ? plotTop + chartH / 2
+        : clamp(
+            plotTop + ((displayMax - value) / valRange) * chartH,
+            plotTop,
+            plotBottom,
+          );
+    const dotX =
+      pillX + config.seriesPillPaddingX + config.seriesPillDotSize / 2;
+    const dotY = anchorY;
+    const labelX =
+      dotX + config.seriesPillDotSize / 2 + config.seriesPillDotGap;
+    const valueX = labelX + labelW + labelGap;
+    pills.push({
+      id: item.id,
+      color: colors[i] ?? item.color ?? "#ffffff",
+      anchorX,
+      anchorY,
+      x: pillX,
+      y: anchorY - seriesPillH / 2,
+      w: pillW,
+      h: seriesPillH,
+      dotX,
+      dotY,
+      label,
+      labelX,
+      value: valueText,
+      valueX,
+      baselineY: 0,
     });
+    preferredY.push(anchorY - seriesPillH / 2);
   }
-  return computeTooltipLayoutMulti(
-    scrubActive,
-    scrubX,
-    lineObjs,
-    padding,
-    canvasWidth,
-    font,
+  if (pills.length === 0) return HIDDEN_TOOLTIP;
+
+  let timePill: NonNullable<
+    NonNullable<TooltipLayout["perSeries"]>["timePill"]
+  > | undefined;
+  if (!pinned) {
+    const bucketSeconds =
+      config.bucketSeconds ?? estimateSeriesBucketSeconds(series);
+    const from = activeTime;
+    const to = Math.max(from, Math.min(from + bucketSeconds, maxTime));
+    const timeText = config.formatTimeRange
+      ? config.formatTimeRange(from, to)
+      : bucketSeconds > 0
+        ? `${formatTime(from)} – ${formatTime(to)}`
+        : formatTime(from);
+    const timeW = Math.min(
+      measureFontTextWidth(font, timeText) + config.timePillPaddingX * 2,
+      maxPillW,
+    );
+    const timeH = lineH + config.timePillPaddingY * 2;
+    const timeX = clamp(
+      anchorX - timeW / 2,
+      plotLeft + TOOLTIP_EDGE_GAP,
+      plotRight - TOOLTIP_EDGE_GAP - timeW,
+    );
+    const timeY = plotTop + TOOLTIP_TOP_GAP;
+    timePill = {
+      x: timeX,
+      y: timeY,
+      w: timeW,
+      h: timeH,
+      text: timeText,
+      textX: timeX + config.timePillPaddingX,
+      baselineY: timeY + config.timePillPaddingY - fm.ascent,
+    };
+  }
+
+  // Collision avoidance: sort by preferred position, push down, then pull the
+  // stack back up from the bottom. If the plot is extremely short, compress the
+  // inter-pill gap to zero before accepting overlap as the unavoidable fallback.
+  const topBound = Math.min(
+    plotBottom - seriesPillH,
+    timePill
+      ? Math.max(plotTop, timePill.y + timePill.h + TOOLTIP_STACK_GAP)
+      : plotTop,
   );
+  const bottomBound = plotBottom;
+  const order = pills.map((_, index) => index);
+  order.sort((a, b) => preferredY[a] - preferredY[b]);
+
+  let stackGap = TOOLTIP_STACK_GAP;
+  const availableH = Math.max(0, bottomBound - topBound);
+  const requiredWithoutGaps = pills.length * seriesPillH;
+  if (pills.length > 1 && requiredWithoutGaps + stackGap * (pills.length - 1) > availableH) {
+    stackGap = Math.max(
+      0,
+      (availableH - requiredWithoutGaps) / (pills.length - 1),
+    );
+  }
+
+  let cursor = topBound;
+  for (let i = 0; i < order.length; i++) {
+    const index = order[i];
+    const y = clamp(
+      Math.max(preferredY[index], cursor),
+      topBound,
+      Math.max(topBound, bottomBound - seriesPillH),
+    );
+    pills[index].y = y;
+    cursor = y + seriesPillH + stackGap;
+  }
+  for (let i = order.length - 2; i >= 0; i--) {
+    const index = order[i];
+    const next = pills[order[i + 1]];
+    pills[index].y = Math.max(
+      topBound,
+      Math.min(pills[index].y, next.y - seriesPillH - stackGap),
+    );
+  }
+  for (let i = 0; i < pills.length; i++) {
+    pills[i].dotY = pills[i].y + pills[i].h / 2;
+    pills[i].baselineY =
+      pills[i].y + config.seriesPillPaddingY - fm.ascent;
+  }
+
+  const firstRect = timePill ?? pills[0];
+  return {
+    x: firstRect.x,
+    y: firstRect.y,
+    w: firstRect.w,
+    h: firstRect.h,
+    valueStr: "",
+    timeStr: "",
+    valueTextX: -400,
+    timeTextX: -400,
+    line1Y: 0,
+    line2Y: 0,
+    stackedLines: undefined,
+    perSeries: { pinned, timePill, pills },
+  };
+}
+
+/** 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;
 }

package/src/hooks/crosshairShared.ts

@@ -1,6 +1,6 @@
 import { type SkFont } from "@shopify/react-native-skia";
 import { type Gesture } from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
+import type { DerivedValue, SharedValue } from "react-native-reanimated";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import { type ChartPadding } from "../draw/line";
 import { interpolateAtTime } from "../math/interpolate";
@@ -14,6 +14,11 @@ const TOOLTIP_EDGE_GAP = 4;
 const TOOLTIP_TOP_MARGIN = 8;
 const FADE_ZONE = 4;
 
+/** Horizontal travel required before a plain scrub claims the touch. */
+export const SCRUB_ACTIVATE_X_PX = 20;
+/** Vertical travel that fails a plain scrub so a parent scroll gesture can win. */
+export const SCRUB_FAIL_Y_PX = 10;
+
 /** Measure rendered text so the pill and its content share the same centre. */
 function measureTooltipTextWidth(
   font: SkFont,
@@ -43,6 +48,37 @@ export interface TooltipLayout {
     baselineY: number;
     dim: boolean;
   }[];
+  /** LiveChartSeries' opt-in Morfi-style time pill + per-series value pills. */
+  perSeries?: {
+    /** Idle endpoint mode: value pills only, with no guide or time pill. */
+    pinned: boolean;
+    timePill?: {
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+      text: string;
+      textX: number;
+      baselineY: number;
+    };
+    pills: {
+      id: string;
+      color: string;
+      anchorX: number;
+      anchorY: number;
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+      dotX: number;
+      dotY: number;
+      label: string;
+      labelX: number;
+      value: string;
+      valueX: number;
+      baselineY: number;
+    }[];
+  };
 }
 
 export const HIDDEN_TOOLTIP: TooltipLayout = {
@@ -57,6 +93,7 @@ export const HIDDEN_TOOLTIP: TooltipLayout = {
   line1Y: 0,
   line2Y: 0,
   stackedLines: undefined,
+  perSeries: undefined,
 };
 
 export interface CrosshairState {
@@ -65,7 +102,9 @@ export interface CrosshairState {
   scrubTime: SharedValue<number>;
   scrubValue: SharedValue<number | null>;
   crosshairOpacity: SharedValue<number>;
-  tooltipLayout: SharedValue<TooltipLayout>;
+  tooltipLayout:
+    | SharedValue<TooltipLayout>
+    | DerivedValue<TooltipLayout>;
   /** Scrub intersection Y in canvas px; -1 when there's no dot to draw
    *  (inactive / no value / degenerate range). See {@link computeScrubDotY}. */
   scrubDotY: SharedValue<number>;

package/src/hooks/delayedPanGuard.ts

@@ -1,22 +1,95 @@
 import type { SharedValue } from "react-native-reanimated";
 
 type BooleanSharedValue = Pick<SharedValue<boolean>, "get" | "set">;
+type NumberSharedValue = Pick<SharedValue<number>, "get" | "set">;
+
+type TouchPoint = { x: number; y: number };
 
 type TouchCountEvent = {
   numberOfTouches: number;
 };
 
+type TouchesEvent = TouchCountEvent & {
+  changedTouches: TouchPoint[];
+  allTouches: TouchPoint[];
+};
+
 type GestureStateManager = {
   fail: () => void;
 };
 
-/** Mark the first pointer of a delayed pan as down. Zero-delay pans are inert. */
+/**
+ * A pending hold-to-scrub pan must stay within this radius of its touch-down
+ * point to activate. Matches the platform long-press convention (RNGH
+ * LongPress `maxDist` / UIKit `allowableMovement` default 10) with a little
+ * slack for thumbs.
+ */
+export const HOLD_MAX_DRIFT_PX = 12;
+
+/**
+ * An activation earlier than `delayMs - slack` after the current touch went
+ * down cannot be a real hold — it is a stale `activateAfterLongPress` timer
+ * carried over from a previous touch (see `shouldStartDelayedPan`).
+ */
+export const HOLD_TIMER_SLACK_MS = 50;
+
+/** Record the first pointer of a delayed pan going down. Zero-delay pans are inert. */
 export function delayedPanTouchDown(
   delayMs: number,
+  event: TouchesEvent,
   fingerDown: BooleanSharedValue,
+  downX: NumberSharedValue,
+  downY: NumberSharedValue,
+  downAtMs: NumberSharedValue,
+  holdBroken: BooleanSharedValue,
+): void {
+  "worklet";
+  if (delayMs <= 0) return;
+  fingerDown.set(true);
+  const t = event.changedTouches[0];
+  if (t) {
+    downX.set(t.x);
+    downY.set(t.y);
+  }
+  downAtMs.set(Date.now());
+  holdBroken.set(false);
+}
+
+/**
+ * Enforce the stationary hold: while the delayed pan is still pending, any
+ * drift beyond HOLD_MAX_DRIFT_PX fails it outright AND latches `holdBroken`.
+ *
+ * `manager.fail()` alone is not enough. It only lands if the recognizer is
+ * still in a state that can fail, and — on iOS — the native
+ * `activateAfterLongPress` timer fires `handleGesture:inState:Active`
+ * unconditionally (RNPanHandler.m), so a timer that survived the fail still
+ * emits ACTIVE. The latch makes "the finger moved before the hold elapsed" a
+ * decision `shouldStartDelayedPan` can re-check at activation time, instead of
+ * trusting the native recognizer to have stayed failed.
+ *
+ * The latch also covers movement that returns to its origin: a finger that
+ * wanders 40px away and comes back is within the slop when the timer fires, but
+ * it was never a stationary hold.
+ */
+export function delayedPanTouchMove(
+  delayMs: number,
+  event: TouchesEvent,
+  manager: GestureStateManager,
+  panActivated: BooleanSharedValue,
+  downX: NumberSharedValue,
+  downY: NumberSharedValue,
+  holdBroken: BooleanSharedValue,
 ): void {
   "worklet";
-  if (delayMs > 0) fingerDown.set(true);
+  if (delayMs <= 0 || panActivated.get()) return;
+  const t = event.allTouches[0];
+  if (!t) return;
+  const dx = t.x - downX.get();
+  const dy = t.y - downY.get();
+  if (dx * dx + dy * dy > HOLD_MAX_DRIFT_PX * HOLD_MAX_DRIFT_PX) {
+    holdBroken.set(true);
+    manager.fail();
+  }
 }
 
 /**
@@ -49,15 +122,37 @@ export function delayedPanTouchCancelled(
 }
 
 /**
- * Record a real delayed-pan activation, or reject an activation whose timer
- * raced the final pointer-up. The rejected path deliberately keeps
- * `panActivated` false so a missing native FINALIZE cannot poison the next
- * interaction.
+ * Record a real delayed-pan activation, or reject a spurious one. Two spurious
+ * shapes exist, both from RNGH's long-press timer surviving where it shouldn't:
+ *
+ * 1. The timer fires after the final pointer already lifted (`fingerDown`
+ *    false) — the original touch-up race.
+ * 2. The timer fires DURING a later touch: fast successive taps can land a new
+ *    pointer before the failed recognizer's native reset completes, so the
+ *    previous tap's timer fires only `now - downAtMs < delayMs` into the new
+ *    touch. A real hold can never activate early, so reject anything faster
+ *    than `delayMs - HOLD_TIMER_SLACK_MS`.
+ *
+ * 3. The timer fires after the finger already moved off the touch-down point
+ *    (`holdBroken`) — it was a drag, not a hold. See `delayedPanTouchMove`.
+ *
+ * 4. The timer fires after the time-scroll pan already took the touch
+ *    (`scrollActive`) — the chart is mid-drag, so the hold lost the race. The
+ *    two pans are composed with `Gesture.Race`, which in RNGH declares NO
+ *    relation between them (`RaceGestureType = ComposedGestureType`), so
+ *    nothing native stops a losing recognizer from activating later. This latch
+ *    is the arbitration.
+ *
+ * All rejected paths deliberately keep `panActivated` false so a missing
+ * native FINALIZE cannot poison the next interaction.
  */
 export function shouldStartDelayedPan(
   delayMs: number,
   fingerDown: BooleanSharedValue,
   panActivated: BooleanSharedValue,
+  downAtMs: NumberSharedValue,
+  holdBroken: BooleanSharedValue,
+  scrollActive: BooleanSharedValue,
 ): boolean {
   "worklet";
   if (delayMs <= 0) return true;
@@ -65,6 +160,14 @@ export function shouldStartDelayedPan(
     panActivated.set(false);
     return false;
   }
+  if (Date.now() - downAtMs.get() < delayMs - HOLD_TIMER_SLACK_MS) {
+    panActivated.set(false);
+    return false;
+  }
+  if (holdBroken.get() || scrollActive.get()) {
+    panActivated.set(false);
+    return false;
+  }
   panActivated.set(true);
   return true;
 }
@@ -73,8 +176,10 @@ export function shouldStartDelayedPan(
 export function resetDelayedPanGuard(
   fingerDown: BooleanSharedValue,
   panActivated: BooleanSharedValue,
+  holdBroken: BooleanSharedValue,
 ): void {
   "worklet";
   fingerDown.set(false);
   panActivated.set(false);
+  holdBroken.set(false);
 }