@obitrain/charts 0.9.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Julien Brayere
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,125 @@
+# @obitrain/charts
+
+React Native charting primitives built on [React Native Skia](https://shopify.github.io/react-native-skia/),
+[Reanimated](https://docs.swmansion.com/react-native-reanimated/) and
+[Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/): animated line charts, a
+zoomable/pannable variant, a scalable bottom axis and a cursor, all driven from the UI thread.
+
+## Installation
+
+```sh
+yarn add @obitrain/charts
+yarn add @shopify/react-native-skia react-native-reanimated react-native-worklets react-native-gesture-handler d3-scale d3-shape
+```
+
+`react-native-worklets` is only needed with Reanimated 4 (it is an optional peer dependency).
+
+## Requirements
+
+| Peer dependency              | Supported versions                                    |
+| ---------------------------- | ----------------------------------------------------- |
+| `@shopify/react-native-skia` | `>=2.0.0 <3.0.0`                                       |
+| `react-native-reanimated`    | 3.x or 4.x                                             |
+| `react-native-worklets`      | `>=0.10.0` (optional, required with Reanimated 4)      |
+| `react-native-gesture-handler` | 2.x or 3.x                                           |
+| `d3-scale`                   | `>=4.0.2 <5.0.0`                                       |
+| `d3-shape`                   | `>=3.2.0 <4.0.0`                                       |
+| `react`                      | 18.x or 19.x                                           |
+| `react-native`               | 0.61.5 up to 0.87                                      |
+
+The exact ranges live in the `peerDependencies` of `package.json`. Development and tests run on
+Expo SDK 57 / React Native 0.86 / Node `>= 20.19.4`.
+
+## What's inside
+
+**Components** — `BottomAxis`, `AxisLine`, `Tick`, `Cursor`, `LineChart`, `ZoomableLineChart`,
+`ScalablePath`.
+
+**Hooks** — `useScalableGesture` (pinch/pan into a shared `scale`/`focalX`/`offsetX`),
+`useCursorGesture` (continuous or discrete cursor), `useUpdateAxis` (swap axis labels on scale
+thresholds), `useDotsTransition` (animate dots along a path), `useSharedNumberToStr`.
+
+**Graph helpers** — `buildGraph`, `scaleCommands`, `getClosestPoint`, `getPositionWl`,
+`defaultOpacityTransitionWl`, `defaultTranslateTransitionWl`.
+
+**Math helpers** — `commandsToBezier`, `cubicBezierYForX`, `getYForX`, `magnitude`, `normalize`,
+`selectCurve`.
+
+**Date helpers** — `getMonthInterval`, `getDateInterval`, `getDateBoundaries`, `sampleDates`,
+`sampleDatesByRange`.
+
+**Types** — `AnimatedDot`, `DataPoint`, `LineGraphType`, `GraphData`, `Config`, `LinePath`,
+`DateRange`, plus the component/hook prop types (`CursorProps`, `LineChartProps`,
+`ZoomableLineChartProps`, `UseCursorGestureProps`, `UseDotAnimationProps`).
+
+## Examples
+
+### Bottom axis
+
+![Bottom Axis](./static/bottom-axis.gif)
+
+`BottomAxis` with `useScalableGesture` and `useUpdateAxis`: zooming swaps the label set to match the
+current scale. From `example/src/screens/BottomAxisScreen.tsx`.
+
+### Line chart
+
+![Line chart](./static/line-chart.gif)
+
+`LineChart` interpolating between three paths, with animated dots and a `Cursor` — single path, then
+several paths at once. From `example/src/screens/LineChartScreen`.
+
+### Zoomable line chart
+
+![Zoomable line chart](./static/zoomable-line-chart.gif)
+
+`ZoomableLineChart` with pinch/pan and a programmatic zoom onto a period between two data points.
+From `example/src/screens/ZoomableLineChartScreen`.
+
+### Dots
+
+![Dots](./static/dots.gif)
+
+Dot transitions between data sets of different lengths, the primitive behind `useDotsTransition`.
+From `example/src/screens/DotsScreen`.
+
+### Advanced chart
+
+![Advanced chart](./static/advanced-chart.gif)
+
+`AxisLine` + `Tick` + a Y axis and dots composed in a single Skia canvas, with a shared scale driven
+by gestures or sliders. From `example/src/screens/AdvancedChartScreen`.
+
+## Example app
+
+```sh
+yarn
+yarn example ios     # or: yarn example android
+```
+
+Every demo screen is reachable through the `obichart://` scheme. Appending `?demo=1` replays a
+scripted sequence of interactions on that screen (used to record the GIFs above):
+
+```sh
+xcrun simctl openurl booted "obichart://line-chart?demo=1"
+```
+
+Slugs: `bottom-axis`, `line-chart`, `zoomable-line-chart`, `dots`, `advanced-chart`.
+
+## Regenerating the GIFs
+
+```sh
+yarn gifs                                  # all screens, builds the app in Release
+yarn gifs --skip-build dots line-chart     # reuse the installed app, only these screens
+yarn gifs --device "iPhone 17 Pro"
+```
+
+Requires Xcode with an iOS simulator, `ffmpeg` and `jq`. The script boots the simulator, freezes the
+status bar, drives each screen through its deep link and writes `static/<slug>.gif`.
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT

package/lib/commonjs/Charts/BottomAxis/AxisLine.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AxisLine = void 0;
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNative = require("react-native");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _gesture = require("../gesture");
+var _jsxRuntime = require("react/jsx-runtime");
+const AxisLine = function (props) {
+  const {
+    width,
+    focalX,
+    scale,
+    offsetX,
+    offsetY = 0,
+    strokeWidth = _reactNative.StyleSheet.hairlineWidth,
+    color = 'black'
+  } = props;
+  const p1 = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const p1X = (0, _gesture.getPositionWl)(0, focalX.value, scale.value, offsetX.value);
+    return (0, _reactNativeSkia.vec)(p1X, offsetY);
+  }, []);
+  const p2 = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const p1X = (0, _gesture.getPositionWl)(width, focalX.value, scale.value, offsetX.value);
+    return (0, _reactNativeSkia.vec)(p1X, offsetY);
+  }, [width]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Line, {
+    p1,
+    p2,
+    color,
+    strokeWidth
+  });
+};
+exports.AxisLine = AxisLine;
+//# sourceMappingURL=AxisLine.js.map

