@obitrain/charts 0.10.0 → 0.10.2

package/package.json

@@ -1,12 +1,26 @@
 {
   "name": "@obitrain/charts",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "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,6 +69,10 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "dependencies": {
+    "@types/d3-scale": "^4.0.5",
+    "@types/d3-shape": "^3.1.3"
+  },
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.5.0",
@@ -65,11 +83,8 @@
     "@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",
@@ -91,23 +106,17 @@
     "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"
   },
   "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"
@@ -122,6 +131,17 @@
   },
   "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,24 +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": [
@@ -185,8 +187,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
       [
         "typescript",
         {
@@ -207,7 +219,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 };
 };

package/src/Charts/graphUtils.ts

@@ -15,7 +15,7 @@ import { getPositionWl } from './gesture';
 import { getYForX } from './maths';
 import type { AnimatedDot, DataPoint } from './types';
 
-export type Config = {
+export type BuildGraphConfig = {
   minX?: number;
   maxX?: number;
   minY?: number;
@@ -24,8 +24,11 @@ export type Config = {
   curve?: shape.CurveFactory | shape.CurveFactoryLineOnly;
 };
 
+/** @deprecated Use {@link BuildGraphConfig} instead */
+export type Config = BuildGraphConfig;
+
 export type GraphData = {
-  data: [number, number][];
+  data: [x: number, y: number][];
   minY: number;
   maxY: number;
   path: string;
@@ -36,38 +39,40 @@ export type GraphData = {
 };
 
 export const buildGraph = function (
-  data: [number, number][],
+  data: [x: number, y: number][],
   width: number,
   height: number,
-  config?: Config
+  config?: BuildGraphConfig
 ): GraphData {
-  const minX = config?.minX ?? Math.min(...data.map((x) => x[0]));
-  const maxX = config?.maxX ?? Math.max(...data.map((x) => x[0]));
+  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]));
   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 minY = config?.minY ?? Math.min(...data.map((d) => d[1]));
+  const maxY = config?.maxY ?? Math.max(...data.map((d) => d[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;
+    .line<[number, number]>()
+    .x(([x]) => scaleX(x))
+    .y(([, y]) => scaleY(y))
+    .curve(config?.curve ?? shape.curveBasis)(data);
+  if (path === null) throw new Error('Failed to build the line path');
 
-  const dataPoints = fmtValues.map(([y, x]) => ({
+  const dataPoints = data.map(([x, y]) => ({
     x: scaleX(x),
     y: scaleY(y),
     value: y,
   }));
 
   const skiaPath = Skia.Path.MakeFromSVGString(path);
-  if (skiaPath == null) throw new Error('Path not found');
+  if (skiaPath == null) throw new Error('Failed to parse the SVG path');
 
   return {
-    data: fmtValues,
+    data,
     minY,
     maxY,
     path,
@@ -136,7 +141,6 @@ export const scaleCommands = function (
       ];
     }
     if (commandType === PathVerb.Close) return command;
-    if (commandType === PathVerb.Move) return command;
     throw new Error(`Unsupported command type ${commandType}`);
   });
 };
@@ -173,25 +177,26 @@ export const useDotsTransition = function (props: UseDotAnimationProps) {
     () => ({
       _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),
     }),
     ({ _currentGraph, _currentCommands }) => {
       const newDataPoints = dataPoints[_currentGraph];
       if (newDataPoints === undefined)
         throw new Error('Data points cannot be undefined');
-      dots.map((_dot, i) => {
+      dots.forEach((_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);
         }
+        _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);
       });
     }
   );

package/src/Charts/index.tsx

@@ -1,10 +1,18 @@
 export { AxisLine, BottomAxis, Tick } from './BottomAxis';
+export type {
+  AxisLineProps,
+  BottomAxisProps,
+  TickProps,
+} 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 type {
+  ScalablePathProps,
+  ZoomableLineChartProps,
+} from './ZoomableLinechart';
 export {
   getClosestPoint,
   getPositionWl,
@@ -12,7 +20,12 @@ export {
   useScalableGesture,
   useUpdateAxis,
 } from './gesture';
-export type { UseCursorGestureProps } from './gesture';
+export type {
+  AxisGestureProps,
+  ScalableGesture,
+  UpdateAxisProps,
+  UseCursorGestureProps,
+} from './gesture';
 export {
   buildGraph,
   defaultOpacityTransitionWl,
@@ -20,7 +33,13 @@ export {
   scaleCommands,
   useDotsTransition,
 } from './graphUtils';
-export type { Config, GraphData, UseDotAnimationProps } from './graphUtils';
+export type {
+  BuildGraphConfig,
+  // eslint-disable-next-line deprecation/deprecation
+  Config,
+  GraphData,
+  UseDotAnimationProps,
+} from './graphUtils';
 export {
   commandsToBezier,
   cubicBezierYForX,