react-native-wagmi-charts 1.6.0 → 2.0.1

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

@@ -3,50 +3,97 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Svg } from 'react-native-svg';
-import Animated, { useAnimatedProps, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
+import flattenChildren from 'react-keyed-flatten-children';
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPath } from './Path';
 import { useLineChart } from './useLineChart';
+const BACKGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartHorizontalLine', 'LineChartGradient', 'LineChartDot'];
+const FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];
 const AnimatedSVG = Animated.createAnimatedComponent(Svg);
 export const LineChartPathContext = /*#__PURE__*/React.createContext({
   color: '',
+  isInactive: false,
   isTransitionEnabled: true
 });
+LineChartPathWrapper.displayName = 'LineChartPathWrapper';
 export function LineChartPathWrapper({
   animationDuration = 300,
   animationProps = {},
   children,
   color = 'black',
-  width: pathWidth = 3,
+  inactiveColor,
+  width: strokeWidth = 3,
+  widthOffset = 20,
   pathProps = {},
-  showInactivePath = true
+  showInactivePath = true,
+  animateOnMount,
+  mountAnimationDuration = animationDuration,
+  mountAnimationProps = animationProps
 }) {
-  var _pathProps$isTransiti;
+  var _pathProps$isTransiti, _pathProps$isTransiti2;
 
   const {
-    width,
-    height
+    height,
+    pathWidth,
+    width
   } = React.useContext(LineChartDimensionsContext);
   const {
     currentX,
     isActive
-  } = useLineChart(); ////////////////////////////////////////////////
+  } = useLineChart();
+  const isMounted = useSharedValue(false);
+  const hasMountedAnimation = useSharedValue(false);
+  React.useEffect(() => {
+    isMounted.value = true; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); ////////////////////////////////////////////////
 
-  const svgProps = useAnimatedProps(() => ({
-    width: isActive.value ? // on Web, <svg /> elements don't support negative widths
-    // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
-    Math.max(currentX.value, 0) : withTiming(width, Object.assign({
-      duration: animationDuration
-    }, animationProps))
-  }));
+  const svgProps = useAnimatedProps(() => {
+    const shouldAnimateOnMount = animateOnMount === 'foreground';
+    const inactiveWidth = !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
+    const duration = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationDuration : animationDuration;
+    const props = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationProps : animationProps;
+    return {
+      width: isActive.value ? // on Web, <svg /> elements don't support negative widths
+      // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
+      Math.max(currentX.value, 0) : withTiming(inactiveWidth + widthOffset, Object.assign({
+        duration
+      }, props), () => {
+        hasMountedAnimation.value = true;
+      })
+    };
+  });
   const viewSize = React.useMemo(() => ({
     width,
     height
   }), [width, height]); ////////////////////////////////////////////////
 
-  return /*#__PURE__*/React.createElement(LineChartPathContext.Provider, {
+  let backgroundChildren;
+  let foregroundChildren;
+
+  if (children) {
+    const iterableChildren = flattenChildren(children);
+    backgroundChildren = iterableChildren.filter(child => {
+      var _child$type;
+
+      return (// @ts-ignore
+        BACKGROUND_COMPONENTS.includes(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName)
+      );
+    });
+    foregroundChildren = iterableChildren.filter(child => {
+      var _child$type2;
+
+      return (// @ts-ignore
+        FOREGROUND_COMPONENTS.includes(child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName)
+      );
+    });
+  } ////////////////////////////////////////////////
+
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LineChartPathContext.Provider, {
     value: {
       color,
+      isInactive: showInactivePath,
       isTransitionEnabled: (_pathProps$isTransiti = pathProps.isTransitionEnabled) !== null && _pathProps$isTransiti !== void 0 ? _pathProps$isTransiti : true
     }
   }, /*#__PURE__*/React.createElement(View, {
@@ -54,18 +101,24 @@ export function LineChartPathWrapper({
   }, /*#__PURE__*/React.createElement(Svg, {
     width: width,
     height: height
-  }, children, /*#__PURE__*/React.createElement(LineChartPath, _extends({
+  }, /*#__PURE__*/React.createElement(LineChartPath, _extends({
     color: color,
-    width: pathWidth,
-    isInactive: showInactivePath
-  }, pathProps)))), /*#__PURE__*/React.createElement(View, {
+    inactiveColor: inactiveColor,
+    width: strokeWidth
+  }, pathProps)), backgroundChildren))), /*#__PURE__*/React.createElement(LineChartPathContext.Provider, {
+    value: {
+      color,
+      isInactive: false,
+      isTransitionEnabled: (_pathProps$isTransiti2 = pathProps.isTransitionEnabled) !== null && _pathProps$isTransiti2 !== void 0 ? _pathProps$isTransiti2 : true
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     style: StyleSheet.absoluteFill
   }, /*#__PURE__*/React.createElement(AnimatedSVG, {
     animatedProps: svgProps,
     height: height
   }, /*#__PURE__*/React.createElement(LineChartPath, _extends({
     color: color,
-    width: pathWidth
-  }, pathProps)))));
+    width: strokeWidth
+  }, pathProps)), foregroundChildren))));
 }
 //# sourceMappingURL=ChartPath.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["ChartPath.tsx"],"names":["React","StyleSheet","View","Svg","Animated","useAnimatedProps","withTiming","LineChartDimensionsContext","LineChartPath","useLineChart","AnimatedSVG","createAnimatedComponent","LineChartPathContext","createContext","color","isTransitionEnabled","LineChartPathWrapper","animationDuration","animationProps","children","width","pathWidth","pathProps","showInactivePath","height","useContext","currentX","isActive","svgProps","value","Math","max","Object","assign","duration","viewSize","useMemo","absoluteFill"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AACA,SAASC,GAAT,QAAoB,kBAApB;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,UAFF,QAGO,yBAHP;AAKA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,aAAT,QAAkD,QAAlD;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,MAAMC,WAAW,GAAGN,QAAQ,CAACO,uBAAT,CAAiCR,GAAjC,CAApB;AAEA,OAAO,MAAMS,oBAAoB,gBAAGZ,KAAK,CAACa,aAAN,CAAoB;AACtDC,EAAAA,KAAK,EAAE,EAD+C;AAEtDC,EAAAA,mBAAmB,EAAE;AAFiC,CAApB,CAA7B;AAeP,OAAO,SAASC,oBAAT,CAA8B;AACnCC,EAAAA,iBAAiB,GAAG,GADe;AAEnCC,EAAAA,cAAc,GAAG,EAFkB;AAGnCC,EAAAA,QAHmC;AAInCL,EAAAA,KAAK,GAAG,OAJ2B;AAKnCM,EAAAA,KAAK,EAAEC,SAAS,GAAG,CALgB;AAMnCC,EAAAA,SAAS,GAAG,EANuB;AAOnCC,EAAAA,gBAAgB,GAAG;AAPgB,CAA9B,EAQuB;AAAA;;AAC5B,QAAM;AAAEH,IAAAA,KAAF;AAASI,IAAAA;AAAT,MAAoBxB,KAAK,CAACyB,UAAN,CAAiBlB,0BAAjB,CAA1B;AACA,QAAM;AAAEmB,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAyBlB,YAAY,EAA3C,CAF4B,CAI5B;;AAEA,QAAMmB,QAAQ,GAAGvB,gBAAgB,CAAC,OAAO;AACvCe,IAAAA,KAAK,EAAEO,QAAQ,CAACE,KAAT,GACH;AACA;AACAC,IAAAA,IAAI,CAACC,GAAL,CAASL,QAAQ,CAACG,KAAlB,EAAyB,CAAzB,CAHG,GAIHvB,UAAU,CACRc,KADQ,EAERY,MAAM,CAACC,MAAP,CAAc;AAAEC,MAAAA,QAAQ,EAAEjB;AAAZ,KAAd,EAA+CC,cAA/C,CAFQ;AALyB,GAAP,CAAD,CAAjC;AAWA,QAAMiB,QAAQ,GAAGnC,KAAK,CAACoC,OAAN,CAAc,OAAO;AAAEhB,IAAAA,KAAF;AAASI,IAAAA;AAAT,GAAP,CAAd,EAAyC,CAACJ,KAAD,EAAQI,MAAR,CAAzC,CAAjB,CAjB4B,CAmB5B;;AAEA,sBACE,oBAAC,oBAAD,CAAsB,QAAtB;AACE,IAAA,KAAK,EAAE;AACLV,MAAAA,KADK;AAELC,MAAAA,mBAAmB,2BAAEO,SAAS,CAACP,mBAAZ,yEAAmC;AAFjD;AADT,kBAME,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEoB;AAAb,kBACE,oBAAC,GAAD;AAAK,IAAA,KAAK,EAAEf,KAAZ;AAAmB,IAAA,MAAM,EAAEI;AAA3B,KACGL,QADH,eAEE,oBAAC,aAAD;AACE,IAAA,KAAK,EAAEL,KADT;AAEE,IAAA,KAAK,EAAEO,SAFT;AAGE,IAAA,UAAU,EAAEE;AAHd,KAIMD,SAJN,EAFF,CADF,CANF,eAiBE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAErB,UAAU,CAACoC;AAAxB,kBACE,oBAAC,WAAD;AAAa,IAAA,aAAa,EAAET,QAA5B;AAAsC,IAAA,MAAM,EAAEJ;AAA9C,kBACE,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEV,KAAtB;AAA6B,IAAA,KAAK,EAAEO;AAApC,KAAmDC,SAAnD,EADF,CADF,CAjBF,CADF;AAyBD","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport Animated, {\n  useAnimatedProps,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPath, LineChartPathProps } from './Path';\nimport { useLineChart } from './useLineChart';\n\nconst AnimatedSVG = Animated.createAnimatedComponent(Svg);\n\nexport const LineChartPathContext = React.createContext({\n  color: '',\n  isTransitionEnabled: true,\n});\n\ntype LineChartPathWrapperProps = {\n  animationDuration?: number;\n  animationProps?: Partial<Animated.WithTimingConfig>;\n  children?: React.ReactNode;\n  color?: string;\n  width?: number;\n  pathProps?: Partial<LineChartPathProps>;\n  showInactivePath?: boolean;\n};\n\nexport function LineChartPathWrapper({\n  animationDuration = 300,\n  animationProps = {},\n  children,\n  color = 'black',\n  width: pathWidth = 3,\n  pathProps = {},\n  showInactivePath = true,\n}: LineChartPathWrapperProps) {\n  const { width, height } = React.useContext(LineChartDimensionsContext);\n  const { currentX, isActive } = useLineChart();\n\n  ////////////////////////////////////////////////\n\n  const svgProps = useAnimatedProps(() => ({\n    width: isActive.value\n      ? // on Web, <svg /> elements don't support negative widths\n        // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904\n        Math.max(currentX.value, 0)\n      : withTiming(\n          width,\n          Object.assign({ duration: animationDuration }, animationProps)\n        ),\n  }));\n\n  const viewSize = React.useMemo(() => ({ width, height }), [width, height]);\n\n  ////////////////////////////////////////////////\n\n  return (\n    <LineChartPathContext.Provider\n      value={{\n        color,\n        isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n      }}\n    >\n      <View style={viewSize}>\n        <Svg width={width} height={height}>\n          {children}\n          <LineChartPath\n            color={color}\n            width={pathWidth}\n            isInactive={showInactivePath}\n            {...pathProps}\n          />\n        </Svg>\n      </View>\n      <View style={StyleSheet.absoluteFill}>\n        <AnimatedSVG animatedProps={svgProps} height={height}>\n          <LineChartPath color={color} width={pathWidth} {...pathProps} />\n        </AnimatedSVG>\n      </View>\n    </LineChartPathContext.Provider>\n  );\n}\n"]}