package/lib/commonjs/Charts/BottomAxis/AxisLine.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_reactNative","_reactNativeReanimated","_gesture","_jsxRuntime","AxisLine","props","width","focalX","scale","offsetX","offsetY","strokeWidth","StyleSheet","hairlineWidth","color","p1","useDerivedValue","p1X","getPositionWl","value","vec","p2","jsx","Line","exports"],"sourceRoot":"../../../../src","sources":["Charts/BottomAxis/AxisLine.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAA2C,IAAAI,WAAA,GAAAJ,OAAA;AAY3C,MAAMK,QAA2B,GAAG,SAAAA,CAAUC,KAAK,EAAE;EACnD,MAAM;IACJC,KAAK;IACLC,MAAM;IACNC,KAAK;IACLC,OAAO;IACPC,OAAO,GAAG,CAAC;IACXC,WAAW,GAAGC,uBAAU,CAACC,aAAa;IACtCC,KAAK,GAAG;EACV,CAAC,GAAGT,KAAK;EACT,MAAMU,EAAE,GAAG,IAAAC,sCAAe,EAAC,MAAM;IAC/B,MAAMC,GAAG,GAAG,IAAAC,sBAAa,EAAC,CAAC,EAAEX,MAAM,CAACY,KAAK,EAAEX,KAAK,CAACW,KAAK,EAAEV,OAAO,CAACU,KAAK,CAAC;IACtE,OAAO,IAAAC,oBAAG,EAACH,GAAG,EAAEP,OAAO,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMW,EAAE,GAAG,IAAAL,sCAAe,EAAC,MAAM;IAC/B,MAAMC,GAAG,GAAG,IAAAC,sBAAa,EAACZ,KAAK,EAAEC,MAAM,CAACY,KAAK,EAAEX,KAAK,CAACW,KAAK,EAAEV,OAAO,CAACU,KAAK,CAAC;IAC1E,OAAO,IAAAC,oBAAG,EAACH,GAAG,EAAEP,OAAO,CAAC;EAC1B,CAAC,EAAE,CAACJ,KAAK,CAAC,CAAC;EAEX,oBAAO,IAAAH,WAAA,CAAAmB,GAAA,EAACxB,gBAAA,CAAAyB,IAAI;IAAOR,EAAE;IAAEM,EAAE;IAAEP,KAAK;IAAEH;EAAW,CAAK,CAAC;AACrD,CAAC;AAACa,OAAA,CAAApB,QAAA,GAAAA,QAAA","ignoreList":[]}

