@obitrain/charts 0.9.2

package/src/Charts/gesture.ts

@@ -0,0 +1,254 @@
+import { clamp } from '@shopify/react-native-skia';
+import { useCallback } from 'react';
+import { Gesture, type PanGesture, type PinchGesture } from 'react-native-gesture-handler';
+import {
+    runOnJS,
+    useAnimatedReaction,
+    useDerivedValue,
+    useSharedValue,
+    withTiming,
+    type SharedValue,
+} from 'react-native-reanimated';
+import type { DataPoint } from './types';
+
+/**
+ * Get the position of a point on the axis,
+ * given the current focal, scale and offset
+ */
+export const getPositionWl = function (
+  position: number,
+  focalX: number,
+  scale: number,
+  offsetX: number
+) {
+  'worklet';
+  return (position - focalX) * scale + focalX + offsetX;
+};
+
+export type AxisGestureProps = {
+  width: number;
+  startOffset?: number;
+  startScale?: number;
+};
+
+export type ScalableGesture = {
+    scale: SharedValue<number>;
+    focalX: SharedValue<number>;
+    pinchGesture: PinchGesture;
+    panGesture: PanGesture;
+    offsetX: SharedValue<number>;
+    reset: () => void;
+};
+
+/**
+ * Return utilities for zooming and panning the axis
+ */
+export const useScalableGesture = (props: AxisGestureProps): ScalableGesture => {
+  const { width } = props;
+  const startOffset = props.startOffset ?? 0;
+  const startScale = props.startScale ?? 1;
+  // For zooming
+  const scale = useSharedValue(startScale);
+  const lastScale = useSharedValue(startScale);
+  const focalX = useSharedValue(0);
+  const lastFocalX = useSharedValue(0);
+
+  // For panning
+  const offsetX = useSharedValue(startOffset);
+  const lastOffsetX = useSharedValue(startOffset);
+
+  const reset = useCallback(() => {
+    scale.value = startScale;
+    lastScale.value = startScale;
+    focalX.value = 0;
+    lastFocalX.value = 0;
+    offsetX.value = startOffset;
+    lastOffsetX.value = startOffset;
+  }, [
+    focalX,
+    lastFocalX,
+    lastOffsetX,
+    lastScale,
+    offsetX,
+    scale,
+    startOffset,
+    startScale,
+  ]);
+
+  const animateFocalPoint = (newFocalX: number) => {
+    'worklet';
+    focalX.value = withTiming(newFocalX, { duration: 300 }); // Smooth transition with duration
+  };
+
+  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) {
+        // console.log(`Left Boundary reached`);
+        newOffset = offsetX.value - leftBound + startOffset;
+      } else if (rightBound < width) {
+        // console.log(`Right Boundary reached`);
+        newOffset = offsetX.value + width - rightBound + startOffset;
+      } else {
+        newOffset = offsetX.value;
+      }
+      if (newOffset === undefined) throw new Error('newOffset is undefined');
+
+      offsetX.value = withTiming(newOffset, { duration: 300 });
+      lastOffsetX.value = newOffset;
+    });
+
+  const pinchGesture = Gesture.Pinch()
+    .onUpdate((event) => {
+      const newScale = lastScale.value * event.scale;
+      scale.value = clamp(newScale, 1, Infinity); // Clamp the scale value
+      animateFocalPoint(event.focalX);
+    })
+    .onEnd(() => {
+      lastScale.value = scale.value;
+      lastFocalX.value = focalX.value;
+    });
+
+  return {
+    scale,
+    focalX,
+    pinchGesture,
+    panGesture,
+    offsetX,
+    reset,
+  };
+};
+
+export type UpdateAxisProps = {
+  scale: SharedValue<number>;
+  scales: number[];
+  onScaleChange?: (index: number) => void;
+};
+
+export const useUpdateAxis = function (props: UpdateAxisProps) {
+  const { scale, scales, onScaleChange } = props;
+  const currentIndex = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => scale.value,
+    (currentScale, _) => {
+      for (let i = 0; i < scales.length; i++) {
+        const _prevScale = scales[i - 1] ?? 0;
+        const _curScale = scales[i];
+        if (_curScale === undefined || _prevScale === undefined)
+          throw new Error('Got undefined scale');
+
+        if (
+          currentScale >= _prevScale &&
+          currentScale < _curScale &&
+          currentIndex.value !== i
+        ) {
+          currentIndex.value = i;
+          if (onScaleChange !== undefined) runOnJS(onScaleChange)(i);
+          break;
+        }
+      }
+    },
+    []
+  );
+
+  return { currentIndex };
+};
+
+export type UseCursorGestureProps = {
+  width: number;
+  height: number;
+  points?: SharedValue<DataPoint[]>;
+  closestDataPoint?: SharedValue<DataPoint>;
+  isContinuous?: boolean;
+};
+
+/**
+ * Get the closest point for a given x value
+ */
+export const getClosestPoint = function (
+  x: number,
+  dataPoints: DataPoint[]
+): DataPoint {
+  'worklet';
+  let closestPoint = dataPoints[0];
+  if (closestPoint === undefined)
+    throw new Error('dataPoints array cannot be empty');
+
+  let minDistance = Math.abs(x - closestPoint.x);
+  for (let i = 1; i < dataPoints.length; i++) {
+    const point = dataPoints[i];
+    if (point === undefined) throw new Error('Point cannot be undefined');
+    const distance = Math.abs(x - point.x);
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestPoint = point;
+    }
+  }
+  return closestPoint;
+};
+
+/**
+ * Get gesture utilities for the cursor
+ */
+export const useCursorGesture = function (props: UseCursorGestureProps) {
+  const {
+    width,
+    height,
+    points,
+    closestDataPoint,
+    isContinuous = true,
+  } = props;
+
+  const xPosition = useSharedValue(0);
+  const yPosition = useSharedValue(height); // GRAPH_HEIGHT
+
+  const panGesture = Gesture.Pan()
+    .onBegin((event) => {
+      xPosition.value = clamp(event.x, 0, width);
+      yPosition.value = clamp(event.y, 0, height);
+    })
+    .onUpdate((event) => {
+      xPosition.value = clamp(event.x, 0, width);
+      yPosition.value = clamp(event.y, 0, height);
+    });
+
+  const tapGesture = Gesture.Tap().onBegin((event) => {
+    xPosition.value = clamp(event.x, 0, width);
+    yPosition.value = clamp(event.y, 0, height);
+  });
+
+  useDerivedValue(() => {
+    if (isContinuous) return;
+    if (points === undefined) {
+      console.warn('Points must be defined for non-continuous mode');
+      return;
+    }
+    const _closestDot = getClosestPoint(xPosition.value, points.value);
+    if (closestDataPoint !== undefined) closestDataPoint.value = _closestDot;
+    xPosition.value = _closestDot.x;
+  }, [xPosition, isContinuous]);
+
+  return { panGesture, tapGesture, xPosition, yPosition };
+};

