react-native-livechart 4.24.1 → 4.26.0

package/src/draw/volume.ts

@@ -1,3 +1,9 @@
+import {
+  volumeStartIndex,
+  volumeEndIndex,
+  visibleMaxVolume,
+  type VolumeRange,
+} from "./volumeRange";
 import { CANDLE_METRICS_DEFAULTS } from "../constants";
 import type { CandleMetrics, CandlePoint } from "../types";
 import type { ChartPadding } from "./line";
@@ -105,6 +111,8 @@ export function buildVolumeGeometry(
   bandHeight: number,
   candleWidthSecs: number,
   metrics: CandleMetrics = CANDLE_METRICS_DEFAULTS,
+  /** Internal cached history range. Live volume is always folded in below. */
+  history?: VolumeRange,
 ): VolumeGeometry {
   "worklet";
   const chartW = canvasW - padding.left - padding.right;
@@ -126,25 +134,14 @@ export function buildVolumeGeometry(
   const padLeft = padding.left;
   const baseline = canvasH - padding.bottom + bandHeight;
 
-  // Binary search for the first candle overlapping the window (same as candles).
-  let lo = 0;
-  let hi = candles.length;
-  while (lo < hi) {
-    const mid = (lo + hi) >> 1;
-    if (candles[mid].time + candleWidthSecs < winStart) lo = mid + 1;
-    else hi = mid;
-  }
-
-  // Pass 1 — largest visible volume (the bar that fills the band). The live
-  // candle counts too so a tall in-progress bar doesn't overflow the band.
-  let maxVol = 0;
-  for (let i = lo; i < candles.length; i++) {
-    /* istanbul ignore next -- past visible window */
-    if (candles[i].time > winEnd) break;
-    const v = candles[i].volume ?? 0;
-    if (v > maxVol) maxVol = v;
-  }
-  if (liveCandle && candleVisible(liveCandle, winStart, winEnd, candleWidthSecs)) {
+  const lo =
+    history?.start ?? volumeStartIndex(candles, winStart, candleWidthSecs);
+  const end = history?.end ?? volumeEndIndex(candles, winEnd);
+  let maxVol = history?.max ?? visibleMaxVolume(candles, lo, end);
+  if (
+    liveCandle &&
+    candleVisible(liveCandle, winStart, winEnd, candleWidthSecs)
+  ) {
     const v = liveCandle.volume ?? 0;
     if (v > maxVol) maxVol = v;
   }
@@ -153,9 +150,7 @@ export function buildVolumeGeometry(
 
   // Pass 2 — build the bars normalized to maxVol.
   const bars: VolumeBar[] = [];
-  for (let i = lo; i < candles.length; i++) {
-    /* istanbul ignore next -- past visible window */
-    if (candles[i].time > winEnd) break;
+  for (let i = lo; i < end; i++) {
     appendVolumeBar(
       candles[i],
       winStart,
@@ -172,7 +167,10 @@ export function buildVolumeGeometry(
       bars,
     );
   }
-  if (liveCandle && candleVisible(liveCandle, winStart, winEnd, candleWidthSecs)) {
+  if (
+    liveCandle &&
+    candleVisible(liveCandle, winStart, winEnd, candleWidthSecs)
+  ) {
     appendVolumeBar(
       liveCandle,
       winStart,

package/src/draw/volumeRange.ts

@@ -0,0 +1,51 @@
+import type { CandlePoint } from "../types";
+
+/** First bucket touching the left edge (inclusive). */
+export function volumeStartIndex(
+  candles: CandlePoint[],
+  start: number,
+  width: number,
+): number {
+  "worklet";
+  let lo = 0,
+    hi = candles.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (candles[mid].time + width < start) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+
+/** First bucket beyond the right edge (exclusive). */
+export function volumeEndIndex(candles: CandlePoint[], end: number): number {
+  "worklet";
+  let lo = 0,
+    hi = candles.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (candles[mid].time <= end) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+
+export function visibleMaxVolume(
+  candles: CandlePoint[],
+  start: number,
+  end: number,
+): number {
+  "worklet";
+  let max = 0;
+  for (let i = start; i < end; i++) {
+    const volume = candles[i].volume ?? 0;
+    if (volume > max) max = volume;
+  }
+  return max;
+}
+
+export interface VolumeRange {
+  start: number;
+  end: number;
+  max: number;
+}

package/src/hooks/crosshairShared.ts

@@ -244,6 +244,35 @@ export function computeScrubDotY(
   return padTop + ((displayMax - value) / valRange) * chartH;
 }
 
+/**
+ * A reference value's canvas Y pinned to the plot: a value off the visible range
+ * sits on the nearest plot edge. `-1` when there is no plot height (not laid out,
+ * or shorter than its padding) — decided from the layout, not from the projected
+ * Y: {@link computeScrubDotY} returns a negative Y for a value far above the range
+ * too, and that one must pin to the top edge as a value below pins to the bottom.
+ */
+export function pinnedPlotY(
+  value: number,
+  displayMin: number,
+  displayMax: number,
+  canvasHeight: number,
+  padTop: number,
+  padBottom: number,
+): number {
+  "worklet";
+  const bottom = canvasHeight - padBottom;
+  if (bottom - padTop <= 0) return -1;
+  const y = computeScrubDotY(
+    value,
+    displayMin,
+    displayMax,
+    canvasHeight,
+    padTop,
+    padBottom,
+  );
+  return Math.min(bottom, Math.max(padTop, y));
+}
+
 /**
  * Inverse of {@link computeScrubDotY}: maps a canvas Y pixel back to a value (a
  * free price *level*, used by scrub-action mode where the reticle Y is the chosen

package/src/hooks/useCandlePaths.ts

@@ -1,5 +1,4 @@
-import { Skia } from "@shopify/react-native-skia";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import {
   useDerivedValue,
   useFrameCallback,
@@ -8,12 +7,15 @@ import {
 } from "react-native-reanimated";
 import { CANDLE_METRICS_DEFAULTS, MS_PER_FRAME_60FPS } from "../constants";
 import type { SingleEngineState } from "../core/useLiveChartEngine";
+import { buildCandleBodyPath } from "../draw/candleBodyPath";
 import { buildCandleGeometry } from "../draw/candle";
 import { buildVolumeGeometry } from "../draw/volume";
 import type { ChartPadding } from "../draw/line";
 import { lerp } from "../math/lerp";
 import type { CandleMetrics, CandlePoint } from "../types";
+import { useVolumeRange } from "./useVolumeRange";
 import { usePathBuilder } from "./usePathBuilder";
+import { useDemandFrameLoop } from "./useDemandFrameLoop";
 
 const CANDLE_WIDTH_LERP_SPEED = 0.08;
 
@@ -40,6 +42,7 @@ export function useCandleWidthLerp(
   active: boolean,
   /** Runtime gate shared with the chart engine. */
   isFrameLoopActive?: SharedValue<boolean>,
+  autoSleep = false,
 ): SharedValue<number> {
   const targetCandleWidth = useDerivedValue(() => candleWidthSecs);
   const displayCandleWidth = useSharedValue(candleWidthSecs);
@@ -51,10 +54,10 @@ export function useCandleWidthLerp(
     () => candleLerpSpeed ?? CANDLE_WIDTH_LERP_SPEED,
   );
 
-  const widthFrameCallback = useFrameCallback((frameInfo) => {
+  const tickWidth = useCallback((dt: number) => {
     "worklet";
-    if (!active || isFrameLoopActive?.get() === false) return;
-    const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
+    if (!active || isFrameLoopActive?.get() === false) return false;
+    const previous = displayCandleWidth.get();
     const target = targetCandleWidth.get();
     const next = lerp(
       displayCandleWidth.get(),
@@ -62,12 +65,24 @@ export function useCandleWidthLerp(
       widthLerpSpeed.get(),
       dt,
     );
-    displayCandleWidth.set(Math.abs(target - next) < 0.01 ? target : next);
-  }, autostart);
+    const settled = Math.abs(target - next) < 0.01 ? target : next;
+    displayCandleWidth.set(settled);
+    return previous !== settled;
+  }, [active, isFrameLoopActive, displayCandleWidth, targetCandleWidth, widthLerpSpeed]);
+  const prepareWidth = useCallback(() => {
+    "worklet";
+    return [targetCandleWidth.get(), widthLerpSpeed.get(), isFrameLoopActive?.get()];
+  }, [targetCandleWidth, widthLerpSpeed, isFrameLoopActive]);
+  useDemandFrameLoop(autoSleep && autostart && active, prepareWidth, tickWidth);
+  const legacyActive = autostart && !autoSleep;
+  const widthFrameCallback = useFrameCallback((frameInfo) => {
+    "worklet";
+    tickWidth(frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS);
+  }, legacyActive);
   useEffect(() => {
     // `autostart` is an initial seed in Reanimated, not a reactive switch.
-    widthFrameCallback.setActive(autostart);
-  }, [autostart, widthFrameCallback]);
+    widthFrameCallback.setActive(legacyActive);
+  }, [legacyActive, widthFrameCallback]);
 
   return displayCandleWidth;
 }
@@ -118,50 +133,24 @@ export function useCandlePaths(
   });
 
   /* istanbul ignore next -- worklet */
-  const upBodiesPath = useDerivedValue(() => {
-    const b = upBodiesBuilder.value;
-    const { bodies } = geometry.value;
-    const radius = candleMetrics.bodyRadius;
-    for (let i = 0; i < bodies.length; i++) {
-      if (bodies[i].up) {
-        const bd = bodies[i];
-        const rr = radius > 0 ? Math.min(radius, bd.w / 2, bd.h / 2) : 0;
-        if (rr > 0) {
-          b.addRRect({
-            rect: { x: bd.x, y: bd.y, width: bd.w, height: bd.h },
-            rx: rr,
-            ry: rr,
-          });
-        } else {
-          b.addRect(Skia.XYWHRect(bd.x, bd.y, bd.w, bd.h));
-        }
-      }
-    }
-    return b.detach();
-  });
+  const upBodiesPath = useDerivedValue(() =>
+    buildCandleBodyPath(
+      upBodiesBuilder.get(),
+      geometry.get().bodies,
+      true,
+      candleMetrics.bodyRadius,
+    ),
+  );
 
   /* istanbul ignore next -- worklet */
-  const downBodiesPath = useDerivedValue(() => {
-    const b = downBodiesBuilder.value;
-    const { bodies } = geometry.value;
-    const radius = candleMetrics.bodyRadius;
-    for (let i = 0; i < bodies.length; i++) {
-      if (!bodies[i].up) {
-        const bd = bodies[i];
-        const rr = radius > 0 ? Math.min(radius, bd.w / 2, bd.h / 2) : 0;
-        if (rr > 0) {
-          b.addRRect({
-            rect: { x: bd.x, y: bd.y, width: bd.w, height: bd.h },
-            rx: rr,
-            ry: rr,
-          });
-        } else {
-          b.addRect(Skia.XYWHRect(bd.x, bd.y, bd.w, bd.h));
-        }
-      }
-    }
-    return b.detach();
-  });
+  const downBodiesPath = useDerivedValue(() =>
+    buildCandleBodyPath(
+      downBodiesBuilder.get(),
+      geometry.get().bodies,
+      false,
+      candleMetrics.bodyRadius,
+    ),
+  );
 
   /* istanbul ignore next -- worklet */
   const upWicksPath = useDerivedValue(() => {
@@ -192,6 +181,13 @@ export function useCandlePaths(
   // Volume bars share the candle window + (lerped) candle width so each bar sits
   // directly under its candle body. Empty unless a volume band is reserved.
   /* istanbul ignore next -- worklet */
+  const volumeRange = useVolumeRange(
+    candles,
+    engine.timestamp,
+    engine.displayWindow,
+    displayCandleWidth,
+    active && volumeBandHeight > 0,
+  );
   const volumeGeometry = useDerivedValue(() => {
     if (!active || !candles || volumeBandHeight <= 0) return { bars: [] };
     return buildVolumeGeometry(
@@ -205,54 +201,32 @@ export function useCandlePaths(
       volumeBandHeight,
       displayCandleWidth.get(),
       candleMetrics,
+      {
+        start: volumeRange.start.get(),
+        end: volumeRange.end.get(),
+        max: volumeRange.max.get(),
+      },
     );
   });
 
   /* istanbul ignore next -- worklet */
-  const upBarsPath = useDerivedValue(() => {
-    const b = upBarsBuilder.value;
-    const { bars } = volumeGeometry.value;
-    for (let i = 0; i < bars.length; i++) {
-      if (bars[i].up) {
-        const bar = bars[i];
-        const rr =
-          volumeRadius > 0 ? Math.min(volumeRadius, bar.w / 2, bar.h / 2) : 0;
-        if (rr > 0) {
-          b.addRRect({
-            rect: { x: bar.x, y: bar.y, width: bar.w, height: bar.h },
-            rx: rr,
-            ry: rr,
-          });
-        } else {
-          b.addRect(Skia.XYWHRect(bar.x, bar.y, bar.w, bar.h));
-        }
-      }
-    }
-    return b.detach();
-  });
-
+  const upBarsPath = useDerivedValue(() =>
+    buildCandleBodyPath(
+      upBarsBuilder.get(),
+      volumeGeometry.get().bars,
+      true,
+      volumeRadius,
+    ),
+  );
   /* istanbul ignore next -- worklet */
-  const downBarsPath = useDerivedValue(() => {
-    const b = downBarsBuilder.value;
-    const { bars } = volumeGeometry.value;
-    for (let i = 0; i < bars.length; i++) {
-      if (!bars[i].up) {
-        const bar = bars[i];
-        const rr =
-          volumeRadius > 0 ? Math.min(volumeRadius, bar.w / 2, bar.h / 2) : 0;
-        if (rr > 0) {
-          b.addRRect({
-            rect: { x: bar.x, y: bar.y, width: bar.w, height: bar.h },
-            rx: rr,
-            ry: rr,
-          });
-        } else {
-          b.addRect(Skia.XYWHRect(bar.x, bar.y, bar.w, bar.h));
-        }
-      }
-    }
-    return b.detach();
-  });
+  const downBarsPath = useDerivedValue(() =>
+    buildCandleBodyPath(
+      downBarsBuilder.get(),
+      volumeGeometry.get().bars,
+      false,
+      volumeRadius,
+    ),
+  );
 
   return {
     upBodiesPath,

package/src/hooks/useChartPaths.ts

@@ -1,3 +1,4 @@
+import { buildLineFillPaths } from "../draw/lineFillPaths";
 import { Skia, type SkPath } from "@shopify/react-native-skia";
 import { useRef } from "react";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
@@ -8,13 +9,14 @@ import type {
 } from "../core/useLiveChartEngine";
 import { buildLinePoints, type ChartPadding } from "../draw/line";
 import { buildLineGapSegmentRanges } from "../draw/lineGap";
+import { makeLineSimplifyScratch, simplifyLinePoints } from "../math/simplify";
+import { makeSplineScratch } from "../math/spline";
+import { thresholdSampleSpanX } from "../math/threshold";
 import {
-  makeLineSimplifyScratch,
-  simplifyLinePoints,
-} from "../math/simplify";
-import { drawSpline, makeSplineScratch } from "../math/spline";
-import { sampleThresholdYAt, thresholdSampleSpanX } from "../math/threshold";
-import { blendPtsY, squigglifyPts } from "../math/squiggly";
+  blendPtsY,
+  squiggleClockSeconds,
+  squigglifyPts,
+} from "../math/squiggly";
 import { usePathBuilder } from "./usePathBuilder";
 import type { CandleGap } from "../types";
 
@@ -31,7 +33,7 @@ export function resolveLineTipValue(
 
 /**
  * Builds the `linePath` / `fillPath` with `Skia.PathBuilder`s reused across
- * frames (one per curve, held in a SharedValue) and finalized with `detach()` —
+ * geometry updates (one per curve, held in a SharedValue) and finalized with `detach()` —
  * which returns a fresh immutable `SkPath` each frame and resets the builder.
  * The fresh reference makes Reanimated notify subscribers (re-record + repaint)
  * without the two-SkPath ping-pong the mutable-path pool needed.
@@ -69,6 +71,12 @@ export function useChartPaths(
 
   const cacheRef = useRef<{
     emptyPath: SkPath;
+    lastPts: number[] | null;
+    lastRanges: number[] | null;
+    lastLinear: boolean;
+    lastBottom: number;
+    lineOutput: SkPath | null;
+    fillOutput: SkPath | null;
     ptsA: number[];
     ptsB: number[];
     rawPts: number[];
@@ -87,6 +95,12 @@ export function useChartPaths(
   if (cacheRef.current === null) {
     cacheRef.current = {
       emptyPath: Skia.Path.Make(),
+      lastPts: null,
+      lastRanges: null,
+      lastLinear: false,
+      lastBottom: NaN,
+      lineOutput: null,
+      fillOutput: null,
       ptsA: [] as number[],
       ptsB: [] as number[],
       rawPts: [] as number[],
@@ -160,9 +174,11 @@ export function useChartPaths(
     // Compute squiggly Y values at the same X positions as the real line
     const centerY =
       (engine.canvasHeight.get() - padding.bottom + padding.top) / 2;
+    // Same wall clock as the loading shell's squiggle, so the wave stays
+    // continuous where the shell hands over to the morph.
     const squigglyPts = squigglifyPts(
       renderPts,
-      engine.timestamp.get(),
+      squiggleClockSeconds(),
       centerY,
       squiggleAmplitude,
       squiggleSpeed,
@@ -200,117 +216,77 @@ export function useChartPaths(
     );
   });
 
-  const linePath = useDerivedValue(() => {
+  // One derived rebuild keeps curve inputs and all outputs in the same revision.
+  // The spline solver emits to separate builders without extra command buffers.
+  const paths = useDerivedValue(() => {
     const cache = cacheRef.current!;
     const pts = flatPts.get();
-    const n = pts.length >> 1;
-    if (n < 2) return cache.emptyPath;
-    const b = lineBuilder.value;
     const ranges = segmentRanges.get();
-    if (ranges.length === 0) return cache.emptyPath;
-    for (let i = 0; i < ranges.length; i += 2) {
-      const start = ranges[i];
-      const end = ranges[i + 1];
-      b.moveTo(pts[start * 2], pts[start * 2 + 1]);
-      drawSpline(b, pts, cache.scratch, linear, start, end);
+    if (pts.length < 4 || ranges.length === 0) {
+      cache.lastPts = null;
+      return {
+        line: cache.emptyPath,
+        fill: cache.emptyPath,
+        band: cache.emptyPath,
+      };
     }
-    return b.detach();
-  });
-
-  const fillPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    const pts = flatPts.get();
-    const n = pts.length >> 1;
-    if (n < 2) return cache.emptyPath;
-    const b = fillBuilder.value;
-    const ranges = segmentRanges.get();
-    if (ranges.length === 0) return cache.emptyPath;
     const bottom = engine.canvasHeight.get() - padding.bottom;
-    for (let i = 0; i < ranges.length; i += 2) {
-      const start = ranges[i];
-      const end = ranges[i + 1];
-      const first = start * 2;
-      const last = (end - 1) * 2;
-      b.moveTo(pts[first], pts[first + 1]);
-      drawSpline(b, pts, cache.scratch, linear, start, end);
-      b.lineTo(pts[last], bottom);
-      b.lineTo(pts[first], bottom);
-      b.close();
-    }
-    return b.detach();
-  });
-
-  // Threshold-anchored fill: the same spline, closed along the threshold instead
-  // of the baseline, so the band lies between the line and the threshold (the
-  // profit/loss area). Painted with the split gradient/shader, the part above the
-  // split shows the above-color and the part below shows the below-color.
-  //
-  // `thresholdPts` (a time-varying series) closes the band along that polyline,
-  // right-to-left; otherwise `thresholdY` closes it at a single horizontal Y.
-  const thresholdFillPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    const pts = flatPts.get();
-    const n = pts.length >> 1;
-    if (n < 2) return cache.emptyPath;
-    const ranges = segmentRanges.get();
-    if (ranges.length === 0) return cache.emptyPath;
-
-    const tsamples = thresholdSamples?.get();
-    if (tsamples && tsamples.length >= 2) {
-      const b = thresholdFillBuilder.value;
-      // Band bottom = the SAMPLED threshold (identical to what the split shader
-      // reads), pinned to the LINE's x-range. Because the geometry and the shader
-      // use the same evenly-spaced, linearly-interpolated samples, a step riser
-      // ramps the same way in both — no green/red sliver bleeds through — and the
-      // x-range pin keeps the band closing with clean vertical sides (no wedge).
-      const count = tsamples.length;
-      // The samples live on the time-anchored, gliding grid — interpolate them
-      // across that span (same as the shader), not the static plot edges.
-      const [x0, x1] = thresholdSampleSpanX(
-        engine.timestamp.get(),
-        engine.displayWindow.get(),
-        padding.left,
-        engine.canvasWidth.get() - padding.right,
-        count,
+    // Buffers alternate on each geometry update. Identical references here
+    // therefore mean only the threshold changed, not the line geometry.
+    const bandOnly =
+      cache.lastPts === pts &&
+      cache.lastRanges === ranges &&
+      cache.lastLinear === linear &&
+      cache.lastBottom === bottom;
+    const samples = thresholdSamples?.get();
+    const sampled = samples != null && samples.length >= 2;
+    const y = thresholdY?.get() ?? NaN;
+    const hasBand = sampled || Number.isFinite(y);
+    const span = sampled
+      ? thresholdSampleSpanX(
+          engine.timestamp.get(),
+          engine.displayWindow.get(),
+          padding.left,
+          engine.canvasWidth.get() - padding.right,
+          samples.length,
+        )
+      : [0, 0];
+    const line = lineBuilder.get(),
+      fill = fillBuilder.get();
+    const band = hasBand ? thresholdFillBuilder.get() : undefined;
+    if (!bandOnly || band)
+      buildLineFillPaths(
+        line,
+        fill,
+        band,
+        pts,
+        ranges,
+        cache.scratch,
+        linear,
+        bottom,
+        y,
+        samples,
+        span[0],
+        span[1],
+        bandOnly,
       );
-      const step = (x1 - x0) / (count - 1);
-      for (let range = 0; range < ranges.length; range += 2) {
-        const start = ranges[range];
-        const end = ranges[range + 1];
-        const first = start * 2;
-        const last = (end - 1) * 2;
-        const leftX = pts[first];
-        const rightX = pts[last];
-        b.moveTo(leftX, pts[first + 1]);
-        drawSpline(b, pts, cache.scratch, linear, start, end);
-        b.lineTo(rightX, sampleThresholdYAt(tsamples, x0, x1, rightX));
-        for (let i = count - 1; i >= 0; i--) {
-          const sx = x0 + step * i;
-          if (sx > leftX && sx < rightX) b.lineTo(sx, tsamples[i]);
-        }
-        b.lineTo(leftX, sampleThresholdYAt(tsamples, x0, x1, leftX));
-        b.close();
-      }
-      return b.detach();
+    if (!bandOnly) {
+      cache.lineOutput = line.detach();
+      cache.fillOutput = fill.detach();
     }
-
-    if (!thresholdY) return cache.emptyPath;
-    const yT = thresholdY.get();
-    if (!Number.isFinite(yT)) return cache.emptyPath;
-    const b = thresholdFillBuilder.value;
-    for (let i = 0; i < ranges.length; i += 2) {
-      const start = ranges[i];
-      const end = ranges[i + 1];
-      const first = start * 2;
-      const last = (end - 1) * 2;
-      b.moveTo(pts[first], pts[first + 1]);
-      drawSpline(b, pts, cache.scratch, linear, start, end);
-      b.lineTo(pts[last], yT);
-      b.lineTo(pts[first], yT);
-      b.close();
-    }
-    return b.detach();
+    cache.lastPts = pts;
+    cache.lastRanges = ranges;
+    cache.lastLinear = linear;
+    cache.lastBottom = bottom;
+    return {
+      line: cache.lineOutput!,
+      fill: cache.fillOutput!,
+      band: band?.detach() ?? cache.emptyPath,
+    };
   });
+  const linePath = useDerivedValue(() => paths.get().line);
+  const fillPath = useDerivedValue(() => paths.get().fill);
+  const thresholdFillPath = useDerivedValue(() => paths.get().band);
 
   return { linePath, fillPath, thresholdFillPath } as const;
 }