package/lib/commonjs/Charts/BottomAxis/BottomAxis.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BottomAxis = void 0;
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _AxisLine = require("./AxisLine");
+var _Tick = require("./Tick");
+var _jsxRuntime = require("react/jsx-runtime");
+// ChartUtilsScreen.tsx
+
+const BottomAxis = function (props) {
+  const {
+    labels,
+    scale,
+    focalX,
+    offsetX,
+    style,
+    width,
+    font
+  } = props;
+  const offsetY = props.offsetY ?? 0;
+  const tickInterval = width / (labels.length - 1);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Canvas, {
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AxisLine.AxisLine, {
+      width,
+      offsetY,
+      focalX,
+      scale,
+      offsetX
+    }), labels.map((_label, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tick.Tick, {
+      label: _label,
+      initPosition: tickInterval * i,
+      offsetX,
+      offsetY,
+      focalX,
+      scale,
+      font
+    }, i))]
+  });
+};
+exports.BottomAxis = BottomAxis;
+//# sourceMappingURL=BottomAxis.js.map

package/lib/commonjs/Charts/BottomAxis/BottomAxis.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_AxisLine","_Tick","_jsxRuntime","BottomAxis","props","labels","scale","focalX","offsetX","style","width","font","offsetY","tickInterval","length","jsxs","Canvas","children","jsx","AxisLine","map","_label","i","Tick","label","initPosition","exports"],"sourceRoot":"../../../../src","sources":["Charts/BottomAxis/BottomAxis.tsx"],"mappings":";;;;;;AACA,IAAAA,gBAAA,GAAAC,OAAA;AAIA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAA8B,IAAAG,WAAA,GAAAH,OAAA;AAN9B;;AAoBA,MAAMI,UAA+B,GAAG,SAAAA,CAAUC,KAAK,EAAE;EACvD,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,OAAO;IAAEC,KAAK;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGP,KAAK;EACpE,MAAMQ,OAAO,GAAGR,KAAK,CAACQ,OAAO,IAAI,CAAC;EAClC,MAAMC,YAAY,GAAGH,KAAK,IAAIL,MAAM,CAACS,MAAM,GAAG,CAAC,CAAC;EAEhD,oBACE,IAAAZ,WAAA,CAAAa,IAAA,EAACjB,gBAAA,CAAAkB,MAAM;IAACP,KAAK,EAAEA,KAAM;IAAAQ,QAAA,gBACnB,IAAAf,WAAA,CAAAgB,GAAA,EAAClB,SAAA,CAAAmB,QAAQ;MAAOT,KAAK;MAAEE,OAAO;MAAEL,MAAM;MAAED,KAAK;MAAEE;IAAO,CAAK,CAAC,EAC3DH,MAAM,CAACe,GAAG,CAAC,CAACC,MAAM,EAAEC,CAAC,kBACpB,IAAApB,WAAA,CAAAgB,GAAA,EAACjB,KAAA,CAAAsB,IAAI;MAEHC,KAAK,EAAEH,MAAO;MACdI,YAAY,EAAEZ,YAAY,GAAGS,CAAE;MACzBd,OAAO;MAAEI,OAAO;MAAEL,MAAM;MAAED,KAAK;MAAEK;IAAI,GAHtCW,CAIN,CACF,CAAC;EAAA,CACI,CAAC;AAEb,CAAC;AAACI,OAAA,CAAAvB,UAAA,GAAAA,UAAA","ignoreList":[]}