package/src/Charts/graphUtils.ts

@@ -0,0 +1,198 @@
+import {
+  PathVerb,
+  Skia,
+  type PathCommand,
+  type SkPath,
+} from '@shopify/react-native-skia';
+import { scaleLinear, type ScaleLinear } from 'd3-scale';
+import * as shape from 'd3-shape';
+import {
+  useAnimatedReaction,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { getPositionWl } from './gesture';
+import { getYForX } from './maths';
+import type { AnimatedDot, DataPoint } from './types';
+
+export type Config = {
+  minX?: number;
+  maxX?: number;
+  minY?: number;
+  maxY?: number;
+  // See https://d3js.org/d3-shape/curve
+  curve?: shape.CurveFactory | shape.CurveFactoryLineOnly;
+};
+
+export type GraphData = {
+  data: [number, number][];
+  minY: number;
+  maxY: number;
+  path: string;
+  skiaPath: SkPath;
+  dataPoints: DataPoint[];
+  scaleX: ScaleLinear<number, number, never>;
+  scaleY: ScaleLinear<number, number, never>;
+};
+
+export const buildGraph = function (
+  data: [number, number][],
+  width: number,
+  height: number,
+  config?: Config
+): GraphData {
+  const minX = config?.minX ?? Math.min(...data.map((x) => x[0]));
+  const maxX = config?.maxX ?? Math.max(...data.map((x) => x[0]));
+  const scaleX = scaleLinear().domain([minX, maxX]).range([0, width]);
+
+  const minY = config?.minY ?? Math.min(...data.map((x) => x[1]));
+  const maxY = config?.maxY ?? Math.max(...data.map((x) => x[1]));
+  const scaleY = scaleLinear().domain([minY, maxY]).range([height, 0]);
+
+  const fmtValues = data.map((x) => [x[1], x[0]] as [number, number]);
+
+  const path = shape
+    .line()
+    .x(([, x]) => scaleX(x))
+    .y(([y]) => scaleY(y))
+    .curve(config?.curve ?? shape.curveBasis)(fmtValues) as string;
+
+  const dataPoints = fmtValues.map(([y, x]) => ({
+    x: scaleX(x),
+    y: scaleY(y),
+    value: y,
+  }));
+
+  const skiaPath = Skia.Path.MakeFromSVGString(path);
+  if (skiaPath == null) throw new Error('Path not found');
+
+  return {
+    data: fmtValues,
+    minY,
+    maxY,
+    path,
+    dataPoints,
+    skiaPath,
+    scaleX,
+    scaleY,
+  };
+};
+
+/**
+ * For now, only support commands of type:
+ * - PathVerb.Move
+ * - PathVerb.Cubic
+ * - PathVerb.Quad
+ * - PathVerb.Line
+ */
+export const scaleCommands = function (
+  commands: PathCommand[],
+  scaleX: SharedValue<number>,
+  focalX: SharedValue<number>,
+  offsetX: SharedValue<number>,
+  scaleY?: SharedValue<number>
+): PathCommand[] {
+  'worklet';
+  const _scaleY = scaleY ? scaleY.value : 1;
+  return commands.map((command) => {
+    const commandType = command[0];
+    if (commandType === undefined)
+      throw new Error('Got undefined command type');
+
+    if (commandType === PathVerb.Line) {
+      return [
+        commandType,
+        getPositionWl(command[1]!, focalX.value, scaleX.value, offsetX.value),
+        command[2]! * _scaleY,
+      ];
+    }
+    if (commandType === PathVerb.Move) {
+      return [
+        commandType,
+        getPositionWl(command[1]!, focalX.value, scaleX.value, offsetX.value),
+        command[2]! * _scaleY,
+      ];
+    }
+    if (commandType === PathVerb.Quad)
+      return [
+        commandType,
+        getPositionWl(command[1]!, focalX.value, scaleX.value, offsetX.value),
+        command[2]! * _scaleY,
+        getPositionWl(command[3]!, focalX.value, scaleX.value, offsetX.value),
+        command[4]! * _scaleY,
+      ];
+    if (commandType === PathVerb.Cubic) {
+      return [
+        commandType,
+        // c1
+        getPositionWl(command[1]!, focalX.value, scaleX.value, offsetX.value),
+        command[2]! * _scaleY,
+        // c2
+        getPositionWl(command[3]!, focalX.value, scaleX.value, offsetX.value),
+        command[4]! * _scaleY,
+        // to
+        getPositionWl(command[5]!, focalX.value, scaleX.value, offsetX.value),
+        command[6]! * _scaleY,
+      ];
+    }
+    if (commandType === PathVerb.Close) return command;
+    if (commandType === PathVerb.Move) return command;
+    throw new Error(`Unsupported command type ${commandType}`);
+  });
+};
+
+export type UseDotAnimationProps = {
+  currentGraph: SharedValue<number>;
+  path: SharedValue<SkPath>;
+  dataPoints: DataPoint[][];
+  dots: AnimatedDot[];
+  opacityWl?: (opacity: number) => number;
+  translateWl?: (position: number) => number;
+};
+
+export const defaultOpacityTransitionWl = function (opacity: number) {
+  'worklet';
+  return withTiming(opacity, { duration: 200 });
+};
+export const defaultTranslateTransitionWl = function (position: number) {
+  'worklet';
+  return withTiming(position, { duration: 1000 });
+};
+
+export const useDotsTransition = function (props: UseDotAnimationProps) {
+  const {
+    currentGraph,
+    path,
+    dataPoints,
+    dots,
+    opacityWl = defaultOpacityTransitionWl,
+    translateWl = defaultTranslateTransitionWl,
+  } = props;
+
+  useAnimatedReaction(
+    () => ({
+      _currentGraph: currentGraph.value,
+      _currentCommands: path.value.toCmds(),
+    }),
+    ({ _currentGraph, _currentCommands }) => {
+      const newDataPoints = dataPoints[_currentGraph];
+      if (newDataPoints === undefined)
+        throw new Error('Data points cannot be undefined');
+      dots.map((_dot, i) => {
+        const _newDot = newDataPoints[i];
+        if (!_newDot) {
+          _dot.opacity.value = opacityWl(0);
+          return;
+        } else {
+          _dot.x.value = translateWl(_newDot.x);
+          const newY = getYForX(_currentCommands, _dot.x.value);
+          if (newY !== undefined) {
+            _dot.y.value = newY;
+          }
+          //   _dot.y.value = withTiming(newDots[i]!.y, { duration: 1000 });
+          _dot.opacity.value = opacityWl(1);
+        }
+      });
+    }
+  );
+};

package/src/Charts/index.tsx

@@ -0,0 +1,32 @@
+export { AxisLine, BottomAxis, Tick } from './BottomAxis';
+export { Cursor } from './Cursor';
+export type { CursorProps } from './Cursor';
+export { LineChart } from './Linechart';
+export type { LineChartProps, LinePath } from './Linechart';
+export { ScalablePath, ZoomableLineChart } from './ZoomableLinechart';
+export type { ZoomableLineChartProps } from './ZoomableLinechart';
+export {
+  getClosestPoint,
+  getPositionWl,
+  useCursorGesture,
+  useScalableGesture,
+  useUpdateAxis,
+} from './gesture';
+export type { UseCursorGestureProps } from './gesture';
+export {
+  buildGraph,
+  defaultOpacityTransitionWl,
+  defaultTranslateTransitionWl,
+  scaleCommands,
+  useDotsTransition,
+} from './graphUtils';
+export type { Config, GraphData, UseDotAnimationProps } from './graphUtils';
+export {
+  commandsToBezier,
+  cubicBezierYForX,
+  getYForX,
+  magnitude,
+  normalize,
+  selectCurve,
+} from './maths';
+export type { AnimatedDot, DataPoint, LineGraphType } from './types';