react-native-wagmi-charts 2.4.0 → 2.4.1

package/README.md

@@ -405,7 +405,7 @@ To achieve this, simply add `<LineChart.HoverTrap />` as the child of your curso
 <LineChart.Provider data={data}>
   <LineChart>
     <LineChart.Path color="hotpink" />
-    <LineChart.CursorCrosshair color="hotpink" >
+    <LineChart.CursorCrosshair color="hotpink">
       <LineChart.HoverTrap />
     </LineChart.CursorCrosshair>
   </LineChart>

package/example/README.md

@@ -2,23 +2,31 @@
 
 ## Getting Started
 
-First install project dependencies in this directory:
+First install project dependencies in this directory (`yarn` is recommended):
 
-`npm install`
+```bash
+yarn install
+```
 
 After dependencies are installed, you can go ahead and run the project on either a simulator, or a real device using the following commands
 
 For iOS:
 
-`npm run ios`
+```bash
+yarn run ios
+```
 
 For Android:
 
-`npm run android`
+```bash
+yarn run android
+```
 
 For Web:
 
-`npm run web`
+```bash
+yarn run web
+```
 
 
 ## Example Charts
@@ -29,4 +37,5 @@ The following charts are included:
 - Line Chart
 
 ### Sample Data
+
 The charts in this example use hardcoded data, which is stored in the `src/data` directory

package/example/src/LineChart.tsx