package/lib/commonjs/Charts/BottomAxis/Tick.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tick = void 0;
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _react = _interopRequireDefault(require("react"));
+var _reactNativeReanimated = require("react-native-reanimated");
+var _gesture = require("../gesture");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Tick = props => {
+  const {
+    label,
+    scale,
+    focalX,
+    offsetX,
+    initPosition,
+    font
+  } = props;
+  const offsetY = props.offsetY ?? 0;
+  const transform = (0, _reactNativeReanimated.useDerivedValue)(() => [{
+    translateX: (0, _gesture.getPositionWl)(initPosition, focalX.value, scale.value, offsetX.value)
+  }], [initPosition, offsetX]);
+  const width = font.getGlyphWidths(font.getGlyphIDs(label)).reduce((a, b) => a + b, 0);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+    transform: transform,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Line, {
+      color: "black",
+      p1: (0, _reactNativeSkia.vec)(0, offsetY),
+      p2: (0, _reactNativeSkia.vec)(0, offsetY + 10)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
+      text: label,
+      color: "black",
+      x: -width / 2,
+      y: offsetY + 23,
+      font: font
+    })]
+  });
+};
+exports.Tick = Tick;
+//# sourceMappingURL=Tick.js.map

package/lib/commonjs/Charts/BottomAxis/Tick.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_react","_interopRequireDefault","_reactNativeReanimated","_gesture","_jsxRuntime","e","__esModule","default","Tick","props","label","scale","focalX","offsetX","initPosition","font","offsetY","transform","useDerivedValue","translateX","getPositionWl","value","width","getGlyphWidths","getGlyphIDs","reduce","a","b","jsxs","Group","children","jsx","Line","color","p1","vec","p2","Text","text","x","y","exports"],"sourceRoot":"../../../../src","sources":["Charts/BottomAxis/Tick.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAOA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAE,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAYpC,MAAMG,IAAyB,GAAIC,KAAK,IAAK;EAClD,MAAM;IAAEC,KAAK;IAAEC,KAAK;IAAEC,MAAM;IAAEC,OAAO;IAAEC,YAAY;IAAEC;EAAK,CAAC,GAAGN,KAAK;EACnE,MAAMO,OAAO,GAAGP,KAAK,CAACO,OAAO,IAAI,CAAC;EAClC,MAAMC,SAAS,GAAG,IAAAC,sCAAe,EAC/B,MAAM,CACJ;IACEC,UAAU,EAAE,IAAAC,sBAAa,EACvBN,YAAY,EACZF,MAAM,CAACS,KAAK,EACZV,KAAK,CAACU,KAAK,EACXR,OAAO,CAACQ,KACV;EACF,CAAC,CACF,EACD,CAACP,YAAY,EAAED,OAAO,CACxB,CAAC;EACD,MAAMS,KAAK,GAAGP,IAAI,CACfQ,cAAc,CAACR,IAAI,CAACS,WAAW,CAACd,KAAK,CAAC,CAAC,CACvCe,MAAM,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,EAAE,CAAC,CAAC;EAE7B,oBACE,IAAAvB,WAAA,CAAAwB,IAAA,EAAC9B,gBAAA,CAAA+B,KAAK;IAACZ,SAAS,EAAEA,SAAU;IAAAa,QAAA,gBAC1B,IAAA1B,WAAA,CAAA2B,GAAA,EAACjC,gBAAA,CAAAkC,IAAI;MAACC,KAAK,EAAC,OAAO;MAACC,EAAE,EAAE,IAAAC,oBAAG,EAAC,CAAC,EAAEnB,OAAO,CAAE;MAACoB,EAAE,EAAE,IAAAD,oBAAG,EAAC,CAAC,EAAEnB,OAAO,GAAG,EAAE;IAAE,CAAE,CAAC,eACrE,IAAAZ,WAAA,CAAA2B,GAAA,EAACjC,gBAAA,CAAAuC,IAAI;MACHC,IAAI,EAAE5B,KAAM;MACZuB,KAAK,EAAC,OAAO;MACbM,CAAC,EAAE,CAACjB,KAAK,GAAG,CAAE;MACdkB,CAAC,EAAExB,OAAO,GAAG,EAAG;MAChBD,IAAI,EAAEA;IAAK,CACZ,CAAC;EAAA,CACG,CAAC;AAEZ,CAAC;AAAC0B,OAAA,CAAAjC,IAAA,GAAAA,IAAA","ignoreList":[]}

