@obitrain/charts 0.10.4 → 0.12.0

package/src/Charts/gesture.ts

@@ -1,10 +1,9 @@
-import { clamp } from '@shopify/react-native-skia';
-import { useCallback } from 'react';
+import { clamp } from 'react-native-skia';
+import { useCallback, useMemo, useRef } from 'react';
 import { Gesture, type PanGesture, type PinchGesture } from 'react-native-gesture-handler';
 import {
     useAnimatedReaction,
     useSharedValue,
-    withTiming,
     type SharedValue,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
@@ -24,6 +23,23 @@ export const getPositionWl = function (
   return (position - focalX) * scale + focalX + offsetX;
 };
 
+/**
+ * Offset range keeping the content edges pinned to the viewport:
+ * leftBound (position 0) <= startOffset and rightBound (position width)
+ * >= width + startOffset. Collapses to [startOffset, startOffset] at scale 1.
+ */
+export const getOffsetBoundsWl = function (
+  width: number,
+  startOffset: number,
+  focalX: number,
+  scale: number
+): [min: number, max: number] {
+  'worklet';
+  const maxOffset = startOffset + focalX * (scale - 1);
+  const minOffset = startOffset + (1 - scale) * (width - focalX);
+  return [minOffset, maxOffset];
+};
+
 export type AxisGestureProps = {
   width: number;
   startOffset?: number;
@@ -55,6 +71,8 @@ export const useScalableGesture = (props: AxisGestureProps): ScalableGesture =>
   // For panning
   const offsetX = useSharedValue(startOffset);
   const lastOffsetX = useSharedValue(startOffset);
+  // Pinch pivot bookkeeping (see pinchGesture)
+  const needsPivot = useSharedValue(true);
 
   const reset = useCallback(() => {
     scale.value = startScale;
@@ -74,54 +92,85 @@ export const useScalableGesture = (props: AxisGestureProps): ScalableGesture =>
     startScale,
   ]);
 
-  const panGesture = Gesture.Pan()
-    .onUpdate((event) => {
-      const newOffsetX = lastOffsetX.value + event.translationX;
-      offsetX.value = newOffsetX;
-    })
-    .onEnd(() => {
-      lastScale.value = scale.value;
-      lastFocalX.value = focalX.value;
-
-      const leftBound = getPositionWl(
-        0,
-        focalX.value,
-        scale.value,
-        offsetX.value
-      );
-      const rightBound = getPositionWl(
-        width,
-        focalX.value,
-        scale.value,
-        offsetX.value
-      );
-
-      let newOffset;
-
-      if (leftBound > startOffset) {
-        newOffset = offsetX.value - leftBound + startOffset;
-      } else if (rightBound < width + startOffset) {
-        newOffset = offsetX.value + width - rightBound + startOffset;
-      } else {
-        newOffset = offsetX.value;
-      }
+  // Memoized: handing a new gesture instance to GestureDetector mid-gesture
+  // resets the active pan and makes the chart jump
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        // Single-finger only: two fingers belong to the pinch, whose focal
+        // rebase would otherwise fight the pan over offsetX
+        .maxPointers(1)
+        // Incremental deltas (changeX) with a live clamp keep the content
+        // edges pinned: no overscroll, no snap-back to interrupt
+        .onChange((event) => {
+          const [minOffset, maxOffset] = getOffsetBoundsWl(
+            width,
+            startOffset,
+            focalX.value,
+            scale.value
+          );
+          offsetX.value = clamp(
+            offsetX.value + event.changeX,
+            minOffset,
+            maxOffset
+          );
+        })
+        .onEnd(() => {
+          lastScale.value = scale.value;
+          lastFocalX.value = focalX.value;
+          lastOffsetX.value = offsetX.value;
+        }),
+    [focalX, lastFocalX, lastOffsetX, lastScale, offsetX, scale, startOffset, width]
+  );
 
-      offsetX.value = withTiming(newOffset, { duration: 300 });
-      lastOffsetX.value = newOffset;
-    });
-
-  const pinchGesture = Gesture.Pinch()
-    .onUpdate((event) => {
-      // Rebase offsetX so moving the focal point doesn't shift the content
-      offsetX.value += (focalX.value - event.focalX) * (1 - scale.value);
-      focalX.value = event.focalX;
-      scale.value = clamp(lastScale.value * event.scale, 1, Infinity);
-    })
-    .onEnd(() => {
-      lastScale.value = scale.value;
-      lastFocalX.value = focalX.value;
-      lastOffsetX.value = offsetX.value;
-    });
+  const pinchGesture = useMemo(
+    () =>
+      Gesture.Pinch()
+        .onStart(() => {
+          needsPivot.value = true;
+        })
+        .onUpdate((event) => {
+          // The pinch can keep firing in the single-finger tail of the
+          // gesture, tracking the remaining finger as its focal: ignore it
+          // (numberOfPointers is missing on web — let those through)
+          if ((event.numberOfPointers ?? 2) < 2) {
+            needsPivot.value = true;
+            return;
+          }
+          const prevScale = scale.value;
+          const newScale = clamp(lastScale.value * event.scale, 1, Infinity);
+          if (needsPivot.value) {
+            // New pivot: rebase offsetX so re-anchoring under the fingers
+            // doesn't shift the content
+            const rebased =
+              offsetX.value + (focalX.value - event.focalX) * (1 - prevScale);
+            offsetX.value = (rebased * newScale) / prevScale;
+            needsPivot.value = false;
+          } else {
+            // Keep the content glued to both fingers: the offset follows the
+            // focal translation and rescales with the zoom
+            offsetX.value =
+              (event.focalX - focalX.value + offsetX.value / prevScale) *
+              newScale;
+          }
+          focalX.value = event.focalX;
+          scale.value = newScale;
+          // Zooming moves the bounds: keep the content edges pinned
+          const [minOffset, maxOffset] = getOffsetBoundsWl(
+            width,
+            startOffset,
+            focalX.value,
+            scale.value
+          );
+          offsetX.value = clamp(offsetX.value, minOffset, maxOffset);
+        })
+        .onEnd(() => {
+          lastScale.value = scale.value;
+          lastFocalX.value = focalX.value;
+          lastOffsetX.value = offsetX.value;
+        }),
+    [focalX, lastFocalX, lastOffsetX, lastScale, needsPivot, offsetX, scale, startOffset, width]
+  );
 
   return {
     scale,
@@ -143,6 +192,14 @@ export const useUpdateAxis = function (props: UpdateAxisProps) {
   const { scale, scales, onScaleChange } = props;
   const currentIndex = useSharedValue(0);
 
+  // Stable dispatcher so an inline onScaleChange doesn't re-register the
+  // reaction (and disturb the UI thread) on every render
+  const onScaleChangeRef = useRef(onScaleChange);
+  onScaleChangeRef.current = onScaleChange;
+  const dispatchScaleChange = useCallback((index: number) => {
+    onScaleChangeRef.current?.(index);
+  }, []);
+
   useAnimatedReaction(
     () => scale.value,
     (currentScale, _) => {
@@ -158,11 +215,12 @@ export const useUpdateAxis = function (props: UpdateAxisProps) {
           currentIndex.value !== i
         ) {
           currentIndex.value = i;
-          if (onScaleChange !== undefined) scheduleOnRN(onScaleChange, i);
+          scheduleOnRN(dispatchScaleChange, i);
           break;
         }
       }
-    }
+    },
+    [scales, dispatchScaleChange]
   );
 
   return { currentIndex };
@@ -219,25 +277,28 @@ export const useCursorGesture = function (props: UseCursorGestureProps) {
   const xPosition = useSharedValue(0);
   const yPosition = useSharedValue(height);
 
-  const setPosition = (x: number, y: number) => {
-    'worklet';
-    yPosition.value = clamp(y, 0, height);
-    if (isContinuous || points === undefined) {
-      xPosition.value = clamp(x, 0, width);
-      return;
-    }
-    const _closestDot = getClosestPoint(clamp(x, 0, width), points.value);
-    if (closestDataPoint !== undefined) closestDataPoint.value = _closestDot;
-    xPosition.value = _closestDot.x;
-  };
-
-  const panGesture = Gesture.Pan()
-    .onBegin((event) => setPosition(event.x, event.y))
-    .onUpdate((event) => setPosition(event.x, event.y));
-
-  const tapGesture = Gesture.Tap().onBegin((event) =>
-    setPosition(event.x, event.y)
-  );
+  // Memoized: a new gesture instance on every render can reset an active pan
+  const { panGesture, tapGesture } = useMemo(() => {
+    const setPosition = (x: number, y: number) => {
+      'worklet';
+      yPosition.value = clamp(y, 0, height);
+      if (isContinuous || points === undefined) {
+        xPosition.value = clamp(x, 0, width);
+        return;
+      }
+      const _closestDot = getClosestPoint(clamp(x, 0, width), points.value);
+      if (closestDataPoint !== undefined) closestDataPoint.value = _closestDot;
+      xPosition.value = _closestDot.x;
+    };
+    return {
+      panGesture: Gesture.Pan()
+        .onBegin((event) => setPosition(event.x, event.y))
+        .onUpdate((event) => setPosition(event.x, event.y)),
+      tapGesture: Gesture.Tap().onBegin((event) =>
+        setPosition(event.x, event.y)
+      ),
+    };
+  }, [width, height, isContinuous, points, closestDataPoint, xPosition, yPosition]);
 
   // Re-snap the cursor when the data points change (e.g. switching graphs)
   useAnimatedReaction(

package/src/Charts/graphUtils.ts

@@ -3,16 +3,23 @@ import {
   Skia,
   type PathCommand,
   type SkPath,
-} from '@shopify/react-native-skia';
+} from 'react-native-skia';
+import { useMemo, useRef } from 'react';
 import { scaleLinear, type ScaleLinear } from 'd3-scale';
 import * as shape from 'd3-shape';
 import {
   useAnimatedReaction,
+  useSharedValue,
   withTiming,
   type SharedValue,
 } from 'react-native-reanimated';
 import { getPositionWl } from './gesture';
-import { getYForX } from './maths';
+import {
+  commandsToBezier,
+  findBezierIndex,
+  getYBeyondPathEnds,
+  getYOnBezier,
+} from './maths';
 import type { AnimatedDot, DataPoint } from './types';
 
 export type BuildGraphConfig = {
@@ -47,12 +54,23 @@ export const buildGraph = function (
   if (data.length === 0)
     throw new Error('buildGraph requires at least one data point');
 
-  const minX = config?.minX ?? Math.min(...data.map((d) => d[0]));
-  const maxX = config?.maxX ?? Math.max(...data.map((d) => d[0]));
+  // Loops rather than Math.min(...data): spreading a long series can exceed the engine's argument limit
+  let dataMinX = Infinity;
+  let dataMaxX = -Infinity;
+  let dataMinY = Infinity;
+  let dataMaxY = -Infinity;
+  for (const [x, y] of data) {
+    if (x < dataMinX) dataMinX = x;
+    if (x > dataMaxX) dataMaxX = x;
+    if (y < dataMinY) dataMinY = y;
+    if (y > dataMaxY) dataMaxY = y;
+  }
+  const minX = config?.minX ?? dataMinX;
+  const maxX = config?.maxX ?? dataMaxX;
   const scaleX = scaleLinear().domain([minX, maxX]).range([0, width]);
 
-  const minY = config?.minY ?? Math.min(...data.map((d) => d[1]));
-  const maxY = config?.maxY ?? Math.max(...data.map((d) => d[1]));
+  const minY = config?.minY ?? dataMinY;
+  const maxY = config?.maxY ?? dataMaxY;
   const scaleY = scaleLinear().domain([minY, maxY]).range([height, 0]);
 
   const path = shape
@@ -173,18 +191,39 @@ export const useDotsTransition = function (props: UseDotAnimationProps) {
     translateWl = defaultTranslateTransitionWl,
   } = props;
 
+  // Normalized once per path change, not per dot per frame
+  const commands = useSharedValue<PathCommand[]>([]);
+  const visibleCount = useSharedValue(0);
+  // Bumped when the data or the dots are replaced, so they get retargeted
+  // even if the graph index is unchanged
+  const generationRef = useRef(0);
+  const generation = useMemo(
+    () => (generationRef.current += 1),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dataPoints, dots]
+  );
+
+  // Retarget on graph or data change only: re-assigning x while it animates
+  // would restart the animation every frame
   useAnimatedReaction(
     () => ({
       _currentGraph: currentGraph.value,
-      _currentCommands: path.value.toCmds(),
-      // Track the animating x values so y stays glued to the curve
-      // even when the path is swapped instantly or tweens on another duration
-      _xs: dots.map((d) => d.x.value),
+      _path: path.value,
+      _generation: generation,
     }),
-    ({ _currentGraph, _currentCommands }) => {
+    ({ _currentGraph, _path, _generation }, previous) => {
+      commands.value = commandsToBezier(_path.toCmds());
+      if (
+        previous !== null &&
+        previous._currentGraph === _currentGraph &&
+        previous._generation === _generation
+      )
+        return;
+
       const newDataPoints = dataPoints[_currentGraph];
       if (newDataPoints === undefined)
         throw new Error('Data points cannot be undefined');
+      visibleCount.value = newDataPoints.length;
       dots.forEach((_dot, i) => {
         const _newDot = newDataPoints[i];
         if (!_newDot) {
@@ -192,12 +231,35 @@ export const useDotsTransition = function (props: UseDotAnimationProps) {
           return;
         }
         _dot.x.value = translateWl(_newDot.x);
-        const newY = getYForX(_currentCommands, _dot.x.value);
-        if (newY !== undefined) {
-          _dot.y.value = newY;
-        }
         _dot.opacity.value = opacityWl(1);
       });
-    }
+    },
+    // Explicit deps: without them the reaction re-registers and re-fires on
+    // every parent render, restarting every dot animation on the UI thread
+    [currentGraph, path, dataPoints, dots, opacityWl, translateWl, generation]
+  );
+
+  // Keep y glued to the curve while x animates or the path tweens
+  useAnimatedReaction(
+    () => ({ _cmds: commands.value, _xs: dots.map((d) => d.x.value) }),
+    ({ _cmds, _xs }) => {
+      const count = Math.min(visibleCount.value, dots.length);
+      // Dots are in x order, so one forward walk over the segments serves them all
+      let segment = 0;
+      for (let i = 0; i < count; i++) {
+        const x = _xs[i]!;
+        let index = findBezierIndex(_cmds, x, segment);
+        if (index === -1 && segment > 1) index = findBezierIndex(_cmds, x);
+        let newY: number | undefined;
+        if (index === -1) {
+          newY = getYBeyondPathEnds(_cmds, x);
+        } else {
+          segment = index;
+          newY = getYOnBezier(_cmds, index, x);
+        }
+        if (newY !== undefined) dots[i]!.y.value = newY;
+      }
+    },
+    [dots]
   );
 };

package/src/Charts/index.tsx

@@ -1,11 +1,18 @@
 export { AxisLine, BottomAxis, Tick } from './BottomAxis';
 export type {
   AxisLineProps,
+  AxisTick,
   BottomAxisProps,
   TickProps,
 } from './BottomAxis';
 export { Cursor } from './Cursor';
 export type { CursorProps } from './Cursor';
+export { Dot } from './Dot';
+export type { DotProps } from './Dot';
+export { Dots } from './Dots';
+export type { DotShape, DotsProps } from './Dots';
+export { YAxis, getPaddedTicks } from './YAxis';
+export type { YAxisProps } from './YAxis';
 export { LineChart } from './Linechart';
 export type { LineChartProps, LinePath } from './Linechart';
 export { ScalablePath, ZoomableLineChart } from './ZoomableLinechart';
@@ -15,6 +22,7 @@ export type {
 } from './ZoomableLinechart';
 export {
   getClosestPoint,
+  getOffsetBoundsWl,
   getPositionWl,
   useCursorGesture,
   useScalableGesture,
@@ -44,6 +52,7 @@ export {
   commandsToBezier,
   cubicBezierYForX,
   getYForX,
+  getYForXOnBeziers,
   magnitude,
   normalize,
   selectCurve,

package/src/Charts/maths.ts

@@ -2,8 +2,8 @@ import type {
   PathCommand,
   SkPoint,
   Vector,
-} from '@shopify/react-native-skia';
-import { PathVerb, vec } from '@shopify/react-native-skia';
+} from 'react-native-skia';
+import { PathVerb } from 'react-native-skia';
 
 // code from William Candillon
 
@@ -155,7 +155,10 @@ export const selectCurve = (
 ): Cubic | undefined => {
   'worklet';
 
-  let from: Vector = vec(0, 0);
+  // Plain numbers while scanning: vec() allocates a JSI host object, which
+  // dominated the UI thread when called per dot per frame
+  let fromX = 0;
+  let fromY = 0;
   for (let i = 0; i < cmds.length; i++) {
     const cmd = cmds[i];
     if (cmd == null) {
@@ -163,20 +166,21 @@ export const selectCurve = (
     }
 
     if (cmd[0] === PathVerb.Move) {
-      from = vec(cmd[1], cmd[2]);
+      fromX = cmd[1]!;
+      fromY = cmd[2]!;
     } else if (cmd[0] === PathVerb.Cubic) {
-      const c1 = vec(cmd[1], cmd[2]);
-      const c2 = vec(cmd[3], cmd[4]);
-      const to = vec(cmd[5], cmd[6]);
-      if (x >= from.x && x <= to.x) {
+      const toX = cmd[5]!;
+      const toY = cmd[6]!;
+      if (x >= fromX && x <= toX) {
         return {
-          from,
-          c1,
-          c2,
-          to,
+          from: { x: fromX, y: fromY },
+          c1: { x: cmd[1]!, y: cmd[2]! },
+          c2: { x: cmd[3]!, y: cmd[4]! },
+          to: { x: toX, y: toY },
         };
       }
-      from = to;
+      fromX = toX;
+      fromY = toY;
     }
   }
 
@@ -229,13 +233,100 @@ export const getYForX = (
   precision = 2
 ): number | undefined => {
   'worklet';
-  const cmdsNorm = commandsToBezier(cmds);
-  const c = selectCurve(cmdsNorm, x);
+  const c = selectCurve(commandsToBezier(cmds), x);
   if (c == null) return undefined;
-
   return cubicBezierYForX(x, c.from, c.c1, c.c2, c.to, precision);
 };
 
+/**
+ * Index of the cubic whose x range contains `x`, scanning from `start`; -1 if none.
+ * `cmds` must come from {@link commandsToBezier}.
+ */
+export const findBezierIndex = (
+  cmds: PathCommand[],
+  x: number,
+  start = 0
+): number => {
+  'worklet';
+  for (let i = Math.max(start, 1); i < cmds.length; i++) {
+    const cmd = cmds[i]!;
+    if (cmd[0] !== PathVerb.Cubic) continue;
+    const prev = cmds[i - 1]!;
+    const fromX = prev[prev.length - 2]!;
+    if (x >= fromX && x <= cmd[5]!) return i;
+  }
+  return -1;
+};
+
+const EPSILON = 1e-6;
+
+/** y of the cubic at `cmds[index]` for `x`, without allocating; undefined when x has no t in [0, 1]. */
+export const getYOnBezier = (
+  cmds: PathCommand[],
+  index: number,
+  x: number
+): number | undefined => {
+  'worklet';
+  const prev = cmds[index - 1]!;
+  const cmd = cmds[index]!;
+  const x0 = prev[prev.length - 2]!;
+  const y0 = prev[prev.length - 1]!;
+  const x1 = cmd[1]!;
+  const y1 = cmd[2]!;
+  const x2 = cmd[3]!;
+  const y2 = cmd[4]!;
+  const x3 = cmd[5]!;
+  const y3 = cmd[6]!;
+
+  // commandsToBezier turns lines into cubics with c1 = from and c2 = to
+  if (x1 === x0 && y1 === y0 && x2 === x3 && y2 === y3) {
+    return x3 === x0 ? y0 : y0 + ((y3 - y0) * (x - x0)) / (x3 - x0);
+  }
+  // A vertical curve has no single y for x: use its start, like a vertical line
+  if (x0 === x1 && x1 === x2 && x2 === x3) return y0;
+
+  const roots = solveCubic(
+    -x0 + 3 * x1 - 3 * x2 + x3,
+    3 * x0 - 6 * x1 + 3 * x2,
+    -3 * x0 + 3 * x1,
+    x0 - x
+  );
+  for (let i = 0; i < roots.length; i++) {
+    const t = roots[i]!;
+    if (t >= -EPSILON && t <= 1 + EPSILON) {
+      return cubicSolve(Math.min(1, Math.max(0, t)), y0, y1, y2, y3);
+    }
+  }
+  return undefined;
+};
+
+/**
+ * y of the path's start when `x` is left of it, of its end when right of it, else undefined.
+ * Endpoints are stored as float32, so a point's exact x can fall a hair outside the path.
+ */
+export const getYBeyondPathEnds = (
+  cmds: PathCommand[],
+  x: number
+): number | undefined => {
+  'worklet';
+  const first = cmds[0];
+  const last = cmds[cmds.length - 1];
+  if (first === undefined || last === undefined) return undefined;
+  if (x < first[1]!) return first[2];
+  if (x > last[last.length - 2]!) return last[last.length - 1];
+  return undefined;
+};
+
+/** Same as {@link getYForX} for commands already passed through {@link commandsToBezier}. */
+export const getYForXOnBeziers = (
+  cmds: PathCommand[],
+  x: number
+): number | undefined => {
+  'worklet';
+  const index = findBezierIndex(cmds, x);
+  return index === -1 ? undefined : getYOnBezier(cmds, index, x);
+};
+
 // See Path/getPath2D
 
 export const magnitude = (p: SkPoint): number =>