@obitrain/charts 0.9.2

package/lib/typescript/src/textUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textUtils.d.ts","sourceRoot":"","sources":["../../../src/textUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAOjC,eAAO,MAAM,oBAAoB,GAC/B,YAAW,MAAU,KACpB,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAO3C,CAAC"}

package/package.json

@@ -0,0 +1,226 @@
+{
+  "name": "@obitrain/charts",
+  "version": "0.9.2",
+  "description": "Charting library for React Native",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace obi-chart-example",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "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"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Obitrain/obi-chart.git"
+  },
+  "author": "Julien Brayere <julien.brayere@obitrain.com> (https://github.com/Andarius)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Obitrain/obi-chart/issues"
+  },
+  "homepage": "https://github.com/Obitrain/obi-chart#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "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",
+    "@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",
+    "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",
+    "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-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"
+  },
+  "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
+    }
+  },
+  "workspaces": [
+    "example"
+  ],
+  "resolutions": {
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "packageManager": "yarn@3.6.1",
+  "engines": {
+    "node": ">= 20.19.4"
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@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,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "rnx-kit": {
+    "kitType": "library",
+    "alignDeps": {
+      "presets": [
+        "microsoft/react-native",
+        "./align-deps-preset.js"
+      ],
+      "requirements": {
+        "development": [
+          "react-native@0.86"
+        ],
+        "production": [
+          "react-native@*"
+        ]
+      },
+      "capabilities": [
+        "animation",
+        "babel-preset-react-native",
+        "core",
+        "core-android",
+        "core-ios",
+        "gestures",
+        "jest",
+        "react",
+        "react-test-renderer"
+      ]
+    }
+  }
+}

package/src/Charts/BottomAxis/AxisLine.tsx

@@ -0,0 +1,40 @@
+import { Line, vec, type Color } from '@shopify/react-native-skia';
+import { type FC } from 'react';
+import { StyleSheet } from 'react-native';
+import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
+import { getPositionWl } from '../gesture';
+
+export type AxisLineProps = {
+  width: number;
+  focalX: SharedValue<number>;
+  scale: SharedValue<number>;
+  offsetX: SharedValue<number>;
+  strokeWidth?: number;
+  offsetY?: number;
+  color?: Color;
+};
+
+const AxisLine: FC<AxisLineProps> = function (props) {
+  const {
+    width,
+    focalX,
+    scale,
+    offsetX,
+    offsetY = 0,
+    strokeWidth = StyleSheet.hairlineWidth,
+    color = 'black',
+  } = 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]);
+
+  return <Line {...{ p1, p2, color, strokeWidth }} />;
+};
+
+export { AxisLine };

package/src/Charts/BottomAxis/BottomAxis.tsx

@@ -0,0 +1,41 @@
+// ChartUtilsScreen.tsx
+import { Canvas, type SkFont } from '@shopify/react-native-skia';
+import { type FC } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import { AxisLine } from './AxisLine';
+import { Tick } from './Tick';
+
+export type BottomAxisProps = {
+  labels: string[];
+  width: number;
+  //   tickInterval: number;
+  scale: SharedValue<number>;
+  focalX: SharedValue<number>;
+  offsetX: SharedValue<number>;
+  offsetY?: number;
+  style?: StyleProp<ViewStyle>;
+  font: SkFont;
+};
+
+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);
+
+  return (
+    <Canvas style={style}>
+      <AxisLine {...{ width, offsetY, focalX, scale, offsetX }} />
+      {labels.map((_label, i) => (
+        <Tick
+          key={i}
+          label={_label}
+          initPosition={tickInterval * i}
+          {...{ offsetX, offsetY, focalX, scale, font }}
+        />
+      ))}
+    </Canvas>
+  );
+};
+
+export { BottomAxis };

package/src/Charts/BottomAxis/Tick.tsx

@@ -0,0 +1,54 @@
+import {
+  Group,
+  Line,
+  Text,
+  vec,
+  type SkFont,
+} from '@shopify/react-native-skia';
+import React from 'react';
+import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
+import { getPositionWl } from '../gesture';
+
+export type TickProps = {
+  initPosition: number;
+  label: string;
+  scale: SharedValue<number>;
+  focalX: SharedValue<number>;
+  offsetX: SharedValue<number>;
+  offsetY?: number;
+  font: SkFont;
+};
+
+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 width = font
+    .getGlyphWidths(font.getGlyphIDs(label))
+    .reduce((a, b) => a + b, 0);
+
+  return (
+    <Group transform={transform}>
+      <Line color="black" p1={vec(0, offsetY)} p2={vec(0, offsetY + 10)} />
+      <Text
+        text={label}
+        color="black"
+        x={-width / 2}
+        y={offsetY + 23}
+        font={font}
+      />
+    </Group>
+  );
+};

package/src/Charts/BottomAxis/index.tsx

@@ -0,0 +1,3 @@
+export { AxisLine, type AxisLineProps } from './AxisLine';
+export { BottomAxis, type BottomAxisProps } from './BottomAxis';
+export { Tick, type TickProps } from './Tick';

package/src/Charts/Cursor.tsx

