react-native-livechart 4.9.2 → 4.11.0

package/src/components/LoadingOverlay.tsx

@@ -8,6 +8,7 @@ import {
   vec,
   type SkFont,
 } from "@shopify/react-native-skia";
+import { useRef } from "react";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 import {
   BADGE_METRICS_DEFAULTS,
@@ -67,6 +68,7 @@ export function LoadingOverlay({
   lineStrokeWidth,
   waveAmplitude = 14,
   waveSpeed = 1,
+  opaqueCanvas = false,
 }: {
   engine: ChartEngineLayout;
   padding: ChartPadding;
@@ -86,6 +88,8 @@ export function LoadingOverlay({
   waveAmplitude?: number;
   /** Breathing-wave speed multiplier. */
   waveSpeed?: number;
+  /** Paint the owned background instead of erasing destination alpha. */
+  opaqueCanvas?: boolean;
   /** Mirror the badge prop so labels align with GridOverlay's label positions. */
   badge?: boolean;
   /** Whether the badge tail spike is shown; affects the left inset used for skeleton alignment. */
@@ -99,15 +103,26 @@ export function LoadingOverlay({
 }) {
   // Same left-inset formula as GridOverlay (only used when badge=true)
   const leftInset =
-    badgeMetrics.dotGap + badgeTailAndCap(font.getSize(), badgeTail, badgeMetrics);
+    badgeMetrics.dotGap +
+    badgeTailAndCap(font.getSize(), badgeTail, badgeMetrics);
 
   // Loading-shell color (squiggle + skeleton placeholders) and squiggle stroke,
   // both overridable via `loading={{ color, strokeWidth }}`.
   const loadingColor = lineColor ?? palette.gridLine;
   const loadingStroke = lineStrokeWidth ?? strokeWidth;
+  const [bgR, bgG, bgB] = palette.bgRgb;
+  const gapMaskColors = opaqueCanvas
+    ? [
+        `rgba(${bgR},${bgG},${bgB},0)`,
+        `rgb(${bgR},${bgG},${bgB})`,
+        `rgb(${bgR},${bgG},${bgB})`,
+        `rgba(${bgR},${bgG},${bgB},0)`,
+      ]
+    : ["rgba(0,0,0,0)", "rgba(0,0,0,1)", "rgba(0,0,0,1)", "rgba(0,0,0,0)"];
 
   // Squiggly path — built into a reused PathBuilder and detach()-ed each frame.
   const squigglyBuilder = usePathBuilder();
+  const squigglyPtsRef = useRef<number[]>([]);
 
   // Squiggly path — animated each frame via timestamp
   const squigglyPath = useDerivedValue(() => {
@@ -122,6 +137,7 @@ export function LoadingOverlay({
       engine.timestamp.get(),
       waveAmplitude,
       waveSpeed,
+      squigglyPtsRef.current,
     );
     return buildSplineDetached(b, pts);
   });
@@ -254,17 +270,15 @@ export function LoadingOverlay({
       />
 
       {/* Erase a soft horizontal band through the squiggle for the label (dstOut) */}
-      <Group opacity={showGapGroup} blendMode="dstOut">
+      <Group
+        opacity={showGapGroup}
+        blendMode={opaqueCanvas ? undefined : "dstOut"}
+      >
         <Rect x={gapLeft} y={gapTop} width={gapWidth} height={gapHeight}>
           <LinearGradient
             start={vec(0, 0)}
             end={gapGradEnd}
-            colors={[
-              "rgba(0,0,0,0)",
-              "rgba(0,0,0,1)",
-              "rgba(0,0,0,1)",
-              "rgba(0,0,0,0)",
-            ]}
+            colors={gapMaskColors}
             positions={gapGradientPositions}
           />
         </Rect>
@@ -279,7 +293,7 @@ export function LoadingOverlay({
             width={RECT_W}
             height={RECT_H}
             r={RECT_R}
-        color={loadingColor}
+            color={loadingColor}
           />
           <RoundedRect
             x={lx}
@@ -287,7 +301,7 @@ export function LoadingOverlay({
             width={RECT_W}
             height={RECT_H}
             r={RECT_R}
-        color={loadingColor}
+            color={loadingColor}
           />
           <RoundedRect
             x={lx}
@@ -295,7 +309,7 @@ export function LoadingOverlay({
             width={RECT_W}
             height={RECT_H}
             r={RECT_R}
-        color={loadingColor}
+            color={loadingColor}
           />
           <RoundedRect
             x={lx}
@@ -303,7 +317,7 @@ export function LoadingOverlay({
             width={RECT_W}
             height={RECT_H}
             r={RECT_R}
-        color={loadingColor}
+            color={loadingColor}
           />
         </>
       ) : null}

package/src/components/MarkerOverlay.tsx

@@ -25,6 +25,7 @@ import {
   GROUP_BADGE_SIG,
   groupBgSig,
   groupCountText,
+  groupCountTextWidth,
   groupGlyphSig,
   isConnectorMarker,
   markerAppearanceSig,
@@ -58,7 +59,7 @@ const GROUP_CORNER_INSET = 0.82;
 
 /**
  * Append a collapsed-cluster count badge (round bg + centered, proportionally
- * kerned digits) to the atlas blit lists at `(cx, cy)`, scaled by `mul` — full
+ * laid-out digits) to the atlas blit lists at `(cx, cy)`, scaled by `mul` — full
  * size as the default group badge, shrunk in a glyph's corner for `showGroupCount`.
  *
  * A **module-level** worklet (not a closure inside the per-frame derived value):
@@ -77,6 +78,7 @@ function pushGroupCountBadge(
   repColor: string,
   count: number,
   mul: number,
+  letterSpacing: number,
 ): void {
   "worklet";
   const text = groupCountText(count);
@@ -87,20 +89,11 @@ function pushGroupCountBadge(
     );
     sprites.push(bg.rect);
   }
-  // Lay digits out proportionally (each by its own ink width), scaled to fit the
-  // small round badge, centered. A negative kern (fraction of a digit) closes the
-  // font's side-bearing gap so "12" reads tight, not "1 2".
+  // Lay digits out proportionally (each by its own ink width), centered. The
+  // configurable spacing is applied between glyph ink bounds, not inferred from
+  // the widest digit — proportional fonts otherwise overlap narrow digits.
   const S = BADGE_TEXT_SCALE;
-  let maxDW = 1;
-  for (let d = 0; d < 10; d++) {
-    const dw = digitWidths["" + d] ?? 0;
-    if (dw > maxDW) maxDW = dw;
-  }
-  const kern = -maxDW * S * 0.42;
-  let totalW = 0;
-  for (let c = 0; c < text.length; c++) {
-    totalW += (digitWidths[text[c]] ?? 0) * S + (c > 0 ? kern : 0);
-  }
+  const totalW = groupCountTextWidth(text, digitWidths, letterSpacing);
   let dx = cx - (totalW * mul) / 2;
   for (let c = 0; c < text.length; c++) {
     const w = (digitWidths[text[c]] ?? 0) * S * mul;
@@ -117,7 +110,7 @@ function pushGroupCountBadge(
       );
       sprites.push(gc.rect);
     }
-    dx += w + kern * mul;
+    dx += w + letterSpacing * mul;
   }
 }
 
@@ -326,7 +319,7 @@ export function MarkerOverlay({
     typeof cluster.groupBadge === "object" ? cluster.groupBadge : undefined;
   const groupBadgeImage = groupBadgeCfg?.image;
   const groupBadgeKey = groupBadgeCfg
-    ? `${groupBadgeCfg.icon ?? ""}|${groupBadgeCfg.color ?? ""}|${groupBadgeCfg.pill ? 1 : 0}|${groupBadgeCfg.size ?? ""}`
+    ? `${groupBadgeCfg.icon ?? ""}|${groupBadgeCfg.color ?? ""}|${groupBadgeCfg.pill ? 1 : 0}|${groupBadgeCfg.size ?? ""}|${groupBadgeCfg.letterSpacing ?? ""}`
     : "";
   const atlas = useMemo(
     () =>
@@ -358,6 +351,18 @@ export function MarkerOverlay({
   if (projRef.current === null) {
     projRef.current = { a: [], b: [], tick: false };
   }
+  const atlasFrameRef = useRef<{
+    a: { transforms: SkRSXform[]; sprites: SkRect[] };
+    b: { transforms: SkRSXform[]; sprites: SkRect[] };
+    tick: boolean;
+  } | null>(null);
+  if (atlasFrameRef.current === null) {
+    atlasFrameRef.current = {
+      a: { transforms: [], sprites: [] },
+      b: { transforms: [], sprites: [] },
+      tick: false,
+    };
+  }
 
   // Single per-frame worklet: project all markers, then emit a transform +
   // source rect for each visible atlas marker. Three mappers total regardless
@@ -384,8 +389,13 @@ export function MarkerOverlay({
         lineLinear,
       });
       clusterMarkers(ms, buf, { config: cluster });
-      const transforms: SkRSXform[] = [];
-      const sprites: SkRect[] = [];
+      const atlasFrames = atlasFrameRef.current!;
+      atlasFrames.tick = !atlasFrames.tick;
+      const frame = atlasFrames.tick ? atlasFrames.a : atlasFrames.b;
+      const transforms = frame.transforms;
+      const sprites = frame.sprites;
+      transforms.length = 0;
+      sprites.length = 0;
       for (let i = 0; i < ms.length; i++) {
         const pt = buf[i];
         // Collapsed-cluster members fold into their representative's badge.
@@ -431,6 +441,7 @@ export function MarkerOverlay({
                 repColor,
                 pt.groupCount,
                 GROUP_CORNER_SCALE,
+                groupBadgeCfg?.letterSpacing ?? 0,
               );
             }
             continue;
@@ -448,6 +459,7 @@ export function MarkerOverlay({
             repColor,
             pt.groupCount,
             1,
+            groupBadgeCfg?.letterSpacing ?? 0,
           );
           continue;
         }
@@ -460,7 +472,7 @@ export function MarkerOverlay({
         );
         sprites.push(cell.rect);
       }
-      return { transforms, sprites };
+      return frame;
     },
     [
       cells,

package/src/components/MultiSeriesDots.tsx

@@ -1,7 +1,6 @@
 import { Circle, Group } from "@shopify/react-native-skia";
 
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
-import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type {
   ResolvedDotRingConfig,
@@ -118,6 +117,7 @@ export function MultiSeriesDots({
   color,
   pulse,
   viewEnd,
+  seriesCount,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
@@ -132,10 +132,12 @@ export function MultiSeriesDots({
   pulse: ResolvedPulseConfig | null;
   /** Pan/zoom right-edge override — pulse is frozen-out while scrolled back. */
   viewEnd?: SharedValue<number | null>;
+  /** Number of live series slots to mount. */
+  seriesCount: number;
 }) {
   return (
     <Group>
-      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+      {Array.from({ length: seriesCount }, (_, i) => (
         <SeriesDotAtIndex
           key={i}
           index={i}

package/src/components/MultiSeriesTooltipStack.tsx

@@ -4,11 +4,13 @@ import {
   type SkFont,
 } from "@shopify/react-native-skia";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
-import { MAX_MULTI_SERIES } from "../constants";
 import type { TooltipLayout } from "../hooks/crosshairShared";
 import type { LiveChartPalette } from "../types";
 
-const TOOLTIP_STACK_SLOTS = MAX_MULTI_SERIES + 1;
+// Candle tooltips have exactly O/H/L/C + time. This component is only mounted
+// for candle mode, so reserving the multi-series capacity registered 40 unused
+// derived-value mappers (8 empty rows × 5 mappers).
+const TOOLTIP_STACK_SLOTS = 5;
 
 function TooltipStackLine({
   index,

package/src/components/MultiSeriesValueLabels.tsx

@@ -5,7 +5,6 @@ import {
 } from "@shopify/react-native-skia";
 import { useDerivedValue } from "react-native-reanimated";
 
-import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type { MultiEngineState } from "../core/useLiveChartEngine";
 
@@ -78,16 +77,19 @@ export function MultiSeriesValueLabels({
   colors,
   font,
   dotRadius,
+  seriesCount,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
   colors: string[];
   font: SkFont;
   dotRadius: number;
+  /** Number of live series slots to mount. */
+  seriesCount: number;
 }) {
   return (
     <Group>
-      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+      {Array.from({ length: seriesCount }, (_, i) => (
         <SeriesValueLabelAtIndex
           key={i}
           index={i}

package/src/components/MultiSeriesValueLines.tsx

@@ -1,7 +1,6 @@
 import { DashPathEffect, Group, Path } from "@shopify/react-native-skia";
 
 import { useDerivedValue } from "react-native-reanimated";
-import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
 import type { ResolvedValueLineConfig } from "../core/resolveConfig";
 import type { MultiEngineState } from "../core/useLiveChartEngine";
@@ -72,15 +71,18 @@ export function MultiSeriesValueLines({
   padding,
   colors,
   config,
+  seriesCount,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
   colors: string[];
   config: ResolvedValueLineConfig;
+  /** Number of live series slots to mount. */
+  seriesCount: number;
 }) {
   return (
     <Group>
-      {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+      {Array.from({ length: seriesCount }, (_, i) => (
         <SeriesValueLineAtIndex
           key={i}
           index={i}

package/src/components/ThresholdSplitShader.tsx

@@ -2,6 +2,7 @@ import { Shader, Skia, type Uniforms } from "@shopify/react-native-skia";
 import type { SharedValue } from "react-native-reanimated";
 
 import { THRESHOLD_SAMPLE_COUNT } from "../math/threshold";
+import { buildThresholdSplitShaderSource } from "./thresholdSplitShaderSource";
 
 /**
  * Per-fragment split shader for a *time-varying* threshold. For each fragment it
@@ -15,49 +16,16 @@ import { THRESHOLD_SAMPLE_COUNT } from "../math/threshold";
  * alpha-reduced colors). Output is premultiplied — Skia's shader convention, as in
  * `AreaDotsOverlay`. One GPU draw, no per-frame clip / `saveLayer`.
  */
-const SPLIT_SKSL = `
-// Pixel-X span of the sample grid (thresholdSampleSpanX) — overhangs the plot
-// and glides with the window so features move fluidly, frame to frame.
-uniform float sampleLeft;
-uniform float sampleRight;
-// X where the threshold ends (extendToNow: false → the last point's pixel-X,
-// else a huge sentinel). Fragments right of it paint restColor: the plain line
-// color for the stroke, transparent for the band.
-uniform float clipRight;
-uniform vec4 aboveColor; // straight-alpha rgba, 0..1
-uniform vec4 belowColor; // straight-alpha rgba, 0..1
-uniform vec4 restColor;  // straight-alpha rgba, 0..1
-uniform float samples[${THRESHOLD_SAMPLE_COUNT}];
-
-half4 main(vec2 xy) {
-  if (xy.x > clipRight) {
-    return half4(half3(restColor.rgb) * restColor.a, restColor.a);
-  }
-  float span = sampleRight - sampleLeft;
-  float u = span > 0.0 ? (xy.x - sampleLeft) / span : 0.0;
-  u = clamp(u, 0.0, 1.0) * float(${THRESHOLD_SAMPLE_COUNT - 1});
-  // SkSL forbids indexing a uniform array with a non-constant index, so walk the
-  // segments in an unrolled, constant-bound loop — the index is the loop variable
-  // (a compile-time constant per unrolled iteration) — and keep the last segment
-  // whose left edge is at or before the fragment's u.
-  float thrY = samples[0];
-  for (int j = 0; j < ${THRESHOLD_SAMPLE_COUNT - 1}; j++) {
-    if (u >= float(j)) {
-      thrY = mix(samples[j], samples[j + 1], clamp(u - float(j), 0.0, 1.0));
-    }
-  }
-  // 1 above the boundary, 0 below, with ~1px antialiasing across it.
-  float above = clamp(thrY - xy.y + 0.5, 0.0, 1.0);
-  vec4 c = mix(belowColor, aboveColor, above);
-  return half4(half3(c.rgb) * c.a, c.a);
-}`;
+const THRESHOLD_SPLIT_SKSL = buildThresholdSplitShaderSource(
+  THRESHOLD_SAMPLE_COUNT,
+);
 
 // Compiled once. `RuntimeEffect.Make` THROWS on a compile error, so guard it —
 // a shader failure must degrade to "no split" (the line keeps its plain color),
 // never crash every chart screen at import. Null → the component no-ops.
 let SPLIT_EFFECT: ReturnType<typeof Skia.RuntimeEffect.Make> = null;
 try {
-  SPLIT_EFFECT = Skia.RuntimeEffect.Make(SPLIT_SKSL);
+  SPLIT_EFFECT = Skia.RuntimeEffect.Make(THRESHOLD_SPLIT_SKSL);
 } catch {
   SPLIT_EFFECT = null;
 }

package/src/components/YAxisOverlay.tsx

@@ -24,6 +24,22 @@ import { AnimatedLabel } from "./AnimatedLabel";
 /** Right margin (px) for floating labels — keeps them just off the canvas edge. */
 const FLOAT_LABEL_RIGHT_MARGIN = 6;
 
+/** Returns true when a Y-axis label's line box intersects the live badge pill. */
+export function yAxisLabelIntersectsBadge(
+  labelCenterY: number,
+  labelHeight: number,
+  badgeCenterY: number,
+  badgeHeight: number,
+) {
+  "worklet";
+  const labelHalfHeight = labelHeight / 2;
+  const badgeHalfHeight = badgeHeight / 2;
+  return (
+    labelCenterY + labelHalfHeight > badgeCenterY - badgeHalfHeight &&
+    labelCenterY - labelHalfHeight < badgeCenterY + badgeHalfHeight
+  );
+}
+
 export function YAxisOverlay({
   entries,
   engine,
@@ -33,6 +49,9 @@ export function YAxisOverlay({
   badge = false,
   badgeTail = true,
   badgeMetrics = BADGE_METRICS_DEFAULTS,
+  badgeCenterY,
+  badgeFontSize,
+  badgeOffsetY = 0,
   seriesLabelInset = 0,
   gridStyle,
   variant = "all",
@@ -49,6 +68,12 @@ export function YAxisOverlay({
   badgeTail?: boolean;
   /** Badge pill geometry tokens (kept in sync with useBadge). */
   badgeMetrics?: BadgeMetrics;
+  /** Live badge center before its configured Y offset. Enables label collision suppression. */
+  badgeCenterY?: SharedValue<number>;
+  /** Live badge font size, used to reconstruct the pill's vertical bounds. */
+  badgeFontSize?: number;
+  /** Configured live badge Y offset. */
+  badgeOffsetY?: number;
   /** When > 0, series labels occupy the left portion of the gutter; Y-axis labels right-align. */
   seriesLabelInset?: number;
   /** Grid-line styling overrides. Omit for the legacy solid 1px line. */
@@ -92,6 +117,14 @@ export function YAxisOverlay({
     const w = engine.canvasWidth.get();
     const fm = font.getMetrics();
     const baselineOffset = (fm.ascent + fm.descent) / 2;
+    const labelHeight = fm.descent - fm.ascent;
+    const resolvedBadgeCenterY = badgeCenterY
+      ? badgeCenterY.get() + badgeOffsetY
+      : null;
+    const badgeHeight =
+      badgeFontSize === undefined
+        ? 0
+        : badgeFontSize + badgeMetrics.padY * 2;
     const result: { x: number; y: number; label: string; alpha: number }[] = [];
     for (let i = 0; i < items.length; i++) {
       const e = items[i];
@@ -107,7 +140,16 @@ export function YAxisOverlay({
         x,
         y: e.y - baselineOffset,
         label: e.label,
-        alpha: e.alpha,
+        alpha:
+          resolvedBadgeCenterY !== null &&
+          yAxisLabelIntersectsBadge(
+            e.y,
+            labelHeight,
+            resolvedBadgeCenterY,
+            badgeHeight,
+          )
+            ? 0
+            : e.alpha,
       });
     }
     return result;

package/src/components/thresholdSplitShaderSource.ts

@@ -0,0 +1,70 @@
+/**
+ * Build a balanced constant-index lookup for the threshold sample array.
+ *
+ * SkSL does not allow a runtime value to index a uniform array. A linear loop
+ * works around that restriction, but makes every covered fragment visit every
+ * segment. This tree keeps every array index constant while selecting the same
+ * segment in at most `ceil(log2(sampleCount - 1))` comparisons (six for the
+ * production 64-sample shader).
+ */
+export function buildThresholdLookupTree(sampleCount: number): string {
+  if (!Number.isInteger(sampleCount) || sampleCount < 2) {
+    throw new Error("Threshold shader needs at least two samples");
+  }
+
+  const build = (first: number, end: number, indent: string): string => {
+    if (end - first === 1) {
+      return `${indent}return mix(samples[${first}], samples[${first + 1}], clamp(u - float(${first}), 0.0, 1.0));`;
+    }
+
+    const middle = Math.floor((first + end) / 2);
+    const childIndent = `${indent}  `;
+    return `${indent}if (u < float(${middle})) {
+${build(first, middle, childIndent)}
+${indent}} else {
+${build(middle, end, childIndent)}
+${indent}}`;
+  };
+
+  return build(0, sampleCount - 1, "  ");
+}
+
+/** Build the complete time-varying threshold split shader. */
+export function buildThresholdSplitShaderSource(sampleCount: number): string {
+  const lookup = buildThresholdLookupTree(sampleCount);
+  return `
+// Pixel-X span of the sample grid (thresholdSampleSpanX) — overhangs the plot
+// and glides with the window so features move fluidly, frame to frame.
+uniform float sampleLeft;
+uniform float sampleRight;
+// X where the threshold ends (extendToNow: false → the last point's pixel-X,
+// else a huge sentinel). Fragments right of it paint restColor: the plain line
+// color for the stroke, transparent for the band.
+uniform float clipRight;
+uniform vec4 aboveColor; // straight-alpha rgba, 0..1
+uniform vec4 belowColor; // straight-alpha rgba, 0..1
+uniform vec4 restColor;  // straight-alpha rgba, 0..1
+uniform float samples[${sampleCount}];
+
+float thresholdAt(float u) {
+${lookup}
+}
+
+half4 main(vec2 xy) {
+  if (xy.x > clipRight) {
+    return half4(half3(restColor.rgb) * restColor.a, restColor.a);
+  }
+  float span = sampleRight - sampleLeft;
+  float u = span > 0.0 ? (xy.x - sampleLeft) / span : 0.0;
+  u = clamp(u, 0.0, 1.0) * float(${sampleCount - 1});
+  // Uniform-array indices must stay compile-time constants in SkSL. The
+  // generated branch tree selects the same segment as floor(u), including the
+  // clamped final endpoint, in logarithmic comparisons instead of walking every
+  // segment for every fragment.
+  float thrY = thresholdAt(u);
+  // 1 above the boundary, 0 below, with ~1px antialiasing across it.
+  float above = clamp(thrY - xy.y + 0.5, 0.0, 1.0);
+  vec4 c = mix(belowColor, aboveColor, above);
+  return half4(half3(c.rgb) * c.a, c.a);
+}`;
+}