@obitrain/charts 0.10.4 → 0.11.0

package/README.md

@@ -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/BottomAxis.js

@@ -5,40 +5,80 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BottomAxis = void 0;
 var _reactNativeSkia = require("@shopify/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":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAGA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAA8B,IAAAI,WAAA,GAAAJ,OAAA;AAE9B;;AAgCA,MAAMK,UAA+B,GAAG,SAAAA,CAAUC,KAAK,EAAE;EACvD,MAAM;IACJC,MAAM;IACNC,KAAK;IACLC,KAAK;IACLC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,OAAO,GAAG,CAAC;IACXC,UAAU,GAAG,IAAI;IACjBC,YAAY,GAAG,IAAI;IACnBC,KAAK;IACLC,UAAU;IACVC,UAAU;IACVC,WAAW;IACXC,IAAI;IACJC,UAAU;IACVC,QAAQ;IACRC;EACF,CAAC,GAAGnB,KAAK;EAET,MAAMoB,KAAK,GAAG,IAAAC,cAAO,EAAa,MAAM;IACtC,IAAInB,KAAK,KAAKoB,SAAS,EAAE,OAAOpB,KAAK;IACrC,IAAID,MAAM,KAAKqB,SAAS,EAAE,OAAO,EAAE;IACnC,MAAMC,QAAQ,GAAGtB,MAAM,CAACuB,MAAM,GAAG,CAAC,GAAGjB,KAAK,IAAIN,MAAM,CAACuB,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC;IACpE,OAAOvB,MAAM,CAACwB,GAAG,CAAC,CAACC,KAAK,EAAEC,CAAC,MAAM;MAAEC,CAAC,EAAEL,QAAQ,GAAGI,CAAC;MAAED;IAAM,CAAC,CAAC,CAAC;EAC/D,CAAC,EAAE,CAACxB,KAAK,EAAED,MAAM,EAAEM,KAAK,CAAC,CAAC;;EAE1B;EACA;EACA,MAAMsB,SAAS,GAAGb,IAAI,GAAG,CAAC,CAAC;EAC3B,MAAMc,OAAO,GAAGd,IAAI,GAAG,CAAC,CAAC;EACzB,MAAMe,aAAa,GAAG,IAAAV,cAAO,EAC3B,MACEQ,SAAS,KAAKP,SAAS,IAAIQ,OAAO,KAAKR,SAAS,GAC5CA,SAAS,GACR,CAACO,SAAS,EAAEC,OAAO,CAAsB,EAChD,CAACD,SAAS,EAAEC,OAAO,CACrB,CAAC;EAED,MAAME,OAAO,gBACX,IAAAlC,WAAA,CAAAmC,IAAA,EAAAnC,WAAA,CAAAoC,QAAA;IAAAC,QAAA,GACGxB,YAAY,gBACX,IAAAb,WAAA,CAAAsC,GAAA,EAACxC,SAAA,CAAAyC,QAAQ;MACD9B,KAAK;MAAEE,OAAO;MAAEL,MAAM;MAAED,KAAK;MAAEE,OAAO;MAAEO,KAAK;MAAEG;IAAW,CACjE,CAAC,GACA,IAAI,EACPK,KAAK,CAACK,GAAG,CAAEa,IAAI,iBACd,IAAAxC,WAAA,CAAAsC,GAAA,EAACvC,KAAA,CAAA0C,IAAI;MAEHC,YAAY,EAAEF,IAAI,CAACV,CAAE;MACrBF,KAAK,EAAEY,IAAI,CAACZ,KAAM;MAClBV,IAAI,EAAEe,aAAc;MAElB1B,OAAO;MACPI,OAAO;MACPL,MAAM;MACND,KAAK;MACLK,IAAI;MACJI,KAAK;MACLC,UAAU;MACVC,UAAU;MACVC,WAAW;MACXE,UAAU;MACVC,QAAQ;MAEVuB,SAAS,EAAEtB;IAAW,GAjBjB,GAAGmB,IAAI,CAACV,CAAC,IAAIU,IAAI,CAACZ,KAAK,EAkB7B,CACF,CAAC;EAAA,CACF,CACH;EAED,IAAI,CAAChB,UAAU,EAAE,OAAOsB,OAAO;EAC/B,oBAAO,IAAAlC,WAAA,CAAAsC,GAAA,EAAC3C,gBAAA,CAAAiD,MAAM;IAACpC,KAAK,EAAEA,KAAM;IAAA6B,QAAA,EAAEH;EAAO,CAAS,CAAC;AACjD,CAAC;AAACW,OAAA,CAAA5C,UAAA,GAAAA,UAAA","ignoreList":[]}

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

@@ -5,39 +5,55 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tick = void 0;
 var _reactNativeSkia = require("@shopify/react-native-skia");
-var _react = _interopRequireDefault(require("react"));
+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 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","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,GAAGf,IAAI,CACfgB,cAAc,CAAChB,IAAI,CAACiB,WAAW,CAACtB,KAAK,CAAC,CAAC,CACvCuB,MAAM,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,EAAE,CAAC,CAAC;EAC7B,MAAMC,MAAM,GAAGd,UAAU,KAAK,MAAM,GAAGC,QAAQ,GAAG,CAACO,KAAK,GAAG,CAAC;EAE5D,oBACE,IAAAvB,WAAA,CAAA8B,IAAA,EAACnC,gBAAA,CAAAoC,KAAK;IAACb,SAAS,EAAEA,SAAU;IAAAc,QAAA,gBAC1B,IAAAhC,WAAA,CAAAiC,GAAA,EAACtC,gBAAA,CAAAuC,IAAI;MACHzB,KAAK,EAAEA,KAAM;MACbG,WAAW,EAAEA,WAAY;MACzBuB,EAAE,EAAE,IAAAC,oBAAG,EAAC,CAAC,EAAEnB,OAAO,CAAE;MACpBoB,EAAE,EAAE,IAAAD,oBAAG,EAAC,CAAC,EAAEnB,OAAO,GAAGN,UAAU,CAAE;MAAAqB,QAAA,EAEhCnB,IAAI,KAAKyB,SAAS,gBAAG,IAAAtC,WAAA,CAAAiC,GAAA,EAACtC,gBAAA,CAAA4C,cAAc;QAACC,SAAS,EAAE3B;MAAK,CAAE,CAAC,GAAG;IAAI,CAC5D,CAAC,EACNC,SAAS,gBACR,IAAAd,WAAA,CAAAiC,GAAA,EAACtC,gBAAA,CAAA8C,IAAI;MACHC,IAAI,EAAEvC,KAAM;MACZM,KAAK,EAAEC,UAAU,IAAID,KAAM;MAC3BkC,CAAC,EAAEd,MAAO;MACVe,CAAC,EAAE3B,OAAO,GAAG,EAAG;MAChBT,IAAI,EAAEA;IAAK,CACZ,CAAC,GACA,IAAI;EAAA,CACH,CAAC;AAEZ,CAAC;;AAED;AACA;AACO,MAAMqC,IAAI,GAAAC,OAAA,CAAAD,IAAA,gBAAG,IAAAE,WAAI,EAAC9C,aAAa,CAAC;AACvC4C,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

@@ -13,6 +13,8 @@ const Cursor = function ({
   commands,
   positionX,
   color,
+  strokeColor,
+  strokeWidth = 2,
   currentValue,
   translateY,
   size = CURSOR_SIZE
@@ -37,12 +39,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","_reactNativeReanimated","_maths","_jsxRuntime","CURSOR_SIZE","Cursor","commands","positionX","color","strokeColor","strokeWidth","currentValue","translateY","size","undefined","console","warn","derivedTranslateY","useDerivedValue","_commands","value","_value","getYForX","_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;AAEA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAAmC,IAAAG,WAAA,GAAAH,OAAA;AAEnC,MAAMI,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,IAAIO,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,GAAGb,QAAQ,EAAEc,KAAK;IACjC,IAAID,SAAS,KAAKL,SAAS,EAAE;MAC3B,OAAO,CAAC;IACV;IACA,MAAMO,MAAM,GAAG,IAAAC,eAAQ,EAACH,SAAS,EAAEZ,SAAS,CAACa,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,EAAElB,SAAS,CAACa;EAAM,CAAC,EAC/B;IAAER,UAAU,EAAEW,WAAW,CAACH,KAAK,IAAI;EAAE,CAAC,CACvC,CAAC;EACF,oBACE,IAAAjB,WAAA,CAAAuB,IAAA,EAAAvB,WAAA,CAAAwB,QAAA;IAAAC,QAAA,gBACE,IAAAzB,WAAA,CAAA0B,GAAA,EAAC9B,gBAAA,CAAA+B,MAAM;MAACN,SAAS,EAAEA,SAAU;MAACO,EAAE,EAAE,CAAE;MAACC,EAAE,EAAE,CAAE;MAACC,CAAC,EAAEpB,IAAK;MAACL,KAAK,EAAEA;IAAM,CAAE,CAAC,EACpEC,WAAW,KAAKK,SAAS,gBACxB,IAAAX,WAAA,CAAA0B,GAAA,EAAC9B,gBAAA,CAAA+B,MAAM;MACLN,SAAS,EAAEA,SAAU;MACrBO,EAAE,EAAE,CAAE;MACNC,EAAE,EAAE,CAAE;MACNC,CAAC,EAAEpB,IAAK;MACRL,KAAK,EAAEC,WAAY;MACnByB,KAAK,EAAC,QAAQ;MACdxB,WAAW,EAAEA;IAAY,CAC1B,CAAC,GACA,IAAI;EAAA,CACR,CAAC;AAEP,CAAC;AAACyB,OAAA,CAAA9B,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("@shopify/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("@shopify/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.Path.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;
+  });
+  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","Path","Make","margin","dot","opacity","value","x","undefined","getPositionWl","y","addPoly","addCircle","jsxs","Fragment","children","jsx","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,IAAI,CAACC,IAAI,CAAC,CAAC;IAC1B,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;EACV,CAAC,CAAC;EAEF,oBACE,IAAAf,WAAA,CAAA6B,IAAA,EAAA7B,WAAA,CAAA8B,QAAA;IAAAC,QAAA,gBACE,IAAA/B,WAAA,CAAAgC,GAAA,EAACpC,gBAAA,CAAAqB,IAAI;MAACJ,IAAI,EAAEA,IAAK;MAACP,KAAK,EAAEC,SAAS,IAAID;IAAM,CAAE,CAAC,EAC9CC,SAAS,KAAKiB,SAAS,gBACtB,IAAAxB,WAAA,CAAAgC,GAAA,EAACpC,gBAAA,CAAAqB,IAAI;MACHJ,IAAI,EAAEA,IAAK;MACXoB,KAAK,EAAC,QAAQ;MACd3B,KAAK,EAAEA,KAAM;MACbE,WAAW,EAAEA,WAAY;MACzB0B,UAAU,EAAC;IAAO,CACnB,CAAC,GACA,IAAI;EAAA,CACR,CAAC;AAEP,CAAC;AAACC,OAAA,CAAAlC,IAAA,GAAAA,IAAA","ignoreList":[]}

package/lib/commonjs/Charts/YAxis.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPaddedTicks = exports.YAxis = void 0;
+var _reactNativeSkia = require("@shopify/react-native-skia");
+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;
+  const values = props.values ?? Array.from({
+    length: nbTicks
+  }, (_, i) => minY + (i + 1) * (maxY - minY) / nbTicks);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Group, {
+    children: values.map((value, i) => {
+      const y = height - (value - minY) * height / (maxY - minY);
+      const label = formatLabel(value);
+      const labelWidth = font.getGlyphWidths(font.getGlyphIDs(label)).reduce((a, b) => a + b, 0);
+      const lineWidth = showLabels ? width - 10 - labelWidth : width;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+        transform: [{
+          translateY: y
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Line, {
+          p1: (0, _reactNativeSkia.vec)(0, 0),
+          p2: (0, _reactNativeSkia.vec)(lineWidth, 0),
+          color: color,
+          strokeWidth: strokeWidth
+        }), showLabels ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
+          text: label,
+          x: width - labelWidth,
+          y: font.getSize() / 2.5,
+          font: font,
+          color: labelColor ?? color
+        }) : null]
+      }, `YTick-${i}`);
+    })
+  });
+};
+exports.YAxis = YAxis;
+//# sourceMappingURL=YAxis.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeSkia","require","_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","values","jsx","Group","children","map","y","label","labelWidth","getGlyphWidths","getGlyphIDs","reduce","a","b","lineWidth","jsxs","transform","translateY","Line","p1","vec","p2","Text","text","x","getSize"],"sourceRoot":"../../../src","sources":["Charts/YAxis.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/Charts/gesture.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUpdateAxis = exports.useScalableGesture = exports.useCursorGesture = exports.getPositionWl = exports.getClosestPoint = void 0;
+exports.useUpdateAxis = exports.useScalableGesture = exports.useCursorGesture = exports.getPositionWl = exports.getOffsetBoundsWl = exports.getClosestPoint = void 0;
 var _reactNativeSkia = require("@shopify/react-native-skia");
 var _react = require("react");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
