react-native-wagmi-charts 1.8.0 → 2.0.0

package/lib/module/charts/candle/utils/getDomain.js

@@ -0,0 +1,12 @@
+export function getDomain(rows) {
+  'worklet';
+
+  const values = rows.map(({
+    high,
+    low
+  }) => [high, low]).flat();
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  return [min - (max - min) * 0.025, max + (max - min) * 0.025];
+}
+//# sourceMappingURL=getDomain.js.map

package/lib/module/charts/candle/utils/getDomain.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getDomain.ts"],"names":["getDomain","rows","values","map","high","low","flat","min","Math","max"],"mappings":"AAEA,OAAO,SAASA,SAAT,CAAmBC,IAAnB,EAAgE;AACrE;;AACA,QAAMC,MAAM,GAAGD,IAAI,CAACE,GAAL,CAAS,CAAC;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,KAAmB,CAACD,IAAD,EAAOC,GAAP,CAA5B,EAAyCC,IAAzC,EAAf;AACA,QAAMC,GAAG,GAAGC,IAAI,CAACD,GAAL,CAAS,GAAGL,MAAZ,CAAZ;AACA,QAAMO,GAAG,GAAGD,IAAI,CAACC,GAAL,CAAS,GAAGP,MAAZ,CAAZ;AACA,SAAO,CAACK,GAAG,GAAG,CAACE,GAAG,GAAGF,GAAP,IAAc,KAArB,EAA4BE,GAAG,GAAG,CAACA,GAAG,GAAGF,GAAP,IAAc,KAAhD,CAAP;AACD","sourcesContent":["import type { TCandle } from '../types';\n\nexport function getDomain(rows: TCandle[]): [min: number, max: number] {\n  'worklet';\n  const values = rows.map(({ high, low }) => [high, low]).flat();\n  const min = Math.min(...values);\n  const max = Math.max(...values);\n  return [min - (max - min) * 0.025, max + (max - min) * 0.025];\n}\n"]}

package/lib/module/charts/candle/utils/getHeight.js

@@ -0,0 +1,11 @@
+import { interpolate, Extrapolate } from 'react-native-reanimated';
+export function getHeight({
+  value,
+  domain,
+  maxHeight
+}) {
+  'worklet';
+
+  return interpolate(value, [0, Math.max(...domain) - Math.min(...domain)], [0, maxHeight], Extrapolate.CLAMP);
+}
+//# sourceMappingURL=getHeight.js.map

package/lib/module/charts/candle/utils/getHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getHeight.ts"],"names":["interpolate","Extrapolate","getHeight","value","domain","maxHeight","Math","max","min","CLAMP"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,yBAAzC;AAIA,OAAO,SAASC,SAAT,CAAmB;AACxBC,EAAAA,KADwB;AAExBC,EAAAA,MAFwB;AAGxBC,EAAAA;AAHwB,CAAnB,EAQJ;AACD;;AACA,SAAOL,WAAW,CAChBG,KADgB,EAEhB,CAAC,CAAD,EAAIG,IAAI,CAACC,GAAL,CAAS,GAAGH,MAAZ,IAAsBE,IAAI,CAACE,GAAL,CAAS,GAAGJ,MAAZ,CAA1B,CAFgB,EAGhB,CAAC,CAAD,EAAIC,SAAJ,CAHgB,EAIhBJ,WAAW,CAACQ,KAJI,CAAlB;AAMD","sourcesContent":["import { interpolate, Extrapolate } from 'react-native-reanimated';\n\nimport type { TDomain } from '../types';\n\nexport function getHeight({\n  value,\n  domain,\n  maxHeight,\n}: {\n  value: number;\n  domain: TDomain;\n  maxHeight: number;\n}) {\n  'worklet';\n  return interpolate(\n    value,\n    [0, Math.max(...domain) - Math.min(...domain)],\n    [0, maxHeight],\n    Extrapolate.CLAMP\n  );\n}\n"]}

package/lib/module/charts/candle/utils/getPrice.js

@@ -0,0 +1,12 @@
+import { interpolate, Extrapolate } from 'react-native-reanimated';
+export function getPrice({
+  y,
+  domain,
+  maxHeight
+}) {
+  'worklet';
+
+  if (y === -1) return -1;
+  return interpolate(y, [0, maxHeight], domain.reverse(), Extrapolate.CLAMP);
+}
+//# sourceMappingURL=getPrice.js.map