package/lib/commonjs/Charts/BottomAxis/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AxisLine", {
+  enumerable: true,
+  get: function () {
+    return _AxisLine.AxisLine;
+  }
+});
+Object.defineProperty(exports, "BottomAxis", {
+  enumerable: true,
+  get: function () {
+    return _BottomAxis.BottomAxis;
+  }
+});
+Object.defineProperty(exports, "Tick", {
+  enumerable: true,
+  get: function () {
+    return _Tick.Tick;
+  }
+});
+var _AxisLine = require("./AxisLine");
+var _BottomAxis = require("./BottomAxis");
+var _Tick = require("./Tick");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/Charts/BottomAxis/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_AxisLine","require","_BottomAxis","_Tick"],"sourceRoot":"../../../../src","sources":["Charts/BottomAxis/index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA","ignoreList":[]}

package/lib/commonjs/Charts/Cursor.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Cursor = void 0;
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _maths = require("./maths");
+var _jsxRuntime = require("react/jsx-runtime");
+const CURSOR_SIZE = 10;
+const Cursor = 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
+  (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const _commands = commands?.value;
+    if (_commands === undefined) {
+      return 0;
+    }
+    const _value = (0, _maths.getYForX)(_commands, positionX.value) ?? 0;
+    if (currentValue !== undefined) {
+      currentValue.value = _value;
+    }
+    return _value;
+  });
+  const transform = (0, _reactNativeReanimated.useDerivedValue)(() => [{
+    translateX: positionX.value
+  }, {
+    translateY: _translateY.value ?? 0
+  }]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Circle, {
+    transform: transform,
+    cx: 0,
+    cy: 0,
+    r: size,
+    color: color
+  });
+};
+exports.Cursor = Cursor;
+//# sourceMappingURL=Cursor.js.map