@@ -18,7 +18,21 @@ const getPositionWl = function (position, focalX, scale, offsetX) {
 
   return (position - focalX) * scale + focalX + offsetX;
 };
+
+/**
+ * Offset range keeping the content edges pinned to the viewport:
+ * leftBound (position 0) <= startOffset and rightBound (position width)
+ * >= width + startOffset. Collapses to [startOffset, startOffset] at scale 1.
+ */
 exports.getPositionWl = getPositionWl;
+const getOffsetBoundsWl = function (width, startOffset, focalX, scale) {
+  'worklet';
+
+  const maxOffset = startOffset + focalX * (scale - 1);
+  const minOffset = startOffset + (1 - scale) * (width - focalX);
+  return [minOffset, maxOffset];
+};
+exports.getOffsetBoundsWl = getOffsetBoundsWl;
 /**
  * Return utilities for zooming and panning the axis
  */
@@ -37,6 +51,8 @@ const useScalableGesture = props => {
   // For panning
   const offsetX = (0, _reactNativeReanimated.useSharedValue)(startOffset);
   const lastOffsetX = (0, _reactNativeReanimated.useSharedValue)(startOffset);
+  // Pinch pivot bookkeeping (see pinchGesture)
+  const needsPivot = (0, _reactNativeReanimated.useSharedValue)(true);
   const reset = (0, _react.useCallback)(() => {
     scale.value = startScale;
     lastScale.value = startScale;
@@ -45,37 +61,56 @@ const useScalableGesture = props => {
     offsetX.value = startOffset;
     lastOffsetX.value = startOffset;
   }, [focalX, lastFocalX, lastOffsetX, lastScale, offsetX, scale, startOffset, startScale]);
-  const panGesture = _reactNativeGestureHandler.Gesture.Pan().onUpdate(event => {
-    const newOffsetX = lastOffsetX.value + event.translationX;
-    offsetX.value = newOffsetX;
+
+  // Memoized: handing a new gesture instance to GestureDetector mid-gesture
+  // resets the active pan and makes the chart jump
+  const panGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan()
+  // Single-finger only: two fingers belong to the pinch, whose focal
+  // rebase would otherwise fight the pan over offsetX
+  .maxPointers(1)
+  // Incremental deltas (changeX) with a live clamp keep the content
+  // edges pinned: no overscroll, no snap-back to interrupt
+  .onChange(event => {
+    const [minOffset, maxOffset] = getOffsetBoundsWl(width, startOffset, focalX.value, scale.value);
+    offsetX.value = (0, _reactNativeSkia.clamp)(offsetX.value + event.changeX, minOffset, maxOffset);
   }).onEnd(() => {
     lastScale.value = scale.value;
     lastFocalX.value = focalX.value;
-    const leftBound = getPositionWl(0, focalX.value, scale.value, offsetX.value);
-    const rightBound = getPositionWl(width, focalX.value, scale.value, offsetX.value);
-    let newOffset;
-    if (leftBound > startOffset) {
-      newOffset = offsetX.value - leftBound + startOffset;
-    } else if (rightBound < width + startOffset) {
-      newOffset = offsetX.value + width - rightBound + startOffset;
+    lastOffsetX.value = offsetX.value;
+  }), [focalX, lastFocalX, lastOffsetX, lastScale, offsetX, scale, startOffset, width]);
+  const pinchGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pinch().onStart(() => {
+    needsPivot.value = true;
+  }).onUpdate(event => {
+    // The pinch can keep firing in the single-finger tail of the
+    // gesture, tracking the remaining finger as its focal: ignore it
+    // (numberOfPointers is missing on web — let those through)
+    if ((event.numberOfPointers ?? 2) < 2) {
+      needsPivot.value = true;
+      return;
+    }
+    const prevScale = scale.value;
+    const newScale = (0, _reactNativeSkia.clamp)(lastScale.value * event.scale, 1, Infinity);
+    if (needsPivot.value) {
+      // New pivot: rebase offsetX so re-anchoring under the fingers
+      // doesn't shift the content
+      const rebased = offsetX.value + (focalX.value - event.focalX) * (1 - prevScale);
+      offsetX.value = rebased * newScale / prevScale;
+      needsPivot.value = false;
     } else {
-      newOffset = offsetX.value;
+      // Keep the content glued to both fingers: the offset follows the
+      // focal translation and rescales with the zoom
+      offsetX.value = (event.focalX - focalX.value + offsetX.value / prevScale) * newScale;
     }
-    offsetX.value = (0, _reactNativeReanimated.withTiming)(newOffset, {
-      duration: 300
-    });
-    lastOffsetX.value = newOffset;
-  });
-  const pinchGesture = _reactNativeGestureHandler.Gesture.Pinch().onUpdate(event => {
-    // 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 = (0, _reactNativeSkia.clamp)(lastScale.value * event.scale, 1, Infinity);
+    scale.value = newScale;
+    // Zooming moves the bounds: keep the content edges pinned
+    const [minOffset, maxOffset] = getOffsetBoundsWl(width, startOffset, focalX.value, scale.value);
+    offsetX.value = (0, _reactNativeSkia.clamp)(offsetX.value, minOffset, maxOffset);
   }).onEnd(() => {
     lastScale.value = scale.value;
     lastFocalX.value = focalX.value;
     lastOffsetX.value = offsetX.value;
-  });
+  }), [focalX, lastFocalX, lastOffsetX, lastScale, needsPivot, offsetX, scale, startOffset, width]);
   return {
     scale,
     focalX,
@@ -93,6 +128,14 @@ const useUpdateAxis = function (props) {
     onScaleChange
   } = props;
   const currentIndex = (0, _reactNativeReanimated.useSharedValue)(0);
+
+  // Stable dispatcher so an inline onScaleChange doesn't re-register the
+  // reaction (and disturb the UI thread) on every render
+  const onScaleChangeRef = (0, _react.useRef)(onScaleChange);
+  onScaleChangeRef.current = onScaleChange;
+  const dispatchScaleChange = (0, _react.useCallback)(index => {
+    onScaleChangeRef.current?.(index);
+  }, []);
   (0, _reactNativeReanimated.useAnimatedReaction)(() => scale.value, (currentScale, _) => {
     for (let i = 0; i < scales.length; i++) {
       const _prevScale = scales[i - 1] ?? 0;
@@ -100,11 +143,11 @@ const useUpdateAxis = function (props) {
       if (_curScale === undefined || _prevScale === undefined) throw new Error('Got undefined scale');
       if (currentScale >= _prevScale && currentScale < _curScale && currentIndex.value !== i) {
         currentIndex.value = i;
-        if (onScaleChange !== undefined) (0, _reactNativeWorklets.scheduleOnRN)(onScaleChange, i);
+        (0, _reactNativeWorklets.scheduleOnRN)(dispatchScaleChange, i);
         break;
       }
     }
-  });
+  }, [scales, dispatchScaleChange]);
   return {
     currentIndex
   };