package/lib/module/charts/candle/utils/getPrice.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getPrice.ts"],"names":["interpolate","Extrapolate","getPrice","y","domain","maxHeight","reverse","CLAMP"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,yBAAzC;AAIA,OAAO,SAASC,QAAT,CAAkB;AACvBC,EAAAA,CADuB;AAEvBC,EAAAA,MAFuB;AAGvBC,EAAAA;AAHuB,CAAlB,EAQJ;AACD;;AACA,MAAIF,CAAC,KAAK,CAAC,CAAX,EAAc,OAAO,CAAC,CAAR;AACd,SAAOH,WAAW,CAACG,CAAD,EAAI,CAAC,CAAD,EAAIE,SAAJ,CAAJ,EAAoBD,MAAM,CAACE,OAAP,EAApB,EAAsCL,WAAW,CAACM,KAAlD,CAAlB;AACD","sourcesContent":["import { interpolate, Extrapolate } from 'react-native-reanimated';\n\nimport type { TDomain } from '../types';\n\nexport function getPrice({\n  y,\n  domain,\n  maxHeight,\n}: {\n  y: number;\n  domain: TDomain;\n  maxHeight: number;\n}) {\n  'worklet';\n  if (y === -1) return -1;\n  return interpolate(y, [0, maxHeight], domain.reverse(), Extrapolate.CLAMP);\n}\n"]}

package/lib/module/charts/candle/utils/getY.js

@@ -0,0 +1,11 @@
+import { interpolate, Extrapolate } from 'react-native-reanimated';
+export function getY({
+  value,
+  domain,
+  maxHeight
+}) {
+  'worklet';
+
+  return interpolate(value, domain, [maxHeight, 0], Extrapolate.CLAMP);
+}
+//# sourceMappingURL=getY.js.map

package/lib/module/charts/candle/utils/getY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getY.ts"],"names":["interpolate","Extrapolate","getY","value","domain","maxHeight","CLAMP"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,yBAAzC;AAIA,OAAO,SAASC,IAAT,CAAc;AACnBC,EAAAA,KADmB;AAEnBC,EAAAA,MAFmB;AAGnBC,EAAAA;AAHmB,CAAd,EAQJ;AACD;;AACA,SAAOL,WAAW,CAACG,KAAD,EAAQC,MAAR,EAAgB,CAACC,SAAD,EAAY,CAAZ,CAAhB,EAAgCJ,WAAW,CAACK,KAA5C,CAAlB;AACD","sourcesContent":["import { interpolate, Extrapolate } from 'react-native-reanimated';\n\nimport type { TDomain } from '../types';\n\nexport function getY({\n  value,\n  domain,\n  maxHeight,\n}: {\n  value: number;\n  domain: TDomain;\n  maxHeight: number;\n}) {\n  'worklet';\n  return interpolate(value, domain, [maxHeight, 0], Extrapolate.CLAMP);\n}\n"]}

package/lib/module/charts/candle/utils/index.js

@@ -0,0 +1,5 @@
+export * from './getDomain';
+export * from './getHeight';
+export * from './getPrice';
+export * from './getY';
+//# sourceMappingURL=index.js.map

package/lib/module/charts/candle/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd","sourcesContent":["export * from './getDomain';\nexport * from './getHeight';\nexport * from './getPrice';\nexport * from './getY';\n"]}

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

@@ -1,6 +1,8 @@
 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 * as React from 'react'; // @ts-ignore
+
+import * as d3Shape from 'd3-shape';
 import { Dimensions, StyleSheet, View } from 'react-native';
 import { LineChartContext } from './Context';
 import { LineChartIdProvider, useLineChartData } from './Data';
@@ -10,18 +12,20 @@ export const LineChartDimensionsContext = /*#__PURE__*/React.createContext({
   height: 0,
   path: '',
   area: '',
+  shape: d3Shape.curveBumpX,
   gutter: 0,
   pathWidth: 0
 });
 const {
   width: screenWidth
 } = Dimensions.get('window');
