react-native-wagmi-charts 1.0.4 → 1.2.1

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

@@ -28,7 +28,8 @@ function LineChartCursorCrosshair({
   outerSize = 32,
   crosshairWrapperProps = {},
   crosshairProps = {},
-  crosshairOuterProps = {}
+  crosshairOuterProps = {},
+  ...props
 }) {
   const {
     currentX,
@@ -46,9 +47,9 @@ function LineChartCursorCrosshair({
       })
     }]
   }));
-  return /*#__PURE__*/React.createElement(_Cursor.LineChartCursor, {
+  return /*#__PURE__*/React.createElement(_Cursor.LineChartCursor, _extends({
     type: "crosshair"
-  }, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, _extends({}, crosshairWrapperProps, {
+  }, props), /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, _extends({}, crosshairWrapperProps, {
     style: [{
       width: outerSize,
       height: outerSize,

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

@@ -1 +1 @@
-{"version":3,"sources":["CursorCrosshair.tsx"],"names":["LineChartCursorCrosshair","children","color","size","outerSize","crosshairWrapperProps","crosshairProps","crosshairOuterProps","currentX","currentY","isActive","animatedCursorStyle","transform","translateX","value","translateY","scale","damping","width","height","alignItems","justifyContent","style","backgroundColor","borderRadius","opacity","position"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAKA;;AACA;;;;;;;;AAYO,SAASA,wBAAT,CAAkC;AACvCC,EAAAA,QADuC;AAEvCC,EAAAA,KAAK,GAAG,OAF+B;AAGvCC,EAAAA,IAAI,GAAG,CAHgC;AAIvCC,EAAAA,SAAS,GAAG,EAJ2B;AAKvCC,EAAAA,qBAAqB,GAAG,EALe;AAMvCC,EAAAA,cAAc,GAAG,EANsB;AAOvCC,EAAAA,mBAAmB,GAAG;AAPiB,CAAlC,EAQ2B;AAChC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsBC,IAAAA;AAAtB,MAAmC,iCAAzC;AAEA,QAAMC,mBAAmB,GAAG,6CAAiB,OAAO;AAClDC,IAAAA,SAAS,EAAE,CACT;AAAEC,MAAAA,UAAU,EAAEL,QAAQ,CAACM,KAAT,GAAiBV,SAAS,GAAG;AAA3C,KADS,EAET;AAAEW,MAAAA,UAAU,EAAEN,QAAQ,CAACK,KAAT,GAAiBV,SAAS,GAAG;AAA3C,KAFS,EAGT;AACEY,MAAAA,KAAK,EAAE,uCAAWN,QAAQ,CAACI,KAAT,GAAiB,CAAjB,GAAqB,CAAhC,EAAmC;AACxCG,QAAAA,OAAO,EAAE;AAD+B,OAAnC;AADT,KAHS;AADuC,GAAP,CAAjB,CAA5B;AAYA,sBACE,oBAAC,uBAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,kBACE,oBAAC,8BAAD,CAAU,IAAV,eACMZ,qBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEa,MAAAA,KAAK,EAAEd,SADT;AAEEe,MAAAA,MAAM,EAAEf,SAFV;AAGEgB,MAAAA,UAAU,EAAE,QAHd;AAIEC,MAAAA,cAAc,EAAE;AAJlB,KADK,EAOLV,mBAPK,EAQLN,qBAAqB,CAACiB,KARjB;AAFT,mBAaE,oBAAC,iBAAD,eACMf,mBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEgB,MAAAA,eAAe,EAAErB,KADnB;AAEEgB,MAAAA,KAAK,EAAEd,SAFT;AAGEe,MAAAA,MAAM,EAAEf,SAHV;AAIEoB,MAAAA,YAAY,EAAEpB,SAJhB;AAKEqB,MAAAA,OAAO,EAAE,GALX;AAMEC,MAAAA,QAAQ,EAAE;AANZ,KADK,EASLnB,mBAAmB,CAACe,KATf;AAFT,KAbF,eA2BE,oBAAC,iBAAD,eACMhB,cADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEiB,MAAAA,eAAe,EAAErB,KADnB;AAEEgB,MAAAA,KAAK,EAAEf,IAFT;AAGEgB,MAAAA,MAAM,EAAEhB,IAHV;AAIEqB,MAAAA,YAAY,EAAErB;AAJhB,KADK,EAOLG,cAAc,CAACgB,KAPV;AAFT,KA3BF,CADF,EAyCGrB,QAzCH,CADF;AA6CD","sourcesContent":["import * as React from 'react';\nimport { View, ViewProps } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { LineChartCursor } from './Cursor';\nimport { useLineChart } from './useLineChart';\n\ntype LineChartCursorCrosshairProps = {\n  children?: React.ReactNode;\n  color?: string;\n  size?: number;\n  outerSize?: number;\n  crosshairWrapperProps?: Animated.AnimateProps<ViewProps>;\n  crosshairProps?: ViewProps;\n  crosshairOuterProps?: ViewProps;\n};\n\nexport function LineChartCursorCrosshair({\n  children,\n  color = 'black',\n  size = 8,\n  outerSize = 32,\n  crosshairWrapperProps = {},\n  crosshairProps = {},\n  crosshairOuterProps = {},\n}: LineChartCursorCrosshairProps) {\n  const { currentX, currentY, isActive } = useLineChart();\n\n  const animatedCursorStyle = useAnimatedStyle(() => ({\n    transform: [\n      { translateX: currentX.value - outerSize / 2 },\n      { translateY: currentY.value - outerSize / 2 },\n      {\n        scale: withSpring(isActive.value ? 1 : 0, {\n          damping: 10,\n        }),\n      },\n    ],\n  }));\n\n  return (\n    <LineChartCursor type=\"crosshair\">\n      <Animated.View\n        {...crosshairWrapperProps}\n        style={[\n          {\n            width: outerSize,\n            height: outerSize,\n            alignItems: 'center',\n            justifyContent: 'center',\n          },\n          animatedCursorStyle,\n          crosshairWrapperProps.style,\n        ]}\n      >\n        <View\n          {...crosshairOuterProps}\n          style={[\n            {\n              backgroundColor: color,\n              width: outerSize,\n              height: outerSize,\n              borderRadius: outerSize,\n              opacity: 0.1,\n              position: 'absolute',\n            },\n            crosshairOuterProps.style,\n          ]}\n        />\n        <View\n          {...crosshairProps}\n          style={[\n            {\n              backgroundColor: color,\n              width: size,\n              height: size,\n              borderRadius: size,\n            },\n            crosshairProps.style,\n          ]}\n        />\n      </Animated.View>\n      {children}\n    </LineChartCursor>\n  );\n}\n"]}
+{"version":3,"sources":["CursorCrosshair.tsx"],"names":["LineChartCursorCrosshair","children","color","size","outerSize","crosshairWrapperProps","crosshairProps","crosshairOuterProps","props","currentX","currentY","isActive","animatedCursorStyle","transform","translateX","value","translateY","scale","damping","width","height","alignItems","justifyContent","style","backgroundColor","borderRadius","opacity","position"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAKA;;AACA;;;;;;;;AAYO,SAASA,wBAAT,CAAkC;AACvCC,EAAAA,QADuC;AAEvCC,EAAAA,KAAK,GAAG,OAF+B;AAGvCC,EAAAA,IAAI,GAAG,CAHgC;AAIvCC,EAAAA,SAAS,GAAG,EAJ2B;AAKvCC,EAAAA,qBAAqB,GAAG,EALe;AAMvCC,EAAAA,cAAc,GAAG,EANsB;AAOvCC,EAAAA,mBAAmB,GAAG,EAPiB;AAQvC,KAAGC;AARoC,CAAlC,EAS2B;AAChC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsBC,IAAAA;AAAtB,MAAmC,iCAAzC;AAEA,QAAMC,mBAAmB,GAAG,6CAAiB,OAAO;AAClDC,IAAAA,SAAS,EAAE,CACT;AAAEC,MAAAA,UAAU,EAAEL,QAAQ,CAACM,KAAT,GAAiBX,SAAS,GAAG;AAA3C,KADS,EAET;AAAEY,MAAAA,UAAU,EAAEN,QAAQ,CAACK,KAAT,GAAiBX,SAAS,GAAG;AAA3C,KAFS,EAGT;AACEa,MAAAA,KAAK,EAAE,uCAAWN,QAAQ,CAACI,KAAT,GAAiB,CAAjB,GAAqB,CAAhC,EAAmC;AACxCG,QAAAA,OAAO,EAAE;AAD+B,OAAnC;AADT,KAHS;AADuC,GAAP,CAAjB,CAA5B;AAYA,sBACE,oBAAC,uBAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KAAsCV,KAAtC,gBACE,oBAAC,8BAAD,CAAU,IAAV,eACMH,qBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEc,MAAAA,KAAK,EAAEf,SADT;AAEEgB,MAAAA,MAAM,EAAEhB,SAFV;AAGEiB,MAAAA,UAAU,EAAE,QAHd;AAIEC,MAAAA,cAAc,EAAE;AAJlB,KADK,EAOLV,mBAPK,EAQLP,qBAAqB,CAACkB,KARjB;AAFT,mBAaE,oBAAC,iBAAD,eACMhB,mBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEiB,MAAAA,eAAe,EAAEtB,KADnB;AAEEiB,MAAAA,KAAK,EAAEf,SAFT;AAGEgB,MAAAA,MAAM,EAAEhB,SAHV;AAIEqB,MAAAA,YAAY,EAAErB,SAJhB;AAKEsB,MAAAA,OAAO,EAAE,GALX;AAMEC,MAAAA,QAAQ,EAAE;AANZ,KADK,EASLpB,mBAAmB,CAACgB,KATf;AAFT,KAbF,eA2BE,oBAAC,iBAAD,eACMjB,cADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEkB,MAAAA,eAAe,EAAEtB,KADnB;AAEEiB,MAAAA,KAAK,EAAEhB,IAFT;AAGEiB,MAAAA,MAAM,EAAEjB,IAHV;AAIEsB,MAAAA,YAAY,EAAEtB;AAJhB,KADK,EAOLG,cAAc,CAACiB,KAPV;AAFT,KA3BF,CADF,EAyCGtB,QAzCH,CADF;AA6CD","sourcesContent":["import * as React from 'react';\nimport { View, ViewProps } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { LineChartCursor, LineChartCursorProps } from './Cursor';\nimport { useLineChart } from './useLineChart';\n\ntype LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'> & {\n  children?: React.ReactNode;\n  color?: string;\n  size?: number;\n  outerSize?: number;\n  crosshairWrapperProps?: Animated.AnimateProps<ViewProps>;\n  crosshairProps?: ViewProps;\n  crosshairOuterProps?: ViewProps;\n};\n\nexport function LineChartCursorCrosshair({\n  children,\n  color = 'black',\n  size = 8,\n  outerSize = 32,\n  crosshairWrapperProps = {},\n  crosshairProps = {},\n  crosshairOuterProps = {},\n  ...props\n}: LineChartCursorCrosshairProps) {\n  const { currentX, currentY, isActive } = useLineChart();\n\n  const animatedCursorStyle = useAnimatedStyle(() => ({\n    transform: [\n      { translateX: currentX.value - outerSize / 2 },\n      { translateY: currentY.value - outerSize / 2 },\n      {\n        scale: withSpring(isActive.value ? 1 : 0, {\n          damping: 10,\n        }),\n      },\n    ],\n  }));\n\n  return (\n    <LineChartCursor type=\"crosshair\" {...props}>\n      <Animated.View\n        {...crosshairWrapperProps}\n        style={[\n          {\n            width: outerSize,\n            height: outerSize,\n            alignItems: 'center',\n            justifyContent: 'center',\n          },\n          animatedCursorStyle,\n          crosshairWrapperProps.style,\n        ]}\n      >\n        <View\n          {...crosshairOuterProps}\n          style={[\n            {\n              backgroundColor: color,\n              width: outerSize,\n              height: outerSize,\n              borderRadius: outerSize,\n              opacity: 0.1,\n              position: 'absolute',\n            },\n            crosshairOuterProps.style,\n          ]}\n        />\n        <View\n          {...crosshairProps}\n          style={[\n            {\n              backgroundColor: color,\n              width: size,\n              height: size,\n              borderRadius: size,\n            },\n            crosshairProps.style,\n          ]}\n        />\n      </Animated.View>\n      {children}\n    </LineChartCursor>\n  );\n}\n"]}

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

@@ -52,7 +52,7 @@ const LineChartCursorLine = ({
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: vertical
   }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.default, {
-    style: _reactNative.StyleSheet.absoluteFill
+    style: styles.svg
   }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Line, _extends({
     x1: 0,
     y1: 0,
@@ -65,4 +65,11 @@ const LineChartCursorLine = ({
 };
 
 exports.LineChartCursorLine = LineChartCursorLine;
+
+const styles = _reactNative.StyleSheet.create({
+  svg: { ..._reactNative.StyleSheet.absoluteFillObject,
+    // height: 100% is required for <svg /> on web
+    height: '100%'
+  }
+});
 //# sourceMappingURL=CursorLine.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["CursorLine.tsx"],"names":["LineChartCursorLine","children","color","lineProps","height","React","useContext","LineChartDimensionsContext","currentX","isActive","vertical","opacity","value","transform","translateX","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAQO,MAAMA,mBAAmB,GAAG,CAAC;AAClCC,EAAAA,QADkC;AAElCC,EAAAA,KAAK,GAAG,MAF0B;AAGlCC,EAAAA,SAAS,GAAG;AAHsB,CAAD,KAIH;AAC9B,QAAM;AAAEC,IAAAA;AAAF,MAAaC,eAAMC,UAAN,CAAiBC,iCAAjB,CAAnB;;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAyB,iCAA/B;AAEA,QAAMC,QAAQ,GAAG,6CAAiB,OAAO;AACvCC,IAAAA,OAAO,EAAEF,QAAQ,CAACG,KAAT,GAAiB,CAAjB,GAAqB,CADS;AAEvCR,IAAAA,MAAM,EAAE,MAF+B;AAGvCS,IAAAA,SAAS,EAAE,CAAC;AAAEC,MAAAA,UAAU,EAAEN,QAAQ,CAACI;AAAvB,KAAD;AAH4B,GAAP,CAAjB,CAAjB;AAMA,sBACE,6BAAC,uBAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,kBACE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEF;AAAtB,kBACE,6BAAC,uBAAD;AAAK,IAAA,KAAK,EAAEK,wBAAWC;AAAvB,kBACE,6BAAC,oBAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAEZ,MAJN;AAKE,IAAA,WAAW,EAAE,CALf;AAME,IAAA,MAAM,EAAEF,KANV;AAOE,IAAA,eAAe,EAAC;AAPlB,KAQMC,SARN,EADF,CADF,CADF,EAeGF,QAfH,CADF;AAmBD,CAjCM","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport Svg, { Line as SVGLine, LineProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartCursor } from './Cursor';\nimport { useLineChart } from './useLineChart';\n\ntype LineChartCursorLineProps = {\n  children?: React.ReactNode;\n  color?: string;\n  lineProps?: Partial<LineProps>;\n};\n\nexport const LineChartCursorLine = ({\n  children,\n  color = 'gray',\n  lineProps = {},\n}: LineChartCursorLineProps) => {\n  const { height } = React.useContext(LineChartDimensionsContext);\n  const { currentX, isActive } = useLineChart();\n\n  const vertical = useAnimatedStyle(() => ({\n    opacity: isActive.value ? 1 : 0,\n    height: '100%',\n    transform: [{ translateX: currentX.value }],\n  }));\n\n  return (\n    <LineChartCursor type=\"line\">\n      <Animated.View style={vertical}>\n        <Svg style={StyleSheet.absoluteFill}>\n          <SVGLine\n            x1={0}\n            y1={0}\n            x2={0}\n            y2={height}\n            strokeWidth={2}\n            stroke={color}\n            strokeDasharray=\"3 3\"\n            {...lineProps}\n          />\n        </Svg>\n      </Animated.View>\n      {children}\n    </LineChartCursor>\n  );\n};\n"]}
+{"version":3,"sources":["CursorLine.tsx"],"names":["LineChartCursorLine","children","color","lineProps","height","React","useContext","LineChartDimensionsContext","currentX","isActive","vertical","opacity","value","transform","translateX","styles","svg","StyleSheet","create","absoluteFillObject"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAQO,MAAMA,mBAAmB,GAAG,CAAC;AAClCC,EAAAA,QADkC;AAElCC,EAAAA,KAAK,GAAG,MAF0B;AAGlCC,EAAAA,SAAS,GAAG;AAHsB,CAAD,KAIH;AAC9B,QAAM;AAAEC,IAAAA;AAAF,MAAaC,eAAMC,UAAN,CAAiBC,iCAAjB,CAAnB;;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAyB,iCAA/B;AAEA,QAAMC,QAAQ,GAAG,6CAAiB,OAAO;AACvCC,IAAAA,OAAO,EAAEF,QAAQ,CAACG,KAAT,GAAiB,CAAjB,GAAqB,CADS;AAEvCR,IAAAA,MAAM,EAAE,MAF+B;AAGvCS,IAAAA,SAAS,EAAE,CAAC;AAAEC,MAAAA,UAAU,EAAEN,QAAQ,CAACI;AAAvB,KAAD;AAH4B,GAAP,CAAjB,CAAjB;AAMA,sBACE,6BAAC,uBAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,kBACE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEF;AAAtB,kBACE,6BAAC,uBAAD;AAAK,IAAA,KAAK,EAAEK,MAAM,CAACC;AAAnB,kBACE,6BAAC,oBAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAEZ,MAJN;AAKE,IAAA,WAAW,EAAE,CALf;AAME,IAAA,MAAM,EAAEF,KANV;AAOE,IAAA,eAAe,EAAC;AAPlB,KAQMC,SARN,EADF,CADF,CADF,EAeGF,QAfH,CADF;AAmBD,CAjCM;;;;AAmCP,MAAMc,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,GAAG,EAAE,EACH,GAAGC,wBAAWE,kBADX;AAEH;AACAf,IAAAA,MAAM,EAAE;AAHL;AAD0B,CAAlB,CAAf","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport Svg, { Line as SVGLine, LineProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartCursor } from './Cursor';\nimport { useLineChart } from './useLineChart';\n\ntype LineChartCursorLineProps = {\n  children?: React.ReactNode;\n  color?: string;\n  lineProps?: Partial<LineProps>;\n};\n\nexport const LineChartCursorLine = ({\n  children,\n  color = 'gray',\n  lineProps = {},\n}: LineChartCursorLineProps) => {\n  const { height } = React.useContext(LineChartDimensionsContext);\n  const { currentX, isActive } = useLineChart();\n\n  const vertical = useAnimatedStyle(() => ({\n    opacity: isActive.value ? 1 : 0,\n    height: '100%',\n    transform: [{ translateX: currentX.value }],\n  }));\n\n  return (\n    <LineChartCursor type=\"line\">\n      <Animated.View style={vertical}>\n        <Svg style={styles.svg}>\n          <SVGLine\n            x1={0}\n            y1={0}\n            x2={0}\n            y2={height}\n            strokeWidth={2}\n            stroke={color}\n            strokeDasharray=\"3 3\"\n            {...lineProps}\n          />\n        </Svg>\n      </Animated.View>\n      {children}\n    </LineChartCursor>\n  );\n};\n\nconst styles = StyleSheet.create({\n  svg: {\n    ...StyleSheet.absoluteFillObject,\n    // height: 100% is required for <svg /> on web\n    height: '100%',\n  },\n});\n"]}

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

@@ -7,30 +7,29 @@ exports.LineChartDatetimeText = LineChartDatetimeText;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _reactNativeRedash = require("react-native-redash");
-
 var _useDatetime = require("./useDatetime");
 
+var _AnimatedText = require("../../components/AnimatedText");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || 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); }
-
 function LineChartDatetimeText({
   locale,
   options,
   format,
   variant = 'formatted',
-  ...props
+  style
 }) {
   const datetime = (0, _useDatetime.useLineChartDatetime)({
     format,
     locale,
     options
   });
-  return /*#__PURE__*/React.createElement(_reactNativeRedash.ReText, _extends({
-    text: datetime[variant]
-  }, props));
+  return /*#__PURE__*/React.createElement(_AnimatedText.AnimatedText, {
+    text: datetime[variant],
+    style: style
+  });
 }
 //# sourceMappingURL=DatetimeText.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["DatetimeText.tsx"],"names":["LineChartDatetimeText","locale","options","format","variant","props","datetime"],"mappings":";;;;;;;AAAA;;AACA;;AAIA;;;;;;;;AAUO,SAASA,qBAAT,CAA+B;AACpCC,EAAAA,MADoC;AAEpCC,EAAAA,OAFoC;AAGpCC,EAAAA,MAHoC;AAIpCC,EAAAA,OAAO,GAAG,WAJ0B;AAKpC,KAAGC;AALiC,CAA/B,EAMqB;AAC1B,QAAMC,QAAQ,GAAG,uCAAqB;AAAEH,IAAAA,MAAF;AAAUF,IAAAA,MAAV;AAAkBC,IAAAA;AAAlB,GAArB,CAAjB;AACA,sBAAO,oBAAC,yBAAD;AAAQ,IAAA,IAAI,EAAEI,QAAQ,CAACF,OAAD;AAAtB,KAAqCC,KAArC,EAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { ReText } from 'react-native-redash';\nimport type { TextProps as RNTextProps } from 'react-native';\nimport type Animated from 'react-native-reanimated';\n\nimport { useLineChartDatetime } from './useDatetime';\n\ntype LineChartPriceTextProps = {\n  locale?: string;\n  options?: { [key: string]: any };\n  format?: any;\n  variant?: 'formatted' | 'value';\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n};\n\nexport function LineChartDatetimeText({\n  locale,\n  options,\n  format,\n  variant = 'formatted',\n  ...props\n}: LineChartPriceTextProps) {\n  const datetime = useLineChartDatetime({ format, locale, options });\n  return <ReText text={datetime[variant]} {...props} />;\n}\n"]}
+{"version":3,"sources":["DatetimeText.tsx"],"names":["LineChartDatetimeText","locale","options","format","variant","style","datetime"],"mappings":";;;;;;;AAAA;;AAIA;;AAEA;;;;;;AAUO,SAASA,qBAAT,CAA+B;AACpCC,EAAAA,MADoC;AAEpCC,EAAAA,OAFoC;AAGpCC,EAAAA,MAHoC;AAIpCC,EAAAA,OAAO,GAAG,WAJ0B;AAKpCC,EAAAA;AALoC,CAA/B,EAMoB;AACzB,QAAMC,QAAQ,GAAG,uCAAqB;AAAEH,IAAAA,MAAF;AAAUF,IAAAA,MAAV;AAAkBC,IAAAA;AAAlB,GAArB,CAAjB;AACA,sBAAO,oBAAC,0BAAD;AAAc,IAAA,IAAI,EAAEI,QAAQ,CAACF,OAAD,CAA5B;AAAuC,IAAA,KAAK,EAAEC;AAA9C,IAAP;AACD","sourcesContent":["import * as React from 'react';\nimport type { TextProps as RNTextProps } from 'react-native';\nimport type Animated from 'react-native-reanimated';\n\nimport { useLineChartDatetime } from './useDatetime';\nimport type { TFormatterFn } from 'react-native-wagmi-charts';\nimport { AnimatedText } from '../../components/AnimatedText';\n\ntype LineChartDatetimeProps = {\n  locale?: string;\n  options?: Intl.DateTimeFormatOptions;\n  format?: TFormatterFn<number>;\n  variant?: 'formatted' | 'value';\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n};\n\nexport function LineChartDatetimeText({\n  locale,\n  options,\n  format,\n  variant = 'formatted',\n  style,\n}: LineChartDatetimeProps) {\n  const datetime = useLineChartDatetime({ format, locale, options });\n  return <AnimatedText text={datetime[variant]} style={style} />;\n}\n"]}

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

@@ -11,13 +11,13 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 
 var _reactNativeSvg = require("react-native-svg");
 
-var _reactNativeRedash = require("react-native-redash");
-
 var _Chart = require("./Chart");
 
+var _interpolatePath = _interopRequireDefault(require("./interpolatePath"));
+
 var _utils = require("../../utils");
 
-var _utils2 = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,6 +31,7 @@ function LineChartPath({
   color = 'black',
   width = 3,
   isInactive,
+  isTransitionEnabled = true,
   ...props
 }) {
   const {
@@ -38,8 +39,7 @@ function LineChartPath({
   } = React.useContext(_Chart.LineChartDimensionsContext); ////////////////////////////////////////////////
 
   const transition = (0, _reactNativeReanimated.useSharedValue)(0);
-  const parsedPath = React.useMemo(() => path ? (0, _reactNativeRedash.parse)(path) : undefined, [path]);
-  const previousParsedPath = (0, _utils.usePrevious)(parsedPath);
+  const previousPath = (0, _utils.usePrevious)(path);
   (0, _reactNativeReanimated.useAnimatedReaction)(() => {
     return path;
   }, (_, previous) => {
@@ -49,18 +49,15 @@ function LineChartPath({
     }
   }, [path]);
   const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
-    if (!parsedPath) return {
-      d: ''
-    };
-    const {
-      parsedPath: newParsedPath,
-      previousParsedPath: newPreviousParsedPath
-    } = (0, _utils2.syncPaths)({
-      parsedPath,
-      previousParsedPath
-    });
+    let d = path || '';
+
+    if (previousPath && isTransitionEnabled) {
+      const pathInterpolator = (0, _interpolatePath.default)(previousPath, path, null);
+      d = pathInterpolator(transition.value);
+    }
+
     return {
-      d: transition.value === 1 ? path : (0, _reactNativeRedash.mixPath)(transition.value, newPreviousParsedPath, newParsedPath)
+      d
     };
   }); ////////////////////////////////////////////////
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Path.tsx"],"names":["AnimatedPath","Animated","createAnimatedComponent","Path","LineChartPath","color","width","isInactive","props","path","React","useContext","LineChartDimensionsContext","transition","parsedPath","useMemo","undefined","previousParsedPath","_","previous","value","animatedProps","d","newParsedPath","newPreviousParsedPath"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,YAAY,GAAGC,+BAASC,uBAAT,CAAiCC,oBAAjC,CAArB;;AAQO,SAASC,aAAT,CAAuB;AAC5BC,EAAAA,KAAK,GAAG,OADoB;AAE5BC,EAAAA,KAAK,GAAG,CAFoB;AAG5BC,EAAAA,UAH4B;AAI5B,KAAGC;AAJyB,CAAvB,EAKgB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAWC,KAAK,CAACC,UAAN,CAAiBC,iCAAjB,CAAjB,CADqB,CAGrB;;AAEA,QAAMC,UAAU,GAAG,2CAAe,CAAf,CAAnB;AAEA,QAAMC,UAAU,GAAGJ,KAAK,CAACK,OAAN,CACjB,MAAON,IAAI,GAAG,8BAAMA,IAAN,CAAH,GAAiBO,SADX,EAEjB,CAACP,IAAD,CAFiB,CAAnB;AAIA,QAAMQ,kBAAkB,GAAG,wBAAYH,UAAZ,CAA3B;AAEA,kDACE,MAAM;AACJ,WAAOL,IAAP;AACD,GAHH,EAIE,CAACS,CAAD,EAAIC,QAAJ,KAAiB;AACf,QAAIA,QAAJ,EAAc;AACZN,MAAAA,UAAU,CAACO,KAAX,GAAmB,CAAnB;AACAP,MAAAA,UAAU,CAACO,KAAX,GAAmB,uCAAW,CAAX,CAAnB;AACD;AACF,GATH,EAUE,CAACX,IAAD,CAVF;AAaA,QAAMY,aAAa,GAAG,6CAAiB,MAAM;AAC3C,QAAI,CAACP,UAAL,EAAiB,OAAO;AAAEQ,MAAAA,CAAC,EAAE;AAAL,KAAP;AAEjB,UAAM;AACJR,MAAAA,UAAU,EAAES,aADR;AAEJN,MAAAA,kBAAkB,EAAEO;AAFhB,QAGF,uBAAU;AACZV,MAAAA,UADY;AAEZG,MAAAA;AAFY,KAAV,CAHJ;AAQA,WAAO;AACLK,MAAAA,CAAC,EACCT,UAAU,CAACO,KAAX,KAAqB,CAArB,GACIX,IADJ,GAEI,gCAAQI,UAAU,CAACO,KAAnB,EAA0BI,qBAA1B,EAAiDD,aAAjD;AAJD,KAAP;AAMD,GAjBqB,CAAtB,CA1BqB,CA6CrB;;AAEA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEF,aADjB;AAEE,IAAA,IAAI,EAAC,aAFP;AAGE,IAAA,MAAM,EAAEhB,KAHV;AAIE,IAAA,aAAa,EAAEE,UAAU,GAAG,GAAH,GAAS,CAJpC;AAKE,IAAA,WAAW,EAAED;AALf,KAMME,KANN,EADF,CADF;AAYD","sourcesContent":["import * as React from 'react';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { Path, PathProps } from 'react-native-svg';\nimport { mixPath, parse } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { usePrevious } from '../../utils';\nimport { syncPaths } from './utils';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nexport type LineChartPathProps = Animated.AnimateProps<PathProps> & {\n  color?: string;\n  width?: number;\n  isInactive?: boolean;\n};\n\nexport function LineChartPath({\n  color = 'black',\n  width = 3,\n  isInactive,\n  ...props\n}: LineChartPathProps) {\n  const { path } = React.useContext(LineChartDimensionsContext);\n\n  ////////////////////////////////////////////////\n\n  const transition = useSharedValue(0);\n\n  const parsedPath = React.useMemo(\n    () => (path ? parse(path) : undefined),\n    [path]\n  );\n  const previousParsedPath = usePrevious(parsedPath);\n\n  useAnimatedReaction(\n    () => {\n      return path;\n    },\n    (_, previous) => {\n      if (previous) {\n        transition.value = 0;\n        transition.value = withTiming(1);\n      }\n    },\n    [path]\n  );\n\n  const animatedProps = useAnimatedProps(() => {\n    if (!parsedPath) return { d: '' };\n\n    const {\n      parsedPath: newParsedPath,\n      previousParsedPath: newPreviousParsedPath,\n    } = syncPaths({\n      parsedPath,\n      previousParsedPath,\n    });\n\n    return {\n      d:\n        transition.value === 1\n          ? path\n          : mixPath(transition.value, newPreviousParsedPath, newParsedPath),\n    };\n  });\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <AnimatedPath\n        animatedProps={animatedProps}\n        fill=\"transparent\"\n        stroke={color}\n        strokeOpacity={isInactive ? 0.2 : 1}\n        strokeWidth={width}\n        {...props}\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["Path.tsx"],"names":["AnimatedPath","Animated","createAnimatedComponent","Path","LineChartPath","color","width","isInactive","isTransitionEnabled","props","path","React","useContext","LineChartDimensionsContext","transition","previousPath","_","previous","value","animatedProps","d","pathInterpolator"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,YAAY,GAAGC,+BAASC,uBAAT,CAAiCC,oBAAjC,CAArB;;AAwBO,SAASC,aAAT,CAAuB;AAC5BC,EAAAA,KAAK,GAAG,OADoB;AAE5BC,EAAAA,KAAK,GAAG,CAFoB;AAG5BC,EAAAA,UAH4B;AAI5BC,EAAAA,mBAAmB,GAAG,IAJM;AAK5B,KAAGC;AALyB,CAAvB,EAMgB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAWC,KAAK,CAACC,UAAN,CAAiBC,iCAAjB,CAAjB,CADqB,CAGrB;;AAEA,QAAMC,UAAU,GAAG,2CAAe,CAAf,CAAnB;AAEA,QAAMC,YAAY,GAAG,wBAAYL,IAAZ,CAArB;AAEA,kDACE,MAAM;AACJ,WAAOA,IAAP;AACD,GAHH,EAIE,CAACM,CAAD,EAAIC,QAAJ,KAAiB;AACf,QAAIA,QAAJ,EAAc;AACZH,MAAAA,UAAU,CAACI,KAAX,GAAmB,CAAnB;AACAJ,MAAAA,UAAU,CAACI,KAAX,GAAmB,uCAAW,CAAX,CAAnB;AACD;AACF,GATH,EAUE,CAACR,IAAD,CAVF;AAaA,QAAMS,aAAa,GAAG,6CAAiB,MAAM;AAC3C,QAAIC,CAAC,GAAGV,IAAI,IAAI,EAAhB;;AACA,QAAIK,YAAY,IAAIP,mBAApB,EAAyC;AACvC,YAAMa,gBAAgB,GAAG,8BAAgBN,YAAhB,EAA8BL,IAA9B,EAAoC,IAApC,CAAzB;AACAU,MAAAA,CAAC,GAAGC,gBAAgB,CAACP,UAAU,CAACI,KAAZ,CAApB;AACD;;AACD,WAAO;AACLE,MAAAA;AADK,KAAP;AAGD,GATqB,CAAtB,CAtBqB,CAiCrB;;AAEA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAED,aADjB;AAEE,IAAA,IAAI,EAAC,aAFP;AAGE,IAAA,MAAM,EAAEd,KAHV;AAIE,IAAA,aAAa,EAAEE,UAAU,GAAG,GAAH,GAAS,CAJpC;AAKE,IAAA,WAAW,EAAED;AALf,KAMMG,KANN,EADF,CADF;AAYD","sourcesContent":["import * as React from 'react';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { Path, PathProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport interpolatePath from './interpolatePath';\nimport { usePrevious } from '../../utils';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nexport type LineChartPathProps = Animated.AnimateProps<PathProps> & {\n  color?: string;\n  width?: number;\n  isInactive?: boolean;\n  /**\n   * Default: `true`.\n   *\n   * If `false`, changes in the chart's path will not animate.\n   *\n   * While this use case is rare, it may be useful on web, where animations might not work as well.\n   *\n   * **Example**\n   *\n   * ```tsx\n   * <LineChart.Path\n   *   pathProps={{ isTransitionEnabled: Platform.OS !== 'web' }}\n   * />\n   * ```\n   */\n  isTransitionEnabled?: boolean;\n};\n\nexport function LineChartPath({\n  color = 'black',\n  width = 3,\n  isInactive,\n  isTransitionEnabled = true,\n  ...props\n}: LineChartPathProps) {\n  const { path } = React.useContext(LineChartDimensionsContext);\n\n  ////////////////////////////////////////////////\n\n  const transition = useSharedValue(0);\n\n  const previousPath = usePrevious(path);\n\n  useAnimatedReaction(\n    () => {\n      return path;\n    },\n    (_, previous) => {\n      if (previous) {\n        transition.value = 0;\n        transition.value = withTiming(1);\n      }\n    },\n    [path]\n  );\n\n  const animatedProps = useAnimatedProps(() => {\n    let d = path || '';\n    if (previousPath && isTransitionEnabled) {\n      const pathInterpolator = interpolatePath(previousPath, path, null);\n      d = pathInterpolator(transition.value);\n    }\n    return {\n      d,\n    };\n  });\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <AnimatedPath\n        animatedProps={animatedProps}\n        fill=\"transparent\"\n        stroke={color}\n        strokeOpacity={isInactive ? 0.2 : 1}\n        strokeWidth={width}\n        {...props}\n      />\n    </>\n  );\n}\n"]}

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

@@ -7,28 +7,27 @@ exports.LineChartPriceText = LineChartPriceText;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _reactNativeRedash = require("react-native-redash");
-
 var _usePrice = require("./usePrice");
 
+var _AnimatedText = require("../../components/AnimatedText");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || 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); }
-
 function LineChartPriceText({
   format,
   precision = 2,
   variant = 'formatted',
-  ...props
+  style
 }) {
   const price = (0, _usePrice.useLineChartPrice)({
     format,
     precision
   });
-  return /*#__PURE__*/React.createElement(_reactNativeRedash.ReText, _extends({
-    text: price[variant]
-  }, props));
+  return /*#__PURE__*/React.createElement(_AnimatedText.AnimatedText, {
+    text: price[variant],
+    style: style
+  });
 }
 //# sourceMappingURL=PriceText.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["PriceText.tsx"],"names":["LineChartPriceText","format","precision","variant","props","price"],"mappings":";;;;;;;AAAA;;AACA;;AAIA;;;;;;;;AASO,SAASA,kBAAT,CAA4B;AACjCC,EAAAA,MADiC;AAEjCC,EAAAA,SAAS,GAAG,CAFqB;AAGjCC,EAAAA,OAAO,GAAG,WAHuB;AAIjC,KAAGC;AAJ8B,CAA5B,EAKqB;AAC1B,QAAMC,KAAK,GAAG,iCAAkB;AAAEJ,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAlB,CAAd;AACA,sBAAO,oBAAC,yBAAD;AAAQ,IAAA,IAAI,EAAEG,KAAK,CAACF,OAAD;AAAnB,KAAkCC,KAAlC,EAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { ReText } from 'react-native-redash';\nimport type { TextProps as RNTextProps } from 'react-native';\nimport type Animated from 'react-native-reanimated';\n\nimport { useLineChartPrice } from './usePrice';\n\nexport type LineChartPriceTextProps = {\n  format?: any;\n  precision?: number;\n  variant?: 'formatted' | 'value';\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n};\n\nexport function LineChartPriceText({\n  format,\n  precision = 2,\n  variant = 'formatted',\n  ...props\n}: LineChartPriceTextProps) {\n  const price = useLineChartPrice({ format, precision });\n  return <ReText text={price[variant]} {...props} />;\n}\n"]}
+{"version":3,"sources":["PriceText.tsx"],"names":["LineChartPriceText","format","precision","variant","style","price"],"mappings":";;;;;;;AAAA;;AAIA;;AAEA;;;;;;AASO,SAASA,kBAAT,CAA4B;AACjCC,EAAAA,MADiC;AAEjCC,EAAAA,SAAS,GAAG,CAFqB;AAGjCC,EAAAA,OAAO,GAAG,WAHuB;AAIjCC,EAAAA;AAJiC,CAA5B,EAKqB;AAC1B,QAAMC,KAAK,GAAG,iCAAkB;AAAEJ,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAlB,CAAd;AACA,sBAAO,oBAAC,0BAAD;AAAc,IAAA,IAAI,EAAEG,KAAK,CAACF,OAAD,CAAzB;AAAoC,IAAA,KAAK,EAAEC;AAA3C,IAAP;AACD","sourcesContent":["import * as React from 'react';\nimport type { TextProps as RNTextProps } from 'react-native';\nimport type Animated from 'react-native-reanimated';\n\nimport { useLineChartPrice } from './usePrice';\nimport type { TFormatterFn } from '../candle/types';\nimport { AnimatedText } from '../../components/AnimatedText';\n\nexport type LineChartPriceTextProps = {\n  format?: TFormatterFn<string>;\n  precision?: number;\n  variant?: 'formatted' | 'value';\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n};\n\nexport function LineChartPriceText({\n  format,\n  precision = 2,\n  variant = 'formatted',\n  style,\n}: LineChartPriceTextProps) {\n  const price = useLineChartPrice({ format, precision });\n  return <AnimatedText text={price[variant]} style={style} />;\n}\n"]}