@obitrain/charts 0.10.0 → 0.10.3

package/package.json

@@ -1,12 +1,26 @@
 {
   "name": "@obitrain/charts",
-  "version": "0.10.0",
+  "version": "0.10.3",
   "description": "Charting library for React Native",
-  "main": "lib/commonjs/index",
-  "module": "lib/module/index",
-  "types": "lib/typescript/src/index.d.ts",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/commonjs/src/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "src",
     "lib",
@@ -25,6 +39,7 @@
     "!**/__mocks__",
     "!**/.*"
   ],
+  "sideEffects": false,
   "scripts": {
     "example": "yarn workspace obi-chart-example",
     "test": "jest",
@@ -32,9 +47,8 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
     "prepare": "bob build",
-    "release": "./bin/release.sh",
     "gifs": "./bin/capture-gifs.sh",
-    "check-deps": "npx @rnx-kit/align-deps@latest --diff-mode allow-subset package.json"
+    "check-deps": "rnx-align-deps --diff-mode allow-subset package.json"
   },
   "keywords": [
     "react-native",
@@ -55,59 +69,54 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "dependencies": {
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.2.0"
+  },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.0.2",
-    "@evilmartians/lefthook": "^1.5.0",
-    "@react-native-community/cli": "^20.1.0",
-    "@react-native-community/cli-platform-android": "^20.1.0",
-    "@react-native-community/cli-platform-ios": "^20.1.0",
+    "@commitlint/config-conventional": "^21.2.2",
+    "@evilmartians/lefthook": "^2.1.12",
+    "@react-native-community/cli": "^20.2.0",
+    "@react-native-community/cli-platform-android": "^20.2.0",
+    "@react-native-community/cli-platform-ios": "^20.2.0",
     "@react-native/babel-preset": "^0.86.0",
     "@react-native/eslint-config": "^0.86.0",
     "@react-native/jest-preset": "^0.86.0",
     "@react-native/metro-config": "^0.86.0",
-    "@release-it/conventional-changelog": "^5.0.0",
     "@rnx-kit/align-deps": "^4.0.6",
     "@shopify/react-native-skia": "2.6.2",
-    "@types/d3-scale": "^4.0.5",
-    "@types/d3-shape": "^3.1.3",
-    "@types/jest": "^29.2.1",
-    "@types/react": "^19.2.0",
-    "commitlint": "^17.0.2",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.18",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "commitlint": "^21.2.2",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "del-cli": "^5.0.0",
-    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-deprecation": "^3.0.0",
-    "eslint-plugin-ft-flow": "^2.0.3",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "jest": "^29.2.1",
-    "prettier": "^2.0.5",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-react": "^7.37.5",
+    "jest": "^30.5.1",
+    "prettier": "^3.9.6",
     "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.86.0",
-    "react-native-builder-bob": "^0.40.17",
+    "react-native-builder-bob": "^0.43.0",
     "react-native-gesture-handler": "~2.32.0",
     "react-native-reanimated": "~4.5.1",
     "react-native-worklets": "^0.10.1",
     "react-test-renderer": "19.2.3",
-    "release-it": "^15.0.0",
-    "typescript": "^5.0.2"
+    "typescript": "npm:@typescript/typescript6@^6.0.2"
   },
   "peerDependencies": {
     "@shopify/react-native-skia": ">=2.0.0 <3.0.0",
     "d3-scale": ">=4.0.2 <5.0.0",
     "d3-shape": ">=3.2.0 <4.0.0",
-    "react": "16.9.0 || 16.11.0 || 16.13.1 || 17.0.1 || 17.0.2 || 18.0.0 || 18.1.0 || 18.2.0 || ^18.2.0 || 18.3.1 || 19.0.0 || 19.1.0 || 19.1.4 || ^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || 19.2.3",
-    "react-native": "^0.61.5 || ^0.62.3 || ^0.63.2 || ^0.64.2 || ^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.69.0 || ^0.70.0 || ^0.71.0 || ^0.72.0 || ^0.73.0 || ^0.74.0 || ^0.75.0 || ^0.76.0 || ^0.77.0 || ^0.78.0 || ^0.79.0 || ^0.80.0 || ^0.81.6 || ^0.82.0 || ^0.83.0 || ^0.84.0 || ^0.85.0 || ^0.86.0 || ^0.87.0",
-    "react-native-gesture-handler": "^1.9.0 || ^1.10.3 || ^2.3.2 || ^2.5.0 || ^2.6.0 || ^2.9.0 || ^2.12.0 || ^2.14.0 || ^2.18.1 || ^2.20.0 || ^2.22.0 || ^2.24.0 || ^2.26.0 || ^2.28.0 || ^2.29.1 || ^2.30.0 || ^2.31.1 || ~2.32.0 || ^3.1.0",
-    "react-native-reanimated": "^1.13.3 || ^2.1.0 || ^2.2.1 || ^2.2.3 || ^2.2.4 || ^2.5.0 || ^2.9.0 || ^2.10.0 || ^2.14.1 || ^3.3.0 || ^3.6.0 || ^3.9.0 || ^3.15.0 || ^3.16.1 || ^3.16.7 || ^3.17.0 || ^3.17.5 || ^3.18.0 || ^3.19.0 || ^4.2.0 || ~4.2.0 || ^4.2.2 || ^4.4.3 || ~4.5.1 || ^4.5.3",
-    "react-native-worklets": ">=0.10.0"
-  },
-  "peerDependenciesMeta": {
-    "react-native-worklets": {
-      "optional": true
-    }
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-native": "^0.79.0 || ^0.80.0 || ^0.81.6 || ^0.82.0 || ^0.83.0 || ^0.84.0 || ^0.85.0 || ^0.86.0 || ^0.87.0",
+    "react-native-gesture-handler": "^2.26.0 || ^2.28.0 || ^2.29.1 || ^2.30.0 || ^2.31.1 || ~2.32.0 || ^3.1.0",
+    "react-native-reanimated": "^4.0.0 || ~4.5.1",
+    "react-native-worklets": ">=0.5.0"
   },
   "workspaces": [
     "example"
@@ -116,12 +125,23 @@
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
-  "packageManager": "yarn@3.6.1",
+  "packageManager": "yarn@4.18.0",
   "engines": {
-    "node": ">= 20.19.4"
+    "node": ">= 24.20.0"
   },
   "jest": {
     "preset": "@react-native/jest-preset",
+    "moduleNameMapper": {
+      "^react-native-worklets$": "react-native-worklets/src/mock"
+    },
+    "setupFiles": [
+      "<rootDir>/jest.setup.js",
+      "@shopify/react-native-skia/jestSetup.js",
+      "react-native-gesture-handler/jestSetup.js"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?|@shopify/react-native-skia|react-native-reanimated|react-native-worklets|react-native-gesture-handler|d3-.*|internmap)/)"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
@@ -132,48 +152,6 @@
       "@commitlint/config-conventional"
     ]
   },