+LineChart.displayName = 'LineChart';
 export function LineChart({
   children,
   yGutter = 16,
   width = screenWidth,
   height = screenWidth,
-  shape,
+  shape = d3Shape.curveBumpX,
   id,
   absolute,
   ...props
@@ -78,8 +82,9 @@ export function LineChart({
     path,
     width,
     height,
-    pathWidth
-  }), [area, height, path, width, yGutter, pathWidth]);
+    pathWidth,
+    shape
+  }), [yGutter, area, path, width, height, pathWidth, shape]);
   return /*#__PURE__*/React.createElement(LineChartIdProvider, {
     id: id
   }, /*#__PURE__*/React.createElement(LineChartDimensionsContext.Provider, {

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

@@ -1 +1 @@
-{"version":3,"sources":["Chart.tsx"],"names":["React","Dimensions","StyleSheet","View","LineChartContext","LineChartIdProvider","useLineChartData","getArea","getPath","LineChartDimensionsContext","createContext","width","height","path","area","gutter","pathWidth","screenWidth","get","LineChart","children","yGutter","shape","id","absolute","props","yDomain","xLength","useContext","data","useMemo","allowedWidth","length","contextValue","styles","style","create","position"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Dimensions, StyleSheet, View, ViewProps } from 'react-native';\nimport { LineChartContext } from './Context';\nimport { LineChartIdProvider, useLineChartData } from './Data';\n\nimport { getArea, getPath } from './utils';\n\nexport const LineChartDimensionsContext = React.createContext({\n  width: 0,\n  height: 0,\n  path: '',\n  area: '',\n  gutter: 0,\n  pathWidth: 0,\n});\n\ntype LineChartProps = ViewProps & {\n  children: React.ReactNode;\n  yGutter?: number;\n  width?: number;\n  height?: number;\n  shape?: string;\n  /**\n   * If your `LineChart.Provider` uses a dictionary with multiple IDs for multiple paths, then this field is required.\n   */\n  id?: string;\n  absolute?: boolean;\n};\n\nconst { width: screenWidth } = Dimensions.get('window');\n\nexport function LineChart({\n  children,\n  yGutter = 16,\n  width = screenWidth,\n  height = screenWidth,\n  shape,\n  id,\n  absolute,\n  ...props\n}: LineChartProps) {\n  const { yDomain, xLength } = React.useContext(LineChartContext);\n  const { data } = useLineChartData({\n    id,\n  });\n\n  const pathWidth = React.useMemo(() => {\n    let allowedWidth = width;\n    if (xLength > data.length) {\n      allowedWidth = (width * data.length) / xLength;\n    }\n    return allowedWidth;\n  }, [data.length, width, xLength]);\n\n  const path = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getPath({\n        data,\n        width: pathWidth,\n        height,\n        gutter: yGutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, pathWidth, height, yGutter, shape, yDomain]);\n\n  const area = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getArea({\n        data,\n        width: pathWidth,\n        height,\n        gutter: yGutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, pathWidth, height, yGutter, shape, yDomain]);\n\n  const contextValue = React.useMemo(\n    () => ({\n      gutter: yGutter,\n      area,\n      path,\n      width,\n      height,\n      pathWidth,\n    }),\n    [area, height, path, width, yGutter, pathWidth]\n  );\n\n  return (\n    <LineChartIdProvider id={id}>\n      <LineChartDimensionsContext.Provider value={contextValue}>\n        <View {...props} style={[absolute && styles.absolute, props.style]}>\n          {children}\n        </View>\n      </LineChartDimensionsContext.Provider>\n    </LineChartIdProvider>\n  );\n}\n\nconst styles = StyleSheet.create({\n  absolute: {\n    position: 'absolute',\n  },\n});\n"]}
+{"version":3,"sources":["Chart.tsx"],"names":["React","d3Shape","Dimensions","StyleSheet","View","LineChartContext","LineChartIdProvider","useLineChartData","getArea","getPath","LineChartDimensionsContext","createContext","width","height","path","area","shape","curveBumpX","gutter","pathWidth","screenWidth","get","LineChart","displayName","children","yGutter","id","absolute","props","yDomain","xLength","useContext","data","useMemo","allowedWidth","length","contextValue","styles","style","create","position"],"mappings":"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","sourcesContent":["import * as React from 'react';\n// @ts-ignore\nimport * as d3Shape from 'd3-shape';\nimport { Dimensions, StyleSheet, View, ViewProps } from 'react-native';\nimport { LineChartContext } from './Context';\nimport { LineChartIdProvider, useLineChartData } from './Data';\n\nimport { getArea, getPath } from './utils';\n\nexport const LineChartDimensionsContext = React.createContext({\n  width: 0,\n  height: 0,\n  path: '',\n  area: '',\n  shape: d3Shape.curveBumpX,\n  gutter: 0,\n  pathWidth: 0,\n});\n\ntype LineChartProps = ViewProps & {\n  children: React.ReactNode;\n  yGutter?: number;\n  width?: number;\n  height?: number;\n  shape?: unknown;\n  /**\n   * If your `LineChart.Provider` uses a dictionary with multiple IDs for multiple paths, then this field is required.\n   */\n  id?: string;\n  absolute?: boolean;\n};\n\nconst { width: screenWidth } = Dimensions.get('window');\n\nLineChart.displayName = 'LineChart';\n\nexport function LineChart({\n  children,\n  yGutter = 16,\n  width = screenWidth,\n  height = screenWidth,\n  shape = d3Shape.curveBumpX,\n  id,\n  absolute,\n  ...props\n}: LineChartProps) {\n  const { yDomain, xLength } = React.useContext(LineChartContext);\n  const { data } = useLineChartData({\n    id,\n  });\n\n  const pathWidth = React.useMemo(() => {\n    let allowedWidth = width;\n    if (xLength > data.length) {\n      allowedWidth = (width * data.length) / xLength;\n    }\n    return allowedWidth;\n  }, [data.length, width, xLength]);\n\n  const path = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getPath({\n        data,\n        width: pathWidth,\n        height,\n        gutter: yGutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, pathWidth, height, yGutter, shape, yDomain]);\n\n  const area = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getArea({\n        data,\n        width: pathWidth,\n        height,\n        gutter: yGutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, pathWidth, height, yGutter, shape, yDomain]);\n\n  const contextValue = React.useMemo(\n    () => ({\n      gutter: yGutter,\n      area,\n      path,\n      width,\n      height,\n      pathWidth,\n      shape,\n    }),\n    [yGutter, area, path, width, height, pathWidth, shape]\n  );\n\n  return (\n    <LineChartIdProvider id={id}>\n      <LineChartDimensionsContext.Provider value={contextValue}>\n        <View {...props} style={[absolute && styles.absolute, props.style]}>\n          {children}\n        </View>\n      </LineChartDimensionsContext.Provider>\n    </LineChartIdProvider>\n  );\n}\n\nconst styles = StyleSheet.create({\n  absolute: {\n    position: 'absolute',\n  },\n});\n"]}

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

@@ -3,25 +3,35 @@ 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',
+  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 {
     height,
@@ -31,23 +41,59 @@ export function LineChartPathWrapper({
   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(pathWidth, 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, {
@@ -55,11 +101,17 @@ 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: strokeWidth,
-    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,
@@ -67,6 +119,6 @@ export function LineChartPathWrapper({
   }, /*#__PURE__*/React.createElement(LineChartPath, _extends({
     color: color,
     width: strokeWidth
-  }, pathProps)))));
+  }, 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","strokeWidth","pathProps","showInactivePath","height","pathWidth","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,WAAW,GAAG,CALc;AAMnCC,EAAAA,SAAS,GAAG,EANuB;AAOnCC,EAAAA,gBAAgB,GAAG;AAPgB,CAA9B,EAQuB;AAAA;;AAC5B,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,SAAV;AAAqBL,IAAAA;AAArB,MAA+BpB,KAAK,CAAC0B,UAAN,CACnCnB,0BADmC,CAArC;AAGA,QAAM;AAAEoB,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAyBnB,YAAY,EAA3C,CAJ4B,CAM5B;;AAEA,QAAMoB,QAAQ,GAAGxB,gBAAgB,CAAC,OAAO;AACvCe,IAAAA,KAAK,EAAEQ,QAAQ,CAACE,KAAT,GACH;AACA;AACAC,IAAAA,IAAI,CAACC,GAAL,CAASL,QAAQ,CAACG,KAAlB,EAAyB,CAAzB,CAHG,GAIHxB,UAAU,CACRmB,SADQ,EAERQ,MAAM,CAACC,MAAP,CAAc;AAAEC,MAAAA,QAAQ,EAAElB;AAAZ,KAAd,EAA+CC,cAA/C,CAFQ;AALyB,GAAP,CAAD,CAAjC;AAWA,QAAMkB,QAAQ,GAAGpC,KAAK,CAACqC,OAAN,CAAc,OAAO;AAAEjB,IAAAA,KAAF;AAASI,IAAAA;AAAT,GAAP,CAAd,EAAyC,CAACJ,KAAD,EAAQI,MAAR,CAAzC,CAAjB,CAnB4B,CAqB5B;;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,EAAEqB;AAAb,kBACE,oBAAC,GAAD;AAAK,IAAA,KAAK,EAAEhB,KAAZ;AAAmB,IAAA,MAAM,EAAEI;AAA3B,KACGL,QADH,eAEE,oBAAC,aAAD;AACE,IAAA,KAAK,EAAEL,KADT;AAEE,IAAA,KAAK,EAAEO,WAFT;AAGE,IAAA,UAAU,EAAEE;AAHd,KAIMD,SAJN,EAFF,CADF,CANF,eAiBE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAErB,UAAU,CAACqC;AAAxB,kBACE,oBAAC,WAAD;AAAa,IAAA,aAAa,EAAET,QAA5B;AAAsC,IAAA,MAAM,EAAEL;AAA9C,kBACE,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEV,KAAtB;AAA6B,IAAA,KAAK,EAAEO;AAApC,KAAqDC,SAArD,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: strokeWidth = 3,\n  pathProps = {},\n  showInactivePath = true,\n}: LineChartPathWrapperProps) {\n  const { height, pathWidth, width } = React.useContext(\n    LineChartDimensionsContext\n  );\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          pathWidth,\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={strokeWidth}\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={strokeWidth} {...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

@@ -19,6 +19,7 @@ export const LineChartContext = /*#__PURE__*/React.createContext({
   },
   xLength: 0
 });
+LineChartProvider.displayName = 'LineChartProvider';
 export function LineChartProvider({
   children,
   data = [],

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","xLength","LineChartProvider","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\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"]}
+{"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,6 +10,7 @@ import { useLineChart } from './useLineChart';
 export const CursorContext = /*#__PURE__*/React.createContext({
   type: ''
 });
+LineChartCursor.displayName = 'LineChartCursor';
 export function LineChartCursor({
   children,
   type,

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","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;AAEP,OAAO,SAASC,eAAT,CAAyB;AAC9BC,EAAAA,QAD8B;AAE9BF,EAAAA,IAF8B;AAG9B,KAAGG;AAH2B,CAAzB,EAIkB;AACvB,QAAM;AAAEC,IAAAA,SAAS,EAAEC,KAAb;AAAoBC,IAAAA;AAApB,MAA6BhB,KAAK,CAACiB,UAAN,CACjCX,0BADiC,CAAnC;AAGA,QAAM;AAAEY,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,MAA6Cd,YAAY,EAA/D;AAEA,QAAMe,UAAU,GAAGtB,KAAK,CAACuB,OAAN,CACjB,MAAOP,IAAI,GAAGX,KAAK,CAACW,IAAD,CAAR,GAAiBQ,SADX,EAEjB,CAACR,IAAD,CAFiB,CAAnB;AAKA,QAAMS,cAAc,GAAGrB,yBAAyB,CAE9C;AACAsB,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;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,EAAEZ,UAAU,CAACoC;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\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"]}
+{"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,21 @@ 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(() => {
+    setEnableSpringAnimation(true);
+  }, []);
   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","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;AACpBH,IAAAA,wBAAwB,CAAC,IAAD,CAAxB;AACD,GAFD,EAEG,EAFH;AAIA,QAAMI,mBAAmB,GAAGtB,gBAAgB,CAAC,OAAO;AAClDuB,IAAAA,SAAS,EAAE,CACT;AAAEC,MAAAA,UAAU,EAAEV,QAAQ,CAACW,KAAT,GAAiBhB,SAAS,GAAG;AAA3C,KADS,EAET;AAAEiB,MAAAA,UAAU,EAAEX,QAAQ,CAACU,KAAT,GAAiBhB,SAAS,GAAG;AAA3C,KAFS,EAGT;AACEkB,MAAAA,KAAK,EAAEV,qBAAqB,GACxBhB,UAAU,CAACe,QAAQ,CAACS,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,KAAsCf,KAAtC,gBACE,oBAAC,QAAD,CAAU,IAAV,eACMH,qBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEmB,MAAAA,KAAK,EAAEpB,SADT;AAEEqB,MAAAA,MAAM,EAAErB,SAFV;AAGEsB,MAAAA,UAAU,EAAE,QAHd;AAIEC,MAAAA,cAAc,EAAE;AAJlB,KADK,EAOLV,mBAPK,EAQLZ,qBAAqB,CAACuB,KARjB;AAFT,mBAaE,oBAAC,IAAD,eACMrB,mBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEsB,MAAAA,eAAe,EAAE3B,KADnB;AAEEsB,MAAAA,KAAK,EAAEpB,SAFT;AAGEqB,MAAAA,MAAM,EAAErB,SAHV;AAIE0B,MAAAA,YAAY,EAAE1B,SAJhB;AAKE2B,MAAAA,OAAO,EAAE,GALX;AAMEC,MAAAA,QAAQ,EAAE;AANZ,KADK,EASLzB,mBAAmB,CAACqB,KATf;AAFT,KAbF,eA2BE,oBAAC,IAAD,eACMtB,cADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEuB,MAAAA,eAAe,EAAE3B,KADnB;AAEEsB,MAAAA,KAAK,EAAErB,IAFT;AAGEsB,MAAAA,MAAM,EAAEtB,IAHV;AAIE2B,MAAAA,YAAY,EAAE3B;AAJhB,KADK,EAOLG,cAAc,CAACsB,KAPV;AAFT,KA3BF,CADF,EAyCG3B,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    setEnableSpringAnimation(true);\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"]}