+{"version":3,"sources":["ChartPath.tsx"],"names":["React","StyleSheet","View","Svg","Animated","useAnimatedProps","useSharedValue","withTiming","flattenChildren","LineChartDimensionsContext","LineChartPath","useLineChart","BACKGROUND_COMPONENTS","FOREGROUND_COMPONENTS","AnimatedSVG","createAnimatedComponent","LineChartPathContext","createContext","color","isInactive","isTransitionEnabled","LineChartPathWrapper","displayName","animationDuration","animationProps","children","inactiveColor","width","strokeWidth","widthOffset","pathProps","showInactivePath","animateOnMount","mountAnimationDuration","mountAnimationProps","height","pathWidth","useContext","currentX","isActive","isMounted","hasMountedAnimation","useEffect","value","svgProps","shouldAnimateOnMount","inactiveWidth","duration","props","Math","max","Object","assign","viewSize","useMemo","backgroundChildren","foregroundChildren","iterableChildren","filter","child","includes","type","absoluteFill"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport Animated, {\n  useAnimatedProps,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPath, LineChartPathProps } from './Path';\nimport { useLineChart } from './useLineChart';\n\nconst BACKGROUND_COMPONENTS = [\n  'LineChartHighlight',\n  'LineChartHorizontalLine',\n  'LineChartGradient',\n  'LineChartDot',\n];\nconst FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];\n\nconst AnimatedSVG = Animated.createAnimatedComponent(Svg);\n\nexport const LineChartPathContext = React.createContext({\n  color: '',\n  isInactive: false,\n  isTransitionEnabled: true,\n});\n\ntype LineChartPathWrapperProps = {\n  animationDuration?: number;\n  animationProps?: Partial<Animated.WithTimingConfig>;\n  children?: React.ReactNode;\n  color?: string;\n  inactiveColor?: string;\n  width?: number;\n  widthOffset?: number;\n  pathProps?: Partial<LineChartPathProps>;\n  showInactivePath?: boolean;\n  animateOnMount?: 'foreground';\n  mountAnimationDuration?: number;\n  mountAnimationProps?: Partial<Animated.WithTimingConfig>;\n};\n\nLineChartPathWrapper.displayName = 'LineChartPathWrapper';\n\nexport function LineChartPathWrapper({\n  animationDuration = 300,\n  animationProps = {},\n  children,\n  color = 'black',\n  inactiveColor,\n  width: strokeWidth = 3,\n  widthOffset = 20,\n  pathProps = {},\n  showInactivePath = true,\n  animateOnMount,\n  mountAnimationDuration = animationDuration,\n  mountAnimationProps = animationProps,\n}: LineChartPathWrapperProps) {\n  const { height, pathWidth, width } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, isActive } = useLineChart();\n  const isMounted = useSharedValue(false);\n  const hasMountedAnimation = useSharedValue(false);\n\n  React.useEffect(() => {\n    isMounted.value = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  ////////////////////////////////////////////////\n\n  const svgProps = useAnimatedProps(() => {\n    const shouldAnimateOnMount = animateOnMount === 'foreground';\n    const inactiveWidth =\n      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;\n\n    const duration =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationDuration\n        : animationDuration;\n    const props =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationProps\n        : animationProps;\n\n    return {\n      width: isActive.value\n        ? // on Web, <svg /> elements don't support negative widths\n          // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904\n          Math.max(currentX.value, 0)\n        : withTiming(\n            inactiveWidth + widthOffset,\n            Object.assign({ duration }, props),\n            () => {\n              hasMountedAnimation.value = true;\n            }\n          ),\n    };\n  });\n\n  const viewSize = React.useMemo(() => ({ width, height }), [width, height]);\n\n  ////////////////////////////////////////////////\n\n  let backgroundChildren;\n  let foregroundChildren;\n  if (children) {\n    const iterableChildren = flattenChildren(children);\n    backgroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      BACKGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n    foregroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      FOREGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n  }\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: showInactivePath,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={viewSize}>\n          <Svg width={width} height={height}>\n            <LineChartPath\n              color={color}\n              inactiveColor={inactiveColor}\n              width={strokeWidth}\n              {...pathProps}\n            />\n            {backgroundChildren}\n          </Svg>\n        </View>\n      </LineChartPathContext.Provider>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: false,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={StyleSheet.absoluteFill}>\n          <AnimatedSVG animatedProps={svgProps} height={height}>\n            <LineChartPath color={color} width={strokeWidth} {...pathProps} />\n            {foregroundChildren}\n          </AnimatedSVG>\n        </View>\n      </LineChartPathContext.Provider>\n    </>\n  );\n}\n"]}

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

@@ -1,17 +1,14 @@
 import * as React from 'react';
-import { useSharedValue } from 'react-native-reanimated';
-import { getDomain } from './utils';
+import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+import { LineChartDataProvider } from './Data';
+import { getDomain, lineChartDataPropToArray } from './utils';
 export const LineChartContext = /*#__PURE__*/React.createContext({
   currentX: {
     value: -1
   },
-  currentY: {
-    value: -1
-  },
   currentIndex: {
     value: -1
   },
-  data: [],
   domain: [0, 0],
   isActive: {
     value: false
@@ -19,40 +16,48 @@ export const LineChartContext = /*#__PURE__*/React.createContext({
   yDomain: {
     min: 0,
     max: 0
-  }
+  },
+  xLength: 0
 });
+LineChartProvider.displayName = 'LineChartProvider';
 export function LineChartProvider({
   children,
   data = [],
-  yRange
+  yRange,
+  onCurrentIndexChange,
+  xLength
 }) {
   const currentX = useSharedValue(-1);
-  const currentY = useSharedValue(-1);
   const currentIndex = useSharedValue(-1);
   const isActive = useSharedValue(false);
-  const domain = React.useMemo(() => getDomain(data), [data]);
+  const domain = React.useMemo(() => getDomain(Array.isArray(data) ? data : Object.values(data)[0]), [data]);
   const contextValue = React.useMemo(() => {
     var _yRange$min, _yRange$max;
 
+    const values = lineChartDataPropToArray(data).map(({
+      value
+    }) => value);
     return {
       currentX,
-      currentY,
       currentIndex,
-      data,
       isActive,
       domain,
       yDomain: {
-        min: (_yRange$min = yRange === null || yRange === void 0 ? void 0 : yRange.min) !== null && _yRange$min !== void 0 ? _yRange$min : Math.min(...data.map(({
-          value
-        }) => value)),
-        max: (_yRange$max = yRange === null || yRange === void 0 ? void 0 : yRange.max) !== null && _yRange$max !== void 0 ? _yRange$max : Math.max(...data.map(({
-          value
-        }) => value))
-      }
+        min: (_yRange$min = yRange === null || yRange === void 0 ? void 0 : yRange.min) !== null && _yRange$min !== void 0 ? _yRange$min : Math.min(...values),
+        max: (_yRange$max = yRange === null || yRange === void 0 ? void 0 : yRange.max) !== null && _yRange$max !== void 0 ? _yRange$max : Math.max(...values)
+      },
+      xLength: xLength !== null && xLength !== void 0 ? xLength : (Array.isArray(data) ? data : Object.values(data)[0]).length
     };
-  }, [currentIndex, currentX, currentY, data, domain, isActive, yRange === null || yRange === void 0 ? void 0 : yRange.max, yRange === null || yRange === void 0 ? void 0 : yRange.min]);
-  return /*#__PURE__*/React.createElement(LineChartContext.Provider, {
+  }, [currentIndex, currentX, data, domain, isActive, yRange === null || yRange === void 0 ? void 0 : yRange.max, yRange === null || yRange === void 0 ? void 0 : yRange.min, xLength]);
+  useAnimatedReaction(() => currentIndex.value, (x, prevX) => {
+    if (x !== -1 && x !== prevX && onCurrentIndexChange) {
+      runOnJS(onCurrentIndexChange)(x);
+    }
+  });
+  return /*#__PURE__*/React.createElement(LineChartDataProvider, {
+    data: data
+  }, /*#__PURE__*/React.createElement(LineChartContext.Provider, {
     value: contextValue
-  }, children);
+  }, children));
 }
 //# sourceMappingURL=Context.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["Context.tsx"],"names":["React","useSharedValue","getDomain","LineChartContext","createContext","currentX","value","currentY","currentIndex","data","domain","isActive","yDomain","min","max","LineChartProvider","children","yRange","useMemo","contextValue","Math","map"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,cAAT,QAA+B,yBAA/B;AAGA,SAASC,SAAT,QAA0B,SAA1B;AAEA,OAAO,MAAMC,gBAAgB,gBAAGH,KAAK,CAACI,aAAN,CAAuC;AACrEC,EAAAA,QAAQ,EAAE;AAAEC,IAAAA,KAAK,EAAE,CAAC;AAAV,GAD2D;AAErEC,EAAAA,QAAQ,EAAE;AAAED,IAAAA,KAAK,EAAE,CAAC;AAAV,GAF2D;AAGrEE,EAAAA,YAAY,EAAE;AAAEF,IAAAA,KAAK,EAAE,CAAC;AAAV,GAHuD;AAIrEG,EAAAA,IAAI,EAAE,EAJ+D;AAKrEC,EAAAA,MAAM,EAAE,CAAC,CAAD,EAAI,CAAJ,CAL6D;AAMrEC,EAAAA,QAAQ,EAAE;AAAEL,IAAAA,KAAK,EAAE;AAAT,GAN2D;AAOrEM,EAAAA,OAAO,EAAE;AACPC,IAAAA,GAAG,EAAE,CADE;AAEPC,IAAAA,GAAG,EAAE;AAFE;AAP4D,CAAvC,CAAzB;AAmBP,OAAO,SAASC,iBAAT,CAA2B;AAChCC,EAAAA,QADgC;AAEhCP,EAAAA,IAAI,GAAG,EAFyB;AAGhCQ,EAAAA;AAHgC,CAA3B,EAIoB;AACzB,QAAMZ,QAAQ,GAAGJ,cAAc,CAAC,CAAC,CAAF,CAA/B;AACA,QAAMM,QAAQ,GAAGN,cAAc,CAAC,CAAC,CAAF,CAA/B;AACA,QAAMO,YAAY,GAAGP,cAAc,CAAC,CAAC,CAAF,CAAnC;AACA,QAAMU,QAAQ,GAAGV,cAAc,CAAC,KAAD,CAA/B;AAEA,QAAMS,MAAM,GAAGV,KAAK,CAACkB,OAAN,CAAc,MAAMhB,SAAS,CAACO,IAAD,CAA7B,EAAqC,CAACA,IAAD,CAArC,CAAf;AAEA,QAAMU,YAAY,GAAGnB,KAAK,CAACkB,OAAN,CACnB;AAAA;;AAAA,WAAO;AACLb,MAAAA,QADK;AAELE,MAAAA,QAFK;AAGLC,MAAAA,YAHK;AAILC,MAAAA,IAJK;AAKLE,MAAAA,QALK;AAMLD,MAAAA,MANK;AAOLE,MAAAA,OAAO,EAAE;AACPC,QAAAA,GAAG,iBAAEI,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEJ,GAAV,qDAAiBO,IAAI,CAACP,GAAL,CAAS,GAAGJ,IAAI,CAACY,GAAL,CAAS,CAAC;AAAEf,UAAAA;AAAF,SAAD,KAAeA,KAAxB,CAAZ,CADb;AAEPQ,QAAAA,GAAG,iBAAEG,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEH,GAAV,qDAAiBM,IAAI,CAACN,GAAL,CAAS,GAAGL,IAAI,CAACY,GAAL,CAAS,CAAC;AAAEf,UAAAA;AAAF,SAAD,KAAeA,KAAxB,CAAZ;AAFb;AAPJ,KAAP;AAAA,GADmB,EAanB,CACEE,YADF,EAEEH,QAFF,EAGEE,QAHF,EAIEE,IAJF,EAKEC,MALF,EAMEC,QANF,EAOEM,MAPF,aAOEA,MAPF,uBAOEA,MAAM,CAAEH,GAPV,EAQEG,MARF,aAQEA,MARF,uBAQEA,MAAM,CAAEJ,GARV,CAbmB,CAArB;AAyBA,sBACE,oBAAC,gBAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAEM;AAAlC,KACGH,QADH,CADF;AAKD","sourcesContent":["import * as React from 'react';\nimport { useSharedValue } from 'react-native-reanimated';\n\nimport type { TLineChartContext, TLineChartData, YRangeProp } from './types';\nimport { getDomain } from './utils';\n\nexport const LineChartContext = React.createContext<TLineChartContext>({\n  currentX: { value: -1 },\n  currentY: { value: -1 },\n  currentIndex: { value: -1 },\n  data: [],\n  domain: [0, 0],\n  isActive: { value: false },\n  yDomain: {\n    min: 0,\n    max: 0,\n  },\n});\n\ntype LineChartProviderProps = {\n  children: React.ReactNode;\n  data: TLineChartData;\n  yRange?: YRangeProp;\n};\n\nexport function LineChartProvider({\n  children,\n  data = [],\n  yRange,\n}: LineChartProviderProps) {\n  const currentX = useSharedValue(-1);\n  const currentY = useSharedValue(-1);\n  const currentIndex = useSharedValue(-1);\n  const isActive = useSharedValue(false);\n\n  const domain = React.useMemo(() => getDomain(data), [data]);\n\n  const contextValue = React.useMemo<TLineChartContext>(\n    () => ({\n      currentX,\n      currentY,\n      currentIndex,\n      data,\n      isActive,\n      domain,\n      yDomain: {\n        min: yRange?.min ?? Math.min(...data.map(({ value }) => value)),\n        max: yRange?.max ?? Math.max(...data.map(({ value }) => value)),\n      },\n    }),\n    [\n      currentIndex,\n      currentX,\n      currentY,\n      data,\n      domain,\n      isActive,\n      yRange?.max,\n      yRange?.min,\n    ]\n  );\n\n  return (\n    <LineChartContext.Provider value={contextValue}>\n      {children}\n    </LineChartContext.Provider>\n  );\n}\n"]}
+{"version":3,"sources":["Context.tsx"],"names":["React","runOnJS","useAnimatedReaction","useSharedValue","LineChartDataProvider","getDomain","lineChartDataPropToArray","LineChartContext","createContext","currentX","value","currentIndex","domain","isActive","yDomain","min","max","xLength","LineChartProvider","displayName","children","data","yRange","onCurrentIndexChange","useMemo","Array","isArray","Object","values","contextValue","map","Math","length","x","prevX"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  runOnJS,\n  useAnimatedReaction,\n  useSharedValue,\n} from 'react-native-reanimated';\nimport type { TLineChartDataProp } from './types';\nimport { LineChartDataProvider } from './Data';\n\nimport type { TLineChartContext, YRangeProp } from './types';\nimport { getDomain, lineChartDataPropToArray } from './utils';\n\nexport const LineChartContext = React.createContext<TLineChartContext>({\n  currentX: { value: -1 },\n  currentIndex: { value: -1 },\n  domain: [0, 0],\n  isActive: { value: false },\n  yDomain: {\n    min: 0,\n    max: 0,\n  },\n  xLength: 0,\n});\n\ntype LineChartProviderProps = {\n  children: React.ReactNode;\n  data: TLineChartDataProp;\n  yRange?: YRangeProp;\n  onCurrentIndexChange?: (x: number) => void;\n  xLength?: number;\n};\n\nLineChartProvider.displayName = 'LineChartProvider';\n\nexport function LineChartProvider({\n  children,\n  data = [],\n  yRange,\n  onCurrentIndexChange,\n  xLength,\n}: LineChartProviderProps) {\n  const currentX = useSharedValue(-1);\n  const currentIndex = useSharedValue(-1);\n  const isActive = useSharedValue(false);\n\n  const domain = React.useMemo(\n    () => getDomain(Array.isArray(data) ? data : Object.values(data)[0]),\n    [data]\n  );\n\n  const contextValue = React.useMemo<TLineChartContext>(() => {\n    const values = lineChartDataPropToArray(data).map(({ value }) => value);\n\n    return {\n      currentX,\n      currentIndex,\n      isActive,\n      domain,\n      yDomain: {\n        min: yRange?.min ?? Math.min(...values),\n        max: yRange?.max ?? Math.max(...values),\n      },\n      xLength:\n        xLength ?? (Array.isArray(data) ? data : Object.values(data)[0]).length,\n    };\n  }, [\n    currentIndex,\n    currentX,\n    data,\n    domain,\n    isActive,\n    yRange?.max,\n    yRange?.min,\n    xLength,\n  ]);\n\n  useAnimatedReaction(\n    () => currentIndex.value,\n    (x, prevX) => {\n      if (x !== -1 && x !== prevX && onCurrentIndexChange) {\n        runOnJS(onCurrentIndexChange)(x);\n      }\n    }\n  );\n\n  return (\n    <LineChartDataProvider data={data}>\n      <LineChartContext.Provider value={contextValue}>\n        {children}\n      </LineChartContext.Provider>\n    </LineChartDataProvider>\n  );\n}\n"]}

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

@@ -4,24 +4,24 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { LongPressGestureHandler } from 'react-native-gesture-handler';
 import Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';
-import { getYForX, parse } from 'react-native-redash';
+import { parse } from 'react-native-redash';
 import { LineChartDimensionsContext } from './Chart';
 import { useLineChart } from './useLineChart';
 export const CursorContext = /*#__PURE__*/React.createContext({
   type: ''
 });
+LineChartCursor.displayName = 'LineChartCursor';
 export function LineChartCursor({
   children,
   type,
   ...props
 }) {
   const {
-    width,
+    pathWidth: width,
     path
   } = React.useContext(LineChartDimensionsContext);
   const {
     currentX,
-    currentY,
     currentIndex,
     isActive,
     data
@@ -34,8 +34,7 @@ export function LineChartCursor({
       if (parsedPath) {
         const boundedX = x <= width ? x : width;
         isActive.value = true;
-        currentX.value = boundedX;
-        currentY.value = getYForX(parsedPath, boundedX) || 0; // on Web, we could drag the cursor to be negative, breaking it
+        currentX.value = boundedX; // on Web, we could drag the cursor to be negative, breaking it
         // so we clamp the index at 0 to fix it
         // https://github.com/coinjar/react-native-wagmi-charts/issues/24
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Cursor.tsx"],"names":["React","StyleSheet","LongPressGestureHandler","Animated","useAnimatedGestureHandler","getYForX","parse","LineChartDimensionsContext","useLineChart","CursorContext","createContext","type","LineChartCursor","children","props","width","path","useContext","currentX","currentY","currentIndex","isActive","data","parsedPath","useMemo","undefined","onGestureEvent","onActive","x","boundedX","value","minIndex","boundedIndex","Math","max","round","length","onEnd","absoluteFill"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAEEC,uBAFF,QAKO,8BALP;AAMA,OAAOC,QAAP,IAAmBC,yBAAnB,QAAoD,yBAApD;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,qBAAhC;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAOA,OAAO,MAAMC,aAAa,gBAAGT,KAAK,CAACU,aAAN,CAAoB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAApB,CAAtB;AAEP,OAAO,SAASC,eAAT,CAAyB;AAC9BC,EAAAA,QAD8B;AAE9BF,EAAAA,IAF8B;AAG9B,KAAGG;AAH2B,CAAzB,EAIkB;AACvB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAkBhB,KAAK,CAACiB,UAAN,CAAiBV,0BAAjB,CAAxB;AACA,QAAM;AAAEW,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsBC,IAAAA,YAAtB;AAAoCC,IAAAA,QAApC;AAA8CC,IAAAA;AAA9C,MAAuDd,YAAY,EAAzE;AAEA,QAAMe,UAAU,GAAGvB,KAAK,CAACwB,OAAN,CACjB,MAAOR,IAAI,GAAGV,KAAK,CAACU,IAAD,CAAR,GAAiBS,SADX,EAEjB,CAACT,IAAD,CAFiB,CAAnB;AAKA,QAAMU,cAAc,GAAGtB,yBAAyB,CAE9C;AACAuB,IAAAA,QAAQ,EAAE,CAAC;AAAEC,MAAAA;AAAF,KAAD,KAAW;AACnB,UAAIL,UAAJ,EAAgB;AACd,cAAMM,QAAQ,GAAGD,CAAC,IAAIb,KAAL,GAAaa,CAAb,GAAiBb,KAAlC;AACAM,QAAAA,QAAQ,CAACS,KAAT,GAAiB,IAAjB;AACAZ,QAAAA,QAAQ,CAACY,KAAT,GAAiBD,QAAjB;AACAV,QAAAA,QAAQ,CAACW,KAAT,GAAiBzB,QAAQ,CAACkB,UAAD,EAAaM,QAAb,CAAR,IAAkC,CAAnD,CAJc,CAMd;AACA;AACA;;AACA,cAAME,QAAQ,GAAG,CAAjB;AACA,cAAMC,YAAY,GAAGC,IAAI,CAACC,GAAL,CACnBH,QADmB,EAEnBE,IAAI,CAACE,KAAL,CAAWN,QAAQ,GAAGd,KAAX,IAAoB,KAAKO,IAAI,CAACc,MAAL,GAAc,CAAnB,CAApB,CAAX,CAFmB,CAArB;AAKAhB,QAAAA,YAAY,CAACU,KAAb,GAAqBE,YAArB;AACD;AACF,KAnBD;AAoBAK,IAAAA,KAAK,EAAE,MAAM;AACXhB,MAAAA,QAAQ,CAACS,KAAT,GAAiB,KAAjB;AACAV,MAAAA,YAAY,CAACU,KAAb,GAAqB,CAAC,CAAtB;AACD;AAvBD,GAF8C,CAAhD;AA4BA,sBACE,oBAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAE;AAAEnB,MAAAA;AAAF;AAA/B,kBACE,oBAAC,uBAAD;AACE,IAAA,aAAa,EAAE,CADjB;AAEE,IAAA,OAAO,EAAE,MAFX;AAGE,IAAA,cAAc,EAAEe;AAHlB,KAIMZ,KAJN,gBAME,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEb,UAAU,CAACqC;AAAjC,KACGzB,QADH,CANF,CADF,CADF;AAcD","sourcesContent":["import * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport {\n  GestureEvent,\n  LongPressGestureHandler,\n  LongPressGestureHandlerEventPayload,\n  LongPressGestureHandlerProps,\n} from 'react-native-gesture-handler';\nimport Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';\nimport { getYForX, parse } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { useLineChart } from './useLineChart';\n\nexport type LineChartCursorProps = LongPressGestureHandlerProps & {\n  children: React.ReactNode;\n  type: 'line' | 'crosshair';\n};\n\nexport const CursorContext = React.createContext({ type: '' });\n\nexport function LineChartCursor({\n  children,\n  type,\n  ...props\n}: LineChartCursorProps) {\n  const { width, path } = React.useContext(LineChartDimensionsContext);\n  const { currentX, currentY, currentIndex, isActive, data } = useLineChart();\n\n  const parsedPath = React.useMemo(\n    () => (path ? parse(path) : undefined),\n    [path]\n  );\n\n  const onGestureEvent = useAnimatedGestureHandler<\n    GestureEvent<LongPressGestureHandlerEventPayload>\n  >({\n    onActive: ({ x }) => {\n      if (parsedPath) {\n        const boundedX = x <= width ? x : width;\n        isActive.value = true;\n        currentX.value = boundedX;\n        currentY.value = getYForX(parsedPath, boundedX) || 0;\n\n        // on Web, we could drag the cursor to be negative, breaking it\n        // so we clamp the index at 0 to fix it\n        // https://github.com/coinjar/react-native-wagmi-charts/issues/24\n        const minIndex = 0;\n        const boundedIndex = Math.max(\n          minIndex,\n          Math.round(boundedX / width / (1 / (data.length - 1)))\n        );\n\n        currentIndex.value = boundedIndex;\n      }\n    },\n    onEnd: () => {\n      isActive.value = false;\n      currentIndex.value = -1;\n    },\n  });\n\n  return (\n    <CursorContext.Provider value={{ type }}>\n      <LongPressGestureHandler\n        minDurationMs={0}\n        maxDist={999999}\n        onGestureEvent={onGestureEvent}\n        {...props}\n      >\n        <Animated.View style={StyleSheet.absoluteFill}>\n          {children}\n        </Animated.View>\n      </LongPressGestureHandler>\n    </CursorContext.Provider>\n  );\n}\n"]}
+{"version":3,"sources":["Cursor.tsx"],"names":["React","StyleSheet","LongPressGestureHandler","Animated","useAnimatedGestureHandler","parse","LineChartDimensionsContext","useLineChart","CursorContext","createContext","type","LineChartCursor","displayName","children","props","pathWidth","width","path","useContext","currentX","currentIndex","isActive","data","parsedPath","useMemo","undefined","onGestureEvent","onActive","x","boundedX","value","minIndex","boundedIndex","Math","max","round","length","onEnd","absoluteFill"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAEEC,uBAFF,QAKO,8BALP;AAMA,OAAOC,QAAP,IAAmBC,yBAAnB,QAAoD,yBAApD;AACA,SAASC,KAAT,QAAsB,qBAAtB;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAOA,OAAO,MAAMC,aAAa,gBAAGR,KAAK,CAACS,aAAN,CAAoB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAApB,CAAtB;AAEPC,eAAe,CAACC,WAAhB,GAA8B,iBAA9B;AAEA,OAAO,SAASD,eAAT,CAAyB;AAC9BE,EAAAA,QAD8B;AAE9BH,EAAAA,IAF8B;AAG9B,KAAGI;AAH2B,CAAzB,EAIkB;AACvB,QAAM;AAAEC,IAAAA,SAAS,EAAEC,KAAb;AAAoBC,IAAAA;AAApB,MAA6BjB,KAAK,CAACkB,UAAN,CACjCZ,0BADiC,CAAnC;AAGA,QAAM;AAAEa,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,MAA6Cf,YAAY,EAA/D;AAEA,QAAMgB,UAAU,GAAGvB,KAAK,CAACwB,OAAN,CACjB,MAAOP,IAAI,GAAGZ,KAAK,CAACY,IAAD,CAAR,GAAiBQ,SADX,EAEjB,CAACR,IAAD,CAFiB,CAAnB;AAKA,QAAMS,cAAc,GAAGtB,yBAAyB,CAE9C;AACAuB,IAAAA,QAAQ,EAAE,CAAC;AAAEC,MAAAA;AAAF,KAAD,KAAW;AACnB,UAAIL,UAAJ,EAAgB;AACd,cAAMM,QAAQ,GAAGD,CAAC,IAAIZ,KAAL,GAAaY,CAAb,GAAiBZ,KAAlC;AACAK,QAAAA,QAAQ,CAACS,KAAT,GAAiB,IAAjB;AACAX,QAAAA,QAAQ,CAACW,KAAT,GAAiBD,QAAjB,CAHc,CAKd;AACA;AACA;;AACA,cAAME,QAAQ,GAAG,CAAjB;AACA,cAAMC,YAAY,GAAGC,IAAI,CAACC,GAAL,CACnBH,QADmB,EAEnBE,IAAI,CAACE,KAAL,CAAWN,QAAQ,GAAGb,KAAX,IAAoB,KAAKM,IAAI,CAACc,MAAL,GAAc,CAAnB,CAApB,CAAX,CAFmB,CAArB;AAKAhB,QAAAA,YAAY,CAACU,KAAb,GAAqBE,YAArB;AACD;AACF,KAlBD;AAmBAK,IAAAA,KAAK,EAAE,MAAM;AACXhB,MAAAA,QAAQ,CAACS,KAAT,GAAiB,KAAjB;AACAV,MAAAA,YAAY,CAACU,KAAb,GAAqB,CAAC,CAAtB;AACD;AAtBD,GAF8C,CAAhD;AA2BA,sBACE,oBAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAE;AAAEpB,MAAAA;AAAF;AAA/B,kBACE,oBAAC,uBAAD;AACE,IAAA,aAAa,EAAE,CADjB;AAEE,IAAA,OAAO,EAAE,MAFX;AAGE,IAAA,cAAc,EAAEgB;AAHlB,KAIMZ,KAJN,gBAME,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEb,UAAU,CAACqC;AAAjC,KACGzB,QADH,CANF,CADF,CADF;AAcD","sourcesContent":["import * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport {\n  GestureEvent,\n  LongPressGestureHandler,\n  LongPressGestureHandlerEventPayload,\n  LongPressGestureHandlerProps,\n} from 'react-native-gesture-handler';\nimport Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';\nimport { parse } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { useLineChart } from './useLineChart';\n\nexport type LineChartCursorProps = LongPressGestureHandlerProps & {\n  children: React.ReactNode;\n  type: 'line' | 'crosshair';\n};\n\nexport const CursorContext = React.createContext({ type: '' });\n\nLineChartCursor.displayName = 'LineChartCursor';\n\nexport function LineChartCursor({\n  children,\n  type,\n  ...props\n}: LineChartCursorProps) {\n  const { pathWidth: width, path } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, currentIndex, isActive, data } = useLineChart();\n\n  const parsedPath = React.useMemo(\n    () => (path ? parse(path) : undefined),\n    [path]\n  );\n\n  const onGestureEvent = useAnimatedGestureHandler<\n    GestureEvent<LongPressGestureHandlerEventPayload>\n  >({\n    onActive: ({ x }) => {\n      if (parsedPath) {\n        const boundedX = x <= width ? x : width;\n        isActive.value = true;\n        currentX.value = boundedX;\n\n        // on Web, we could drag the cursor to be negative, breaking it\n        // so we clamp the index at 0 to fix it\n        // https://github.com/coinjar/react-native-wagmi-charts/issues/24\n        const minIndex = 0;\n        const boundedIndex = Math.max(\n          minIndex,\n          Math.round(boundedX / width / (1 / (data.length - 1)))\n        );\n\n        currentIndex.value = boundedIndex;\n      }\n    },\n    onEnd: () => {\n      isActive.value = false;\n      currentIndex.value = -1;\n    },\n  });\n\n  return (\n    <CursorContext.Provider value={{ type }}>\n      <LongPressGestureHandler\n        minDurationMs={0}\n        maxDist={999999}\n        onGestureEvent={onGestureEvent}\n        {...props}\n      >\n        <Animated.View style={StyleSheet.absoluteFill}>\n          {children}\n        </Animated.View>\n      </LongPressGestureHandler>\n    </CursorContext.Provider>\n  );\n}\n"]}

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

@@ -1,10 +1,11 @@
 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); }
 
 import * as React from 'react';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import Animated, { useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { LineChartCursor } from './Cursor';
 import { useLineChart } from './useLineChart';
+LineChartCursorCrosshair.displayName = 'LineChartCursorCrosshair';
 export function LineChartCursorCrosshair({
   children,
   color = 'black',
@@ -19,16 +20,23 @@ export function LineChartCursorCrosshair({
     currentX,
     currentY,
     isActive
-  } = useLineChart();
+  } = useLineChart(); // It seems that enabling spring animation on initial render on Android causes a crash.
+
+  const [enableSpringAnimation, setEnableSpringAnimation] = React.useState(Platform.OS === 'ios');
+  React.useEffect(() => {
+    setTimeout(() => {
+      setEnableSpringAnimation(true);
+    }, 100);
+  }, []);
   const animatedCursorStyle = useAnimatedStyle(() => ({
     transform: [{
       translateX: currentX.value - outerSize / 2
     }, {
       translateY: currentY.value - outerSize / 2
     }, {
-      scale: withSpring(isActive.value ? 1 : 0, {
+      scale: enableSpringAnimation ? withSpring(isActive.value ? 1 : 0, {
         damping: 10
-      })
+      }) : 0
     }]
   }));
   return /*#__PURE__*/React.createElement(LineChartCursor, _extends({

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

@@ -1 +1 @@
-{"version":3,"sources":["CursorCrosshair.tsx"],"names":["React","View","Animated","useAnimatedStyle","withSpring","LineChartCursor","useLineChart","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,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAgC,cAAhC;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,UAFF,QAGO,yBAHP;AAKA,SAASC,eAAT,QAAsD,UAAtD;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAYA,OAAO,SAASC,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,MAAmCZ,YAAY,EAArD;AAEA,QAAMa,mBAAmB,GAAGhB,gBAAgB,CAAC,OAAO;AAClDiB,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,EAAEpB,UAAU,CAACc,QAAQ,CAACI,KAAT,GAAiB,CAAjB,GAAqB,CAAtB,EAAyB;AACxCG,QAAAA,OAAO,EAAE;AAD+B,OAAzB;AADnB,KAHS;AADuC,GAAP,CAAD,CAA5C;AAYA,sBACE,oBAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KAAsCV,KAAtC,gBACE,oBAAC,QAAD,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,IAAD,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,IAAD,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"]}
+{"version":3,"sources":["CursorCrosshair.tsx"],"names":["React","Platform","View","Animated","useAnimatedStyle","withSpring","LineChartCursor","useLineChart","LineChartCursorCrosshair","displayName","children","color","size","outerSize","crosshairWrapperProps","crosshairProps","crosshairOuterProps","props","currentX","currentY","isActive","enableSpringAnimation","setEnableSpringAnimation","useState","OS","useEffect","setTimeout","animatedCursorStyle","transform","translateX","value","translateY","scale","damping","width","height","alignItems","justifyContent","style","backgroundColor","borderRadius","opacity","position"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,EAAmBC,IAAnB,QAA0C,cAA1C;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,UAFF,QAGO,yBAHP;AAKA,SAASC,eAAT,QAAsD,UAAtD;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAeAC,wBAAwB,CAACC,WAAzB,GAAuC,0BAAvC;AAEA,OAAO,SAASD,wBAAT,CAAkC;AACvCE,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,MAAmCb,YAAY,EAArD,CADgC,CAGhC;;AACA,QAAM,CAACc,qBAAD,EAAwBC,wBAAxB,IAAoDtB,KAAK,CAACuB,QAAN,CACxDtB,QAAQ,CAACuB,EAAT,KAAgB,KADwC,CAA1D;AAGAxB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,MAAM;AACpBC,IAAAA,UAAU,CAAC,MAAM;AACfJ,MAAAA,wBAAwB,CAAC,IAAD,CAAxB;AACD,KAFS,EAEP,GAFO,CAAV;AAGD,GAJD,EAIG,EAJH;AAMA,QAAMK,mBAAmB,GAAGvB,gBAAgB,CAAC,OAAO;AAClDwB,IAAAA,SAAS,EAAE,CACT;AAAEC,MAAAA,UAAU,EAAEX,QAAQ,CAACY,KAAT,GAAiBjB,SAAS,GAAG;AAA3C,KADS,EAET;AAAEkB,MAAAA,UAAU,EAAEZ,QAAQ,CAACW,KAAT,GAAiBjB,SAAS,GAAG;AAA3C,KAFS,EAGT;AACEmB,MAAAA,KAAK,EAAEX,qBAAqB,GACxBhB,UAAU,CAACe,QAAQ,CAACU,KAAT,GAAiB,CAAjB,GAAqB,CAAtB,EAAyB;AACjCG,QAAAA,OAAO,EAAE;AADwB,OAAzB,CADc,GAIxB;AALN,KAHS;AADuC,GAAP,CAAD,CAA5C;AAcA,sBACE,oBAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KAAsChB,KAAtC,gBACE,oBAAC,QAAD,CAAU,IAAV,eACMH,qBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEoB,MAAAA,KAAK,EAAErB,SADT;AAEEsB,MAAAA,MAAM,EAAEtB,SAFV;AAGEuB,MAAAA,UAAU,EAAE,QAHd;AAIEC,MAAAA,cAAc,EAAE;AAJlB,KADK,EAOLV,mBAPK,EAQLb,qBAAqB,CAACwB,KARjB;AAFT,mBAaE,oBAAC,IAAD,eACMtB,mBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEuB,MAAAA,eAAe,EAAE5B,KADnB;AAEEuB,MAAAA,KAAK,EAAErB,SAFT;AAGEsB,MAAAA,MAAM,EAAEtB,SAHV;AAIE2B,MAAAA,YAAY,EAAE3B,SAJhB;AAKE4B,MAAAA,OAAO,EAAE,GALX;AAMEC,MAAAA,QAAQ,EAAE;AANZ,KADK,EASL1B,mBAAmB,CAACsB,KATf;AAFT,KAbF,eA2BE,oBAAC,IAAD,eACMvB,cADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEwB,MAAAA,eAAe,EAAE5B,KADnB;AAEEuB,MAAAA,KAAK,EAAEtB,IAFT;AAGEuB,MAAAA,MAAM,EAAEvB,IAHV;AAIE4B,MAAAA,YAAY,EAAE5B;AAJhB,KADK,EAOLG,cAAc,CAACuB,KAPV;AAFT,KA3BF,CADF,EAyCG5B,QAzCH,CADF;AA6CD","sourcesContent":["import * as React from 'react';\nimport { Platform, 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<\n  LineChartCursorProps,\n  'children' | 'type'\n> & {\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\nLineChartCursorCrosshair.displayName = 'LineChartCursorCrosshair';\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  // It seems that enabling spring animation on initial render on Android causes a crash.\n  const [enableSpringAnimation, setEnableSpringAnimation] = React.useState(\n    Platform.OS === 'ios'\n  );\n  React.useEffect(() => {\n    setTimeout(() => {\n      setEnableSpringAnimation(true);\n    }, 100);\n  }, []);\n\n  const animatedCursorStyle = useAnimatedStyle(() => ({\n    transform: [\n      { translateX: currentX.value - outerSize / 2 },\n      { translateY: currentY.value - outerSize / 2 },\n      {\n        scale: enableSpringAnimation\n          ? withSpring(isActive.value ? 1 : 0, {\n              damping: 10,\n            })\n          : 0,\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/module/charts/line/CursorLine.js

@@ -7,11 +7,12 @@ import Svg, { Line as SVGLine } from 'react-native-svg';
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartCursor } from './Cursor';
 import { useLineChart } from './useLineChart';
-export const LineChartCursorLine = ({
+LineChartCursorLine.displayName = 'LineChartCursorLine';
+export function LineChartCursorLine({
   children,
   color = 'gray',
   lineProps = {}
-}) => {
+}) {
   const {
     height
   } = React.useContext(LineChartDimensionsContext);
@@ -41,7 +42,7 @@ export const LineChartCursorLine = ({
     stroke: color,
     strokeDasharray: "3 3"
   }, lineProps)))), children);
-};
+}
 const styles = StyleSheet.create({
   svg: { ...StyleSheet.absoluteFillObject,
     // height: 100% is required for <svg /> on web

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

@@ -1 +1 @@
-{"version":3,"sources":["CursorLine.tsx"],"names":["React","StyleSheet","Animated","useAnimatedStyle","Svg","Line","SVGLine","LineChartDimensionsContext","LineChartCursor","useLineChart","LineChartCursorLine","children","color","lineProps","height","useContext","currentX","isActive","vertical","opacity","value","transform","translateX","styles","svg","create","absoluteFillObject"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,QAA2C,yBAA3C;AACA,OAAOC,GAAP,IAAcC,IAAI,IAAIC,OAAtB,QAAgD,kBAAhD;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAQA,OAAO,MAAMC,mBAAmB,GAAG,CAAC;AAClCC,EAAAA,QADkC;AAElCC,EAAAA,KAAK,GAAG,MAF0B;AAGlCC,EAAAA,SAAS,GAAG;AAHsB,CAAD,KAIH;AAC9B,QAAM;AAAEC,IAAAA;AAAF,MAAad,KAAK,CAACe,UAAN,CAAiBR,0BAAjB,CAAnB;AACA,QAAM;AAAES,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAyBR,YAAY,EAA3C;AAEA,QAAMS,QAAQ,GAAGf,gBAAgB,CAAC,OAAO;AACvCgB,IAAAA,OAAO,EAAEF,QAAQ,CAACG,KAAT,GAAiB,CAAjB,GAAqB,CADS;AAEvCN,IAAAA,MAAM,EAAE,MAF+B;AAGvCO,IAAAA,SAAS,EAAE,CAAC;AAAEC,MAAAA,UAAU,EAAEN,QAAQ,CAACI;AAAvB,KAAD;AAH4B,GAAP,CAAD,CAAjC;AAMA,sBACE,oBAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,kBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEF;AAAtB,kBACE,oBAAC,GAAD;AAAK,IAAA,KAAK,EAAEK,MAAM,CAACC;AAAnB,kBACE,oBAAC,OAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAEV,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,MAAMY,MAAM,GAAGtB,UAAU,CAACwB,MAAX,CAAkB;AAC/BD,EAAAA,GAAG,EAAE,EACH,GAAGvB,UAAU,CAACyB,kBADX;AAEH;AACAZ,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"]}
+{"version":3,"sources":["CursorLine.tsx"],"names":["React","StyleSheet","Animated","useAnimatedStyle","Svg","Line","SVGLine","LineChartDimensionsContext","LineChartCursor","useLineChart","LineChartCursorLine","displayName","children","color","lineProps","height","useContext","currentX","isActive","vertical","opacity","value","transform","translateX","styles","svg","create","absoluteFillObject"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,QAA2C,yBAA3C;AACA,OAAOC,GAAP,IAAcC,IAAI,IAAIC,OAAtB,QAAgD,kBAAhD;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAQAC,mBAAmB,CAACC,WAApB,GAAkC,qBAAlC;AAEA,OAAO,SAASD,mBAAT,CAA6B;AAClCE,EAAAA,QADkC;AAElCC,EAAAA,KAAK,GAAG,MAF0B;AAGlCC,EAAAA,SAAS,GAAG;AAHsB,CAA7B,EAIsB;AAC3B,QAAM;AAAEC,IAAAA;AAAF,MAAaf,KAAK,CAACgB,UAAN,CAAiBT,0BAAjB,CAAnB;AACA,QAAM;AAAEU,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAyBT,YAAY,EAA3C;AAEA,QAAMU,QAAQ,GAAGhB,gBAAgB,CAAC,OAAO;AACvCiB,IAAAA,OAAO,EAAEF,QAAQ,CAACG,KAAT,GAAiB,CAAjB,GAAqB,CADS;AAEvCN,IAAAA,MAAM,EAAE,MAF+B;AAGvCO,IAAAA,SAAS,EAAE,CAAC;AAAEC,MAAAA,UAAU,EAAEN,QAAQ,CAACI;AAAvB,KAAD;AAH4B,GAAP,CAAD,CAAjC;AAMA,sBACE,oBAAC,eAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,kBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEF;AAAtB,kBACE,oBAAC,GAAD;AAAK,IAAA,KAAK,EAAEK,MAAM,CAACC;AAAnB,kBACE,oBAAC,OAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAEV,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;AAED,MAAMY,MAAM,GAAGvB,UAAU,CAACyB,MAAX,CAAkB;AAC/BD,EAAAA,GAAG,EAAE,EACH,GAAGxB,UAAU,CAAC0B,kBADX;AAEH;AACAZ,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\nLineChartCursorLine.displayName = 'LineChartCursorLine';\n\nexport function 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/module/charts/line/Data.js

@@ -0,0 +1,64 @@
+import React, { createContext, useContext, useMemo } from 'react';
+export const DefaultLineChartId = '__LineChartData';
+const LineChartDataContext = /*#__PURE__*/createContext({
+  [DefaultLineChartId]: []
+});
+export function LineChartDataProvider({
+  children,
+  data
+}) {
+  const contextValue = useMemo(() => {
+    if (Array.isArray(data)) {
+      return {
+        [DefaultLineChartId]: data
+      };
+    }
+
+    return data;
+  }, [data]);
+  return /*#__PURE__*/React.createElement(LineChartDataContext.Provider, {
+    value: contextValue
+  }, children);
+}
+const LineChartIdContext = /*#__PURE__*/createContext(undefined);
+export function LineChartIdProvider({
+  id,
+  children
+}) {
+  return /*#__PURE__*/React.createElement(LineChartIdContext.Provider, {
+    value: id
+  }, children);
+}
+export const useLineChartId = () => useContext(LineChartIdContext);
+export function useLineChartData({
+  id
+}) {
+  const dataContext = useContext(LineChartDataContext);
+  validateLineChartId(dataContext, id);
+  const data = dataContext[id || DefaultLineChartId];
+  return useMemo(() => ({
+    data
+  }), [data]);
+}
+
+function validateLineChartId(dataContext, id) {
+  if (id != null && !dataContext[id]) {
+    const otherIds = Object.keys(dataContext).filter(otherId => otherId !== DefaultLineChartId);
+    const singular = otherIds.length <= 1;
+    const joinedIds = otherIds.join(', ');
+    const suggestion = otherIds.length ? `Did you mean to use ${singular ? 'this ID' : 'one of these IDs'}: ${joinedIds}` : `You didn't pass any IDs to your <LineChart.Provider />'s data prop. Did you mean to pass an array instead?`;
+    console.warn(`[react-native-wagmi-charts] Invalid usage of "id" prop on LineChart. You passed id="${id}", but this ID does not exist in your <LineChart.Provider />'s "data" prop.
+
+${suggestion}`);
+  } else if (id == null && !dataContext[DefaultLineChartId]) {
+    const otherIds = Object.keys(dataContext);
+    const singular = otherIds.length <= 1;
+    const joinedIds = otherIds.join(', ');
+    const suggestion = otherIds.length ? `Did you mean to use ${singular ? 'this ID' : 'one of these IDs'}: ${joinedIds}` : `You didn't pass any IDs to your <LineChart.Provider />'s data prop. Did you mean to pass an array instead?`;
+    console.error(`[react-native-wagmi-charts] Missing data "id" prop on LineChart. You must pass an id prop to <LineChart /> when using a dictionary for your data.
+
+${suggestion}
+    `);
+  }
+}
+//# sourceMappingURL=Data.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Data.tsx"],"names":["React","createContext","useContext","useMemo","DefaultLineChartId","LineChartDataContext","LineChartDataProvider","children","data","contextValue","Array","isArray","LineChartIdContext","undefined","LineChartIdProvider","id","useLineChartId","useLineChartData","dataContext","validateLineChartId","otherIds","Object","keys","filter","otherId","singular","length","joinedIds","join","suggestion","console","warn","error"],"mappings":"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","sourcesContent":["import type { TLineChartData } from './types';\nimport React, { createContext, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport type { TLineChartDataProp } from './types';\n\nexport const DefaultLineChartId = '__LineChartData';\n\nexport type LineChartDataContext = {\n  [key: string]: TLineChartData;\n};\n\nconst LineChartDataContext = createContext<LineChartDataContext>({\n  [DefaultLineChartId]: [],\n});\n\nexport type LineChartDataProviderProps = {\n  children: ReactNode;\n  data: TLineChartDataProp;\n};\n\nexport function LineChartDataProvider({\n  children,\n  data,\n}: LineChartDataProviderProps) {\n  const contextValue = useMemo<LineChartDataContext>(() => {\n    if (Array.isArray(data)) {\n      return {\n        [DefaultLineChartId]: data,\n      };\n    }\n    return data;\n  }, [data]);\n\n  return (\n    <LineChartDataContext.Provider value={contextValue}>\n      {children}\n    </LineChartDataContext.Provider>\n  );\n}\n\nconst LineChartIdContext = createContext<string | undefined>(undefined);\n\nexport function LineChartIdProvider({\n  id,\n  children,\n}: {\n  id?: string;\n  children: ReactNode;\n}) {\n  return (\n    <LineChartIdContext.Provider value={id}>\n      {children}\n    </LineChartIdContext.Provider>\n  );\n}\n\nexport const useLineChartId = () => useContext(LineChartIdContext);\n\nexport function useLineChartData({ id }: { id?: string }) {\n  const dataContext = useContext(LineChartDataContext);\n\n  validateLineChartId(dataContext, id);\n\n  const data = dataContext[id || DefaultLineChartId];\n\n  return useMemo(() => ({ data }), [data]);\n}\n\nfunction validateLineChartId(dataContext: LineChartDataContext, id?: string) {\n  if (id != null && !dataContext[id]) {\n    const otherIds = Object.keys(dataContext).filter(\n      (otherId) => otherId !== DefaultLineChartId\n    );\n    const singular = otherIds.length <= 1;\n\n    const joinedIds = otherIds.join(', ');\n\n    const suggestion = otherIds.length\n      ? `Did you mean to use ${\n          singular ? 'this ID' : 'one of these IDs'\n        }: ${joinedIds}`\n      : `You didn't pass any IDs to your <LineChart.Provider />'s data prop. Did you mean to pass an array instead?`;\n\n    console.warn(\n      `[react-native-wagmi-charts] Invalid usage of \"id\" prop on LineChart. You passed id=\"${id}\", but this ID does not exist in your <LineChart.Provider />'s \"data\" prop.\n\n${suggestion}`\n    );\n  } else if (id == null && !dataContext[DefaultLineChartId]) {\n    const otherIds = Object.keys(dataContext);\n    const singular = otherIds.length <= 1;\n\n    const joinedIds = otherIds.join(', ');\n    const suggestion = otherIds.length\n      ? `Did you mean to use ${\n          singular ? 'this ID' : 'one of these IDs'\n        }: ${joinedIds}`\n      : `You didn't pass any IDs to your <LineChart.Provider />'s data prop. Did you mean to pass an array instead?`;\n\n    console.error(`[react-native-wagmi-charts] Missing data \"id\" prop on LineChart. You must pass an id prop to <LineChart /> when using a dictionary for your data.\n\n${suggestion}\n    `);\n  }\n}\n"]}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useLineChartDatetime } from './useDatetime';
 import { AnimatedText } from '../../components/AnimatedText';
+LineChartDatetimeText.displayName = 'LineChartDatetimeText';
 export function LineChartDatetimeText({
   locale,
   options,

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

@@ -1 +1 @@
-{"version":3,"sources":["DatetimeText.tsx"],"names":["React","useLineChartDatetime","AnimatedText","LineChartDatetimeText","locale","options","format","variant","style","datetime"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,oBAAT,QAAqC,eAArC;AAEA,SAASC,YAAT,QAA6B,+BAA7B;AAUA,OAAO,SAASC,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,GAAGR,oBAAoB,CAAC;AAAEK,IAAAA,MAAF;AAAUF,IAAAA,MAAV;AAAkBC,IAAAA;AAAlB,GAAD,CAArC;AACA,sBAAO,oBAAC,YAAD;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"]}
+{"version":3,"sources":["DatetimeText.tsx"],"names":["React","useLineChartDatetime","AnimatedText","LineChartDatetimeText","displayName","locale","options","format","variant","style","datetime"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,oBAAT,QAAqC,eAArC;AAEA,SAASC,YAAT,QAA6B,+BAA7B;AAUAC,qBAAqB,CAACC,WAAtB,GAAoC,uBAApC;AAEA,OAAO,SAASD,qBAAT,CAA+B;AACpCE,EAAAA,MADoC;AAEpCC,EAAAA,OAFoC;AAGpCC,EAAAA,MAHoC;AAIpCC,EAAAA,OAAO,GAAG,WAJ0B;AAKpCC,EAAAA;AALoC,CAA/B,EAMoB;AACzB,QAAMC,QAAQ,GAAGT,oBAAoB,CAAC;AAAEM,IAAAA,MAAF;AAAUF,IAAAA,MAAV;AAAkBC,IAAAA;AAAlB,GAAD,CAArC;AACA,sBAAO,oBAAC,YAAD;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\nLineChartDatetimeText.displayName = 'LineChartDatetimeText';\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"]}