-  "release-it": {
-    "git": {
-      "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
-    },
-    "npm": {
-      "publish": true,
-      "skipChecks": true
-    },
-    "github": {
-      "release": true
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": "angular"
-      }
-    }
-  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native",
-      "prettier"
-    ],
-    "rules": {
-      "react/react-in-jsx-scope": "off",
-      "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
-        }
-      ]
-    }
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
   "prettier": {
     "quoteProps": "consistent",
     "singleQuote": true,
@@ -185,8 +163,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
       [
         "typescript",
         {
@@ -207,7 +195,7 @@
           "react-native@0.86"
         ],
         "production": [
-          "react-native@*"
+          "react-native@>=0.79"
         ]
       },
       "capabilities": [

package/src/Charts/BottomAxis/AxisLine.tsx

@@ -27,12 +27,12 @@ const AxisLine: FC<AxisLineProps> = function (props) {
   const p1 = useDerivedValue(() => {
     const p1X = getPositionWl(0, focalX.value, scale.value, offsetX.value);
     return vec(p1X, offsetY);
-  }, []);
+  });
 
   const p2 = useDerivedValue(() => {
-    const p1X = getPositionWl(width, focalX.value, scale.value, offsetX.value);
-    return vec(p1X, offsetY);
-  }, [width]);
+    const p2X = getPositionWl(width, focalX.value, scale.value, offsetX.value);
+    return vec(p2X, offsetY);
+  });
 
   return <Line {...{ p1, p2, color, strokeWidth }} />;
 };

