@obitrain/charts 0.11.0 → 0.12.0

package/src/Charts/Cursor.tsx

@@ -1,7 +1,7 @@
-import { Circle, type PathCommand } from '@shopify/react-native-skia';
-import type { FC } from 'react';
+import { Circle, type PathCommand } from 'react-native-skia';
+import { useEffect, type FC } from 'react';
 import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
-import { getYForX } from './maths';
+import { commandsToBezier, getYForXOnBeziers } from './maths';
 
 const CURSOR_SIZE = 10;
 
@@ -27,16 +27,24 @@ const Cursor: FC<CursorProps> = function ({
   translateY,
   size = CURSOR_SIZE,
 }) {
-  if (currentValue !== undefined && translateY !== undefined) {
-    console.warn('currentValue has no effect when translateY is set');
-  }
+  const conflictingProps = currentValue !== undefined && translateY !== undefined;
+  useEffect(() => {
+    if (conflictingProps)
+      console.warn('currentValue has no effect when translateY is set');
+  }, [conflictingProps]);
 
-  const derivedTranslateY = useDerivedValue(() => {
+  // Normalized once per path change, not on every cursor move
+  const beziers = useDerivedValue(() => {
     const _commands = commands?.value;
-    if (_commands === undefined) {
+    return _commands === undefined ? undefined : commandsToBezier(_commands);
+  });
+
+  const derivedTranslateY = useDerivedValue(() => {
+    const _beziers = beziers.value;
+    if (_beziers === undefined) {
       return 0;
     }
-    const _value = getYForX(_commands, positionX.value) ?? 0;
+    const _value = getYForXOnBeziers(_beziers, positionX.value) ?? 0;
     if (translateY === undefined && currentValue !== undefined) {
       currentValue.value = _value;
     }

package/src/Charts/Dot.tsx

@@ -1,4 +1,4 @@
-import { Circle, Group, type Color } from '@shopify/react-native-skia';
+import { Circle, Group, type Color } from 'react-native-skia';
 import { memo } from 'react';
 import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
 import { getPositionWl } from './gesture';

package/src/Charts/Dots.tsx

@@ -1,4 +1,4 @@
-import { Path, Skia, type Color } from '@shopify/react-native-skia';
+import { Path, Skia, type Color } from 'react-native-skia';
 import { type FC } from 'react';
 import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
 import { getPositionWl } from './gesture';
@@ -43,7 +43,7 @@ const Dots: FC<DotsProps> = function (props) {
   } = props;
 
   const path = useDerivedValue(() => {
-    const p = Skia.Path.Make();
+    const p = Skia.PathBuilder.Make();
     const margin = r + strokeWidth;
     for (const dot of dots) {
       if (dot.opacity.value < 0.5) continue;
@@ -74,7 +74,7 @@ const Dots: FC<DotsProps> = function (props) {
         p.addCircle(x, y, r);
       }
     }
-    return p;
+    return p.build();
   });
 
   return (

package/src/Charts/Linechart/index.tsx

@@ -1,4 +1,4 @@
-import { Canvas, Group, Path, type SkPath } from '@shopify/react-native-skia';
+import { Canvas, Group, Path, type SkPath } from 'react-native-skia';
 import type { FC } from 'react';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';

package/src/Charts/YAxis.tsx

@@ -5,8 +5,8 @@ import {
   vec,
   type Color,
   type SkFont,
-} from '@shopify/react-native-skia';
-import { type FC } from 'react';
+} from 'react-native-skia';
+import { memo, useMemo, type FC } from 'react';
 import { StyleSheet } from 'react-native';
 
 export type YAxisProps = {
@@ -52,45 +52,52 @@ const YAxis: FC<YAxisProps> = function (props) {
     formatLabel = defaultFormatLabel,
   } = props;
 
-  const values =
-    props.values ??
-    Array.from(
-      { length: nbTicks },
-      (_, i) => minY + ((i + 1) * (maxY - minY)) / nbTicks
-    );
+  // Measured once per input change: parents re-render while panning
+  const rows = useMemo(() => {
+    // A flat range would divide by zero
+    const span = maxY - minY || 1;
+    const values =
+      props.values ??
+      Array.from(
+        { length: nbTicks },
+        (_, i) => minY + ((i + 1) * (maxY - minY)) / nbTicks
+      );
+    return values.map((value) => {
+      const label = formatLabel(value);
+      const labelWidth = font
+        .getGlyphWidths(font.getGlyphIDs(label))
+        .reduce((a, b) => a + b, 0);
+      return {
+        label,
+        labelWidth,
+        transform: [{ translateY: height - ((value - minY) * height) / span }],
+        p1: vec(0, 0),
+        p2: vec(showLabels ? width - 10 - labelWidth : width, 0),
+      };
+    });
+  }, [props.values, nbTicks, minY, maxY, height, width, font, showLabels, formatLabel]);
 
   return (
     <Group>
-      {values.map((value, i) => {
-        const y = height - ((value - minY) * height) / (maxY - minY);
-        const label = formatLabel(value);
-        const labelWidth = font
-          .getGlyphWidths(font.getGlyphIDs(label))
-          .reduce((a, b) => a + b, 0);
-        const lineWidth = showLabels ? width - 10 - labelWidth : width;
-
-        return (
-          <Group key={`YTick-${i}`} transform={[{ translateY: y }]}>
-            <Line
-              p1={vec(0, 0)}
-              p2={vec(lineWidth, 0)}
-              color={color}
-              strokeWidth={strokeWidth}
+      {rows.map((row, i) => (
+        <Group key={`YTick-${i}`} transform={row.transform}>
+          <Line p1={row.p1} p2={row.p2} color={color} strokeWidth={strokeWidth} />
+          {showLabels ? (
+            <Text
+              text={row.label}
+              x={width - row.labelWidth}
+              y={font.getSize() / 2.5}
+              font={font}
+              color={labelColor ?? color}
             />
-            {showLabels ? (
-              <Text
-                text={label}
-                x={width - labelWidth}
-                y={font.getSize() / 2.5}
-                font={font}
-                color={labelColor ?? color}
-              />
-            ) : null}
-          </Group>
-        );
-      })}
+          ) : null}
+        </Group>
+      ))}
     </Group>
   );
 };
 
-export { YAxis };
+const MemoYAxis = memo(YAxis);
+MemoYAxis.displayName = 'YAxis';
+
+export { MemoYAxis as YAxis };

package/src/Charts/ZoomableLinechart/ScalablePath.tsx

@@ -1,4 +1,4 @@
-import { Path, Skia, type SkPath } from '@shopify/react-native-skia';
+import { Path, Skia, type SkPath } from 'react-native-skia';
 import { type FC } from 'react';
 import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
 
@@ -16,13 +16,12 @@ const ScalablePath: FC<ScalablePathProps> = function (props) {
 
   const animatedPath = useDerivedValue(() => {
     // Affine equivalent of getPositionWl: x' = scale * x + focalX * (1 - scale) + offsetX
-    const _path = path.value.copy();
-    _path.transform(
-      Skia.Matrix()
-        .translate(focalX.value * (1 - scale.value) + offsetX.value, 0)
-        .scale(scale.value, 1)
-    );
-    return _path;
+    // Plain 3x3 matrix: a Skia.Matrix() would allocate a native object per frame
+    const s = scale.value;
+    const tx = focalX.value * (1 - s) + offsetX.value;
+    return Skia.PathBuilder.MakeFromPath(path.value)
+      .transform([s, 0, tx, 0, 1, 0, 0, 0, 1])
+      .build();
   });
 
   return (

package/src/Charts/ZoomableLinechart/index.tsx

@@ -1,4 +1,4 @@
-import { Canvas, Group, type SkPath } from '@shopify/react-native-skia';
+import { Canvas, Group, type SkPath } from 'react-native-skia';
 import type { FC } from 'react';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';

package/src/Charts/gesture.ts

@@ -1,4 +1,4 @@
-import { clamp } from '@shopify/react-native-skia';
+import { clamp } from 'react-native-skia';
 import { useCallback, useMemo, useRef } from 'react';
 import { Gesture, type PanGesture, type PinchGesture } from 'react-native-gesture-handler';
 import {
@@ -277,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,15 +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]
+    [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

@@ -52,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 =>