@@ -51,6 +51,7 @@ export default function App() {
 
   const [toggleMinMaxLabels, setToggleMinMaxLabels] = React.useState(false);
   const [toggleSnapToPoint, setToggleSnapToPoint] = React.useState(false);
+  const [toggleHighlight, setToggleHighlight] = React.useState(false);
 
   let dataProp: TLineChartDataProp = data;
   const [min, max] = useMemo(() => {
@@ -68,25 +69,22 @@ export default function App() {
 
   let chart = (
     <LineChart>
-      {!toggleMinMaxLabels && <LineChart.Path color="black" />}
-      {toggleMinMaxLabels && (
-        <LineChart.Path color="black">
-          <LineChart.Gradient color="black" />
-          <LineChart.Tooltip position="top" at={max} />
-          <LineChart.Tooltip position="bottom" at={min} yGutter={-10} />
-        </LineChart.Path>
-      )}
-      {/* <LineChart.Path color="black">
-        <LineChart.Gradient color="black" />
-        <LineChart.HorizontalLine at={{ index: 0 }} />
-        <LineChart.Highlight color="red" from={10} to={15} />
-        <LineChart.Dot color="red" at={10} />
-        <LineChart.Dot color="red" at={15} />
-        {partialDay && (
-          <LineChart.Dot at={data.length - 1} color="red" hasPulse />
+      <LineChart.Path color="black">
+        {toggleMinMaxLabels && (
+          <>
+            <LineChart.Gradient color="black" />
+            <LineChart.Tooltip position="top" at={max} />
+            <LineChart.Tooltip position="bottom" at={min} yGutter={-10} />
+          </>
+        )}
+        {toggleHighlight && (
+          <LineChart.Highlight
+            color="red"
+            from={Math.floor(data.length / 3)}
+            to={Math.floor(data.length * (2/3))}
+          />
         )}
       </LineChart.Path>
-        */}
       <LineChart.CursorCrosshair
         snapToPoint={toggleSnapToPoint}
         onActivated={invokeHaptic}
@@ -200,6 +198,9 @@ export default function App() {
             </Button>
             <Button onPress={toggleMultiData}>{`Multi Data`}</Button>
             <Button onPress={togglePartialDay}>{`Partial Day`}</Button>
+            <Button onPress={() => setToggleHighlight((val) => !val)}>
+              Toggle highlight
+            </Button>
             <Button
               onPress={() => setToggleMinMaxLabels((p) => !p)}
             >{`Toggle min/max labels`}</Button>

package/lib/commonjs/charts/line/Highlight.js

@@ -10,8 +10,7 @@ var _reactNativeSvg = require("react-native-svg");
 var _Chart = require("./Chart");
 var _LineChartPathContext = require("./LineChartPathContext");
 var _useAnimatedPath = _interopRequireDefault(require("./useAnimatedPath"));
-var _useLineChart = require("./useLineChart");
-var _utils = require("./utils");
+var _getXPositionForCurve = require("./utils/getXPositionForCurve");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -28,14 +27,9 @@ function LineChartHighlight({
   ...props
 }) {
   const {
-    data,
-    yDomain
-  } = (0, _useLineChart.useLineChart)();
-  const {
-    pathWidth,
-    height,
-    gutter,
-    shape
+    path,
+    parsedPath,
+    height
   } = React.useContext(_Chart.LineChartDimensionsContext);
   const {
     isTransitionEnabled,
@@ -45,21 +39,6 @@ function LineChartHighlight({
 
   ////////////////////////////////////////////////
 
-  const path = React.useMemo(() => {
-    if (data && data.length > 0) {
-      return (0, _utils.getPath)({
-        data,
-        from,
-        to,
-        width: pathWidth,
-        height,
-        gutter,
-        shape,
-        yDomain
-      });
-    }
-    return '';
-  }, [data, from, to, pathWidth, height, gutter, shape, yDomain]);
   const {
     animatedProps
   } = (0, _useAnimatedPath.default)({
@@ -69,7 +48,18 @@ function LineChartHighlight({
 
   ////////////////////////////////////////////////
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedPath, _extends({
+  const clipStart = (0, _getXPositionForCurve.getXPositionForCurve)(parsedPath, from);
+  const clipEnd = (0, _getXPositionForCurve.getXPositionForCurve)(parsedPath, to);
+  return /*#__PURE__*/React.createElement(_reactNativeSvg.G, null, /*#__PURE__*/React.createElement(_reactNativeSvg.Defs, null, /*#__PURE__*/React.createElement(_reactNativeSvg.ClipPath, {
+    id: "clip"
+  }, /*#__PURE__*/React.createElement(_reactNativeSvg.Rect, {
+    x: clipStart,
+    y: "0",
+    width: clipEnd - clipStart,
+    height: height,
+    fill: "white"
+  }))), /*#__PURE__*/React.createElement(AnimatedPath, _extends({
+    clipPath: "url(#clip)",
     animatedProps: animatedProps,
     fill: "transparent",
     stroke: isInactive ? inactiveColor || color : color,

package/lib/commonjs/charts/line/Highlight.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNativeReanimated","_interopRequireDefault","_reactNativeSvg","_Chart","_LineChartPathContext","_useAnimatedPath","_useLineChart","_utils","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","AnimatedPath","Animated","createAnimatedComponent","Path","LineChartHighlight","displayName","color","inactiveColor","showInactiveColor","from","to","width","strokeWidth","props","data","yDomain","useLineChart","pathWidth","height","gutter","shape","useContext","LineChartDimensionsContext","isTransitionEnabled","isInactive","_isInactive","LineChartPathContext","path","useMemo","getPath","animatedProps","useAnimatedPath","enabled","createElement","Fragment","fill","stroke","strokeOpacity"],"sourceRoot":"../../../../src","sources":["charts/line/Highlight.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,qBAAA,GAAAL,OAAA;AACA,IAAAM,gBAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,aAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AAAkC,SAAAE,uBAAAO,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAd,wBAAAc,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAAA,SAAAY,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAL,CAAA,MAAAA,CAAA,GAAAM,SAAA,CAAAC,MAAA,EAAAP,CAAA,UAAAQ,MAAA,GAAAF,SAAA,CAAAN,CAAA,YAAAS,GAAA,IAAAD,MAAA,QAAAf,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAS,MAAA,EAAAC,GAAA,KAAAJ,MAAA,CAAAI,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAJ,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAJ,SAAA;AAElC,MAAMK,YAAY,GAAGC,8BAAQ,CAACC,uBAAuB,CAACC,oBAAI,CAAC;AAW3DC,kBAAkB,CAACC,WAAW,GAAG,oBAAoB;AAE9C,SAASD,kBAAkBA,CAAC;EACjCE,KAAK,GAAG,OAAO;EACfC,aAAa;EACbC,iBAAiB,GAAG,IAAI;EACxBC,IAAI;EACJC,EAAE;EACFC,KAAK,EAAEC,WAAW,GAAG,CAAC;EACtB,GAAGC;AACgB,CAAC,EAAE;EACtB,MAAM;IAAEC,IAAI;IAAEC;EAAQ,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EACxC,MAAM;IAAEC,SAAS;IAAEC,MAAM;IAAEC,MAAM;IAAEC;EAAM,CAAC,GAAG9D,KAAK,CAAC+D,UAAU,CAC3DC,iCACF,CAAC;EACD,MAAM;IAAEC,mBAAmB;IAAEC,UAAU,EAAEC;EAAY,CAAC,GACpDnE,KAAK,CAAC+D,UAAU,CAACK,0CAAoB,CAAC;EACxC,MAAMF,UAAU,GAAGhB,iBAAiB,IAAIiB,WAAW;;EAEnD;;EAEA,MAAME,IAAI,GAAGrE,KAAK,CAACsE,OAAO,CAAC,MAAM;IAC/B,IAAId,IAAI,IAAIA,IAAI,CAAClB,MAAM,GAAG,CAAC,EAAE;MAC3B,OAAO,IAAAiC,cAAO,EAAC;QACbf,IAAI;QACJL,IAAI;QACJC,EAAE;QACFC,KAAK,EAAEM,SAAS;QAChBC,MAAM;QACNC,MAAM;QACNC,KAAK;QACLL;MACF,CAAC,CAAC;IACJ;IACA,OAAO,EAAE;EACX,CAAC,EAAE,CAACD,IAAI,EAAEL,IAAI,EAAEC,EAAE,EAAEO,SAAS,EAAEC,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAEL,OAAO,CAAC,CAAC;EAE/D,MAAM;IAAEe;EAAc,CAAC,GAAG,IAAAC,wBAAe,EAAC;IACxCC,OAAO,EAAET,mBAAmB;IAC5BI;EACF,CAAC,CAAC;;EAEF;;EAEA,oBACErE,KAAA,CAAA2E,aAAA,CAAA3E,KAAA,CAAA4E,QAAA,qBACE5E,KAAA,CAAA2E,aAAA,CAACjC,YAAY,EAAAT,QAAA;IACXuC,aAAa,EAAEA,aAAc;IAC7BK,IAAI,EAAC,aAAa;IAClBC,MAAM,EAAEZ,UAAU,GAAGjB,aAAa,IAAID,KAAK,GAAGA,KAAM;IACpDM,WAAW,EAAEA,WAAY;IACzByB,aAAa,EAAEb,UAAU,IAAI,CAACjB,aAAa,GAAG,GAAG,GAAG;EAAE,GAClDM,KAAK,CACV,CACD,CAAC;AAEP"}
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNativeReanimated","_interopRequireDefault","_reactNativeSvg","_Chart","_LineChartPathContext","_useAnimatedPath","_getXPositionForCurve","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","AnimatedPath","Animated","createAnimatedComponent","Path","LineChartHighlight","displayName","color","inactiveColor","showInactiveColor","from","to","width","strokeWidth","props","path","parsedPath","height","useContext","LineChartDimensionsContext","isTransitionEnabled","isInactive","_isInactive","LineChartPathContext","animatedProps","useAnimatedPath","enabled","clipStart","getXPositionForCurve","clipEnd","createElement","G","Defs","ClipPath","id","Rect","x","y","fill","clipPath","stroke","strokeOpacity"],"sourceRoot":"../../../../src","sources":["charts/line/Highlight.tsx"],"mappings":"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"}

package/lib/module/charts/line/Highlight.js

@@ -1,12 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
-import { Path } from 'react-native-svg';
+import { ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPathContext } from './LineChartPathContext';
 import useAnimatedPath from './useAnimatedPath';
-import { useLineChart } from './useLineChart';
-import { getPath } from './utils';
+import { getXPositionForCurve } from './utils/getXPositionForCurve';
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 LineChartHighlight.displayName = 'LineChartHighlight';
 export function LineChartHighlight({
@@ -19,14 +18,9 @@ export function LineChartHighlight({
   ...props
 }) {
   const {
-    data,
-    yDomain
-  } = useLineChart();
-  const {
-    pathWidth,
-    height,
-    gutter,
-    shape
+    path,
+    parsedPath,
+    height
   } = React.useContext(LineChartDimensionsContext);
   const {
     isTransitionEnabled,
@@ -36,21 +30,6 @@ export function LineChartHighlight({
 
   ////////////////////////////////////////////////
 
-  const path = React.useMemo(() => {
-    if (data && data.length > 0) {
-      return getPath({
-        data,
-        from,
-        to,
-        width: pathWidth,
-        height,
-        gutter,
-        shape,
-        yDomain
-      });
-    }
-    return '';
-  }, [data, from, to, pathWidth, height, gutter, shape, yDomain]);
   const {
     animatedProps
   } = useAnimatedPath({
@@ -60,7 +39,18 @@ export function LineChartHighlight({
 
   ////////////////////////////////////////////////
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedPath, _extends({
+  const clipStart = getXPositionForCurve(parsedPath, from);
+  const clipEnd = getXPositionForCurve(parsedPath, to);
+  return /*#__PURE__*/React.createElement(G, null, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(ClipPath, {
+    id: "clip"
+  }, /*#__PURE__*/React.createElement(Rect, {
+    x: clipStart,
+    y: "0",
+    width: clipEnd - clipStart,
+    height: height,
+    fill: "white"
+  }))), /*#__PURE__*/React.createElement(AnimatedPath, _extends({
+    clipPath: "url(#clip)",
     animatedProps: animatedProps,
     fill: "transparent",
     stroke: isInactive ? inactiveColor || color : color,

package/lib/module/charts/line/Highlight.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Path","LineChartDimensionsContext","LineChartPathContext","useAnimatedPath","useLineChart","getPath","AnimatedPath","createAnimatedComponent","LineChartHighlight","displayName","color","inactiveColor","showInactiveColor","from","to","width","strokeWidth","props","data","yDomain","pathWidth","height","gutter","shape","useContext","isTransitionEnabled","isInactive","_isInactive","path","useMemo","length","animatedProps","enabled","createElement","Fragment","_extends","fill","stroke","strokeOpacity"],"sourceRoot":"../../../../src","sources":["charts/line/Highlight.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,IAAI,QAAmB,kBAAkB;AAElD,SAASC,0BAA0B,QAAQ,SAAS;AACpD,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,OAAO,QAAQ,SAAS;AAEjC,MAAMC,YAAY,GAAGP,QAAQ,CAACQ,uBAAuB,CAACP,IAAI,CAAC;AAW3DQ,kBAAkB,CAACC,WAAW,GAAG,oBAAoB;AAErD,OAAO,SAASD,kBAAkBA,CAAC;EACjCE,KAAK,GAAG,OAAO;EACfC,aAAa;EACbC,iBAAiB,GAAG,IAAI;EACxBC,IAAI;EACJC,EAAE;EACFC,KAAK,EAAEC,WAAW,GAAG,CAAC;EACtB,GAAGC;AACgB,CAAC,EAAE;EACtB,MAAM;IAAEC,IAAI;IAAEC;EAAQ,CAAC,GAAGf,YAAY,CAAC,CAAC;EACxC,MAAM;IAAEgB,SAAS;IAAEC,MAAM;IAAEC,MAAM;IAAEC;EAAM,CAAC,GAAGzB,KAAK,CAAC0B,UAAU,CAC3DvB,0BACF,CAAC;EACD,MAAM;IAAEwB,mBAAmB;IAAEC,UAAU,EAAEC;EAAY,CAAC,GACpD7B,KAAK,CAAC0B,UAAU,CAACtB,oBAAoB,CAAC;EACxC,MAAMwB,UAAU,GAAGd,iBAAiB,IAAIe,WAAW;;EAEnD;;EAEA,MAAMC,IAAI,GAAG9B,KAAK,CAAC+B,OAAO,CAAC,MAAM;IAC/B,IAAIX,IAAI,IAAIA,IAAI,CAACY,MAAM,GAAG,CAAC,EAAE;MAC3B,OAAOzB,OAAO,CAAC;QACba,IAAI;QACJL,IAAI;QACJC,EAAE;QACFC,KAAK,EAAEK,SAAS;QAChBC,MAAM;QACNC,MAAM;QACNC,KAAK;QACLJ;MACF,CAAC,CAAC;IACJ;IACA,OAAO,EAAE;EACX,CAAC,EAAE,CAACD,IAAI,EAAEL,IAAI,EAAEC,EAAE,EAAEM,SAAS,EAAEC,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAEJ,OAAO,CAAC,CAAC;EAE/D,MAAM;IAAEY;EAAc,CAAC,GAAG5B,eAAe,CAAC;IACxC6B,OAAO,EAAEP,mBAAmB;IAC5BG;EACF,CAAC,CAAC;;EAEF;;EAEA,oBACE9B,KAAA,CAAAmC,aAAA,CAAAnC,KAAA,CAAAoC,QAAA,qBACEpC,KAAA,CAAAmC,aAAA,CAAC3B,YAAY,EAAA6B,QAAA;IACXJ,aAAa,EAAEA,aAAc;IAC7BK,IAAI,EAAC,aAAa;IAClBC,MAAM,EAAEX,UAAU,GAAGf,aAAa,IAAID,KAAK,GAAGA,KAAM;IACpDM,WAAW,EAAEA,WAAY;IACzBsB,aAAa,EAAEZ,UAAU,IAAI,CAACf,aAAa,GAAG,GAAG,GAAG;EAAE,GAClDM,KAAK,CACV,CACD,CAAC;AAEP"}
+{"version":3,"names":["React","Animated","ClipPath","Defs","G","Path","Rect","LineChartDimensionsContext","LineChartPathContext","useAnimatedPath","getXPositionForCurve","AnimatedPath","createAnimatedComponent","LineChartHighlight","displayName","color","inactiveColor","showInactiveColor","from","to","width","strokeWidth","props","path","parsedPath","height","useContext","isTransitionEnabled","isInactive","_isInactive","animatedProps","enabled","clipStart","clipEnd","createElement","id","x","y","fill","_extends","clipPath","stroke","strokeOpacity"],"sourceRoot":"../../../../src","sources":["charts/line/Highlight.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,QAAQ,EAAEC,IAAI,EAAEC,CAAC,EAAEC,IAAI,EAAaC,IAAI,QAAQ,kBAAkB;AAE3E,SAASC,0BAA0B,QAAQ,SAAS;AACpD,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,8BAA8B;AAEnE,MAAMC,YAAY,GAAGV,QAAQ,CAACW,uBAAuB,CAACP,IAAI,CAAC;AAW3DQ,kBAAkB,CAACC,WAAW,GAAG,oBAAoB;AAErD,OAAO,SAASD,kBAAkBA,CAAC;EACjCE,KAAK,GAAG,OAAO;EACfC,aAAa;EACbC,iBAAiB,GAAG,IAAI;EACxBC,IAAI;EACJC,EAAE;EACFC,KAAK,EAAEC,WAAW,GAAG,CAAC;EACtB,GAAGC;AACgB,CAAC,EAAE;EACtB,MAAM;IAAEC,IAAI;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAGzB,KAAK,CAAC0B,UAAU,CACnDnB,0BACF,CAAC;EACD,MAAM;IAAEoB,mBAAmB;IAAEC,UAAU,EAAEC;EAAY,CAAC,GACpD7B,KAAK,CAAC0B,UAAU,CAAClB,oBAAoB,CAAC;EACxC,MAAMoB,UAAU,GAAGX,iBAAiB,IAAIY,WAAW;;EAEnD;;EAEA,MAAM;IAAEC;EAAc,CAAC,GAAGrB,eAAe,CAAC;IACxCsB,OAAO,EAAEJ,mBAAmB;IAC5BJ;EACF,CAAC,CAAC;;EAEF;;EAEA,MAAMS,SAAS,GAAGtB,oBAAoB,CAACc,UAAU,EAAEN,IAAI,CAAC;EACxD,MAAMe,OAAO,GAAGvB,oBAAoB,CAACc,UAAU,EAAEL,EAAE,CAAC;EAEpD,oBACEnB,KAAA,CAAAkC,aAAA,CAAC9B,CAAC,qBACAJ,KAAA,CAAAkC,aAAA,CAAC/B,IAAI,qBACHH,KAAA,CAAAkC,aAAA,CAAChC,QAAQ;IAACiC,EAAE,EAAC;EAAM,gBACjBnC,KAAA,CAAAkC,aAAA,CAAC5B,IAAI;IACH8B,CAAC,EAAEJ,SAAU;IACbK,CAAC,EAAC,GAAG;IACLjB,KAAK,EAAEa,OAAO,GAAGD,SAAU;IAC3BP,MAAM,EAAEA,MAAO;IACfa,IAAI,EAAC;EAAO,CACb,CACO,CACN,CAAC,eACPtC,KAAA,CAAAkC,aAAA,CAACvB,YAAY,EAAA4B,QAAA;IACXC,QAAQ,EAAC,YAAY;IACrBV,aAAa,EAAEA,aAAc;IAC7BQ,IAAI,EAAC,aAAa;IAClBG,MAAM,EAAEb,UAAU,GAAGZ,aAAa,IAAID,KAAK,GAAGA,KAAM;IACpDM,WAAW,EAAEA,WAAY;IACzBqB,aAAa,EAAEd,UAAU,IAAI,CAACZ,aAAa,GAAG,GAAG,GAAG;EAAE,GAClDM,KAAK,CACV,CACA,CAAC;AAER"}

package/lib/typescript/example/src/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../example/src/LineChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,CAAC,OAAO,UAAU,GAAG,sBAoP1B"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../example/src/LineChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,CAAC,OAAO,UAAU,GAAG,sBAqP1B"}

package/lib/typescript/src/charts/line/Highlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Highlight.d.ts","sourceRoot":"","sources":["../../../../../src/charts/line/Highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAUnD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,wBAAgB,kBAAkB,CAAC,EACjC,KAAe,EACf,aAAa,EACb,iBAAwB,EACxB,IAAI,EACJ,EAAE,EACF,KAAK,EAAE,WAAe,EACtB,GAAG,KAAK,EACT,EAAE,mBAAmB,qBA8CrB;yBAtDe,kBAAkB"}
+{"version":3,"file":"Highlight.d.ts","sourceRoot":"","sources":["../../../../../src/charts/line/Highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAA2B,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AAS5E,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,wBAAgB,kBAAkB,CAAC,EACjC,KAAe,EACf,aAAa,EACb,iBAAwB,EACxB,IAAI,EACJ,EAAE,EACF,KAAK,EAAE,WAAe,EACtB,GAAG,KAAK,EACT,EAAE,mBAAmB,qBA4CrB;yBApDe,kBAAkB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wagmi-charts",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "A sweet candlestick chart for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/charts/line/Highlight.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
-import { Path, PathProps } from 'react-native-svg';
+import { ClipPath, Defs, G, Path, PathProps, Rect } from 'react-native-svg';
 
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPathContext } from './LineChartPathContext';
 import useAnimatedPath from './useAnimatedPath';
-import { useLineChart } from './useLineChart';
-import { getPath } from './utils';
+import { getXPositionForCurve } from './utils/getXPositionForCurve';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -30,8 +29,7 @@ export function LineChartHighlight({
   width: strokeWidth = 3,
   ...props
 }: LineChartColorProps) {
-  const { data, yDomain } = useLineChart();
-  const { pathWidth, height, gutter, shape } = React.useContext(
+  const { path, parsedPath, height } = React.useContext(
     LineChartDimensionsContext
   );
   const { isTransitionEnabled, isInactive: _isInactive } =
@@ -40,22 +38,6 @@ export function LineChartHighlight({
 
   ////////////////////////////////////////////////
 
-  const path = React.useMemo(() => {
-    if (data && data.length > 0) {
-      return getPath({
-        data,
-        from,
-        to,
-        width: pathWidth,
-        height,
-        gutter,
-        shape,
-        yDomain,
-      });
-    }
-    return '';
-  }, [data, from, to, pathWidth, height, gutter, shape, yDomain]);
-
   const { animatedProps } = useAnimatedPath({
     enabled: isTransitionEnabled,
     path,
@@ -63,9 +45,24 @@ export function LineChartHighlight({
 
   ////////////////////////////////////////////////
 
+  const clipStart = getXPositionForCurve(parsedPath, from);
+  const clipEnd = getXPositionForCurve(parsedPath, to);
+
   return (
-    <>
+    <G>
+      <Defs>
+        <ClipPath id="clip">
+          <Rect
+            x={clipStart}
+            y="0"
+            width={clipEnd - clipStart}
+            height={height}
+            fill="white"
+          />
+        </ClipPath>
+      </Defs>
       <AnimatedPath
+        clipPath="url(#clip)"
         animatedProps={animatedProps}
         fill="transparent"
         stroke={isInactive ? inactiveColor || color : color}
@@ -73,6 +70,6 @@ export function LineChartHighlight({
         strokeOpacity={isInactive && !inactiveColor ? 0.5 : 1}
         {...props}
       />
-    </>
+    </G>
   );
 }