package/src/Charts/BottomAxis/BottomAxis.tsx

@@ -21,7 +21,7 @@ export type BottomAxisProps = {
 const BottomAxis: FC<BottomAxisProps> = function (props) {
   const { labels, scale, focalX, offsetX, style, width, font } = props;
   const offsetY = props.offsetY ?? 0;
-  const tickInterval = width / (labels.length - 1);
+  const tickInterval = labels.length > 1 ? width / (labels.length - 1) : 0;
 
   return (
     <Canvas style={style}>

package/src/Charts/BottomAxis/Tick.tsx

@@ -22,19 +22,16 @@ export type TickProps = {
 export const Tick: React.FC<TickProps> = (props) => {
   const { label, scale, focalX, offsetX, initPosition, font } = props;
   const offsetY = props.offsetY ?? 0;
-  const transform = useDerivedValue(
-    () => [
-      {
-        translateX: getPositionWl(
-          initPosition,
-          focalX.value,
-          scale.value,
-          offsetX.value
-        ),
-      },
-    ],
-    [initPosition, offsetX]
-  );
+  const transform = useDerivedValue(() => [
+    {
+      translateX: getPositionWl(
+        initPosition,
+        focalX.value,
+        scale.value,
+        offsetX.value
+      ),
+    },
+  ]);
   const width = font
     .getGlyphWidths(font.getGlyphIDs(label))
     .reduce((a, b) => a + b, 0);

package/src/Charts/Cursor.tsx

@@ -10,7 +10,7 @@ export type CursorProps = {
   positionX: SharedValue<number>;
   size?: number;
   color?: string;
-  currentValue?: SharedValue<number> | SharedValue<undefined>;
+  currentValue?: SharedValue<number> | SharedValue<number | undefined>;
   translateY?: SharedValue<number | undefined>;
 };
 
@@ -23,23 +23,22 @@ const Cursor: FC<CursorProps> = function ({
   size = CURSOR_SIZE,
 }) {
   if (currentValue !== undefined && translateY !== undefined) {
-    console.warn('Current value as no effect when translateY is set');
+    console.warn('currentValue has no effect when translateY is set');
   }
 
-  const _translateY = translateY
-    ? translateY
-    : // eslint-disable-next-line react-hooks/rules-of-hooks
-      useDerivedValue(() => {
-        const _commands = commands?.value;
-        if (_commands === undefined) {
-          return 0;
-        }
-        const _value = getYForX(_commands, positionX.value) ?? 0;
-        if (currentValue !== undefined) {
-          currentValue.value = _value;
-        }
-        return _value;
-      });
+  const derivedTranslateY = useDerivedValue(() => {
+    const _commands = commands?.value;
+    if (_commands === undefined) {
+      return 0;
+    }
+    const _value = getYForX(_commands, positionX.value) ?? 0;
+    if (translateY === undefined && currentValue !== undefined) {
+      currentValue.value = _value;
+    }
+    return _value;
+  });
+
+  const _translateY = translateY ?? derivedTranslateY;
 
   const transform = useDerivedValue(() => [
     { translateX: positionX.value },

package/src/Charts/Linechart/index.tsx

@@ -10,19 +10,23 @@ export type LinePath = {
   id?: string;
 };
 
-export type LineChartProps = {
-  path?: SkPath | SharedValue<SkPath>;
-  paths?: LinePath[];
+type LineChartBaseProps = {
   height: number;
   width: number;
   style?: StyleProp<ViewStyle>;
-  color?: string;
   offsetY?: number;
   offsetX?: number;
   background?: React.ReactNode;
   children?: React.ReactNode;
 };
 
+// Require at least one of `path` / `paths` at compile time
+export type LineChartProps = LineChartBaseProps &
+  (
+    | { path: SkPath | SharedValue<SkPath>; paths?: LinePath[]; color?: string }
+    | { paths: LinePath[]; path?: SkPath | SharedValue<SkPath>; color?: string }
+  );
+
 const LineChart: FC<LineChartProps> = function (props) {
   const {
     width,

package/src/Charts/ZoomableLinechart/ScalablePath.tsx

@@ -1,12 +1,6 @@
-import {
-  Path,
-  Skia,
-  type PathCommand,
-  type SkPath,
-} from '@shopify/react-native-skia';
+import { Path, Skia, type SkPath } from '@shopify/react-native-skia';
 import { type FC } from 'react';
 import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
-import { scaleCommands } from '../graphUtils';
 
 export type ScalablePathProps = {
   path: SharedValue<SkPath>;
@@ -21,17 +15,15 @@ const ScalablePath: FC<ScalablePathProps> = function (props) {
   const { path, scale, focalX, offsetX, pathProps, color = 'red' } = props;
 
   const animatedPath = useDerivedValue(() => {
-    let _cmds: PathCommand[] = [];
-    try {
-      _cmds = scaleCommands(path.value?.toCmds() ?? [], scale, focalX, offsetX);
-    } catch (e) {
-      console.error('Got error while scaling path: ', typeof e);
-      _cmds = [];
-    }
-    const _path = Skia.Path.MakeFromCmds(_cmds);
-    if (!_path) throw new Error('Path is null');
+    // 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;
-  }, [scale]);
+  });
 
   return (
     <Path

package/src/Charts/gesture.ts

@@ -2,13 +2,12 @@ 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 { scheduleOnRN } from 'react-native-worklets';
 import type { DataPoint } from './types';
 
 /**
@@ -75,11 +74,6 @@ export const useScalableGesture = (props: AxisGestureProps): ScalableGesture =>
     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;
@@ -105,15 +99,12 @@ export const useScalableGesture = (props: AxisGestureProps): ScalableGesture =>
       let newOffset;
 
       if (leftBound > startOffset) {
-        // console.log(`Left Boundary reached`);
         newOffset = offsetX.value - leftBound + startOffset;
-      } else if (rightBound < width) {
-        // console.log(`Right Boundary reached`);
+      } else if (rightBound < width + startOffset) {
         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;
@@ -121,13 +112,15 @@ export const useScalableGesture = (props: AxisGestureProps): ScalableGesture =>
 
   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);
+      // 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;
     });
 
   return {
@@ -165,12 +158,11 @@ export const useUpdateAxis = function (props: UpdateAxisProps) {
           currentIndex.value !== i
         ) {
           currentIndex.value = i;
-          if (onScaleChange !== undefined) runOnJS(onScaleChange)(i);
+          if (onScaleChange !== undefined) scheduleOnRN(onScaleChange, i);
           break;
         }
       }
-    },
-    []
+    }
   );
 
   return { currentIndex };
@@ -221,34 +213,43 @@ export const useCursorGesture = function (props: UseCursorGestureProps) {
     isContinuous = true,
   } = props;
 
-  const xPosition = useSharedValue(0);
-  const yPosition = useSharedValue(height); // GRAPH_HEIGHT
+  if (!isContinuous && points === undefined)
+    console.warn('Points must be defined for non-continuous mode');
 
-  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);
-  });
+  const xPosition = useSharedValue(0);
+  const yPosition = useSharedValue(height);
 
-  useDerivedValue(() => {
-    if (isContinuous) return;
-    if (points === undefined) {
-      console.warn('Points must be defined for non-continuous mode');
+  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(xPosition.value, points.value);
+    const _closestDot = getClosestPoint(clamp(x, 0, width), points.value);
     if (closestDataPoint !== undefined) closestDataPoint.value = _closestDot;
     xPosition.value = _closestDot.x;
-  }, [xPosition, isContinuous]);
+  };
+
+  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)
+  );
+
+  // Re-snap the cursor when the data points change (e.g. switching graphs)
+  useAnimatedReaction(
+    () => points?.value,
+    (_points) => {
+      if (isContinuous || _points === undefined || _points.length === 0)
+        return;
+      const _closestDot = getClosestPoint(xPosition.value, _points);
+      if (closestDataPoint !== undefined) closestDataPoint.value = _closestDot;
+      xPosition.value = _closestDot.x;
+    }
+  );
 
   return { panGesture, tapGesture, xPosition, yPosition };
 };