@obitrain/charts 0.10.3 → 0.11.0

package/src/Charts/Dots.tsx

@@ -0,0 +1,96 @@
+import { Path, Skia, type Color } from '@shopify/react-native-skia';
+import { type FC } from 'react';
+import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
+import { getPositionWl } from './gesture';
+import type { AnimatedDot } from './types';
+
+export type DotShape = 'circle' | 'diamond';
+
+export type DotsProps = {
+  dots: AnimatedDot[];
+  r?: number;
+  shape?: DotShape;
+  color?: Color;
+  /** When set, dots are drawn as rings: `fillColor` inside, `color` as the stroke. */
+  fillColor?: Color;
+  strokeWidth?: number;
+  /** Viewport width used to cull off-screen dots. */
+  width?: number;
+  // Optional zoom/pan awareness (see useScalableGesture)
+  scale?: SharedValue<number>;
+  focalX?: SharedValue<number>;
+  offsetX?: SharedValue<number>;
+};
+
+/**
+ * Draw a whole series of dots as a single Skia path (two with `fillColor`).
+ * Unlike mapping over {@link Dot}, this runs one worklet per frame instead of
+ * one per dot, which keeps large series smooth during zoom/pan gestures.
+ * Per-dot opacity is binary here: dots below 0.5 are hidden.
+ */
+const Dots: FC<DotsProps> = function (props) {
+  const {
+    dots,
+    r = 4,
+    shape = 'circle',
+    color = 'black',
+    fillColor,
+    strokeWidth = 2,
+    width,
+    scale,
+    focalX,
+    offsetX,
+  } = props;
+
+  const path = useDerivedValue(() => {
+    const p = Skia.Path.Make();
+    const margin = r + strokeWidth;
+    for (const dot of dots) {
+      if (dot.opacity.value < 0.5) continue;
+      const x =
+        scale === undefined || focalX === undefined || offsetX === undefined
+          ? dot.x.value
+          : getPositionWl(
+              dot.x.value,
+              focalX.value,
+              scale.value,
+              offsetX.value
+            );
+      if (width !== undefined && (x < -margin || x > width + margin)) continue;
+      const y = dot.y.value;
+      if (shape === 'diamond') {
+        // One addPoly beats four moveTo/lineTo calls: each is a JSI hop, and
+        // this worklet rebuilds every dot on every frame of a gesture
+        p.addPoly(
+          [
+            { x, y: y - r },
+            { x: x + r, y },
+            { x, y: y + r },
+            { x: x - r, y },
+          ],
+          true
+        );
+      } else {
+        p.addCircle(x, y, r);
+      }
+    }
+    return p;
+  });
+
+  return (
+    <>
+      <Path path={path} color={fillColor ?? color} />
+      {fillColor !== undefined ? (
+        <Path
+          path={path}
+          style="stroke"
+          color={color}
+          strokeWidth={strokeWidth}
+          strokeJoin="round"
+        />
+      ) : null}
+    </>
+  );
+};
+
+export { Dots };

package/src/Charts/YAxis.tsx

@@ -0,0 +1,96 @@
+import {
+  Group,
+  Line,
+  Text,
+  vec,
+  type Color,
+  type SkFont,
+} from '@shopify/react-native-skia';
+import { type FC } from 'react';
+import { StyleSheet } from 'react-native';
+
+export type YAxisProps = {
+  width: number;
+  height: number;
+  font: SkFont;
+  minY: number;
+  maxY: number;
+  /** Values to draw a gridline at. Defaults to `nbTicks` evenly spaced values. */
+  values?: number[];
+  nbTicks?: number;
+  color?: Color;
+  labelColor?: Color;
+  strokeWidth?: number;
+  showLabels?: boolean;
+  formatLabel?: (value: number) => string;
+};
+
+const defaultFormatLabel = (value: number) => `${Math.round(value)}`;
+
+/** Evenly spaced integer ticks from 0 to a padded maximum, e.g. 0, 26, 52, 78, 104. */
+export const getPaddedTicks = function (
+  maxValue: number,
+  nbTicks = 4,
+  padding = 1.15
+): number[] {
+  const step = Math.max(1, Math.ceil((maxValue * padding) / nbTicks));
+  return Array.from({ length: nbTicks + 1 }, (_, i) => i * step);
+};
+
+const YAxis: FC<YAxisProps> = function (props) {
+  const {
+    width,
+    height,
+    font,
+    minY,
+    maxY,
+    nbTicks = 4,
+    color = 'black',
+    labelColor,
+    strokeWidth = StyleSheet.hairlineWidth,
+    showLabels = true,
+    formatLabel = defaultFormatLabel,
+  } = props;
+
+  const values =
+    props.values ??
+    Array.from(
+      { length: nbTicks },
+      (_, i) => minY + ((i + 1) * (maxY - minY)) / nbTicks
+    );
+
+  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}
+            />
+            {showLabels ? (
+              <Text
+                text={label}
+                x={width - labelWidth}
+                y={font.getSize() / 2.5}
+                font={font}
+                color={labelColor ?? color}
+              />
+            ) : null}
+          </Group>
+        );
+      })}
+    </Group>
+  );
+};
+
+export { YAxis };

package/src/Charts/ZoomableLinechart/ScalablePath.tsx

@@ -8,7 +8,7 @@ export type ScalablePathProps = {
   focalX: SharedValue<number>;
   offsetX: SharedValue<number>;
   color?: string;
-  pathProps?: Omit<React.ComponentProps<typeof Path>, 'color'>;
+  pathProps?: Omit<React.ComponentProps<typeof Path>, 'color' | 'path'>;
 };
 
 const ScalablePath: FC<ScalablePathProps> = function (props) {

package/src/Charts/gesture.ts

@@ -1,10 +1,9 @@
 import { clamp } from '@shopify/react-native-skia';
-import { useCallback } from 'react';
+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 };

package/src/Charts/graphUtils.ts

@@ -198,6 +198,9 @@ export const useDotsTransition = function (props: UseDotAnimationProps) {
         }
         _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]
   );
 };

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,