react-native-livechart 4.11.0 → 4.13.0

package/src/core/liveIndicatorVisibility.ts

@@ -0,0 +1,25 @@
+import type { TimeScrollConfig } from "../types";
+
+/**
+ * Resolve whether historical time-scroll views should suppress indicators that
+ * still point at the live price.
+ */
+export function resolveHideLiveOnScrollBack(
+  timeScroll: boolean | TimeScrollConfig | undefined,
+  followViewEdge: boolean,
+): boolean {
+  const hide =
+    typeof timeScroll === "object"
+      ? (timeScroll.hideLiveOnScrollBack ?? true)
+      : true;
+  return hide && !followViewEdge;
+}
+
+/** Worklet-safe opacity gate shared by the live badge, dot, and dashed value line. */
+export function liveIndicatorScrollOpacity(
+  hideLiveOnScrollBack: boolean,
+  viewEnd: number | null,
+): 0 | 1 {
+  "worklet";
+  return hideLiveOnScrollBack && viewEnd != null ? 0 : 1;
+}

package/src/core/resolveConfig.ts

@@ -24,6 +24,7 @@ import type {
   ReferenceLine,
   ScrubActionConfig,
   ScrubConfig,
+  PerSeriesTooltipConfig,
   SelectionDotConfig,
   SelectionDotProps,
   SelectionDotRingConfig,
@@ -88,6 +89,10 @@ export interface ResolvedYAxisConfig {
   minGap: number;
   /** Fixed label count (≥ 2), or 0 for the dynamic nice-interval grid. */
   count: number;
+  /** undefined → keep the default centered-gutter label placement. */
+  labelRightMargin: number | undefined;
+  /** undefined → no gap; inert unless labelRightMargin is set. */
+  gridEndGap: number | undefined;
   /** Float the axis over a full-width plot (no reserved right gutter). */
   float: boolean;
 }
@@ -144,10 +149,22 @@ export interface ResolvedXAxisConfig {
 
 export interface ResolvedScrubConfig {
   tooltip: boolean;
+  /** Opt-in per-series pill tooltip for LiveChartSeries; null keeps guide-only behavior. */
+  seriesTooltip: ResolvedPerSeriesTooltipConfig | null;
   /** Opacity of content right of the crosshair while scrubbing (dstOut fade). */
   dimOpacity: number;
   /** undefined → palette.crosshairLine */
   crosshairLineColor: string | undefined;
+  /** Vertical crosshair line width in px. */
+  crosshairStrokeWidth: number;
+  /** Extension past the plot's top and bottom edges in px. */
+  crosshairOvershoot: number;
+  /** Fade the crosshair near the live edge. */
+  crosshairFade: boolean;
+  /** Visible-crosshair fade distance near the live edge in px. */
+  crosshairFadeDistance: number;
+  /** undefined preserves the existing Skia line-cap default. */
+  crosshairLineCap: "butt" | "round" | "square" | undefined;
   /** Dash intervals `[on, off, …]` for the crosshair line; undefined → solid. */
   crosshairDash: number[] | undefined;
   /** undefined → palette.crosshairDim */
@@ -172,6 +189,38 @@ export interface ResolvedScrubConfig {
   panGestureDelay: number;
   /** Fade markers + reference lines out while scrubbing. */
   hideOverlaysOnScrub: boolean;
+  /** Reject outside plain-scrub starts and clamp active scrub X to the plot. */
+  clampToPlot: boolean;
+}
+
+export interface ResolvedPerSeriesTooltipConfig {
+  alwaysShow: boolean;
+  bucketSeconds: number | undefined;
+  formatSeriesValue:
+    | ((value: number, seriesId: string) => string)
+    | undefined;
+  formatTimeRange: ((from: number, to: number) => string) | undefined;
+  maxLabelChars: number;
+  guideColor: string | undefined;
+  guideWidth: number;
+  guideDashPattern: number[] | undefined;
+  timePillBackground: string | undefined;
+  timePillColor: string | undefined;
+  timePillBorderColor: string | undefined;
+  timePillRadius: number;
+  timePillPaddingX: number;
+  timePillPaddingY: number;
+  seriesPillBackground: string | undefined;
+  seriesPillLabelColor: string | undefined;
+  seriesPillValueColor: string | undefined;
+  seriesPillBorderColor: string | undefined;
+  seriesPillRadius: number;
+  seriesPillPaddingX: number;
+  seriesPillPaddingY: number;
+  seriesPillDotSize: number;
+  seriesPillDotGap: number;
+  seriesPillLabelValueGap: number;
+  intersectionDotSize: number;
 }
 
 export interface ResolvedScrubActionConfig {
@@ -432,6 +481,8 @@ export function resolveBadge(
 const Y_AXIS_DEFAULTS: ResolvedYAxisConfig = {
   minGap: 36,
   count: 0,
+  labelRightMargin: undefined,
+  gridEndGap: undefined,
   float: false,
 };
 
@@ -628,8 +679,14 @@ export function resolveXAxis(
 
 const SCRUB_DEFAULTS: ResolvedScrubConfig = {
   tooltip: true,
+  seriesTooltip: null,
   dimOpacity: 0.3,
   crosshairLineColor: undefined,
+  crosshairStrokeWidth: 1,
+  crosshairOvershoot: 0,
+  crosshairFade: true,
+  crosshairFadeDistance: 4,
+  crosshairLineCap: undefined,
   crosshairDash: undefined,
   crosshairDimColor: undefined,
   tooltipBackground: undefined,
@@ -642,8 +699,58 @@ const SCRUB_DEFAULTS: ResolvedScrubConfig = {
   tooltipShowTime: true,
   panGestureDelay: 0,
   hideOverlaysOnScrub: false,
+  clampToPlot: false,
 };
 
+const PER_SERIES_TOOLTIP_DEFAULTS: ResolvedPerSeriesTooltipConfig = {
+  alwaysShow: false,
+  bucketSeconds: undefined,
+  formatSeriesValue: undefined,
+  formatTimeRange: undefined,
+  maxLabelChars: 14,
+  guideColor: undefined,
+  guideWidth: 1,
+  guideDashPattern: [3, 3],
+  timePillBackground: undefined,
+  timePillColor: undefined,
+  timePillBorderColor: undefined,
+  timePillRadius: 6,
+  timePillPaddingX: 8,
+  timePillPaddingY: 4,
+  seriesPillBackground: undefined,
+  seriesPillLabelColor: undefined,
+  seriesPillValueColor: undefined,
+  seriesPillBorderColor: undefined,
+  seriesPillRadius: 6,
+  seriesPillPaddingX: 8,
+  seriesPillPaddingY: 4,
+  seriesPillDotSize: 8,
+  seriesPillDotGap: 6,
+  seriesPillLabelValueGap: 6,
+  intersectionDotSize: 8,
+};
+
+function resolvePerSeriesTooltip(
+  prop: boolean | PerSeriesTooltipConfig | undefined,
+): ResolvedPerSeriesTooltipConfig | null {
+  const resolved = resolveToggle(
+    prop,
+    PER_SERIES_TOOLTIP_DEFAULTS,
+    false,
+  );
+  if (!resolved) return null;
+  const dash = typeof prop === "object" ? prop.guideDashPattern : undefined;
+  if (dash !== undefined) {
+    resolved.guideDashPattern = dash === true ? [3, 3] : dash || undefined;
+  }
+  resolved.maxLabelChars = Math.max(1, Math.floor(resolved.maxLabelChars));
+  resolved.bucketSeconds =
+    resolved.bucketSeconds !== undefined && resolved.bucketSeconds > 0
+      ? resolved.bucketSeconds
+      : undefined;
+  return resolved;
+}
+
 /**
  * Resolves `scrub` prop to a fully-typed config or null (disabled).
  * `true` → defaults, object → merged with defaults, falsy → null.
@@ -657,6 +764,14 @@ export function resolveScrub(
     // through, anything falsy → solid (undefined).
     const dash = typeof prop === "object" ? prop.crosshairDash : undefined;
     resolved.crosshairDash = dash === true ? [4, 4] : dash || undefined;
+    const seriesTooltip =
+      typeof prop === "object" ? prop.seriesTooltip : undefined;
+    resolved.seriesTooltip = resolvePerSeriesTooltip(seriesTooltip);
+    resolved.crosshairOvershoot = Math.max(0, resolved.crosshairOvershoot);
+    resolved.crosshairFadeDistance = Math.max(
+      0,
+      resolved.crosshairFadeDistance,
+    );
   }
   return resolved;
 }

package/src/draw/grid.ts

@@ -1,4 +1,6 @@
 import { GRID_METRICS_DEFAULTS, MAX_Y_LABELS } from "../constants";
+import type { SkFont } from "@shopify/react-native-skia";
+import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import { lerp } from "../math/lerp";
 import type { GridMetrics } from "../types";
 
@@ -8,6 +10,37 @@ export interface YAxisEntry {
   alpha: number;
 }
 
+export interface RightAnchoredYAxisColumnLayout {
+  /** Shared left X for every label in the column. */
+  labelX: number;
+  /** Grid/reference-line end X immediately before the column gap. */
+  gridEndX: number;
+}
+
+/**
+ * Measure the widest Y-axis label and anchor the shared left-aligned column to
+ * a fixed canvas-edge margin. Shared by the axis and reference-line worklets so
+ * their right edges cannot drift apart.
+ */
+export function rightAnchoredYAxisColumnLayout(
+  canvasWidth: number,
+  entries: readonly YAxisEntry[],
+  font: SkFont,
+  labelRightMargin: number,
+  gridEndGap = 0,
+): RightAnchoredYAxisColumnLayout {
+  "worklet";
+  let maxTextW = 0;
+  for (let i = 0; i < entries.length; i++) {
+    maxTextW = Math.max(
+      maxTextW,
+      measureFontTextWidth(font, entries[i].label),
+    );
+  }
+  const labelX = canvasWidth - labelRightMargin - maxTextW;
+  return { labelX, gridEndX: labelX - gridEndGap };
+}
+
 /**
  * Fixed-count Y-axis: place exactly `count` price labels evenly **in pixels**
  * across the plot band — top = `displayMax`, bottom = `displayMin`. Values track

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;
 }