react-native-wagmi-charts 1.7.0 → 2.1.0

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

@@ -3,50 +3,102 @@ 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(() => {
+    const shouldAnimateOnMount = animateOnMount === 'foreground';
+    const inactiveWidth = !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
+    let duration = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationDuration : animationDuration;
+    const props = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationProps : animationProps;
+
+    if (isActive.value) {
+      duration = 0;
+    }
 
-  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))
-  }));
+    return {
+      width: withTiming(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) : 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 +106,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  WithTimingConfig,\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?: Omit<Partial<WithTimingConfig>, 'duration'>;\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<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    let duration =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationDuration\n        : animationDuration;\n    const props =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationProps\n        : animationProps;\n\n    if (isActive.value) {\n      duration = 0;\n    }\n\n    return {\n      width: withTiming(\n        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          : 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

@@ -16,13 +16,16 @@ export const LineChartContext = /*#__PURE__*/React.createContext({
   yDomain: {
     min: 0,
     max: 0
-  }
+  },
+  xLength: 0
 });
+LineChartProvider.displayName = 'LineChartProvider';
 export function LineChartProvider({
   children,
   data = [],
   yRange,
-  onCurrentIndexChange
+  onCurrentIndexChange,
+  xLength
 }) {
   const currentX = useSharedValue(-1);
   const currentIndex = useSharedValue(-1);
@@ -42,9 +45,10 @@ export function LineChartProvider({
       yDomain: {
         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, data, domain, isActive, yRange === null || yRange === void 0 ? void 0 : yRange.max, yRange === null || yRange === void 0 ? void 0 : yRange.min]);
+  }, [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);

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

@@ -1 +1 @@
-{"version":3,"sources":["Context.tsx"],"names":["React","runOnJS","useAnimatedReaction","useSharedValue","LineChartDataProvider","getDomain","lineChartDataPropToArray","LineChartContext","createContext","currentX","value","currentIndex","domain","isActive","yDomain","min","max","LineChartProvider","children","data","yRange","onCurrentIndexChange","useMemo","Array","isArray","Object","values","contextValue","map","Math","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});\n\ntype LineChartProviderProps = {\n  children: React.ReactNode;\n  data: TLineChartDataProp;\n  yRange?: YRangeProp;\n  onCurrentIndexChange?: (x: number) => void;\n};\n\nexport function LineChartProvider({\n  children,\n  data = [],\n  yRange,\n  onCurrentIndexChange,\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    };\n  }, [\n    currentIndex,\n    currentX,\n    data,\n    domain,\n    isActive,\n    yRange?.max,\n    yRange?.min,\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"]}
+{"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

@@ -10,13 +10,14 @@ 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 {

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

@@ -1 +1 @@
-{"version":3,"sources":["Cursor.tsx"],"names":["React","StyleSheet","LongPressGestureHandler","Animated","useAnimatedGestureHandler","parse","LineChartDimensionsContext","useLineChart","CursorContext","createContext","type","LineChartCursor","children","props","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;AAEP,OAAO,SAASC,eAAT,CAAyB;AAC9BC,EAAAA,QAD8B;AAE9BF,EAAAA,IAF8B;AAG9B,KAAGG;AAH2B,CAAzB,EAIkB;AACvB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAkBf,KAAK,CAACgB,UAAN,CAAiBV,0BAAjB,CAAxB;AACA,QAAM;AAAEW,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,MAA6Cb,YAAY,EAA/D;AAEA,QAAMc,UAAU,GAAGrB,KAAK,CAACsB,OAAN,CACjB,MAAOP,IAAI,GAAGV,KAAK,CAACU,IAAD,CAAR,GAAiBQ,SADX,EAEjB,CAACR,IAAD,CAFiB,CAAnB;AAKA,QAAMS,cAAc,GAAGpB,yBAAyB,CAE9C;AACAqB,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;AAAElB,MAAAA;AAAF;AAA/B,kBACE,oBAAC,uBAAD;AACE,IAAA,aAAa,EAAE,CADjB;AAEE,IAAA,OAAO,EAAE,MAFX;AAGE,IAAA,cAAc,EAAEc;AAHlB,KAIMX,KAJN,gBAME,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEZ,UAAU,CAACmC;AAAjC,KACGxB,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\nexport function LineChartCursor({\n  children,\n  type,\n  ...props\n}: LineChartCursorProps) {\n  const { width, path } = React.useContext(LineChartDimensionsContext);\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"]}
+{"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":"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","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/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"]}

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

@@ -0,0 +1,105 @@
+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 Animated, { Easing, useAnimatedProps, useDerivedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
+import { Circle } from 'react-native-svg';
+import { getYForX, parse } from 'react-native-redash';
+import { LineChartDimensionsContext } from './Chart';
+import { LineChartPathContext } from './ChartPath';
+import { useLineChart } from './useLineChart';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+LineChartDot.displayName = 'LineChartDot';
+export function LineChartDot({
+  at,
+  color: defaultColor = 'black',
+  dotProps,
+  hasOuterDot: defaultHasOuterDot = false,
+  hasPulse = false,
+  inactiveColor,
+  outerDotProps,
+  pulseBehaviour = 'while-inactive',
+  pulseDurationMs = 800,
+  showInactiveColor = true,
+  size = 4,
+  outerSize = size * 4
+}) {
+  const {
+    data,
+    isActive
+  } = useLineChart();
+  const {
+    path,
+    pathWidth: width
+  } = React.useContext(LineChartDimensionsContext); ////////////////////////////////////////////////////////////
+
+  const {
+    isInactive: _isInactive
+  } = React.useContext(LineChartPathContext);
+  const isInactive = showInactiveColor && _isInactive;
+  const color = isInactive ? inactiveColor || defaultColor : defaultColor;
+  const opacity = isInactive && !inactiveColor ? 0.5 : 1;
+  const hasOuterDot = defaultHasOuterDot || hasPulse; ////////////////////////////////////////////////////////////
+
+  const parsedPath = React.useMemo(() => parse(path), [path]); ////////////////////////////////////////////////////////////
+
+  const pointWidth = React.useMemo(() => width / (data.length - 1), [data.length, width]); ////////////////////////////////////////////////////////////
+
+  const x = useDerivedValue(() => withTiming(pointWidth * at));
+  const y = useDerivedValue(() => withTiming(getYForX(parsedPath, x.value) || 0)); ////////////////////////////////////////////////////////////
+
+  const animatedDotProps = useAnimatedProps(() => ({
+    cx: x.value,
+    cy: y.value
+  }));
+  const animatedOuterDotProps = useAnimatedProps(() => {
+    let defaultProps = {
+      cx: x.value,
+      cy: y.value,
+      opacity: 0.1,
+      r: outerSize
+    };
+
+    if (!hasPulse) {
+      return defaultProps;
+    }
+
+    if (isActive.value && pulseBehaviour === 'while-inactive') {
+      return { ...defaultProps,
+        r: 0
+      };
+    }
+
+    const easing = Easing.out(Easing.sin);
+    const animatedOpacity = withRepeat(withSequence(withTiming(0.8), withTiming(0, {
+      duration: pulseDurationMs,
+      easing
+    })), -1, false);
+    const scale = withRepeat(withSequence(withTiming(0), withTiming(outerSize, {
+      duration: pulseDurationMs,
+      easing
+    })), -1, false);
+
+    if (pulseBehaviour === 'while-inactive') {
+      return { ...defaultProps,
+        opacity: isActive.value ? withTiming(0) : animatedOpacity,
+        r: isActive.value ? withTiming(0) : scale
+      };
+    }
+
+    return { ...defaultProps,
+      opacity: animatedOpacity,
+      r: scale
+    };
+  }, [outerSize]); ////////////////////////////////////////////////////////////
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedCircle, _extends({
+    animatedProps: animatedDotProps,
+    r: size,
+    fill: color,
+    opacity: opacity
+  }, dotProps)), hasOuterDot && /*#__PURE__*/React.createElement(AnimatedCircle, _extends({
+    animatedProps: animatedOuterDotProps,
+    fill: color
+  }, outerDotProps)));
+}
+//# sourceMappingURL=Dot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Dot.tsx"],"names":["React","Animated","Easing","useAnimatedProps","useDerivedValue","withRepeat","withSequence","withTiming","Circle","getYForX","parse","LineChartDimensionsContext","LineChartPathContext","useLineChart","AnimatedCircle","createAnimatedComponent","LineChartDot","displayName","at","color","defaultColor","dotProps","hasOuterDot","defaultHasOuterDot","hasPulse","inactiveColor","outerDotProps","pulseBehaviour","pulseDurationMs","showInactiveColor","size","outerSize","data","isActive","path","pathWidth","width","useContext","isInactive","_isInactive","opacity","parsedPath","useMemo","pointWidth","length","x","y","value","animatedDotProps","cx","cy","animatedOuterDotProps","defaultProps","r","easing","out","sin","animatedOpacity","duration","scale"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Animated, {\n  Easing,\n  useAnimatedProps,\n  useDerivedValue,\n  withRepeat,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport { Circle, CircleProps } from 'react-native-svg';\nimport { getYForX, parse } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPathContext } from './ChartPath';\nimport { useLineChart } from './useLineChart';\n\nconst AnimatedCircle = Animated.createAnimatedComponent(Circle);\n\nexport type LineChartDotProps = {\n  dotProps?: Animated.AnimateProps<CircleProps>;\n  outerDotProps?: Animated.AnimateProps<CircleProps>;\n  color?: string;\n  inactiveColor?: string;\n  showInactiveColor?: boolean;\n  at: number;\n  size?: number;\n  hasPulse?: boolean;\n  hasOuterDot?: boolean;\n  /**\n   * If `always`, the outer dot will still animate when interaction is active.\n   *\n   * If `while-inactive`, the outer dot will animate only when the interaction is inactive.\n   *\n   * Default: `while-inactive`\n   */\n  pulseBehaviour?: 'always' | 'while-inactive';\n  /**\n   * Defaults to `size * 4`\n   */\n  outerSize?: number;\n  pulseDurationMs?: number;\n};\n\nLineChartDot.displayName = 'LineChartDot';\n\nexport function LineChartDot({\n  at,\n  color: defaultColor = 'black',\n  dotProps,\n  hasOuterDot: defaultHasOuterDot = false,\n  hasPulse = false,\n  inactiveColor,\n  outerDotProps,\n  pulseBehaviour = 'while-inactive',\n  pulseDurationMs = 800,\n  showInactiveColor = true,\n  size = 4,\n  outerSize = size * 4,\n}: LineChartDotProps) {\n  const { data, isActive } = useLineChart();\n  const { path, pathWidth: width } = React.useContext(\n    LineChartDimensionsContext\n  );\n\n  ////////////////////////////////////////////////////////////\n\n  const { isInactive: _isInactive } = React.useContext(LineChartPathContext);\n  const isInactive = showInactiveColor && _isInactive;\n  const color = isInactive ? inactiveColor || defaultColor : defaultColor;\n  const opacity = isInactive && !inactiveColor ? 0.5 : 1;\n  const hasOuterDot = defaultHasOuterDot || hasPulse;\n\n  ////////////////////////////////////////////////////////////\n\n  const parsedPath = React.useMemo(() => parse(path), [path]);\n\n  ////////////////////////////////////////////////////////////\n\n  const pointWidth = React.useMemo(\n    () => width / (data.length - 1),\n    [data.length, width]\n  );\n\n  ////////////////////////////////////////////////////////////\n\n  const x = useDerivedValue(() => withTiming(pointWidth * at));\n  const y = useDerivedValue(() =>\n    withTiming(getYForX(parsedPath!, x.value) || 0)\n  );\n\n  ////////////////////////////////////////////////////////////\n\n  const animatedDotProps = useAnimatedProps(() => ({\n    cx: x.value,\n    cy: y.value,\n  }));\n\n  const animatedOuterDotProps = useAnimatedProps(() => {\n    let defaultProps = {\n      cx: x.value,\n      cy: y.value,\n      opacity: 0.1,\n      r: outerSize,\n    };\n\n    if (!hasPulse) {\n      return defaultProps;\n    }\n\n    if (isActive.value && pulseBehaviour === 'while-inactive') {\n      return {\n        ...defaultProps,\n        r: 0,\n      };\n    }\n\n    const easing = Easing.out(Easing.sin);\n    const animatedOpacity = withRepeat(\n      withSequence(\n        withTiming(0.8),\n        withTiming(0, {\n          duration: pulseDurationMs,\n          easing,\n        })\n      ),\n      -1,\n      false\n    );\n    const scale = withRepeat(\n      withSequence(\n        withTiming(0),\n        withTiming(outerSize, {\n          duration: pulseDurationMs,\n          easing,\n        })\n      ),\n      -1,\n      false\n    );\n\n    if (pulseBehaviour === 'while-inactive') {\n      return {\n        ...defaultProps,\n        opacity: isActive.value ? withTiming(0) : animatedOpacity,\n        r: isActive.value ? withTiming(0) : scale,\n      };\n    }\n    return {\n      ...defaultProps,\n      opacity: animatedOpacity,\n      r: scale,\n    };\n  }, [outerSize]);\n\n  ////////////////////////////////////////////////////////////\n\n  return (\n    <>\n      <AnimatedCircle\n        animatedProps={animatedDotProps}\n        r={size}\n        fill={color}\n        opacity={opacity}\n        {...dotProps}\n      />\n      {hasOuterDot && (\n        <AnimatedCircle\n          animatedProps={animatedOuterDotProps}\n          fill={color}\n          {...outerDotProps}\n        />\n      )}\n    </>\n  );\n}\n"]}