react-native-livechart 4.9.1 → 4.10.0

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(
     () =>
@@ -431,6 +424,7 @@ export function MarkerOverlay({
                 repColor,
                 pt.groupCount,
                 GROUP_CORNER_SCALE,
+                groupBadgeCfg?.letterSpacing ?? 0,
               );
             }
             continue;
@@ -448,6 +442,7 @@ export function MarkerOverlay({
             repColor,
             pt.groupCount,
             1,
+            groupBadgeCfg?.letterSpacing ?? 0,
           );
           continue;
         }

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/draw/markerAtlas.ts

@@ -59,6 +59,21 @@ export function groupCountText(count: number): string {
   return count > 99 ? "99" : `${count}`;
 }
 
+/** Width of proportionally laid-out count-badge text at its on-canvas scale. */
+export function groupCountTextWidth(
+  text: string,
+  digitWidths: Record<string, number>,
+  letterSpacing = 0,
+): number {
+  "worklet";
+  let width = 0;
+  for (let i = 0; i < text.length; i++) {
+    width += (digitWidths[text[i]] ?? 0) * BADGE_TEXT_SCALE;
+    if (i > 0) width += letterSpacing;
+  }
+  return width;
+}
+
 /** Default glyph color per kind when `marker.color` is unset. Worklet-safe so the
  *  per-frame overlay worklet can resolve a collapsed cluster's badge color. */
 export function defaultMarkerColor(
@@ -333,10 +348,12 @@ function groupBgCellSpec(
   bgColor: string,
   uw: number,
   gh: number,
+  letterSpacing: number,
 ): CellSpec {
   const m2 = CELL_MARGIN * 2;
   // Inner circle fits a centered two-digit string at BADGE_TEXT_SCALE plus padding.
-  const innerR = Math.ceil(Math.max(2 * uw, gh) * BADGE_TEXT_SCALE) / 2 + BADGE_PAD;
+  const textWidth = 2 * uw * BADGE_TEXT_SCALE + Math.max(0, letterSpacing);
+  const innerR = Math.ceil(Math.max(textWidth, gh * BADGE_TEXT_SCALE)) / 2 + BADGE_PAD;
   const outerR = innerR + BADGE_BORDER;
   const diameter = 2 * outerR;
   return {
@@ -429,7 +446,10 @@ export function buildMarkerAtlas(
       colors.add(m.color ?? defaultMarkerColor(m.kind, palette));
     }
     for (const color of colors) {
-      specs.push({ sig: groupBgSig(color), spec: groupBgCellSpec(color, bgColor, uw, gh) });
+      specs.push({
+        sig: groupBgSig(color),
+        spec: groupBgCellSpec(color, bgColor, uw, gh, groupBadge?.letterSpacing ?? 0),
+      });
     }
   }
 

package/src/hooks/crosshairShared.ts

@@ -14,6 +14,17 @@ const TOOLTIP_EDGE_GAP = 4;
 const TOOLTIP_TOP_MARGIN = 8;
 const FADE_ZONE = 4;
 
+/** Measure rendered text so the pill and its content share the same centre. */
+function measureTooltipTextWidth(
+  font: SkFont,
+  text: string,
+  monoCharWidth: number,
+): number {
+  "worklet";
+  const measured = measureFontTextWidth(font, text);
+  return measured > 0 ? measured : text.length * monoCharWidth;
+}
+
 export interface TooltipLayout {
   x: number;
   y: number;
@@ -197,10 +208,7 @@ export function computeTooltipLayout(
   formatValue: (v: number) => string,
   formatTime: (t: number) => string,
   font: SkFont,
-  /** Monospace advance width. When > 0, text width is `len * monoCharWidth`
-   *  instead of a per-frame Skia `measureText` — scrubbing re-runs this worklet
-   *  every frame, and `measureText` shapes text each call (a real cost,
-   *  especially in the simulator). Falls back to `measureText` when 0. */
+  /** Monospace advance width fallback when font measurement returns zero. */
   monoCharWidth = 0,
   /** Where the pill sits relative to the scrub line. `"side"` offsets it right
    *  (flipping left near the edge); `"top"`/`"bottom"` center it over the line,
@@ -243,14 +251,11 @@ export function computeTooltipLayout(
   const totalH =
     TOOLTIP_PAD_Y * 2 + lineH * rowCount + TOOLTIP_LINE_GAP * (rowCount - 1);
 
-  const valueW =
-    monoCharWidth > 0
-      ? valueStr.length * monoCharWidth
-      : measureFontTextWidth(font, valueStr);
-  const timeW =
-    monoCharWidth > 0
-      ? timeStr.length * monoCharWidth
-      : measureFontTextWidth(font, timeStr);
+  // Use actual glyph bounds for every visible-row variant. The old
+  // character-count approximation made punctuation-heavy dates/times appear
+  // off-centre even when the pill itself was positioned correctly.
+  const valueW = measureTooltipTextWidth(font, valueStr, monoCharWidth);
+  const timeW = measureTooltipTextWidth(font, timeStr, monoCharWidth);
   // Only the visible rows contribute to the pill width.
   const contentW = Math.max(sv ? valueW : 0, st ? timeW : 0);
   const pillW = contentW + TOOLTIP_PAD_X * 2;
@@ -333,8 +338,7 @@ export function computeTooltipLayoutMulti(
   padding: ChartPadding,
   canvasWidth: number,
   font: SkFont,
-  /** Monospace advance width; when > 0, sizes text by length instead of a
-   *  per-frame Skia `measureText`. See {@link computeTooltipLayout}. */
+  /** Monospace advance width fallback when font measurement returns zero. */
   monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
@@ -349,10 +353,7 @@ export function computeTooltipLayoutMulti(
   let contentW = 0;
   const lineWidths: number[] = [];
   for (let i = 0; i < n; i++) {
-    const w =
-      monoCharWidth > 0
-        ? lines[i].text.length * monoCharWidth
-        : measureFontTextWidth(font, lines[i].text);
+    const w = measureTooltipTextWidth(font, lines[i].text, monoCharWidth);
     lineWidths.push(w);
     if (w > contentW) contentW = w;
   }

package/src/hooks/delayedPanGuard.ts

@@ -0,0 +1,80 @@
+import type { SharedValue } from "react-native-reanimated";
+
+type BooleanSharedValue = Pick<SharedValue<boolean>, "get" | "set">;
+
+type TouchCountEvent = {
+  numberOfTouches: number;
+};
+
+type GestureStateManager = {
+  fail: () => void;
+};
+
+/** Mark the first pointer of a delayed pan as down. Zero-delay pans are inert. */
+export function delayedPanTouchDown(
+  delayMs: number,
+  fingerDown: BooleanSharedValue,
+): void {
+  "worklet";
+  if (delayMs > 0) fingerDown.set(true);
+}
+
+/**
+ * Fail a delayed pan that is still pending when its final pointer lifts.
+ *
+ * RNGH 2.x on iOS can leave `activateAfterLongPress`'s timer armed after a
+ * stationary touch ends. Failing the pending recognizer forces the reset that
+ * cancels that timer. An already-active pan is left to finish normally.
+ */
+export function delayedPanTouchUp(
+  delayMs: number,
+  event: TouchCountEvent,
+  manager: GestureStateManager,
+  fingerDown: BooleanSharedValue,
+  panActivated: BooleanSharedValue,
+): void {
+  "worklet";
+  if (delayMs <= 0 || event.numberOfTouches > 0) return;
+  fingerDown.set(false);
+  if (!panActivated.get()) manager.fail();
+}
+
+/** Clear pointer state when the native touch stream is cancelled. */
+export function delayedPanTouchCancelled(
+  delayMs: number,
+  fingerDown: BooleanSharedValue,
+): void {
+  "worklet";
+  if (delayMs > 0) fingerDown.set(false);
+}
+
+/**
+ * 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.
+ */
+export function shouldStartDelayedPan(
+  delayMs: number,
+  fingerDown: BooleanSharedValue,
+  panActivated: BooleanSharedValue,
+): boolean {
+  "worklet";
+  if (delayMs <= 0) return true;
+  if (!fingerDown.get()) {
+    panActivated.set(false);
+    return false;
+  }
+  panActivated.set(true);
+  return true;
+}
+
+/** Reset the delayed-pan lifecycle after native finalization. */
+export function resetDelayedPanGuard(
+  fingerDown: BooleanSharedValue,
+  panActivated: BooleanSharedValue,
+): void {
+  "worklet";
+  fingerDown.set(false);
+  panActivated.set(false);
+}