package/lib/commonjs/Charts/Cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_reactNativeReanimated","_maths","_jsxRuntime","CURSOR_SIZE","Cursor","commands","positionX","color","currentValue","translateY","size","undefined","console","warn","_translateY","useDerivedValue","_commands","value","_value","getYForX","transform","translateX","jsx","Circle","cx","cy","r","exports"],"sourceRoot":"../../../src","sources":["Charts/Cursor.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAEA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAAmC,IAAAG,WAAA,GAAAH,OAAA;AAEnC,MAAMI,WAAW,GAAG,EAAE;AAWtB,MAAMC,MAAuB,GAAG,SAAAA,CAAU;EACxCC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,YAAY;EACZC,UAAU;EACVC,IAAI,GAAGP;AACT,CAAC,EAAE;EACD,IAAIK,YAAY,KAAKG,SAAS,IAAIF,UAAU,KAAKE,SAAS,EAAE;IAC1DC,OAAO,CAACC,IAAI,CAAC,mDAAmD,CAAC;EACnE;EAEA,MAAMC,WAAW,GAAGL,UAAU,GAC1BA,UAAU;EACV;EACA,IAAAM,sCAAe,EAAC,MAAM;IACpB,MAAMC,SAAS,GAAGX,QAAQ,EAAEY,KAAK;IACjC,IAAID,SAAS,KAAKL,SAAS,EAAE;MAC3B,OAAO,CAAC;IACV;IACA,MAAMO,MAAM,GAAG,IAAAC,eAAQ,EAACH,SAAS,EAAEV,SAAS,CAACW,KAAK,CAAC,IAAI,CAAC;IACxD,IAAIT,YAAY,KAAKG,SAAS,EAAE;MAC9BH,YAAY,CAACS,KAAK,GAAGC,MAAM;IAC7B;IACA,OAAOA,MAAM;EACf,CAAC,CAAC;EAEN,MAAME,SAAS,GAAG,IAAAL,sCAAe,EAAC,MAAM,CACtC;IAAEM,UAAU,EAAEf,SAAS,CAACW;EAAM,CAAC,EAC/B;IAAER,UAAU,EAAEK,WAAW,CAACG,KAAK,IAAI;EAAE,CAAC,CACvC,CAAC;EACF,oBAAO,IAAAf,WAAA,CAAAoB,GAAA,EAACxB,gBAAA,CAAAyB,MAAM;IAACH,SAAS,EAAEA,SAAU;IAACI,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE,CAAE;IAACC,CAAC,EAAEhB,IAAK;IAACH,KAAK,EAAEA;EAAM,CAAE,CAAC;AAC9E,CAAC;AAACoB,OAAA,CAAAvB,MAAA,GAAAA,MAAA","ignoreList":[]}