@@ -0,0 +1,51 @@
+import { Circle, type PathCommand } from '@shopify/react-native-skia';
+import type { FC } from 'react';
+import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
+import { getYForX } from './maths';
+
+const CURSOR_SIZE = 10;
+
+export type CursorProps = {
+  commands?: SharedValue<PathCommand[]>;
+  positionX: SharedValue<number>;
+  size?: number;
+  color?: string;
+  currentValue?: SharedValue<number> | SharedValue<undefined>;
+  translateY?: SharedValue<number | undefined>;
+};
+
+const Cursor: FC<CursorProps> = function ({
+  commands,
+  positionX,
+  color,
+  currentValue,
+  translateY,
+  size = CURSOR_SIZE,
+}) {
+  if (currentValue !== undefined && translateY !== undefined) {
+    console.warn('Current value as 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 transform = useDerivedValue(() => [
+    { translateX: positionX.value },
+    { translateY: _translateY.value ?? 0 },
+  ]);
+  return <Circle transform={transform} cx={0} cy={0} r={size} color={color} />;
+};
+
+export { Cursor };

package/src/Charts/Linechart/index.tsx

@@ -0,0 +1,79 @@
+import { Canvas, Group, Path, type SkPath } from '@shopify/react-native-skia';
+import type { FC } from 'react';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+
+export type LinePath = {
+  path: SkPath | SharedValue<SkPath>;
+  color: string;
+  id?: string;
+};
+
+export type LineChartProps = {
+  path?: SkPath | SharedValue<SkPath>;
+  paths?: LinePath[];
+  height: number;
+  width: number;
+  style?: StyleProp<ViewStyle>;
+  color?: string;
+  offsetY?: number;
+  offsetX?: number;
+  background?: React.ReactNode;
+  children?: React.ReactNode;
+};
+
+const LineChart: FC<LineChartProps> = function (props) {
+  const {
+    width,
+    height,
+    style,
+    path,
+    children,
+    color,
+    paths,
+    background,
+    offsetX = 0,
+    offsetY = 0,
+  } = props;
+
+  const _paths: LinePath[] =
+    paths !== undefined
+      ? paths
+      : path !== undefined
+      ? [{ path: path, color: color ?? 'red' }]
+      : [];
+  if (_paths.length === 0) {
+    console.warn('Specify either a path or multiple paths.');
+    return null;
+    // throw new Error('Specify either a path or multiple paths.');
+  }
+  return (
+    <Canvas
+      style={[
+        {
+          width,
+          height,
+        },
+        style,
+      ]}
+    >
+      <Group transform={[{ translateY: offsetY }, { translateX: offsetX }]}>
+        {background}
+        {_paths.map((_path, i) => (
+          <Path
+            key={`${_path.id ?? i}`}
+            style="stroke"
+            {..._path}
+            strokeWidth={2}
+            strokeJoin="round"
+            strokeCap="round"
+          />
+        ))}
+        {children}
+      </Group>
+    </Canvas>
+  );
+};
+
+export { LineChart };

package/src/Charts/ZoomableLinechart/ScalablePath.tsx

@@ -0,0 +1,49 @@
+import {
+  Path,
+  Skia,
+  type PathCommand,
+  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>;
+  scale: SharedValue<number>;
+  focalX: SharedValue<number>;
+  offsetX: SharedValue<number>;
+  color?: string;
+  pathProps?: Omit<React.ComponentProps<typeof Path>, 'color'>;
+};
+
+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');
+    return _path;
+  }, [scale]);
+
+  return (
+    <Path
+      style="stroke"
+      path={animatedPath}
+      strokeWidth={2}
+      strokeJoin="round"
+      strokeCap="round"
+      color={color}
+      {...pathProps}
+    />
+  );
+};
+
+export { ScalablePath };

package/src/Charts/ZoomableLinechart/index.tsx

@@ -0,0 +1,47 @@
+import { Canvas, Group, type SkPath } from '@shopify/react-native-skia';
+import type { FC } from 'react';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { SharedValue } from 'react-native-reanimated';
+import { ScalablePath, type ScalablePathProps } from './ScalablePath';
+
+export { ScalablePath };
+export type { ScalablePathProps };
+
+export type ZoomableLineChartProps = {
+  height: number;
+  width: number;
+  offsetX: SharedValue<number>;
+  scale: SharedValue<number>;
+  focalX: SharedValue<number>;
+  offsetY?: number;
+
+  style?: StyleProp<ViewStyle>;
+  path: SharedValue<SkPath>;
+  children?: React.ReactNode;
+  color?: string;
+};
+
+const ZoomableLineChart: FC<ZoomableLineChartProps> = function (props) {
+  const { width, height, style, children, offsetY = 0, ...rest } = props;
+
+  return (
+    <Canvas
+      style={[
+        {
+          width,
+          height,
+        },
+        style,
+      ]}
+    >
+      <Group transform={[{ translateY: offsetY }]}>
+        <ScalablePath {...rest} />
+        {children}
+      </Group>
+    </Canvas>
+  );
+};
+
+export { ZoomableLineChart };