react-native-livechart 4.20.0 → 4.21.1

package/src/components/CustomTooltipOverlay.tsx

@@ -10,7 +10,7 @@ import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
 import type { TooltipLayout } from "../hooks/crosshairShared";
 import { resolveCrosshairVisibleOpacity } from "../hooks/useCrosshairVisibleOpacity";
-import type { CandlePoint, TooltipRenderProps } from "../types";
+import type { CandleGap, CandlePoint, TooltipRenderProps } from "../types";
 
 // Mirror the Skia tooltip's offsets (see crosshairShared.ts) so a custom pill
 // lines up with where the built-in one would sit. The vertical edge gap is
@@ -42,6 +42,7 @@ export function CustomTooltipOverlay({
   scrubTime,
   scrubActive,
   scrubCandle,
+  scrubGap,
   tooltipLayout,
   engine,
   padding,
@@ -59,6 +60,8 @@ export function CustomTooltipOverlay({
   scrubActive: SharedValue<boolean>;
   /** OHLC candle under the crosshair (candle mode); omitted/`null` in line mode. */
   scrubCandle?: SharedValue<CandlePoint | null>;
+  /** Explicit line or candle gap under the crosshair; omitted/`null` outside one. */
+  scrubGap?: SharedValue<CandleGap | null>;
   tooltipLayout: SharedValue<TooltipLayout>;
   engine: ChartEngineLayout;
   padding: ChartPadding;
@@ -82,9 +85,9 @@ export function CustomTooltipOverlay({
   // a worklet-safe formatter for the value/time.
   const valueStr = useDerivedValue(() => tooltipLayout.get().valueStr);
   const timeStr = useDerivedValue(() => tooltipLayout.get().timeStr);
-  // A stable `null` candle SharedValue for line mode so `ctx.candle` is always
-  // present (a SharedValue), regardless of mode.
+  // Stable null SharedValues keep both fields present regardless of mode.
   const nullCandle = useSharedValue<CandlePoint | null>(null);
+  const nullGap = useSharedValue<CandleGap | null>(null);
 
   const ctx: TooltipRenderProps = {
     value: scrubValue,
@@ -93,6 +96,7 @@ export function CustomTooltipOverlay({
     timeStr,
     active: scrubActive,
     candle: scrubCandle ?? nullCandle,
+    gap: scrubGap ?? nullGap,
   };
   const element = renderTooltip(ctx);
 

package/src/components/DegenParticlesOverlay.tsx

@@ -17,6 +17,36 @@ import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 
 type DegenPack = SharedValue<Float64Array<ArrayBuffer>>;
 
+type ParticlePool = {
+  a: { transforms: SkRSXform[]; sprites: SkRect[]; colors: SkColor[] };
+  b: { transforms: SkRSXform[]; sprites: SkRect[]; colors: SkColor[] };
+  tick: boolean;
+  instances: ReturnType<typeof buildParticleInstances>;
+  instancePool: ReturnType<typeof buildParticleInstances>;
+  spriteRect: SkRect;
+};
+
+function makeParticlePool(
+  particleSlotCount: number,
+  spriteSize: number,
+): ParticlePool {
+  const instancePool = Array.from({ length: particleSlotCount }, () => ({
+    x: 0,
+    y: 0,
+    scale: 0,
+    alpha: 0,
+    colorIndex: 0,
+  }));
+  return {
+    a: { transforms: [], sprites: [], colors: [] },
+    b: { transforms: [], sprites: [], colors: [] },
+    tick: false,
+    instances: [],
+    instancePool,
+    spriteRect: Skia.XYWHRect(0, 0, spriteSize, spriteSize),
+  };
+}
+
 /**
  * Renders the degen particle burst with a single `drawAtlas` call.
  *
@@ -64,30 +94,11 @@ export function DegenParticlesOverlay({
   // memoizes this on `colorList`.
   const colorRgb = colorList.map((c) => parseColorRgb(c));
 
-  const poolRef = useRef<{
-    a: { transforms: SkRSXform[]; sprites: SkRect[]; colors: SkColor[] };
-    b: { transforms: SkRSXform[]; sprites: SkRect[]; colors: SkColor[] };
-    tick: boolean;
-    instances: ReturnType<typeof buildParticleInstances>;
-    instancePool: ReturnType<typeof buildParticleInstances>;
-    spriteRect: SkRect;
-  } | null>(null);
+  const poolRef = useRef<ParticlePool | null>(null);
   if (poolRef.current === null) {
-    const instancePool = Array.from({ length: particleSlotCount }, () => ({
-      x: 0,
-      y: 0,
-      scale: 0,
-      alpha: 0,
-      colorIndex: 0,
-    }));
-    poolRef.current = {
-      a: { transforms: [], sprites: [], colors: [] },
-      b: { transforms: [], sprites: [], colors: [] },
-      tick: false,
-      instances: [],
-      instancePool,
-      spriteRect: Skia.XYWHRect(0, 0, sprite.size, sprite.size),
-    };
+    // React permits this predictable lazy-ref initialization: https://react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents
+    // react-doctor-disable-next-line react-doctor/no-ref-current-in-render -- false positive for React's documented lazy-ref exception
+    poolRef.current = makeParticlePool(particleSlotCount, sprite.size);
   }
 
   // Single per-frame worklet. Reads `packRevision` so it re-runs each frame

package/src/components/ExtremaConnectorOverlay.tsx

@@ -11,7 +11,11 @@ import type {
 } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
 import { usePathBuilder } from "../hooks/usePathBuilder";
-import { EXTREMA_EDGE_INSET, EXTREMA_LABEL_FONT_SIZE } from "./AxisLabelOverlay";
+import {
+  EXTREMA_EDGE_INSET,
+  EXTREMA_LABEL_FONT_SIZE,
+  extremaPointsCoincide,
+} from "./AxisLabelOverlay";
 
 /** How far off-plot (px) the extremum may sit before the connector is dropped. */
 const CONNECTOR_CULL = 24;
@@ -55,6 +59,7 @@ function ConnectorLine({
   engine,
   padding,
   config,
+  suppressWhen,
 }: {
   side: "top" | "bottom";
   timeSV: SharedValue<number>;
@@ -63,6 +68,10 @@ function ConnectorLine({
   engine: ChartEngineLayout;
   padding: ChartPadding;
   config: ResolvedConnector;
+  suppressWhen?: {
+    timeSV: SharedValue<number>;
+    valueSV: SharedValue<number>;
+  };
 }) {
   const builder = usePathBuilder();
   const { line, fontSize } = config;
@@ -88,6 +97,13 @@ function ConnectorLine({
 
     if (
       !Number.isFinite(value) ||
+      (suppressWhen != null &&
+        extremaPointsCoincide(
+          time,
+          value,
+          suppressWhen.timeSV.get(),
+          suppressWhen.valueSV.get(),
+        )) ||
       cw === 0 ||
       ch === 0 ||
       chartW <= 0 ||
@@ -153,15 +169,29 @@ export function ExtremaConnectorOverlay({
   extremaTimeOffset = 0,
   top,
   bottom,
+  hideExtrema = false,
+  suppressBottomWhenCoincident = false,
 }: {
   engine: ChartEngineLayout & Partial<ChartEngineExtrema>;
   padding: ChartPadding;
   extremaTimeOffset?: number;
   top: ResolvedConnector | null;
   bottom: ResolvedConnector | null;
+  /** Hide extrema connectors while the chart is showing its loading shell. */
+  hideExtrema?: boolean;
+  /** Drop the lower connector when both configured labels share one point. */
+  suppressBottomWhenCoincident?: boolean;
 }) {
-  const hasTop = top != null && engine.extremaMaxTime != null;
-  const hasBottom = bottom != null && engine.extremaMinTime != null;
+  const hasTop =
+    !hideExtrema &&
+    top != null &&
+    engine.extremaMaxTime != null &&
+    engine.extremaMaxValue != null;
+  const hasBottom =
+    !hideExtrema &&
+    bottom != null &&
+    engine.extremaMinTime != null &&
+    engine.extremaMinValue != null;
   if (!hasTop && !hasBottom) return null;
 
   return (
@@ -186,6 +216,16 @@ export function ExtremaConnectorOverlay({
           engine={engine}
           padding={padding}
           config={bottom!}
+          suppressWhen={
+            suppressBottomWhenCoincident &&
+            engine.extremaMaxTime != null &&
+            engine.extremaMaxValue != null
+              ? {
+                  timeSV: engine.extremaMaxTime!,
+                  valueSV: engine.extremaMaxValue!,
+                }
+              : undefined
+          }
         />
       )}
     </>