package/lib/commonjs/Charts/Linechart/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineChart = void 0;
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LineChart = function (props) {
+  const {
+    width,
+    height,
+    style,
+    path,
+    children,
+    color,
+    paths,
+    background,
+    offsetX = 0,
+    offsetY = 0
+  } = props;
+  const _paths = 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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Canvas, {
+    style: [{
+      width,
+      height
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+      transform: [{
+        translateY: offsetY
+      }, {
+        translateX: offsetX
+      }],
+      children: [background, _paths.map((_path, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Path, {
+        style: "stroke",
+        ..._path,
+        strokeWidth: 2,
+        strokeJoin: "round",
+        strokeCap: "round"
+      }, `${_path.id ?? i}`)), children]
+    })
+  });
+};
+exports.LineChart = LineChart;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/Charts/Linechart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_react","_interopRequireDefault","_jsxRuntime","e","__esModule","default","LineChart","props","width","height","style","path","children","color","paths","background","offsetX","offsetY","_paths","undefined","length","console","warn","jsx","Canvas","jsxs","Group","transform","translateY","translateX","map","_path","i","Path","strokeWidth","strokeJoin","strokeCap","id","exports"],"sourceRoot":"../../../../src","sources":["Charts/Linechart/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA0B,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAuB1B,MAAMG,SAA6B,GAAG,SAAAA,CAAUC,KAAK,EAAE;EACrD,MAAM;IACJC,KAAK;IACLC,MAAM;IACNC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO,GAAG,CAAC;IACXC,OAAO,GAAG;EACZ,CAAC,GAAGV,KAAK;EAET,MAAMW,MAAkB,GACtBJ,KAAK,KAAKK,SAAS,GACfL,KAAK,GACLH,IAAI,KAAKQ,SAAS,GAClB,CAAC;IAAER,IAAI,EAAEA,IAAI;IAAEE,KAAK,EAAEA,KAAK,IAAI;EAAM,CAAC,CAAC,GACvC,EAAE;EACR,IAAIK,MAAM,CAACE,MAAM,KAAK,CAAC,EAAE;IACvBC,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;IACxD,OAAO,IAAI;IACX;EACF;EACA,oBACE,IAAApB,WAAA,CAAAqB,GAAA,EAACzB,gBAAA,CAAA0B,MAAM;IACLd,KAAK,EAAE,CACL;MACEF,KAAK;MACLC;IACF,CAAC,EACDC,KAAK,CACL;IAAAE,QAAA,eAEF,IAAAV,WAAA,CAAAuB,IAAA,EAAC3B,gBAAA,CAAA4B,KAAK;MAACC,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEX;MAAQ,CAAC,EAAE;QAAEY,UAAU,EAAEb;MAAQ,CAAC,CAAE;MAAAJ,QAAA,GAClEG,UAAU,EACVG,MAAM,CAACY,GAAG,CAAC,CAACC,KAAK,EAAEC,CAAC,kBACnB,IAAA9B,WAAA,CAAAqB,GAAA,EAACzB,gBAAA,CAAAmC,IAAI;QAEHvB,KAAK,EAAC,QAAQ;QAAA,GACVqB,KAAK;QACTG,WAAW,EAAE,CAAE;QACfC,UAAU,EAAC,OAAO;QAClBC,SAAS,EAAC;MAAO,GALZ,GAAGL,KAAK,CAACM,EAAE,IAAIL,CAAC,EAMtB,CACF,CAAC,EACDpB,QAAQ;IAAA,CACJ;EAAC,CACF,CAAC;AAEb,CAAC;AAAC0B,OAAA,CAAAhC,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/commonjs/Charts/ZoomableLinechart/ScalablePath.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScalablePath = void 0;
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _graphUtils = require("../graphUtils");
+var _jsxRuntime = require("react/jsx-runtime");
+const ScalablePath = function (props) {
+  const {
+    path,
+    scale,
+    focalX,
+    offsetX,
+    pathProps,
+    color = 'red'
+  } = props;
+  const animatedPath = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    let _cmds = [];
+    try {
+      _cmds = (0, _graphUtils.scaleCommands)(path.value?.toCmds() ?? [], scale, focalX, offsetX);
+    } catch (e) {
+      console.error('Got error while scaling path: ', typeof e);
+      _cmds = [];
+    }
+    const _path = _reactNativeSkia.Skia.Path.MakeFromCmds(_cmds);
+    if (!_path) throw new Error('Path is null');
+    return _path;
+  }, [scale]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Path, {
+    style: "stroke",
+    path: animatedPath,
+    strokeWidth: 2,
+    strokeJoin: "round",
+    strokeCap: "round",
+    color: color,
+    ...pathProps
+  });
+};
+exports.ScalablePath = ScalablePath;
+//# sourceMappingURL=ScalablePath.js.map

