@obitrain/charts 0.10.4 → 0.12.0

package/README.md

@@ -9,7 +9,7 @@ zoomable/pannable variant, a scalable bottom axis and a cursor, all driven from
 
 ```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
+yarn add 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).
@@ -18,7 +18,7 @@ yarn add @shopify/react-native-skia react-native-reanimated react-native-worklet
 
 | Peer dependency              | Supported versions                                    |
 | ---------------------------- | ----------------------------------------------------- |
-| `@shopify/react-native-skia` | `>=2.0.0 <3.0.0`                                       |
+| `react-native-skia`          | `>=3.0.4` (Android minSdk 26)                          |
 | `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                                           |
@@ -155,8 +155,10 @@ From `example/src/screens/DotsScreen`.
 
 ![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`.
+Two series with hollow markers (ring and diamond), pinch-to-zoom with live-clamped panning, period
+presets, and a light/dark themed time axis whose bucketing and labels adapt to the visible window
+(years → months → weeks → days). See the [implementation notes](./docs/advanced-chart.md).
+From `example/src/screens/AdvancedChartScreen`.
 
 ## Example app
 

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AxisLine = void 0;
-var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeSkia = require("react-native-skia");
 var _reactNative = require("react-native");
 var _reactNativeReanimated = require("react-native-reanimated");
 var _gesture = require("../gesture.js");

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

@@ -4,41 +4,81 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BottomAxis = void 0;
-var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeSkia = require("react-native-skia");
+var _react = require("react");
 var _AxisLine = require("./AxisLine.js");
 var _Tick = require("./Tick.js");
 var _jsxRuntime = require("react/jsx-runtime");
-// ChartUtilsScreen.tsx
+/** A tick at an explicit position in graph space, as returned by a d3 scale. */
 
 const BottomAxis = function (props) {
   const {
     labels,
+    ticks,
     scale,
     focalX,
     offsetX,
     style,
     width,
-    font
+    font,
+    offsetY = 0,
+    standalone = true,
+    showAxisLine = true,
+    color,
+    labelColor,
+    tickLength,
+    strokeWidth,
+    dash,
+    labelAlign,
+    labelGap,
+    showLabels
   } = props;
-  const offsetY = props.offsetY ?? 0;
-  const tickInterval = labels.length > 1 ? width / (labels.length - 1) : 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Canvas, {
-    style: style,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AxisLine.AxisLine, {
+  const items = (0, _react.useMemo)(() => {
+    if (ticks !== undefined) return ticks;
+    if (labels === undefined) return [];
+    const interval = labels.length > 1 ? width / (labels.length - 1) : 0;
+    return labels.map((label, i) => ({
+      x: interval * i,
+      label
+    }));
+  }, [ticks, labels, width]);
+
+  // Callers naturally write `dash={[3, 4]}`; keying the memo on the values
+  // keeps one reference so the memoized Ticks are not rebuilt every render
+  const dashStart = dash?.[0];
+  const dashEnd = dash?.[1];
+  const dashIntervals = (0, _react.useMemo)(() => dashStart === undefined || dashEnd === undefined ? undefined : [dashStart, dashEnd], [dashStart, dashEnd]);
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [showAxisLine ? /*#__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,
+      color,
+      strokeWidth
+    }) : null, items.map(tick => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tick.Tick, {
+      initPosition: tick.x,
+      label: tick.label,
+      dash: dashIntervals,
       offsetX,
       offsetY,
       focalX,
       scale,
-      font
-    }, i))]
+      font,
+      color,
+      labelColor,
+      tickLength,
+      strokeWidth,
+      labelAlign,
+      labelGap,
+      showLabel: showLabels
+    }, `${tick.x}:${tick.label}`))]
+  });
+  if (!standalone) return content;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Canvas, {
+    style: style,
+    children: content
   });
 };
 exports.BottomAxis = BottomAxis;

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

@@ -1 +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,GAAGR,MAAM,CAACS,MAAM,GAAG,CAAC,GAAGJ,KAAK,IAAIL,MAAM,CAACS,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC;EAExE,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":[]}
+{"version":3,"names":["_reactNativeSkia","require","_react","_AxisLine","_Tick","_jsxRuntime","BottomAxis","props","labels","ticks","scale","focalX","offsetX","style","width","font","offsetY","standalone","showAxisLine","color","labelColor","tickLength","strokeWidth","dash","labelAlign","labelGap","showLabels","items","useMemo","undefined","interval","length","map","label","i","x","dashStart","dashEnd","dashIntervals","content","jsxs","Fragment","children","jsx","AxisLine","tick","Tick","initPosition","showLabel","Canvas","exports"],"sourceRoot":"../../../../src","sources":["Charts/BottomAxis/BottomAxis.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -4,40 +4,56 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tick = void 0;
-var _reactNativeSkia = require("@shopify/react-native-skia");
-var _react = _interopRequireDefault(require("react"));
+var _reactNativeSkia = require("react-native-skia");
+var _react = require("react");
 var _reactNativeReanimated = require("react-native-reanimated");
 var _gesture = require("../gesture.js");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Tick = props => {
+const TickComponent = function (props) {
   const {
     label,
     scale,
     focalX,
     offsetX,
     initPosition,
-    font
+    font,
+    color = 'black',
+    labelColor,
+    tickLength = 10,
+    strokeWidth,
+    dash,
+    showLabel = true,
+    labelAlign = 'center',
+    labelGap = 6
   } = props;
   const offsetY = props.offsetY ?? 0;
   const transform = (0, _reactNativeReanimated.useDerivedValue)(() => [{
     translateX: (0, _gesture.getPositionWl)(initPosition, focalX.value, scale.value, offsetX.value)
   }]);
-  const width = font.getGlyphWidths(font.getGlyphIDs(label)).reduce((a, b) => a + b, 0);
+  const width = (0, _react.useMemo)(() => font.getGlyphWidths(font.getGlyphIDs(label)).reduce((a, b) => a + b, 0), [font, label]);
+  const labelX = labelAlign === 'left' ? labelGap : -width / 2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
     transform: transform,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Line, {
-      color: "black",
+      color: color,
+      strokeWidth: strokeWidth,
       p1: (0, _reactNativeSkia.vec)(0, offsetY),
-      p2: (0, _reactNativeSkia.vec)(0, offsetY + 10)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
+      p2: (0, _reactNativeSkia.vec)(0, offsetY + tickLength),
+      children: dash !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.DashPathEffect, {
+        intervals: dash
+      }) : null
+    }), showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
       text: label,
-      color: "black",
-      x: -width / 2,
+      color: labelColor ?? color,
+      x: labelX,
       y: offsetY + 23,
       font: font
-    })]
+    }) : null]
   });
 };
-exports.Tick = Tick;
+
+// Memoized: zoom/pan flows through shared values, so a Tick only needs to
+// re-render when its label or base position changes
+const Tick = exports.Tick = /*#__PURE__*/(0, _react.memo)(TickComponent);
+Tick.displayName = 'Tick';
 //# sourceMappingURL=Tick.js.map

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

@@ -1 +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,EAAC,MAAM,CACtC;IACEC,UAAU,EAAE,IAAAC,sBAAa,EACvBN,YAAY,EACZF,MAAM,CAACS,KAAK,EACZV,KAAK,CAACU,KAAK,EACXR,OAAO,CAACQ,KACV;EACF,CAAC,CACF,CAAC;EACF,MAAMC,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":[]}
+{"version":3,"names":["_reactNativeSkia","require","_react","_reactNativeReanimated","_gesture","_jsxRuntime","TickComponent","props","label","scale","focalX","offsetX","initPosition","font","color","labelColor","tickLength","strokeWidth","dash","showLabel","labelAlign","labelGap","offsetY","transform","useDerivedValue","translateX","getPositionWl","value","width","useMemo","getGlyphWidths","getGlyphIDs","reduce","a","b","labelX","jsxs","Group","children","jsx","Line","p1","vec","p2","undefined","DashPathEffect","intervals","Text","text","x","y","Tick","exports","memo","displayName"],"sourceRoot":"../../../../src","sources":["Charts/BottomAxis/Tick.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AASA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAA2C,IAAAI,WAAA,GAAAJ,OAAA;AAwB3C,MAAMK,aAAa,GAAG,SAAAA,CAAUC,KAAgB,EAAE;EAChD,MAAM;IACJC,KAAK;IACLC,KAAK;IACLC,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,IAAI;IACJC,KAAK,GAAG,OAAO;IACfC,UAAU;IACVC,UAAU,GAAG,EAAE;IACfC,WAAW;IACXC,IAAI;IACJC,SAAS,GAAG,IAAI;IAChBC,UAAU,GAAG,QAAQ;IACrBC,QAAQ,GAAG;EACb,CAAC,GAAGd,KAAK;EACT,MAAMe,OAAO,GAAGf,KAAK,CAACe,OAAO,IAAI,CAAC;EAClC,MAAMC,SAAS,GAAG,IAAAC,sCAAe,EAAC,MAAM,CACtC;IACEC,UAAU,EAAE,IAAAC,sBAAa,EACvBd,YAAY,EACZF,MAAM,CAACiB,KAAK,EACZlB,KAAK,CAACkB,KAAK,EACXhB,OAAO,CAACgB,KACV;EACF,CAAC,CACF,CAAC;EACF,MAAMC,KAAK,GAAG,IAAAC,cAAO,EACnB,MACEhB,IAAI,CAACiB,cAAc,CAACjB,IAAI,CAACkB,WAAW,CAACvB,KAAK,CAAC,CAAC,CAACwB,MAAM,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,EAAE,CAAC,CAAC,EACzE,CAACrB,IAAI,EAAEL,KAAK,CACd,CAAC;EACD,MAAM2B,MAAM,GAAGf,UAAU,KAAK,MAAM,GAAGC,QAAQ,GAAG,CAACO,KAAK,GAAG,CAAC;EAE5D,oBACE,IAAAvB,WAAA,CAAA+B,IAAA,EAACpC,gBAAA,CAAAqC,KAAK;IAACd,SAAS,EAAEA,SAAU;IAAAe,QAAA,gBAC1B,IAAAjC,WAAA,CAAAkC,GAAA,EAACvC,gBAAA,CAAAwC,IAAI;MACH1B,KAAK,EAAEA,KAAM;MACbG,WAAW,EAAEA,WAAY;MACzBwB,EAAE,EAAE,IAAAC,oBAAG,EAAC,CAAC,EAAEpB,OAAO,CAAE;MACpBqB,EAAE,EAAE,IAAAD,oBAAG,EAAC,CAAC,EAAEpB,OAAO,GAAGN,UAAU,CAAE;MAAAsB,QAAA,EAEhCpB,IAAI,KAAK0B,SAAS,gBAAG,IAAAvC,WAAA,CAAAkC,GAAA,EAACvC,gBAAA,CAAA6C,cAAc;QAACC,SAAS,EAAE5B;MAAK,CAAE,CAAC,GAAG;IAAI,CAC5D,CAAC,EACNC,SAAS,gBACR,IAAAd,WAAA,CAAAkC,GAAA,EAACvC,gBAAA,CAAA+C,IAAI;MACHC,IAAI,EAAExC,KAAM;MACZM,KAAK,EAAEC,UAAU,IAAID,KAAM;MAC3BmC,CAAC,EAAEd,MAAO;MACVe,CAAC,EAAE5B,OAAO,GAAG,EAAG;MAChBT,IAAI,EAAEA;IAAK,CACZ,CAAC,GACA,IAAI;EAAA,CACH,CAAC;AAEZ,CAAC;;AAED;AACA;AACO,MAAMsC,IAAI,GAAAC,OAAA,CAAAD,IAAA,gBAAG,IAAAE,WAAI,EAAC/C,aAAa,CAAC;AACvC6C,IAAI,CAACG,WAAW,GAAG,MAAM","ignoreList":[]}

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

@@ -1 +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":[]}
+{"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;AAKA,IAAAE,KAAA,GAAAF,OAAA","ignoreList":[]}

package/lib/commonjs/Charts/Cursor.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Cursor = void 0;
-var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeSkia = require("react-native-skia");
+var _react = require("react");
 var _reactNativeReanimated = require("react-native-reanimated");
 var _maths = require("./maths.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -13,19 +14,28 @@ const Cursor = function ({
   commands,
   positionX,
   color,
+  strokeColor,
+  strokeWidth = 2,
   currentValue,
   translateY,
   size = CURSOR_SIZE
 }) {
-  if (currentValue !== undefined && translateY !== undefined) {
-    console.warn('currentValue has no effect when translateY is set');
-  }
-  const derivedTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => {
+  const conflictingProps = currentValue !== undefined && translateY !== undefined;
+  (0, _react.useEffect)(() => {
+    if (conflictingProps) console.warn('currentValue has no effect when translateY is set');
+  }, [conflictingProps]);
+
+  // Normalized once per path change, not on every cursor move
+  const beziers = (0, _reactNativeReanimated.useDerivedValue)(() => {
     const _commands = commands?.value;
-    if (_commands === undefined) {
+    return _commands === undefined ? undefined : (0, _maths.commandsToBezier)(_commands);
+  });
+  const derivedTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const _beziers = beziers.value;
+    if (_beziers === undefined) {
       return 0;
     }
-    const _value = (0, _maths.getYForX)(_commands, positionX.value) ?? 0;
+    const _value = (0, _maths.getYForXOnBeziers)(_beziers, positionX.value) ?? 0;
     if (translateY === undefined && currentValue !== undefined) {
       currentValue.value = _value;
     }
@@ -37,12 +47,22 @@ const Cursor = function ({
   }, {
     translateY: _translateY.value ?? 0
   }]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Circle, {
-    transform: transform,
-    cx: 0,
-    cy: 0,
-    r: size,
-    color: color
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Circle, {
+      transform: transform,
+      cx: 0,
+      cy: 0,
+      r: size,
+      color: color
+    }), strokeColor !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Circle, {
+      transform: transform,
+      cx: 0,
+      cy: 0,
+      r: size,
+      color: strokeColor,
+      style: "stroke",
+      strokeWidth: strokeWidth
+    }) : null]
   });
 };
 exports.Cursor = Cursor;

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNativeSkia","require","_reactNativeReanimated","_maths","_jsxRuntime","CURSOR_SIZE","Cursor","commands","positionX","color","currentValue","translateY","size","undefined","console","warn","derivedTranslateY","useDerivedValue","_commands","value","_value","getYForX","_translateY","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,iBAAiB,GAAG,IAAAC,sCAAe,EAAC,MAAM;IAC9C,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,IAAIR,UAAU,KAAKE,SAAS,IAAIH,YAAY,KAAKG,SAAS,EAAE;MAC1DH,YAAY,CAACS,KAAK,GAAGC,MAAM;IAC7B;IACA,OAAOA,MAAM;EACf,CAAC,CAAC;EAEF,MAAME,WAAW,GAAGX,UAAU,IAAIK,iBAAiB;EAEnD,MAAMO,SAAS,GAAG,IAAAN,sCAAe,EAAC,MAAM,CACtC;IAAEO,UAAU,EAAEhB,SAAS,CAACW;EAAM,CAAC,EAC/B;IAAER,UAAU,EAAEW,WAAW,CAACH,KAAK,IAAI;EAAE,CAAC,CACvC,CAAC;EACF,oBAAO,IAAAf,WAAA,CAAAqB,GAAA,EAACzB,gBAAA,CAAA0B,MAAM;IAACH,SAAS,EAAEA,SAAU;IAACI,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE,CAAE;IAACC,CAAC,EAAEjB,IAAK;IAACH,KAAK,EAAEA;EAAM,CAAE,CAAC;AAC9E,CAAC;AAACqB,OAAA,CAAAxB,MAAA,GAAAA,MAAA","ignoreList":[]}
+{"version":3,"names":["_reactNativeSkia","require","_react","_reactNativeReanimated","_maths","_jsxRuntime","CURSOR_SIZE","Cursor","commands","positionX","color","strokeColor","strokeWidth","currentValue","translateY","size","conflictingProps","undefined","useEffect","console","warn","beziers","useDerivedValue","_commands","value","commandsToBezier","derivedTranslateY","_beziers","_value","getYForXOnBeziers","_translateY","transform","translateX","jsxs","Fragment","children","jsx","Circle","cx","cy","r","style","exports"],"sourceRoot":"../../../src","sources":["Charts/Cursor.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA8D,IAAAI,WAAA,GAAAJ,OAAA;AAE9D,MAAMK,WAAW,GAAG,EAAE;AActB,MAAMC,MAAuB,GAAG,SAAAA,CAAU;EACxCC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,WAAW;EACXC,WAAW,GAAG,CAAC;EACfC,YAAY;EACZC,UAAU;EACVC,IAAI,GAAGT;AACT,CAAC,EAAE;EACD,MAAMU,gBAAgB,GAAGH,YAAY,KAAKI,SAAS,IAAIH,UAAU,KAAKG,SAAS;EAC/E,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIF,gBAAgB,EAClBG,OAAO,CAACC,IAAI,CAAC,mDAAmD,CAAC;EACrE,CAAC,EAAE,CAACJ,gBAAgB,CAAC,CAAC;;EAEtB;EACA,MAAMK,OAAO,GAAG,IAAAC,sCAAe,EAAC,MAAM;IACpC,MAAMC,SAAS,GAAGf,QAAQ,EAAEgB,KAAK;IACjC,OAAOD,SAAS,KAAKN,SAAS,GAAGA,SAAS,GAAG,IAAAQ,uBAAgB,EAACF,SAAS,CAAC;EAC1E,CAAC,CAAC;EAEF,MAAMG,iBAAiB,GAAG,IAAAJ,sCAAe,EAAC,MAAM;IAC9C,MAAMK,QAAQ,GAAGN,OAAO,CAACG,KAAK;IAC9B,IAAIG,QAAQ,KAAKV,SAAS,EAAE;MAC1B,OAAO,CAAC;IACV;IACA,MAAMW,MAAM,GAAG,IAAAC,wBAAiB,EAACF,QAAQ,EAAElB,SAAS,CAACe,KAAK,CAAC,IAAI,CAAC;IAChE,IAAIV,UAAU,KAAKG,SAAS,IAAIJ,YAAY,KAAKI,SAAS,EAAE;MAC1DJ,YAAY,CAACW,KAAK,GAAGI,MAAM;IAC7B;IACA,OAAOA,MAAM;EACf,CAAC,CAAC;EAEF,MAAME,WAAW,GAAGhB,UAAU,IAAIY,iBAAiB;EAEnD,MAAMK,SAAS,GAAG,IAAAT,sCAAe,EAAC,MAAM,CACtC;IAAEU,UAAU,EAAEvB,SAAS,CAACe;EAAM,CAAC,EAC/B;IAAEV,UAAU,EAAEgB,WAAW,CAACN,KAAK,IAAI;EAAE,CAAC,CACvC,CAAC;EACF,oBACE,IAAAnB,WAAA,CAAA4B,IAAA,EAAA5B,WAAA,CAAA6B,QAAA;IAAAC,QAAA,gBACE,IAAA9B,WAAA,CAAA+B,GAAA,EAACpC,gBAAA,CAAAqC,MAAM;MAACN,SAAS,EAAEA,SAAU;MAACO,EAAE,EAAE,CAAE;MAACC,EAAE,EAAE,CAAE;MAACC,CAAC,EAAEzB,IAAK;MAACL,KAAK,EAAEA;IAAM,CAAE,CAAC,EACpEC,WAAW,KAAKM,SAAS,gBACxB,IAAAZ,WAAA,CAAA+B,GAAA,EAACpC,gBAAA,CAAAqC,MAAM;MACLN,SAAS,EAAEA,SAAU;MACrBO,EAAE,EAAE,CAAE;MACNC,EAAE,EAAE,CAAE;MACNC,CAAC,EAAEzB,IAAK;MACRL,KAAK,EAAEC,WAAY;MACnB8B,KAAK,EAAC,QAAQ;MACd7B,WAAW,EAAEA;IAAY,CAC1B,CAAC,GACA,IAAI;EAAA,CACR,CAAC;AAEP,CAAC;AAAC8B,OAAA,CAAAnC,MAAA,GAAAA,MAAA","ignoreList":[]}

package/lib/commonjs/Charts/Dot.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dot = void 0;
+var _reactNativeSkia = require("react-native-skia");
+var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _gesture = require("./gesture.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function DotComponent(props) {
+  const {
+    x,
+    y,
+    opacity = 1,
+    r = 4,
+    color = 'black',
+    fillColor,
+    strokeWidth = 2,
+    scale,
+    focalX,
+    offsetX
+  } = props;
+  const cx = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const _x = typeof x === 'number' ? x : x.value;
+    if (scale === undefined || focalX === undefined || offsetX === undefined) return _x;
+    return (0, _gesture.getPositionWl)(_x, focalX.value, scale.value, offsetX.value);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+    opacity: opacity,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Circle, {
+      cx: cx,
+      cy: y,
+      r: r,
+      color: fillColor ?? color
+    }), fillColor !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Circle, {
+      cx: cx,
+      cy: y,
+      r: r,
+      style: "stroke",
+      color: color,
+      strokeWidth: strokeWidth
+    }) : null]
+  });
+}
+
+// Memoized: charts render many dots and the position updates flow through
+// shared values, so parent re-renders don't need to reach them
+const Dot = exports.Dot = /*#__PURE__*/(0, _react.memo)(DotComponent);
+//# sourceMappingURL=Dot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_react","_reactNativeReanimated","_gesture","_jsxRuntime","DotComponent","props","x","y","opacity","r","color","fillColor","strokeWidth","scale","focalX","offsetX","cx","useDerivedValue","_x","value","undefined","getPositionWl","jsxs","Group","children","jsx","Circle","cy","style","Dot","exports","memo"],"sourceRoot":"../../../src","sources":["Charts/Dot.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAA0C,IAAAI,WAAA,GAAAJ,OAAA;AAoB1C,SAASK,YAAYA,CAACC,KAAe,EAAE;EACrC,MAAM;IACJC,CAAC;IACDC,CAAC;IACDC,OAAO,GAAG,CAAC;IACXC,CAAC,GAAG,CAAC;IACLC,KAAK,GAAG,OAAO;IACfC,SAAS;IACTC,WAAW,GAAG,CAAC;IACfC,KAAK;IACLC,MAAM;IACNC;EACF,CAAC,GAAGV,KAAK;EAET,MAAMW,EAAE,GAAG,IAAAC,sCAAe,EAAC,MAAM;IAC/B,MAAMC,EAAE,GAAG,OAAOZ,CAAC,KAAK,QAAQ,GAAGA,CAAC,GAAGA,CAAC,CAACa,KAAK;IAC9C,IAAIN,KAAK,KAAKO,SAAS,IAAIN,MAAM,KAAKM,SAAS,IAAIL,OAAO,KAAKK,SAAS,EACtE,OAAOF,EAAE;IACX,OAAO,IAAAG,sBAAa,EAACH,EAAE,EAAEJ,MAAM,CAACK,KAAK,EAAEN,KAAK,CAACM,KAAK,EAAEJ,OAAO,CAACI,KAAK,CAAC;EACpE,CAAC,CAAC;EAEF,oBACE,IAAAhB,WAAA,CAAAmB,IAAA,EAACxB,gBAAA,CAAAyB,KAAK;IAACf,OAAO,EAAEA,OAAQ;IAAAgB,QAAA,gBACtB,IAAArB,WAAA,CAAAsB,GAAA,EAAC3B,gBAAA,CAAA4B,MAAM;MAACV,EAAE,EAAEA,EAAG;MAACW,EAAE,EAAEpB,CAAE;MAACE,CAAC,EAAEA,CAAE;MAACC,KAAK,EAAEC,SAAS,IAAID;IAAM,CAAE,CAAC,EACzDC,SAAS,KAAKS,SAAS,gBACtB,IAAAjB,WAAA,CAAAsB,GAAA,EAAC3B,gBAAA,CAAA4B,MAAM;MACLV,EAAE,EAAEA,EAAG;MACPW,EAAE,EAAEpB,CAAE;MACNE,CAAC,EAAEA,CAAE;MACLmB,KAAK,EAAC,QAAQ;MACdlB,KAAK,EAAEA,KAAM;MACbE,WAAW,EAAEA;IAAY,CAC1B,CAAC,GACA,IAAI;EAAA,CACH,CAAC;AAEZ;;AAEA;AACA;AACO,MAAMiB,GAAG,GAAAC,OAAA,CAAAD,GAAA,gBAAG,IAAAE,WAAI,EAAC3B,YAAY,CAAC","ignoreList":[]}

package/lib/commonjs/Charts/Dots.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dots = void 0;
+var _reactNativeSkia = require("react-native-skia");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _gesture = require("./gesture.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Draw a whole series of dots as a single Skia path (two with `fillColor`).
+ * Unlike mapping over {@link Dot}, this runs one worklet per frame instead of
+ * one per dot, which keeps large series smooth during zoom/pan gestures.
+ * Per-dot opacity is binary here: dots below 0.5 are hidden.
+ */
+const Dots = function (props) {
+  const {
+    dots,
+    r = 4,
+    shape = 'circle',
+    color = 'black',
+    fillColor,
+    strokeWidth = 2,
+    width,
+    scale,
+    focalX,
+    offsetX
+  } = props;
+  const path = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const p = _reactNativeSkia.Skia.PathBuilder.Make();
+    const margin = r + strokeWidth;
+    for (const dot of dots) {
+      if (dot.opacity.value < 0.5) continue;
+      const x = scale === undefined || focalX === undefined || offsetX === undefined ? dot.x.value : (0, _gesture.getPositionWl)(dot.x.value, focalX.value, scale.value, offsetX.value);
+      if (width !== undefined && (x < -margin || x > width + margin)) continue;
+      const y = dot.y.value;
+      if (shape === 'diamond') {
+        // One addPoly beats four moveTo/lineTo calls: each is a JSI hop, and
+        // this worklet rebuilds every dot on every frame of a gesture
+        p.addPoly([{
+          x,
+          y: y - r
+        }, {
+          x: x + r,
+          y
+        }, {
+          x,
+          y: y + r
+        }, {
+          x: x - r,
+          y
+        }], true);
+      } else {
+        p.addCircle(x, y, r);
+      }
+    }
+    return p.build();
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Path, {
+      path: path,
+      color: fillColor ?? color
+    }), fillColor !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Path, {
+      path: path,
+      style: "stroke",
+      color: color,
+      strokeWidth: strokeWidth,
+      strokeJoin: "round"
+    }) : null]
+  });
+};
+exports.Dots = Dots;
+//# sourceMappingURL=Dots.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_reactNativeReanimated","_gesture","_jsxRuntime","Dots","props","dots","r","shape","color","fillColor","strokeWidth","width","scale","focalX","offsetX","path","useDerivedValue","p","Skia","PathBuilder","Make","margin","dot","opacity","value","x","undefined","getPositionWl","y","addPoly","addCircle","build","jsxs","Fragment","children","jsx","Path","style","strokeJoin","exports"],"sourceRoot":"../../../src","sources":["Charts/Dots.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAEA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAA0C,IAAAG,WAAA,GAAAH,OAAA;AAqB1C;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,IAAmB,GAAG,SAAAA,CAAUC,KAAK,EAAE;EAC3C,MAAM;IACJC,IAAI;IACJC,CAAC,GAAG,CAAC;IACLC,KAAK,GAAG,QAAQ;IAChBC,KAAK,GAAG,OAAO;IACfC,SAAS;IACTC,WAAW,GAAG,CAAC;IACfC,KAAK;IACLC,KAAK;IACLC,MAAM;IACNC;EACF,CAAC,GAAGV,KAAK;EAET,MAAMW,IAAI,GAAG,IAAAC,sCAAe,EAAC,MAAM;IACjC,MAAMC,CAAC,GAAGC,qBAAI,CAACC,WAAW,CAACC,IAAI,CAAC,CAAC;IACjC,MAAMC,MAAM,GAAGf,CAAC,GAAGI,WAAW;IAC9B,KAAK,MAAMY,GAAG,IAAIjB,IAAI,EAAE;MACtB,IAAIiB,GAAG,CAACC,OAAO,CAACC,KAAK,GAAG,GAAG,EAAE;MAC7B,MAAMC,CAAC,GACLb,KAAK,KAAKc,SAAS,IAAIb,MAAM,KAAKa,SAAS,IAAIZ,OAAO,KAAKY,SAAS,GAChEJ,GAAG,CAACG,CAAC,CAACD,KAAK,GACX,IAAAG,sBAAa,EACXL,GAAG,CAACG,CAAC,CAACD,KAAK,EACXX,MAAM,CAACW,KAAK,EACZZ,KAAK,CAACY,KAAK,EACXV,OAAO,CAACU,KACV,CAAC;MACP,IAAIb,KAAK,KAAKe,SAAS,KAAKD,CAAC,GAAG,CAACJ,MAAM,IAAII,CAAC,GAAGd,KAAK,GAAGU,MAAM,CAAC,EAAE;MAChE,MAAMO,CAAC,GAAGN,GAAG,CAACM,CAAC,CAACJ,KAAK;MACrB,IAAIjB,KAAK,KAAK,SAAS,EAAE;QACvB;QACA;QACAU,CAAC,CAACY,OAAO,CACP,CACE;UAAEJ,CAAC;UAAEG,CAAC,EAAEA,CAAC,GAAGtB;QAAE,CAAC,EACf;UAAEmB,CAAC,EAAEA,CAAC,GAAGnB,CAAC;UAAEsB;QAAE,CAAC,EACf;UAAEH,CAAC;UAAEG,CAAC,EAAEA,CAAC,GAAGtB;QAAE,CAAC,EACf;UAAEmB,CAAC,EAAEA,CAAC,GAAGnB,CAAC;UAAEsB;QAAE,CAAC,CAChB,EACD,IACF,CAAC;MACH,CAAC,MAAM;QACLX,CAAC,CAACa,SAAS,CAACL,CAAC,EAAEG,CAAC,EAAEtB,CAAC,CAAC;MACtB;IACF;IACA,OAAOW,CAAC,CAACc,KAAK,CAAC,CAAC;EAClB,CAAC,CAAC;EAEF,oBACE,IAAA7B,WAAA,CAAA8B,IAAA,EAAA9B,WAAA,CAAA+B,QAAA;IAAAC,QAAA,gBACE,IAAAhC,WAAA,CAAAiC,GAAA,EAACrC,gBAAA,CAAAsC,IAAI;MAACrB,IAAI,EAAEA,IAAK;MAACP,KAAK,EAAEC,SAAS,IAAID;IAAM,CAAE,CAAC,EAC9CC,SAAS,KAAKiB,SAAS,gBACtB,IAAAxB,WAAA,CAAAiC,GAAA,EAACrC,gBAAA,CAAAsC,IAAI;MACHrB,IAAI,EAAEA,IAAK;MACXsB,KAAK,EAAC,QAAQ;MACd7B,KAAK,EAAEA,KAAM;MACbE,WAAW,EAAEA,WAAY;MACzB4B,UAAU,EAAC;IAAO,CACnB,CAAC,GACA,IAAI;EAAA,CACR,CAAC;AAEP,CAAC;AAACC,OAAA,CAAApC,IAAA,GAAAA,IAAA","ignoreList":[]}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LineChart = void 0;
-var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeSkia = require("react-native-skia");
 var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/Charts/YAxis.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPaddedTicks = exports.YAxis = void 0;
+var _reactNativeSkia = require("react-native-skia");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultFormatLabel = value => `${Math.round(value)}`;
+
+/** Evenly spaced integer ticks from 0 to a padded maximum, e.g. 0, 26, 52, 78, 104. */
+const getPaddedTicks = function (maxValue, nbTicks = 4, padding = 1.15) {
+  const step = Math.max(1, Math.ceil(maxValue * padding / nbTicks));
+  return Array.from({
+    length: nbTicks + 1
+  }, (_, i) => i * step);
+};
+exports.getPaddedTicks = getPaddedTicks;
+const YAxis = function (props) {
+  const {
+    width,
+    height,
+    font,
+    minY,
+    maxY,
+    nbTicks = 4,
+    color = 'black',
+    labelColor,
+    strokeWidth = _reactNative.StyleSheet.hairlineWidth,
+    showLabels = true,
+    formatLabel = defaultFormatLabel
+  } = props;
+
+  // Measured once per input change: parents re-render while panning
+  const rows = (0, _react.useMemo)(() => {
+    // A flat range would divide by zero
+    const span = maxY - minY || 1;
+    const values = props.values ?? Array.from({
+      length: nbTicks
+    }, (_, i) => minY + (i + 1) * (maxY - minY) / nbTicks);
+    return values.map(value => {
+      const label = formatLabel(value);
+      const labelWidth = font.getGlyphWidths(font.getGlyphIDs(label)).reduce((a, b) => a + b, 0);
+      return {
+        label,
+        labelWidth,
+        transform: [{
+          translateY: height - (value - minY) * height / span
+        }],
+        p1: (0, _reactNativeSkia.vec)(0, 0),
+        p2: (0, _reactNativeSkia.vec)(showLabels ? width - 10 - labelWidth : width, 0)
+      };
+    });
+  }, [props.values, nbTicks, minY, maxY, height, width, font, showLabels, formatLabel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Group, {
+    children: rows.map((row, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+      transform: row.transform,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Line, {
+        p1: row.p1,
+        p2: row.p2,
+        color: color,
+        strokeWidth: strokeWidth
+      }), showLabels ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
+        text: row.label,
+        x: width - row.labelWidth,
+        y: font.getSize() / 2.5,
+        font: font,
+        color: labelColor ?? color
+      }) : null]
+    }, `YTick-${i}`))
+  });
+};
+const MemoYAxis = exports.YAxis = /*#__PURE__*/(0, _react.memo)(YAxis);
+MemoYAxis.displayName = 'YAxis';
+//# sourceMappingURL=YAxis.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_react","_reactNative","_jsxRuntime","defaultFormatLabel","value","Math","round","getPaddedTicks","maxValue","nbTicks","padding","step","max","ceil","Array","from","length","_","i","exports","YAxis","props","width","height","font","minY","maxY","color","labelColor","strokeWidth","StyleSheet","hairlineWidth","showLabels","formatLabel","rows","useMemo","span","values","map","label","labelWidth","getGlyphWidths","getGlyphIDs","reduce","a","b","transform","translateY","p1","vec","p2","jsx","Group","children","row","jsxs","Line","Text","text","x","y","getSize","MemoYAxis","memo","displayName"],"sourceRoot":"../../../src","sources":["Charts/YAxis.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAQA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAA0C,IAAAG,WAAA,GAAAH,OAAA;AAkB1C,MAAMI,kBAAkB,GAAIC,KAAa,IAAK,GAAGC,IAAI,CAACC,KAAK,CAACF,KAAK,CAAC,EAAE;;AAEpE;AACO,MAAMG,cAAc,GAAG,SAAAA,CAC5BC,QAAgB,EAChBC,OAAO,GAAG,CAAC,EACXC,OAAO,GAAG,IAAI,EACJ;EACV,MAAMC,IAAI,GAAGN,IAAI,CAACO,GAAG,CAAC,CAAC,EAAEP,IAAI,CAACQ,IAAI,CAAEL,QAAQ,GAAGE,OAAO,GAAID,OAAO,CAAC,CAAC;EACnE,OAAOK,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEP,OAAO,GAAG;EAAE,CAAC,EAAE,CAACQ,CAAC,EAAEC,CAAC,KAAKA,CAAC,GAAGP,IAAI,CAAC;AAChE,CAAC;AAACQ,OAAA,CAAAZ,cAAA,GAAAA,cAAA;AAEF,MAAMa,KAAqB,GAAG,SAAAA,CAAUC,KAAK,EAAE;EAC7C,MAAM;IACJC,KAAK;IACLC,MAAM;IACNC,IAAI;IACJC,IAAI;IACJC,IAAI;IACJjB,OAAO,GAAG,CAAC;IACXkB,KAAK,GAAG,OAAO;IACfC,UAAU;IACVC,WAAW,GAAGC,uBAAU,CAACC,aAAa;IACtCC,UAAU,GAAG,IAAI;IACjBC,WAAW,GAAG9B;EAChB,CAAC,GAAGkB,KAAK;;EAET;EACA,MAAMa,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB;IACA,MAAMC,IAAI,GAAGV,IAAI,GAAGD,IAAI,IAAI,CAAC;IAC7B,MAAMY,MAAM,GACVhB,KAAK,CAACgB,MAAM,IACZvB,KAAK,CAACC,IAAI,CACR;MAAEC,MAAM,EAAEP;IAAQ,CAAC,EACnB,CAACQ,CAAC,EAAEC,CAAC,KAAKO,IAAI,GAAI,CAACP,CAAC,GAAG,CAAC,KAAKQ,IAAI,GAAGD,IAAI,CAAC,GAAIhB,OAC/C,CAAC;IACH,OAAO4B,MAAM,CAACC,GAAG,CAAElC,KAAK,IAAK;MAC3B,MAAMmC,KAAK,GAAGN,WAAW,CAAC7B,KAAK,CAAC;MAChC,MAAMoC,UAAU,GAAGhB,IAAI,CACpBiB,cAAc,CAACjB,IAAI,CAACkB,WAAW,CAACH,KAAK,CAAC,CAAC,CACvCI,MAAM,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,EAAE,CAAC,CAAC;MAC7B,OAAO;QACLN,KAAK;QACLC,UAAU;QACVM,SAAS,EAAE,CAAC;UAAEC,UAAU,EAAExB,MAAM,GAAI,CAACnB,KAAK,GAAGqB,IAAI,IAAIF,MAAM,GAAIa;QAAK,CAAC,CAAC;QACtEY,EAAE,EAAE,IAAAC,oBAAG,EAAC,CAAC,EAAE,CAAC,CAAC;QACbC,EAAE,EAAE,IAAAD,oBAAG,EAACjB,UAAU,GAAGV,KAAK,GAAG,EAAE,GAAGkB,UAAU,GAAGlB,KAAK,EAAE,CAAC;MACzD,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,EAAE,CAACD,KAAK,CAACgB,MAAM,EAAE5B,OAAO,EAAEgB,IAAI,EAAEC,IAAI,EAAEH,MAAM,EAAED,KAAK,EAAEE,IAAI,EAAEQ,UAAU,EAAEC,WAAW,CAAC,CAAC;EAErF,oBACE,IAAA/B,WAAA,CAAAiD,GAAA,EAACrD,gBAAA,CAAAsD,KAAK;IAAAC,QAAA,EACHnB,IAAI,CAACI,GAAG,CAAC,CAACgB,GAAG,EAAEpC,CAAC,kBACf,IAAAhB,WAAA,CAAAqD,IAAA,EAACzD,gBAAA,CAAAsD,KAAK;MAAoBN,SAAS,EAAEQ,GAAG,CAACR,SAAU;MAAAO,QAAA,gBACjD,IAAAnD,WAAA,CAAAiD,GAAA,EAACrD,gBAAA,CAAA0D,IAAI;QAACR,EAAE,EAAEM,GAAG,CAACN,EAAG;QAACE,EAAE,EAAEI,GAAG,CAACJ,EAAG;QAACvB,KAAK,EAAEA,KAAM;QAACE,WAAW,EAAEA;MAAY,CAAE,CAAC,EACvEG,UAAU,gBACT,IAAA9B,WAAA,CAAAiD,GAAA,EAACrD,gBAAA,CAAA2D,IAAI;QACHC,IAAI,EAAEJ,GAAG,CAACf,KAAM;QAChBoB,CAAC,EAAErC,KAAK,GAAGgC,GAAG,CAACd,UAAW;QAC1BoB,CAAC,EAAEpC,IAAI,CAACqC,OAAO,CAAC,CAAC,GAAG,GAAI;QACxBrC,IAAI,EAAEA,IAAK;QACXG,KAAK,EAAEC,UAAU,IAAID;MAAM,CAC5B,CAAC,GACA,IAAI;IAAA,GAVE,SAAST,CAAC,EAWf,CACR;EAAC,CACG,CAAC;AAEZ,CAAC;AAED,MAAM4C,SAAS,GAAA3C,OAAA,CAAAC,KAAA,gBAAG,IAAA2C,WAAI,EAAC3C,KAAK,CAAC;AAC7B0C,SAAS,CAACE,WAAW,GAAG,OAAO","ignoreList":[]}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScalablePath = void 0;
-var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeSkia = require("react-native-skia");
 var _reactNativeReanimated = require("react-native-reanimated");
 var _jsxRuntime = require("react/jsx-runtime");
 const ScalablePath = function (props) {
@@ -18,9 +18,10 @@ const ScalablePath = function (props) {
   } = props;
   const animatedPath = (0, _reactNativeReanimated.useDerivedValue)(() => {
     // Affine equivalent of getPositionWl: x' = scale * x + focalX * (1 - scale) + offsetX
-    const _path = path.value.copy();
-    _path.transform(_reactNativeSkia.Skia.Matrix().translate(focalX.value * (1 - scale.value) + offsetX.value, 0).scale(scale.value, 1));
-    return _path;
+    // Plain 3x3 matrix: a Skia.Matrix() would allocate a native object per frame
+    const s = scale.value;
+    const tx = focalX.value * (1 - s) + offsetX.value;
+    return _reactNativeSkia.Skia.PathBuilder.MakeFromPath(path.value).transform([s, 0, tx, 0, 1, 0, 0, 0, 1]).build();
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Path, {
     style: "stroke",

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNativeSkia","require","_reactNativeReanimated","_jsxRuntime","ScalablePath","props","path","scale","focalX","offsetX","pathProps","color","animatedPath","useDerivedValue","_path","value","copy","transform","Skia","Matrix","translate","jsx","Path","style","strokeWidth","strokeJoin","strokeCap","exports"],"sourceRoot":"../../../../src","sources":["Charts/ZoomableLinechart/ScalablePath.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAEA,IAAAC,sBAAA,GAAAD,OAAA;AAA4E,IAAAE,WAAA,GAAAF,OAAA;AAW5E,MAAMG,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;IACA,MAAMC,KAAK,GAAGR,IAAI,CAACS,KAAK,CAACC,IAAI,CAAC,CAAC;IAC/BF,KAAK,CAACG,SAAS,CACbC,qBAAI,CAACC,MAAM,CAAC,CAAC,CACVC,SAAS,CAACZ,MAAM,CAACO,KAAK,IAAI,CAAC,GAAGR,KAAK,CAACQ,KAAK,CAAC,GAAGN,OAAO,CAACM,KAAK,EAAE,CAAC,CAAC,CAC9DR,KAAK,CAACA,KAAK,CAACQ,KAAK,EAAE,CAAC,CACzB,CAAC;IACD,OAAOD,KAAK;EACd,CAAC,CAAC;EAEF,oBACE,IAAAX,WAAA,CAAAkB,GAAA,EAACrB,gBAAA,CAAAsB,IAAI;IACHC,KAAK,EAAC,QAAQ;IACdjB,IAAI,EAAEM,YAAa;IACnBY,WAAW,EAAE,CAAE;IACfC,UAAU,EAAC,OAAO;IAClBC,SAAS,EAAC,OAAO;IACjBf,KAAK,EAAEA,KAAM;IAAA,GACTD;EAAS,CACd,CAAC;AAEN,CAAC;AAACiB,OAAA,CAAAvB,YAAA,GAAAA,YAAA","ignoreList":[]}
+{"version":3,"names":["_reactNativeSkia","require","_reactNativeReanimated","_jsxRuntime","ScalablePath","props","path","scale","focalX","offsetX","pathProps","color","animatedPath","useDerivedValue","s","value","tx","Skia","PathBuilder","MakeFromPath","transform","build","jsx","Path","style","strokeWidth","strokeJoin","strokeCap","exports"],"sourceRoot":"../../../../src","sources":["Charts/ZoomableLinechart/ScalablePath.tsx"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAEA,IAAAC,sBAAA,GAAAD,OAAA;AAA4E,IAAAE,WAAA,GAAAF,OAAA;AAW5E,MAAMG,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;IACA;IACA,MAAMC,CAAC,GAAGP,KAAK,CAACQ,KAAK;IACrB,MAAMC,EAAE,GAAGR,MAAM,CAACO,KAAK,IAAI,CAAC,GAAGD,CAAC,CAAC,GAAGL,OAAO,CAACM,KAAK;IACjD,OAAOE,qBAAI,CAACC,WAAW,CAACC,YAAY,CAACb,IAAI,CAACS,KAAK,CAAC,CAC7CK,SAAS,CAAC,CAACN,CAAC,EAAE,CAAC,EAAEE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CACvCK,KAAK,CAAC,CAAC;EACZ,CAAC,CAAC;EAEF,oBACE,IAAAlB,WAAA,CAAAmB,GAAA,EAACtB,gBAAA,CAAAuB,IAAI;IACHC,KAAK,EAAC,QAAQ;IACdlB,IAAI,EAAEM,YAAa;IACnBa,WAAW,EAAE,CAAE;IACfC,UAAU,EAAC,OAAO;IAClBC,SAAS,EAAC,OAAO;IACjBhB,KAAK,EAAEA,KAAM;IAAA,GACTD;EAAS,CACd,CAAC;AAEN,CAAC;AAACkB,OAAA,CAAAxB,YAAA,GAAAA,YAAA","ignoreList":[]}

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "ScalablePath", {
   }
 });
 exports.ZoomableLineChart = void 0;
-var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeSkia = require("react-native-skia");
 var _react = _interopRequireDefault(require("react"));
 var _ScalablePath = require("./ScalablePath.js");
 var _jsxRuntime = require("react/jsx-runtime");