package/lib/commonjs/Charts/ZoomableLinechart/ScalablePath.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_reactNativeReanimated","_graphUtils","_jsxRuntime","ScalablePath","props","path","scale","focalX","offsetX","pathProps","color","animatedPath","useDerivedValue","_cmds","scaleCommands","value","toCmds","e","console","error","_path","Skia","Path","MakeFromCmds","Error","jsx","style","strokeWidth","strokeJoin","strokeCap","exports"],"sourceRoot":"../../../../src","sources":["Charts/ZoomableLinechart/ScalablePath.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAOA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAA8C,IAAAG,WAAA,GAAAH,OAAA;AAW9C,MAAMI,YAAmC,GAAG,SAAAA,CAAUC,KAAK,EAAE;EAC3D,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAEC,MAAM;IAAEC,OAAO;IAAEC,SAAS;IAAEC,KAAK,GAAG;EAAM,CAAC,GAAGN,KAAK;EAExE,MAAMO,YAAY,GAAG,IAAAC,sCAAe,EAAC,MAAM;IACzC,IAAIC,KAAoB,GAAG,EAAE;IAC7B,IAAI;MACFA,KAAK,GAAG,IAAAC,yBAAa,EAACT,IAAI,CAACU,KAAK,EAAEC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAEV,KAAK,EAAEC,MAAM,EAAEC,OAAO,CAAC;IAC3E,CAAC,CAAC,OAAOS,CAAC,EAAE;MACVC,OAAO,CAACC,KAAK,CAAC,gCAAgC,EAAE,OAAOF,CAAC,CAAC;MACzDJ,KAAK,GAAG,EAAE;IACZ;IACA,MAAMO,KAAK,GAAGC,qBAAI,CAACC,IAAI,CAACC,YAAY,CAACV,KAAK,CAAC;IAC3C,IAAI,CAACO,KAAK,EAAE,MAAM,IAAII,KAAK,CAAC,cAAc,CAAC;IAC3C,OAAOJ,KAAK;EACd,CAAC,EAAE,CAACd,KAAK,CAAC,CAAC;EAEX,oBACE,IAAAJ,WAAA,CAAAuB,GAAA,EAAC3B,gBAAA,CAAAwB,IAAI;IACHI,KAAK,EAAC,QAAQ;IACdrB,IAAI,EAAEM,YAAa;IACnBgB,WAAW,EAAE,CAAE;IACfC,UAAU,EAAC,OAAO;IAClBC,SAAS,EAAC,OAAO;IACjBnB,KAAK,EAAEA,KAAM;IAAA,GACTD;EAAS,CACd,CAAC;AAEN,CAAC;AAACqB,OAAA,CAAA3B,YAAA,GAAAA,YAAA","ignoreList":[]}

package/lib/commonjs/Charts/ZoomableLinechart/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ScalablePath", {
+  enumerable: true,
+  get: function () {
+    return _ScalablePath.ScalablePath;
+  }
+});
+exports.ZoomableLineChart = void 0;
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _react = _interopRequireDefault(require("react"));
+var _ScalablePath = require("./ScalablePath");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ZoomableLineChart = function (props) {
+  const {
+    width,
+    height,
+    style,
+    children,
+    offsetY = 0,
+    ...rest
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Canvas, {
+    style: [{
+      width,
+      height
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+      transform: [{
+        translateY: offsetY
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScalablePath.ScalablePath, {
+        ...rest
+      }), children]
+    })
+  });
+};
+exports.ZoomableLineChart = ZoomableLineChart;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/Charts/ZoomableLinechart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_react","_interopRequireDefault","_ScalablePath","_jsxRuntime","e","__esModule","default","ZoomableLineChart","props","width","height","style","children","offsetY","rest","jsx","Canvas","jsxs","Group","transform","translateY","ScalablePath","exports"],"sourceRoot":"../../../../src","sources":["Charts/ZoomableLinechart/index.tsx"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAIA,IAAAG,aAAA,GAAAH,OAAA;AAAsE,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAmBtE,MAAMG,iBAA6C,GAAG,SAAAA,CAAUC,KAAK,EAAE;EACrE,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,OAAO,GAAG,CAAC;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EAEtE,oBACE,IAAAL,WAAA,CAAAY,GAAA,EAACjB,gBAAA,CAAAkB,MAAM;IACLL,KAAK,EAAE,CACL;MACEF,KAAK;MACLC;IACF,CAAC,EACDC,KAAK,CACL;IAAAC,QAAA,eAEF,IAAAT,WAAA,CAAAc,IAAA,EAACnB,gBAAA,CAAAoB,KAAK;MAACC,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEP;MAAQ,CAAC,CAAE;MAAAD,QAAA,gBAC1C,IAAAT,WAAA,CAAAY,GAAA,EAACb,aAAA,CAAAmB,YAAY;QAAA,GAAKP;MAAI,CAAG,CAAC,EACzBF,QAAQ;IAAA,CACJ;EAAC,CACF,CAAC;AAEb,CAAC;AAACU,OAAA,CAAAf,iBAAA,GAAAA,iBAAA","ignoreList":[]}