react-native-wagmi-charts 2.2.0 → 2.3.0

package/README.md

@@ -845,6 +845,7 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 | `crosshairWrapperProps` | `ViewProps`                    |           | Props of the wrapper component of the crosshair |
 | `crosshairProps`        | `ViewProps`                    |           | Props of the crosshair dot                      |
 | `crosshairOuterProps`   | `ViewProps`                    |           | Props of the crosshair outer dot                |
+| `snapToPoint`           | `boolean`                      | `false`   | Snap cursor to X position of nearest data point |
 | `...props`              | `LongPressGestureHandlerProps` |           |                                                 |
 
 ### LineChart.CursorLine

package/lib/commonjs/charts/candle/Crosshair.js

@@ -77,18 +77,18 @@ function CandlestickChartCrosshair({
     transform: [{
       translateY: currentY.value
     }]
-  }));
+  }), [opacity, currentY]);
   const vertical = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: opacity.value,
     transform: [{
       translateX: currentX.value
     }]
-  }));
+  }), [opacity, currentX]);
   (0, _reactNativeReanimated.useAnimatedReaction)(() => currentX.value, (data, prevData) => {
     if (data !== -1 && data !== prevData && onCurrentXChange) {
       (0, _reactNativeReanimated.runOnJS)(onCurrentXChange)(data);
     }
-  });
+  }, [currentX]);
   return /*#__PURE__*/React.createElement(_reactNativeGestureHandler.LongPressGestureHandler, _extends({
     minDurationMs: 0,
     maxDist: 999999,

package/lib/commonjs/charts/candle/Crosshair.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Crosshair.tsx"],"names":["CandlestickChartCrosshair","color","onCurrentXChange","children","horizontalCrosshairProps","verticalCrosshairProps","lineProps","props","width","height","React","useContext","CandlestickChartDimensionsContext","currentX","currentY","step","tooltipPosition","opacity","onGestureEvent","onActive","x","y","boundedX","value","onEnd","horizontal","transform","translateY","vertical","translateX","data","prevData","StyleSheet","absoluteFill","position"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, ViewProps } from 'react-native';\nimport {\n  GestureEvent,\n  LongPressGestureHandler,\n  LongPressGestureHandlerEventPayload,\n  LongPressGestureHandlerProps,\n} from 'react-native-gesture-handler';\nimport Animated, {\n  useAnimatedGestureHandler,\n  useSharedValue,\n  useAnimatedStyle,\n  useAnimatedReaction,\n  runOnJS,\n} from 'react-native-reanimated';\nimport { clamp } from 'react-native-redash';\n\nimport { CandlestickChartDimensionsContext } from './Chart';\nimport { CandlestickChartLine, CandlestickChartLineProps } from './Line';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport { CandlestickChartCrosshairTooltipContext } from './CrosshairTooltip';\n\ntype CandlestickChartCrosshairProps = LongPressGestureHandlerProps & {\n  color?: string;\n  children?: React.ReactNode;\n  onCurrentXChange?: (value: number) => unknown;\n  horizontalCrosshairProps?: Animated.AnimateProps<ViewProps>;\n  verticalCrosshairProps?: Animated.AnimateProps<ViewProps>;\n  lineProps?: Partial<CandlestickChartLineProps>;\n};\n\nexport function CandlestickChartCrosshair({\n  color,\n  onCurrentXChange,\n  children,\n  horizontalCrosshairProps = {},\n  verticalCrosshairProps = {},\n  lineProps = {},\n  ...props\n}: CandlestickChartCrosshairProps) {\n  const { width, height } = React.useContext(CandlestickChartDimensionsContext);\n  const { currentX, currentY, step } = useCandlestickChart();\n\n  const tooltipPosition = useSharedValue<'left' | 'right'>('left');\n\n  const opacity = useSharedValue(0);\n  const onGestureEvent = useAnimatedGestureHandler<\n    GestureEvent<LongPressGestureHandlerEventPayload>\n  >({\n    onActive: ({ x, y }) => {\n      const boundedX = x <= width - 1 ? x : width - 1;\n      if (boundedX < 100) {\n        tooltipPosition.value = 'right';\n      } else {\n        tooltipPosition.value = 'left';\n      }\n      opacity.value = 1;\n      currentY.value = clamp(y, 0, height);\n      currentX.value = boundedX - (boundedX % step) + step / 2;\n    },\n    onEnd: () => {\n      opacity.value = 0;\n      currentY.value = -1;\n      currentX.value = -1;\n    },\n  });\n  const horizontal = useAnimatedStyle(() => ({\n    opacity: opacity.value,\n    transform: [{ translateY: currentY.value }],\n  }));\n  const vertical = useAnimatedStyle(() => ({\n    opacity: opacity.value,\n    transform: [{ translateX: currentX.value }],\n  }));\n\n  useAnimatedReaction(\n    () => currentX.value,\n    (data, prevData) => {\n      if (data !== -1 && data !== prevData && onCurrentXChange) {\n        runOnJS(onCurrentXChange)(data);\n      }\n    }\n  );\n\n  return (\n    <LongPressGestureHandler\n      minDurationMs={0}\n      maxDist={999999}\n      onGestureEvent={onGestureEvent}\n      {...props}\n    >\n      <Animated.View style={StyleSheet.absoluteFill}>\n        <Animated.View\n          style={[StyleSheet.absoluteFill, horizontal]}\n          {...horizontalCrosshairProps}\n        >\n          <CandlestickChartLine color={color} x={width} y={0} {...lineProps} />\n          <CandlestickChartCrosshairTooltipContext.Provider\n            value={{ position: tooltipPosition }}\n          >\n            {children}\n          </CandlestickChartCrosshairTooltipContext.Provider>\n        </Animated.View>\n        <Animated.View\n          style={[StyleSheet.absoluteFill, vertical]}\n          {...verticalCrosshairProps}\n        >\n          <CandlestickChartLine color={color} x={0} y={height} {...lineProps} />\n        </Animated.View>\n      </Animated.View>\n    </LongPressGestureHandler>\n  );\n}\n"]}
+{"version":3,"sources":["Crosshair.tsx"],"names":["CandlestickChartCrosshair","color","onCurrentXChange","children","horizontalCrosshairProps","verticalCrosshairProps","lineProps","props","width","height","React","useContext","CandlestickChartDimensionsContext","currentX","currentY","step","tooltipPosition","opacity","onGestureEvent","onActive","x","y","boundedX","value","onEnd","horizontal","transform","translateY","vertical","translateX","data","prevData","StyleSheet","absoluteFill","position"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, ViewProps } from 'react-native';\nimport {\n  GestureEvent,\n  LongPressGestureHandler,\n  LongPressGestureHandlerEventPayload,\n  LongPressGestureHandlerProps,\n} from 'react-native-gesture-handler';\nimport Animated, {\n  useAnimatedGestureHandler,\n  useSharedValue,\n  useAnimatedStyle,\n  useAnimatedReaction,\n  runOnJS,\n} from 'react-native-reanimated';\nimport { clamp } from 'react-native-redash';\n\nimport { CandlestickChartDimensionsContext } from './Chart';\nimport { CandlestickChartLine, CandlestickChartLineProps } from './Line';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport { CandlestickChartCrosshairTooltipContext } from './CrosshairTooltip';\n\ntype CandlestickChartCrosshairProps = LongPressGestureHandlerProps & {\n  color?: string;\n  children?: React.ReactNode;\n  onCurrentXChange?: (value: number) => unknown;\n  horizontalCrosshairProps?: Animated.AnimateProps<ViewProps>;\n  verticalCrosshairProps?: Animated.AnimateProps<ViewProps>;\n  lineProps?: Partial<CandlestickChartLineProps>;\n};\n\nexport function CandlestickChartCrosshair({\n  color,\n  onCurrentXChange,\n  children,\n  horizontalCrosshairProps = {},\n  verticalCrosshairProps = {},\n  lineProps = {},\n  ...props\n}: CandlestickChartCrosshairProps) {\n  const { width, height } = React.useContext(CandlestickChartDimensionsContext);\n  const { currentX, currentY, step } = useCandlestickChart();\n\n  const tooltipPosition = useSharedValue<'left' | 'right'>('left');\n\n  const opacity = useSharedValue(0);\n  const onGestureEvent = useAnimatedGestureHandler<\n    GestureEvent<LongPressGestureHandlerEventPayload>\n  >({\n    onActive: ({ x, y }) => {\n      const boundedX = x <= width - 1 ? x : width - 1;\n      if (boundedX < 100) {\n        tooltipPosition.value = 'right';\n      } else {\n        tooltipPosition.value = 'left';\n      }\n      opacity.value = 1;\n      currentY.value = clamp(y, 0, height);\n      currentX.value = boundedX - (boundedX % step) + step / 2;\n    },\n    onEnd: () => {\n      opacity.value = 0;\n      currentY.value = -1;\n      currentX.value = -1;\n    },\n  });\n  const horizontal = useAnimatedStyle(\n    () => ({\n      opacity: opacity.value,\n      transform: [{ translateY: currentY.value }],\n    }),\n    [opacity, currentY]\n  );\n  const vertical = useAnimatedStyle(\n    () => ({\n      opacity: opacity.value,\n      transform: [{ translateX: currentX.value }],\n    }),\n    [opacity, currentX]\n  );\n\n  useAnimatedReaction(\n    () => currentX.value,\n    (data, prevData) => {\n      if (data !== -1 && data !== prevData && onCurrentXChange) {\n        runOnJS(onCurrentXChange)(data);\n      }\n    },\n    [currentX]\n  );\n\n  return (\n    <LongPressGestureHandler\n      minDurationMs={0}\n      maxDist={999999}\n      onGestureEvent={onGestureEvent}\n      {...props}\n    >\n      <Animated.View style={StyleSheet.absoluteFill}>\n        <Animated.View\n          style={[StyleSheet.absoluteFill, horizontal]}\n          {...horizontalCrosshairProps}\n        >\n          <CandlestickChartLine color={color} x={width} y={0} {...lineProps} />\n          <CandlestickChartCrosshairTooltipContext.Provider\n            value={{ position: tooltipPosition }}\n          >\n            {children}\n          </CandlestickChartCrosshairTooltipContext.Provider>\n        </Animated.View>\n        <Animated.View\n          style={[StyleSheet.absoluteFill, vertical]}\n          {...verticalCrosshairProps}\n        >\n          <CandlestickChartLine color={color} x={0} y={height} {...lineProps} />\n        </Animated.View>\n      </Animated.View>\n    </LongPressGestureHandler>\n  );\n}\n"]}

package/lib/commonjs/charts/candle/CrosshairTooltip.js

@@ -65,23 +65,23 @@ function CandlestickChartCrosshairTooltip({
     }
 
     return offset;
-  });
+  }, [currentY, elementHeight, height, yGutter]);
   const tooltip = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     backgroundColor: 'white',
     position: 'absolute',
     display: 'flex',
     padding: 4
-  }));
+  }), []);
   const leftTooltip = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     left: xGutter,
     top: -(elementHeight.value / 2) - topOffset.value,
     opacity: position.value === 'left' ? 1 : 0
-  }));
+  }), [elementHeight, position, topOffset, xGutter]);
   const rightTooltip = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     left: width - elementWidth.value - xGutter,
     top: -(elementHeight.value / 2) - topOffset.value,
     opacity: position.value === 'right' ? 1 : 0
-  }));
+  }), [elementHeight, elementWidth, position, topOffset, width, xGutter]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, _extends({
     onLayout: handleLayout
   }, props, {

package/lib/commonjs/charts/candle/CrosshairTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CrosshairTooltip.tsx"],"names":["CandlestickChartCrosshairTooltipContext","React","createContext","position","value","CandlestickChartCrosshairTooltip","children","xGutter","yGutter","tooltipTextProps","textStyle","props","width","height","useContext","CandlestickChartDimensionsContext","currentY","elementHeight","elementWidth","handleLayout","useCallback","event","nativeEvent","layout","topOffset","offset","tooltip","backgroundColor","display","padding","leftTooltip","left","top","opacity","rightTooltip","style","styles","text","StyleSheet","create","fontSize"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { StyleProp, TextStyle, ViewProps } from 'react-native';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n} from 'react-native-reanimated';\n\nimport { CandlestickChartDimensionsContext } from './Chart';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport {\n  CandlestickChartPriceText,\n  CandlestickChartPriceTextProps,\n} from './PriceText';\n\nexport type CandlestickChartCrosshairTooltipProps = ViewProps & {\n  children?: React.ReactNode;\n  xGutter?: number;\n  yGutter?: number;\n  tooltipTextProps?: CandlestickChartPriceTextProps;\n  textStyle?: Animated.AnimateStyle<StyleProp<TextStyle>>;\n};\n\nexport type CandlestickChartCrosshairTooltipContext = {\n  position: Animated.SharedValue<'left' | 'right'>;\n};\n\nexport const CandlestickChartCrosshairTooltipContext =\n  React.createContext<CandlestickChartCrosshairTooltipContext>({\n    position: { value: 'left' },\n  });\n\nexport function CandlestickChartCrosshairTooltip({\n  children,\n  xGutter = 8,\n  yGutter = 8,\n  tooltipTextProps,\n  textStyle,\n  ...props\n}: CandlestickChartCrosshairTooltipProps) {\n  const { width, height } = React.useContext(CandlestickChartDimensionsContext);\n  const { currentY } = useCandlestickChart();\n  const { position } = React.useContext(\n    CandlestickChartCrosshairTooltipContext\n  );\n\n  const elementHeight = useSharedValue(0);\n  const elementWidth = useSharedValue(0);\n\n  const handleLayout = React.useCallback(\n    (event) => {\n      elementHeight.value = event.nativeEvent.layout.height;\n      elementWidth.value = event.nativeEvent.layout.width;\n    },\n    [elementHeight, elementWidth]\n  );\n\n  const topOffset = useDerivedValue(() => {\n    let offset = 0;\n    if (currentY.value < elementHeight.value / 2 + yGutter) {\n      offset = currentY.value - (elementHeight.value / 2 + yGutter);\n    } else if (currentY.value + elementHeight.value / 2 > height - yGutter) {\n      offset = currentY.value + elementHeight.value / 2 - height + yGutter;\n    }\n\n    return offset;\n  });\n\n  const tooltip = useAnimatedStyle(() => ({\n    backgroundColor: 'white',\n    position: 'absolute',\n    display: 'flex',\n    padding: 4,\n  }));\n  const leftTooltip = useAnimatedStyle(() => ({\n    left: xGutter,\n    top: -(elementHeight.value / 2) - topOffset.value,\n    opacity: position.value === 'left' ? 1 : 0,\n  }));\n  const rightTooltip = useAnimatedStyle(() => ({\n    left: width - elementWidth.value - xGutter,\n    top: -(elementHeight.value / 2) - topOffset.value,\n    opacity: position.value === 'right' ? 1 : 0,\n  }));\n\n  return (\n    <>\n      <Animated.View\n        onLayout={handleLayout}\n        {...props}\n        style={[tooltip, leftTooltip, props.style]}\n      >\n        {children || (\n          <CandlestickChartPriceText\n            {...tooltipTextProps}\n            style={[styles.text, tooltipTextProps?.style, textStyle]}\n          />\n        )}\n      </Animated.View>\n      <Animated.View {...props} style={[tooltip, rightTooltip, props.style]}>\n        {children || (\n          <CandlestickChartPriceText\n            {...tooltipTextProps}\n            style={[styles.text, tooltipTextProps?.style, textStyle]}\n          />\n        )}\n      </Animated.View>\n    </>\n  );\n}\n\nconst styles = StyleSheet.create({\n  text: {\n    fontSize: 14,\n  },\n});\n"]}
+{"version":3,"sources":["CrosshairTooltip.tsx"],"names":["CandlestickChartCrosshairTooltipContext","React","createContext","position","value","CandlestickChartCrosshairTooltip","children","xGutter","yGutter","tooltipTextProps","textStyle","props","width","height","useContext","CandlestickChartDimensionsContext","currentY","elementHeight","elementWidth","handleLayout","useCallback","event","nativeEvent","layout","topOffset","offset","tooltip","backgroundColor","display","padding","leftTooltip","left","top","opacity","rightTooltip","style","styles","text","StyleSheet","create","fontSize"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { StyleProp, TextStyle, ViewProps } from 'react-native';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n} from 'react-native-reanimated';\n\nimport { CandlestickChartDimensionsContext } from './Chart';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport {\n  CandlestickChartPriceText,\n  CandlestickChartPriceTextProps,\n} from './PriceText';\n\nexport type CandlestickChartCrosshairTooltipProps = ViewProps & {\n  children?: React.ReactNode;\n  xGutter?: number;\n  yGutter?: number;\n  tooltipTextProps?: CandlestickChartPriceTextProps;\n  textStyle?: Animated.AnimateStyle<StyleProp<TextStyle>>;\n};\n\nexport type CandlestickChartCrosshairTooltipContext = {\n  position: Animated.SharedValue<'left' | 'right'>;\n};\n\nexport const CandlestickChartCrosshairTooltipContext =\n  React.createContext<CandlestickChartCrosshairTooltipContext>({\n    position: { value: 'left' },\n  });\n\nexport function CandlestickChartCrosshairTooltip({\n  children,\n  xGutter = 8,\n  yGutter = 8,\n  tooltipTextProps,\n  textStyle,\n  ...props\n}: CandlestickChartCrosshairTooltipProps) {\n  const { width, height } = React.useContext(CandlestickChartDimensionsContext);\n  const { currentY } = useCandlestickChart();\n  const { position } = React.useContext(\n    CandlestickChartCrosshairTooltipContext\n  );\n\n  const elementHeight = useSharedValue(0);\n  const elementWidth = useSharedValue(0);\n\n  const handleLayout = React.useCallback(\n    (event) => {\n      elementHeight.value = event.nativeEvent.layout.height;\n      elementWidth.value = event.nativeEvent.layout.width;\n    },\n    [elementHeight, elementWidth]\n  );\n\n  const topOffset = useDerivedValue(() => {\n    let offset = 0;\n    if (currentY.value < elementHeight.value / 2 + yGutter) {\n      offset = currentY.value - (elementHeight.value / 2 + yGutter);\n    } else if (currentY.value + elementHeight.value / 2 > height - yGutter) {\n      offset = currentY.value + elementHeight.value / 2 - height + yGutter;\n    }\n\n    return offset;\n  }, [currentY, elementHeight, height, yGutter]);\n\n  const tooltip = useAnimatedStyle(\n    () => ({\n      backgroundColor: 'white',\n      position: 'absolute',\n      display: 'flex',\n      padding: 4,\n    }),\n    []\n  );\n  const leftTooltip = useAnimatedStyle(\n    () => ({\n      left: xGutter,\n      top: -(elementHeight.value / 2) - topOffset.value,\n      opacity: position.value === 'left' ? 1 : 0,\n    }),\n    [elementHeight, position, topOffset, xGutter]\n  );\n  const rightTooltip = useAnimatedStyle(\n    () => ({\n      left: width - elementWidth.value - xGutter,\n      top: -(elementHeight.value / 2) - topOffset.value,\n      opacity: position.value === 'right' ? 1 : 0,\n    }),\n    [elementHeight, elementWidth, position, topOffset, width, xGutter]\n  );\n\n  return (\n    <>\n      <Animated.View\n        onLayout={handleLayout}\n        {...props}\n        style={[tooltip, leftTooltip, props.style]}\n      >\n        {children || (\n          <CandlestickChartPriceText\n            {...tooltipTextProps}\n            style={[styles.text, tooltipTextProps?.style, textStyle]}\n          />\n        )}\n      </Animated.View>\n      <Animated.View {...props} style={[tooltip, rightTooltip, props.style]}>\n        {children || (\n          <CandlestickChartPriceText\n            {...tooltipTextProps}\n            style={[styles.text, tooltipTextProps?.style, textStyle]}\n          />\n        )}\n      </Animated.View>\n    </>\n  );\n}\n\nconst styles = StyleSheet.create({\n  text: {\n    fontSize: 14,\n  },\n});\n"]}

package/lib/commonjs/charts/candle/useCandleData.js

@@ -27,7 +27,7 @@ function useCandleData() {
     }
 
     return data[Math.floor(currentX.value / step)];
-  });
+  }, [currentX, data, step]);
   return candle;
 }
 //# sourceMappingURL=useCandleData.js.map

package/lib/commonjs/charts/candle/useCandleData.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCandleData.ts"],"names":["useCandleData","currentX","data","step","candle","value","timestamp","low","open","high","close","Math","floor"],"mappings":";;;;;;;AAAA;;AAGA;;AAEO,SAASA,aAAT,GAAkE;AACvE,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,IAAZ;AAAkBC,IAAAA;AAAlB,MAA2B,+CAAjC;AAEA,QAAMC,MAAM,GAAG,4CAAgB,MAAM;AACnC,QAAIH,QAAQ,CAACI,KAAT,KAAmB,CAAC,CAAxB,EAA2B;AACzB,aAAO;AAAEC,QAAAA,SAAS,EAAE,CAAC,CAAd;AAAiBC,QAAAA,GAAG,EAAE,CAAC,CAAvB;AAA0BC,QAAAA,IAAI,EAAE,CAAC,CAAjC;AAAoCC,QAAAA,IAAI,EAAE,CAAC,CAA3C;AAA8CC,QAAAA,KAAK,EAAE,CAAC;AAAtD,OAAP;AACD;;AACD,WAAOR,IAAI,CAACS,IAAI,CAACC,KAAL,CAAWX,QAAQ,CAACI,KAAT,GAAiBF,IAA5B,CAAD,CAAX;AACD,GALc,CAAf;AAOA,SAAOC,MAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\nimport type { TCandle } from './types';\n\nimport { useCandlestickChart } from './useCandlestickChart';\n\nexport function useCandleData(): Readonly<Animated.SharedValue<TCandle>> {\n  const { currentX, data, step } = useCandlestickChart();\n\n  const candle = useDerivedValue(() => {\n    if (currentX.value === -1) {\n      return { timestamp: -1, low: -1, open: -1, high: -1, close: -1 };\n    }\n    return data[Math.floor(currentX.value / step)];\n  });\n\n  return candle;\n}\n"]}
+{"version":3,"sources":["useCandleData.ts"],"names":["useCandleData","currentX","data","step","candle","value","timestamp","low","open","high","close","Math","floor"],"mappings":";;;;;;;AAAA;;AAGA;;AAEO,SAASA,aAAT,GAAkE;AACvE,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,IAAZ;AAAkBC,IAAAA;AAAlB,MAA2B,+CAAjC;AAEA,QAAMC,MAAM,GAAG,4CAAgB,MAAM;AACnC,QAAIH,QAAQ,CAACI,KAAT,KAAmB,CAAC,CAAxB,EAA2B;AACzB,aAAO;AAAEC,QAAAA,SAAS,EAAE,CAAC,CAAd;AAAiBC,QAAAA,GAAG,EAAE,CAAC,CAAvB;AAA0BC,QAAAA,IAAI,EAAE,CAAC,CAAjC;AAAoCC,QAAAA,IAAI,EAAE,CAAC,CAA3C;AAA8CC,QAAAA,KAAK,EAAE,CAAC;AAAtD,OAAP;AACD;;AACD,WAAOR,IAAI,CAACS,IAAI,CAACC,KAAL,CAAWX,QAAQ,CAACI,KAAT,GAAiBF,IAA5B,CAAD,CAAX;AACD,GALc,EAKZ,CAACF,QAAD,EAAWC,IAAX,EAAiBC,IAAjB,CALY,CAAf;AAOA,SAAOC,MAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\nimport type { TCandle } from './types';\n\nimport { useCandlestickChart } from './useCandlestickChart';\n\nexport function useCandleData(): Readonly<Animated.SharedValue<TCandle>> {\n  const { currentX, data, step } = useCandlestickChart();\n\n  const candle = useDerivedValue(() => {\n    if (currentX.value === -1) {\n      return { timestamp: -1, low: -1, open: -1, high: -1, close: -1 };\n    }\n    return data[Math.floor(currentX.value / step)];\n  }, [currentX, data, step]);\n\n  return candle;\n}\n"]}

package/lib/commonjs/charts/candle/useDatetime.js

@@ -23,7 +23,7 @@ function useCandlestickChartDatetime({
   const timestampString = (0, _reactNativeReanimated.useDerivedValue)(() => {
     if (timestamp.value === -1) return '';
     return timestamp.value.toString();
-  });
+  }, [timestamp]);
   const formatted = (0, _reactNativeReanimated.useDerivedValue)(() => {
     if (timestamp.value === -1) return '';
     const formattedDatetime = (0, _utils.formatDatetime)({
@@ -35,7 +35,7 @@ function useCandlestickChartDatetime({
       value: timestamp.value,
       formatted: formattedDatetime
     }) : formattedDatetime;
-  });
+  }, [timestamp, locale, options, format]);
   return {
     value: timestampString,
     formatted

package/lib/commonjs/charts/candle/useDatetime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDatetime.ts"],"names":["useCandlestickChartDatetime","format","locale","options","candle","timestamp","value","timestampString","toString","formatted","formattedDatetime"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEO,SAASA,2BAAT,CAAqC;AAC1CC,EAAAA,MAD0C;AAE1CC,EAAAA,MAF0C;AAG1CC,EAAAA;AAH0C,IAQxC,EARG,EAWL;AACA,QAAMC,MAAM,GAAG,mCAAf;AAEA,QAAMC,SAAS,GAAG,4CAAgB,MAAM;AACtC,WAAOD,MAAM,CAACE,KAAP,CAAaD,SAApB;AACD,GAFiB,CAAlB;AAIA,QAAME,eAAe,GAAG,4CAAgB,MAAM;AAC5C,QAAIF,SAAS,CAACC,KAAV,KAAoB,CAAC,CAAzB,EAA4B,OAAO,EAAP;AAC5B,WAAOD,SAAS,CAACC,KAAV,CAAgBE,QAAhB,EAAP;AACD,GAHuB,CAAxB;AAKA,QAAMC,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAIJ,SAAS,CAACC,KAAV,KAAoB,CAAC,CAAzB,EAA4B,OAAO,EAAP;AAC5B,UAAMI,iBAAiB,GAAG,2BAAe;AACvCJ,MAAAA,KAAK,EAAED,SAAS,CAACC,KADsB;AAEvCJ,MAAAA,MAFuC;AAGvCC,MAAAA;AAHuC,KAAf,CAA1B;AAKA,WAAOF,MAAM,GACTA,MAAM,CAAC;AAAEK,MAAAA,KAAK,EAAED,SAAS,CAACC,KAAnB;AAA0BG,MAAAA,SAAS,EAAEC;AAArC,KAAD,CADG,GAETA,iBAFJ;AAGD,GAViB,CAAlB;AAYA,SAAO;AAAEJ,IAAAA,KAAK,EAAEC,eAAT;AAA0BE,IAAAA;AAA1B,GAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatDatetime } from '../../utils';\nimport type { TFormatterFn } from './types';\nimport { useCandleData } from './useCandleData';\n\nexport function useCandlestickChartDatetime({\n  format,\n  locale,\n  options,\n}: {\n  format?: TFormatterFn<number>;\n  locale?: string;\n  options?: { [key: string]: string };\n} = {}): {\n  value: Readonly<Animated.SharedValue<string>>;\n  formatted: Readonly<Animated.SharedValue<string>>;\n} {\n  const candle = useCandleData();\n\n  const timestamp = useDerivedValue(() => {\n    return candle.value.timestamp;\n  });\n\n  const timestampString = useDerivedValue(() => {\n    if (timestamp.value === -1) return '';\n    return timestamp.value.toString();\n  });\n\n  const formatted = useDerivedValue(() => {\n    if (timestamp.value === -1) return '';\n    const formattedDatetime = formatDatetime({\n      value: timestamp.value,\n      locale,\n      options,\n    });\n    return format\n      ? format({ value: timestamp.value, formatted: formattedDatetime })\n      : formattedDatetime;\n  });\n\n  return { value: timestampString, formatted };\n}\n"]}
+{"version":3,"sources":["useDatetime.ts"],"names":["useCandlestickChartDatetime","format","locale","options","candle","timestamp","value","timestampString","toString","formatted","formattedDatetime"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEO,SAASA,2BAAT,CAAqC;AAC1CC,EAAAA,MAD0C;AAE1CC,EAAAA,MAF0C;AAG1CC,EAAAA;AAH0C,IAQxC,EARG,EAWL;AACA,QAAMC,MAAM,GAAG,mCAAf;AAEA,QAAMC,SAAS,GAAG,4CAAgB,MAAM;AACtC,WAAOD,MAAM,CAACE,KAAP,CAAaD,SAApB;AACD,GAFiB,CAAlB;AAIA,QAAME,eAAe,GAAG,4CAAgB,MAAM;AAC5C,QAAIF,SAAS,CAACC,KAAV,KAAoB,CAAC,CAAzB,EAA4B,OAAO,EAAP;AAC5B,WAAOD,SAAS,CAACC,KAAV,CAAgBE,QAAhB,EAAP;AACD,GAHuB,EAGrB,CAACH,SAAD,CAHqB,CAAxB;AAKA,QAAMI,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAIJ,SAAS,CAACC,KAAV,KAAoB,CAAC,CAAzB,EAA4B,OAAO,EAAP;AAC5B,UAAMI,iBAAiB,GAAG,2BAAe;AACvCJ,MAAAA,KAAK,EAAED,SAAS,CAACC,KADsB;AAEvCJ,MAAAA,MAFuC;AAGvCC,MAAAA;AAHuC,KAAf,CAA1B;AAKA,WAAOF,MAAM,GACTA,MAAM,CAAC;AAAEK,MAAAA,KAAK,EAAED,SAAS,CAACC,KAAnB;AAA0BG,MAAAA,SAAS,EAAEC;AAArC,KAAD,CADG,GAETA,iBAFJ;AAGD,GAViB,EAUf,CAACL,SAAD,EAAYH,MAAZ,EAAoBC,OAApB,EAA6BF,MAA7B,CAVe,CAAlB;AAYA,SAAO;AAAEK,IAAAA,KAAK,EAAEC,eAAT;AAA0BE,IAAAA;AAA1B,GAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatDatetime } from '../../utils';\nimport type { TFormatterFn } from './types';\nimport { useCandleData } from './useCandleData';\n\nexport function useCandlestickChartDatetime({\n  format,\n  locale,\n  options,\n}: {\n  format?: TFormatterFn<number>;\n  locale?: string;\n  options?: { [key: string]: string };\n} = {}): {\n  value: Readonly<Animated.SharedValue<string>>;\n  formatted: Readonly<Animated.SharedValue<string>>;\n} {\n  const candle = useCandleData();\n\n  const timestamp = useDerivedValue(() => {\n    return candle.value.timestamp;\n  });\n\n  const timestampString = useDerivedValue(() => {\n    if (timestamp.value === -1) return '';\n    return timestamp.value.toString();\n  }, [timestamp]);\n\n  const formatted = useDerivedValue(() => {\n    if (timestamp.value === -1) return '';\n    const formattedDatetime = formatDatetime({\n      value: timestamp.value,\n      locale,\n      options,\n    });\n    return format\n      ? format({ value: timestamp.value, formatted: formattedDatetime })\n      : formattedDatetime;\n  }, [timestamp, locale, options, format]);\n\n  return { value: timestampString, formatted };\n}\n"]}

package/lib/commonjs/charts/candle/usePrice.js

@@ -41,7 +41,7 @@ function useCandlestickChartPrice({
 
     if (price === -1) return '';
     return price.toFixed(precision).toString();
-  });
+  }, [currentY, domain, height, candle, type, precision]);
   const formatted = (0, _reactNativeReanimated.useDerivedValue)(() => {
     if (!float.value) return '';
     const formattedPrice = (0, _utils.formatPrice)({
@@ -51,7 +51,7 @@ function useCandlestickChartPrice({
       value: float.value,
       formatted: formattedPrice
     }) : formattedPrice;
-  });
+  }, [float, format]);
   return {
     value: float,
     formatted

package/lib/commonjs/charts/candle/usePrice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePrice.ts"],"names":["useCandlestickChartPrice","format","precision","type","currentY","domain","height","candle","float","price","y","value","Math","min","max","maxHeight","toFixed","toString","formatted","formattedPrice"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAEA;;AAEO,SAASA,wBAAT,CAAkC;AACvCC,EAAAA,MADuC;AAEvCC,EAAAA,SAAS,GAAG,CAF2B;AAGvCC,EAAAA,IAAI,GAAG;AAHgC,IAQrC,EARG,EAWL;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAZ;AAAoBC,IAAAA;AAApB,MAA+B,+CAArC;AACA,QAAMC,MAAM,GAAG,mCAAf;AAEA,QAAMC,KAAK,GAAG,4CAAgB,MAAM;AAClC,QAAIC,KAAK,GAAG,CAAZ;;AACA,QAAIN,IAAI,KAAK,WAAb,EAA0B;AACxBM,MAAAA,KAAK,GAAG,sBAAS;AACfC,QAAAA,CAAC,EAAEN,QAAQ,CAACO,KADG;AAEfN,QAAAA,MAAM,EAAE,CAACO,IAAI,CAACC,GAAL,CAAS,GAAGR,MAAZ,CAAD,EAAsBO,IAAI,CAACE,GAAL,CAAS,GAAGT,MAAZ,CAAtB,CAFO;AAGfU,QAAAA,SAAS,EAAET;AAHI,OAAT,CAAR;AAKD,KAND,MAMO;AACLG,MAAAA,KAAK,GAAGF,MAAM,CAACI,KAAP,CAAaR,IAAb,CAAR;AACD;;AACD,QAAIM,KAAK,KAAK,CAAC,CAAf,EAAkB,OAAO,EAAP;AAClB,WAAOA,KAAK,CAACO,OAAN,CAAcd,SAAd,EAAyBe,QAAzB,EAAP;AACD,GAba,CAAd;AAcA,QAAMC,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAI,CAACV,KAAK,CAACG,KAAX,EAAkB,OAAO,EAAP;AAClB,UAAMQ,cAAc,GAAG,wBAAY;AAAER,MAAAA,KAAK,EAAEH,KAAK,CAACG;AAAf,KAAZ,CAAvB;AACA,WAAOV,MAAM,GACTA,MAAM,CAAC;AAAEU,MAAAA,KAAK,EAAEH,KAAK,CAACG,KAAf;AAAsBO,MAAAA,SAAS,EAAEC;AAAjC,KAAD,CADG,GAETA,cAFJ;AAGD,GANiB,CAAlB;AAQA,SAAO;AAAER,IAAAA,KAAK,EAAEH,KAAT;AAAgBU,IAAAA;AAAhB,GAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatPrice } from '../../utils';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport { getPrice } from './utils';\nimport type { TFormatterFn, TPriceType } from './types';\nimport { useCandleData } from './useCandleData';\n\nexport function useCandlestickChartPrice({\n  format,\n  precision = 2,\n  type = 'crosshair',\n}: {\n  format?: TFormatterFn<string>;\n  precision?: number;\n  type?: TPriceType;\n} = {}): {\n  value: Readonly<Animated.SharedValue<string>>;\n  formatted: Readonly<Animated.SharedValue<string>>;\n} {\n  const { currentY, domain, height } = useCandlestickChart();\n  const candle = useCandleData();\n\n  const float = useDerivedValue(() => {\n    let price = 0;\n    if (type === 'crosshair') {\n      price = getPrice({\n        y: currentY.value,\n        domain: [Math.min(...domain), Math.max(...domain)],\n        maxHeight: height,\n      });\n    } else {\n      price = candle.value[type];\n    }\n    if (price === -1) return '';\n    return price.toFixed(precision).toString();\n  });\n  const formatted = useDerivedValue(() => {\n    if (!float.value) return '';\n    const formattedPrice = formatPrice({ value: float.value });\n    return format\n      ? format({ value: float.value, formatted: formattedPrice })\n      : formattedPrice;\n  });\n\n  return { value: float, formatted };\n}\n"]}
+{"version":3,"sources":["usePrice.ts"],"names":["useCandlestickChartPrice","format","precision","type","currentY","domain","height","candle","float","price","y","value","Math","min","max","maxHeight","toFixed","toString","formatted","formattedPrice"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAEA;;AAEO,SAASA,wBAAT,CAAkC;AACvCC,EAAAA,MADuC;AAEvCC,EAAAA,SAAS,GAAG,CAF2B;AAGvCC,EAAAA,IAAI,GAAG;AAHgC,IAQrC,EARG,EAWL;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAZ;AAAoBC,IAAAA;AAApB,MAA+B,+CAArC;AACA,QAAMC,MAAM,GAAG,mCAAf;AAEA,QAAMC,KAAK,GAAG,4CAAgB,MAAM;AAClC,QAAIC,KAAK,GAAG,CAAZ;;AACA,QAAIN,IAAI,KAAK,WAAb,EAA0B;AACxBM,MAAAA,KAAK,GAAG,sBAAS;AACfC,QAAAA,CAAC,EAAEN,QAAQ,CAACO,KADG;AAEfN,QAAAA,MAAM,EAAE,CAACO,IAAI,CAACC,GAAL,CAAS,GAAGR,MAAZ,CAAD,EAAsBO,IAAI,CAACE,GAAL,CAAS,GAAGT,MAAZ,CAAtB,CAFO;AAGfU,QAAAA,SAAS,EAAET;AAHI,OAAT,CAAR;AAKD,KAND,MAMO;AACLG,MAAAA,KAAK,GAAGF,MAAM,CAACI,KAAP,CAAaR,IAAb,CAAR;AACD;;AACD,QAAIM,KAAK,KAAK,CAAC,CAAf,EAAkB,OAAO,EAAP;AAClB,WAAOA,KAAK,CAACO,OAAN,CAAcd,SAAd,EAAyBe,QAAzB,EAAP;AACD,GAba,EAaX,CAACb,QAAD,EAAWC,MAAX,EAAmBC,MAAnB,EAA2BC,MAA3B,EAAmCJ,IAAnC,EAAyCD,SAAzC,CAbW,CAAd;AAcA,QAAMgB,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAI,CAACV,KAAK,CAACG,KAAX,EAAkB,OAAO,EAAP;AAClB,UAAMQ,cAAc,GAAG,wBAAY;AAAER,MAAAA,KAAK,EAAEH,KAAK,CAACG;AAAf,KAAZ,CAAvB;AACA,WAAOV,MAAM,GACTA,MAAM,CAAC;AAAEU,MAAAA,KAAK,EAAEH,KAAK,CAACG,KAAf;AAAsBO,MAAAA,SAAS,EAAEC;AAAjC,KAAD,CADG,GAETA,cAFJ;AAGD,GANiB,EAMf,CAACX,KAAD,EAAQP,MAAR,CANe,CAAlB;AAQA,SAAO;AAAEU,IAAAA,KAAK,EAAEH,KAAT;AAAgBU,IAAAA;AAAhB,GAAP;AACD","sourcesContent":["import Animated, { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatPrice } from '../../utils';\nimport { useCandlestickChart } from './useCandlestickChart';\nimport { getPrice } from './utils';\nimport type { TFormatterFn, TPriceType } from './types';\nimport { useCandleData } from './useCandleData';\n\nexport function useCandlestickChartPrice({\n  format,\n  precision = 2,\n  type = 'crosshair',\n}: {\n  format?: TFormatterFn<string>;\n  precision?: number;\n  type?: TPriceType;\n} = {}): {\n  value: Readonly<Animated.SharedValue<string>>;\n  formatted: Readonly<Animated.SharedValue<string>>;\n} {\n  const { currentY, domain, height } = useCandlestickChart();\n  const candle = useCandleData();\n\n  const float = useDerivedValue(() => {\n    let price = 0;\n    if (type === 'crosshair') {\n      price = getPrice({\n        y: currentY.value,\n        domain: [Math.min(...domain), Math.max(...domain)],\n        maxHeight: height,\n      });\n    } else {\n      price = candle.value[type];\n    }\n    if (price === -1) return '';\n    return price.toFixed(precision).toString();\n  }, [currentY, domain, height, candle, type, precision]);\n  const formatted = useDerivedValue(() => {\n    if (!float.value) return '';\n    const formattedPrice = formatPrice({ value: float.value });\n    return format\n      ? format({ value: float.value, formatted: formattedPrice })\n      : formattedPrice;\n  }, [float, format]);\n\n  return { value: float, formatted };\n}\n"]}

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

@@ -57,7 +57,8 @@ function LineChart({
 }) {
   const {
     yDomain,
-    xLength
+    xLength,
+    xDomain
   } = React.useContext(_Context.LineChartContext);
   const {
     data
@@ -81,12 +82,13 @@ function LineChart({
         height,
         gutter: yGutter,
         shape,
-        yDomain
+        yDomain,
+        xDomain
       });
     }
 
     return '';
-  }, [data, pathWidth, height, yGutter, shape, yDomain]);
+  }, [data, pathWidth, height, yGutter, shape, yDomain, xDomain]);
   const area = React.useMemo(() => {
     if (data && data.length > 0) {
       return (0, _utils.getArea)({

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

@@ -1 +1 @@
-{"version":3,"sources":["Chart.tsx"],"names":["LineChartDimensionsContext","React","createContext","width","height","pointWidth","parsedPath","path","area","shape","d3Shape","curveBumpX","gutter","pathWidth","screenWidth","Dimensions","get","LineChart","displayName","children","yGutter","id","absolute","props","yDomain","xLength","useContext","LineChartContext","data","useMemo","allowedWidth","length","dataLength","contextValue","styles","style","StyleSheet","create","position"],"mappings":";;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;AAEO,MAAMA,0BAA0B,gBAAGC,KAAK,CAACC,aAAN,CAAoB;AAC5DC,EAAAA,KAAK,EAAE,CADqD;AAE5DC,EAAAA,MAAM,EAAE,CAFoD;AAG5DC,EAAAA,UAAU,EAAE,CAHgD;AAI5DC,EAAAA,UAAU,EAAE,EAJgD;AAK5DC,EAAAA,IAAI,EAAE,EALsD;AAM5DC,EAAAA,IAAI,EAAE,EANsD;AAO5DC,EAAAA,KAAK,EAAEC,OAAO,CAACC,UAP6C;AAQ5DC,EAAAA,MAAM,EAAE,CARoD;AAS5DC,EAAAA,SAAS,EAAE;AATiD,CAApB,CAAnC;;;AAyBP,MAAM;AAAEV,EAAAA,KAAK,EAAEW;AAAT,IAAyBC,wBAAWC,GAAX,CAAe,QAAf,CAA/B;;AAEAC,SAAS,CAACC,WAAV,GAAwB,WAAxB;;AAEO,SAASD,SAAT,CAAmB;AACxBE,EAAAA,QADwB;AAExBC,EAAAA,OAAO,GAAG,EAFc;AAGxBjB,EAAAA,KAAK,GAAGW,WAHgB;AAIxBV,EAAAA,MAAM,GAAGU,WAJe;AAKxBL,EAAAA,KAAK,GAAGC,OAAO,CAACC,UALQ;AAMxBU,EAAAA,EANwB;AAOxBC,EAAAA,QAPwB;AAQxB,KAAGC;AARqB,CAAnB,EASY;AACjB,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAuBxB,KAAK,CAACyB,UAAN,CAAiBC,yBAAjB,CAA7B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAW,4BAAiB;AAChCP,IAAAA;AADgC,GAAjB,CAAjB;AAIA,QAAMR,SAAS,GAAGZ,KAAK,CAAC4B,OAAN,CAAc,MAAM;AACpC,QAAIC,YAAY,GAAG3B,KAAnB;;AACA,QAAIsB,OAAO,GAAGG,IAAI,CAACG,MAAnB,EAA2B;AACzBD,MAAAA,YAAY,GAAI3B,KAAK,GAAGyB,IAAI,CAACG,MAAd,GAAwBN,OAAvC;AACD;;AACD,WAAOK,YAAP;AACD,GANiB,EAMf,CAACF,IAAI,CAACG,MAAN,EAAc5B,KAAd,EAAqBsB,OAArB,CANe,CAAlB;AAQA,QAAMlB,IAAI,GAAGN,KAAK,CAAC4B,OAAN,CAAc,MAAM;AAC/B,QAAID,IAAI,IAAIA,IAAI,CAACG,MAAL,GAAc,CAA1B,EAA6B;AAC3B,aAAO,oBAAQ;AACbH,QAAAA,IADa;AAEbzB,QAAAA,KAAK,EAAEU,SAFM;AAGbT,QAAAA,MAHa;AAIbQ,QAAAA,MAAM,EAAEQ,OAJK;AAKbX,QAAAA,KALa;AAMbe,QAAAA;AANa,OAAR,CAAP;AAQD;;AACD,WAAO,EAAP;AACD,GAZY,EAYV,CAACI,IAAD,EAAOf,SAAP,EAAkBT,MAAlB,EAA0BgB,OAA1B,EAAmCX,KAAnC,EAA0Ce,OAA1C,CAZU,CAAb;AAcA,QAAMhB,IAAI,GAAGP,KAAK,CAAC4B,OAAN,CAAc,MAAM;AAC/B,QAAID,IAAI,IAAIA,IAAI,CAACG,MAAL,GAAc,CAA1B,EAA6B;AAC3B,aAAO,oBAAQ;AACbH,QAAAA,IADa;AAEbzB,QAAAA,KAAK,EAAEU,SAFM;AAGbT,QAAAA,MAHa;AAIbQ,QAAAA,MAAM,EAAEQ,OAJK;AAKbX,QAAAA,KALa;AAMbe,QAAAA;AANa,OAAR,CAAP;AAQD;;AACD,WAAO,EAAP;AACD,GAZY,EAYV,CAACI,IAAD,EAAOf,SAAP,EAAkBT,MAAlB,EAA0BgB,OAA1B,EAAmCX,KAAnC,EAA0Ce,OAA1C,CAZU,CAAb;AAcA,QAAMQ,UAAU,GAAGJ,IAAI,CAACG,MAAxB;AACA,QAAMzB,UAAU,GAAGL,KAAK,CAAC4B,OAAN,CAAc,MAAM,8BAAMtB,IAAN,CAApB,EAAiC,CAACA,IAAD,CAAjC,CAAnB;AACA,QAAMF,UAAU,GAAGJ,KAAK,CAAC4B,OAAN,CACjB,MAAM1B,KAAK,IAAI6B,UAAU,GAAG,CAAjB,CADM,EAEjB,CAACA,UAAD,EAAa7B,KAAb,CAFiB,CAAnB;AAKA,QAAM8B,YAAY,GAAGhC,KAAK,CAAC4B,OAAN,CACnB,OAAO;AACLjB,IAAAA,MAAM,EAAEQ,OADH;AAELd,IAAAA,UAFK;AAGLD,IAAAA,UAHK;AAILG,IAAAA,IAJK;AAKLD,IAAAA,IALK;AAMLJ,IAAAA,KANK;AAOLC,IAAAA,MAPK;AAQLS,IAAAA,SARK;AASLJ,IAAAA;AATK,GAAP,CADmB,EAYnB,CACEW,OADF,EAEEd,UAFF,EAGED,UAHF,EAIEG,IAJF,EAKED,IALF,EAMEJ,KANF,EAOEC,MAPF,EAQES,SARF,EASEJ,KATF,CAZmB,CAArB;AAyBA,sBACE,oBAAC,yBAAD;AAAqB,IAAA,EAAE,EAAEY;AAAzB,kBACE,oBAAC,0BAAD,CAA4B,QAA5B;AAAqC,IAAA,KAAK,EAAEY;AAA5C,kBACE,oBAAC,iBAAD,eAAUV,KAAV;AAAiB,IAAA,KAAK,EAAE,CAACD,QAAQ,IAAIY,MAAM,CAACZ,QAApB,EAA8BC,KAAK,CAACY,KAApC;AAAxB,MACGhB,QADH,CADF,CADF,CADF;AASD;;AAED,MAAMe,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/Bf,EAAAA,QAAQ,EAAE;AACRgB,IAAAA,QAAQ,EAAE;AADF;AADqB,CAAlB,CAAf","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';\nimport { parse, Path } from 'react-native-redash';\n\nexport const LineChartDimensionsContext = React.createContext({\n  width: 0,\n  height: 0,\n  pointWidth: 0,\n  parsedPath: {} as Path,\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 dataLength = data.length;\n  const parsedPath = React.useMemo(() => parse(path), [path]);\n  const pointWidth = React.useMemo(\n    () => width / (dataLength - 1),\n    [dataLength, width]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      gutter: yGutter,\n      parsedPath,\n      pointWidth,\n      area,\n      path,\n      width,\n      height,\n      pathWidth,\n      shape,\n    }),\n    [\n      yGutter,\n      parsedPath,\n      pointWidth,\n      area,\n      path,\n      width,\n      height,\n      pathWidth,\n      shape,\n    ]\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":["LineChartDimensionsContext","React","createContext","width","height","pointWidth","parsedPath","path","area","shape","d3Shape","curveBumpX","gutter","pathWidth","screenWidth","Dimensions","get","LineChart","displayName","children","yGutter","id","absolute","props","yDomain","xLength","xDomain","useContext","LineChartContext","data","useMemo","allowedWidth","length","dataLength","contextValue","styles","style","StyleSheet","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';\nimport { parse, Path } from 'react-native-redash';\n\nexport const LineChartDimensionsContext = React.createContext({\n  width: 0,\n  height: 0,\n  pointWidth: 0,\n  parsedPath: {} as Path,\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, xDomain } = 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        xDomain,\n      });\n    }\n    return '';\n  }, [data, pathWidth, height, yGutter, shape, yDomain, xDomain]);\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 dataLength = data.length;\n  const parsedPath = React.useMemo(() => parse(path), [path]);\n  const pointWidth = React.useMemo(\n    () => width / (dataLength - 1),\n    [dataLength, width]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      gutter: yGutter,\n      parsedPath,\n      pointWidth,\n      area,\n      path,\n      width,\n      height,\n      pathWidth,\n      shape,\n    }),\n    [\n      yGutter,\n      parsedPath,\n      pointWidth,\n      area,\n      path,\n      width,\n      height,\n      pathWidth,\n      shape,\n    ]\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/commonjs/charts/line/ChartPath.js

@@ -88,7 +88,7 @@ function LineChartPathWrapper({
         hasMountedAnimation.value = true;
       })
     };
-  });
+  }, [animateOnMount, animationDuration, animationProps, currentX, hasMountedAnimation, isActive, isMounted, mountAnimationDuration, mountAnimationProps, pathWidth, widthOffset]);
   const viewSize = React.useMemo(() => ({
     width,
     height

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

@@ -1 +1 @@
-{"version":3,"sources":["ChartPath.tsx"],"names":["BACKGROUND_COMPONENTS","FOREGROUND_COMPONENTS","AnimatedSVG","Animated","createAnimatedComponent","Svg","LineChartPathWrapper","displayName","animationDuration","animationProps","children","color","inactiveColor","width","strokeWidth","widthOffset","pathProps","showInactivePath","animateOnMount","mountAnimationDuration","mountAnimationProps","height","pathWidth","React","useContext","LineChartDimensionsContext","currentX","isActive","isMounted","hasMountedAnimation","useEffect","value","svgProps","shouldAnimateOnMount","inactiveWidth","duration","props","Math","max","Object","assign","viewSize","useMemo","backgroundChildren","foregroundChildren","iterableChildren","filter","child","includes","type","isInactive","isTransitionEnabled","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAMA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,qBAAqB,GAAG,CAC5B,oBAD4B,EAE5B,yBAF4B,EAG5B,mBAH4B,EAI5B,cAJ4B,EAK5B,kBAL4B,CAA9B;AAOA,MAAMC,qBAAqB,GAAG,CAAC,oBAAD,EAAuB,cAAvB,CAA9B;;AAEA,MAAMC,WAAW,GAAGC,+BAASC,uBAAT,CAAiCC,mBAAjC,CAApB;;AAiBAC,oBAAoB,CAACC,WAArB,GAAmC,sBAAnC;;AAEO,SAASD,oBAAT,CAA8B;AACnCE,EAAAA,iBAAiB,GAAG,GADe;AAEnCC,EAAAA,cAAc,GAAG,EAFkB;AAGnCC,EAAAA,QAHmC;AAInCC,EAAAA,KAAK,GAAG,OAJ2B;AAKnCC,EAAAA,aALmC;AAMnCC,EAAAA,KAAK,EAAEC,WAAW,GAAG,CANc;AAOnCC,EAAAA,WAAW,GAAG,EAPqB;AAQnCC,EAAAA,SAAS,GAAG,EARuB;AASnCC,EAAAA,gBAAgB,GAAG,IATgB;AAUnCC,EAAAA,cAVmC;AAWnCC,EAAAA,sBAAsB,GAAGX,iBAXU;AAYnCY,EAAAA,mBAAmB,GAAGX;AAZa,CAA9B,EAauB;AAAA;;AAC5B,QAAM;AAAEY,IAAAA,MAAF;AAAUC,IAAAA,SAAV;AAAqBT,IAAAA;AAArB,MAA+BU,KAAK,CAACC,UAAN,CACnCC,iCADmC,CAArC;AAGA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAyB,iCAA/B;AACA,QAAMC,SAAS,GAAG,2CAAe,KAAf,CAAlB;AACA,QAAMC,mBAAmB,GAAG,2CAAe,KAAf,CAA5B;AAEAN,EAAAA,KAAK,CAACO,SAAN,CAAgB,MAAM;AACpBF,IAAAA,SAAS,CAACG,KAAV,GAAkB,IAAlB,CADoB,CAEpB;AACD,GAHD,EAGG,EAHH,EAR4B,CAa5B;;AAEA,QAAMC,QAAQ,GAAG,6CAAiB,MAAM;AACtC,UAAMC,oBAAoB,GAAGf,cAAc,KAAK,YAAhD;AACA,UAAMgB,aAAa,GACjB,CAACN,SAAS,CAACG,KAAX,IAAoBE,oBAApB,GAA2C,CAA3C,GAA+CX,SADjD;AAGA,QAAIa,QAAQ,GACVF,oBAAoB,IAAI,CAACJ,mBAAmB,CAACE,KAA7C,GACIZ,sBADJ,GAEIX,iBAHN;AAIA,UAAM4B,KAAK,GACTH,oBAAoB,IAAI,CAACJ,mBAAmB,CAACE,KAA7C,GACIX,mBADJ,GAEIX,cAHN;;AAKA,QAAIkB,QAAQ,CAACI,KAAb,EAAoB;AAClBI,MAAAA,QAAQ,GAAG,CAAX;AACD;;AAED,WAAO;AACLtB,MAAAA,KAAK,EAAE,uCACLc,QAAQ,CAACI,KAAT,GACI;AACA;AACAM,MAAAA,IAAI,CAACC,GAAL,CAASZ,QAAQ,CAACK,KAAlB,EAAyB,CAAzB,CAHJ,GAIIG,aAAa,GAAGnB,WALf,EAMLwB,MAAM,CAACC,MAAP,CAAc;AAAEL,QAAAA;AAAF,OAAd,EAA4BC,KAA5B,CANK,EAOL,MAAM;AACJP,QAAAA,mBAAmB,CAACE,KAApB,GAA4B,IAA5B;AACD,OATI;AADF,KAAP;AAaD,GA/BgB,CAAjB;AAiCA,QAAMU,QAAQ,GAAGlB,KAAK,CAACmB,OAAN,CAAc,OAAO;AAAE7B,IAAAA,KAAF;AAASQ,IAAAA;AAAT,GAAP,CAAd,EAAyC,CAACR,KAAD,EAAQQ,MAAR,CAAzC,CAAjB,CAhD4B,CAkD5B;;AAEA,MAAIsB,kBAAJ;AACA,MAAIC,kBAAJ;;AACA,MAAIlC,QAAJ,EAAc;AACZ,UAAMmC,gBAAgB,GAAG,wCAAgBnC,QAAhB,CAAzB;AACAiC,IAAAA,kBAAkB,GAAGE,gBAAgB,CAACC,MAAjB,CAAyBC,KAAD;AAAA;;AAAA,aAC3C;AACA/C,QAAAA,qBAAqB,CAACgD,QAAtB,CAA+BD,KAA/B,aAA+BA,KAA/B,sCAA+BA,KAAK,CAAEE,IAAtC,gDAA+B,YAAa1C,WAA5C;AAF2C;AAAA,KAAxB,CAArB;AAIAqC,IAAAA,kBAAkB,GAAGC,gBAAgB,CAACC,MAAjB,CAAyBC,KAAD;AAAA;;AAAA,aAC3C;AACA9C,QAAAA,qBAAqB,CAAC+C,QAAtB,CAA+BD,KAA/B,aAA+BA,KAA/B,uCAA+BA,KAAK,CAAEE,IAAtC,iDAA+B,aAAa1C,WAA5C;AAF2C;AAAA,KAAxB,CAArB;AAID,GAhE2B,CAkE5B;;;AAEA,sBACE,uDACE,oBAAC,0CAAD,CAAsB,QAAtB;AACE,IAAA,KAAK,EAAE;AACLI,MAAAA,KADK;AAELuC,MAAAA,UAAU,EAAEjC,gBAFP;AAGLkC,MAAAA,mBAAmB,2BAAEnC,SAAS,CAACmC,mBAAZ,yEAAmC;AAHjD;AADT,kBAOE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEV;AAAb,kBACE,oBAAC,mBAAD;AAAK,IAAA,KAAK,EAAE5B,KAAZ;AAAmB,IAAA,MAAM,EAAEQ;AAA3B,kBACE,oBAAC,mBAAD;AACE,IAAA,KAAK,EAAEV,KADT;AAEE,IAAA,aAAa,EAAEC,aAFjB;AAGE,IAAA,KAAK,EAAEE;AAHT,KAIME,SAJN,EADF,EAOG2B,kBAPH,CADF,CAPF,CADF,eAoBE,oBAAC,0CAAD,CAAsB,QAAtB;AACE,IAAA,KAAK,EAAE;AACLhC,MAAAA,KADK;AAELuC,MAAAA,UAAU,EAAE,KAFP;AAGLC,MAAAA,mBAAmB,4BAAEnC,SAAS,CAACmC,mBAAZ,2EAAmC;AAHjD;AADT,kBAOE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC,wBAAWC;AAAxB,kBACE,oBAAC,WAAD;AAAa,IAAA,aAAa,EAAErB,QAA5B;AAAsC,IAAA,MAAM,EAAEX;AAA9C,kBACE,oBAAC,mBAAD;AAAe,IAAA,KAAK,EAAEV,KAAtB;AAA6B,IAAA,KAAK,EAAEG;AAApC,KAAqDE,SAArD,EADF,EAEG4B,kBAFH,CADF,CAPF,CApBF,CADF;AAqCD","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 { LineChartPathContext } from './LineChartPathContext';\nimport { LineChartPath, LineChartPathProps } from './Path';\nimport { useLineChart } from './useLineChart';\n\nconst BACKGROUND_COMPONENTS = [\n  'LineChartHighlight',\n  'LineChartHorizontalLine',\n  'LineChartGradient',\n  'LineChartDot',\n  'LineChartTooltip',\n];\nconst FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];\n\nconst AnimatedSVG = Animated.createAnimatedComponent(Svg);\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"]}
+{"version":3,"sources":["ChartPath.tsx"],"names":["BACKGROUND_COMPONENTS","FOREGROUND_COMPONENTS","AnimatedSVG","Animated","createAnimatedComponent","Svg","LineChartPathWrapper","displayName","animationDuration","animationProps","children","color","inactiveColor","width","strokeWidth","widthOffset","pathProps","showInactivePath","animateOnMount","mountAnimationDuration","mountAnimationProps","height","pathWidth","React","useContext","LineChartDimensionsContext","currentX","isActive","isMounted","hasMountedAnimation","useEffect","value","svgProps","shouldAnimateOnMount","inactiveWidth","duration","props","Math","max","Object","assign","viewSize","useMemo","backgroundChildren","foregroundChildren","iterableChildren","filter","child","includes","type","isInactive","isTransitionEnabled","StyleSheet","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 { LineChartPathContext } from './LineChartPathContext';\nimport { LineChartPath, LineChartPathProps } from './Path';\nimport { useLineChart } from './useLineChart';\n\nconst BACKGROUND_COMPONENTS = [\n  'LineChartHighlight',\n  'LineChartHorizontalLine',\n  'LineChartGradient',\n  'LineChartDot',\n  'LineChartTooltip',\n];\nconst FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];\n\nconst AnimatedSVG = Animated.createAnimatedComponent(Svg);\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    animateOnMount,\n    animationDuration,\n    animationProps,\n    currentX,\n    hasMountedAnimation,\n    isActive,\n    isMounted,\n    mountAnimationDuration,\n    mountAnimationProps,\n    pathWidth,\n    widthOffset,\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/commonjs/charts/line/Context.js

@@ -33,6 +33,7 @@ const LineChartContext = /*#__PURE__*/React.createContext({
     min: 0,
     max: 0
   },
+  xDomain: undefined,
   xLength: 0
 });
 exports.LineChartContext = LineChartContext;
@@ -43,7 +44,8 @@ function LineChartProvider({
   data = [],
   yRange,
   onCurrentIndexChange,
-  xLength
+  xLength,
+  xDomain
 }) {
   const currentX = (0, _reactNativeReanimated.useSharedValue)(-1);
   const currentIndex = (0, _reactNativeReanimated.useSharedValue)(-1);
@@ -64,14 +66,15 @@ function LineChartProvider({
         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)
       },
+      xDomain,
       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, xLength]);
+  }, [currentIndex, currentX, data, domain, isActive, yRange === null || yRange === void 0 ? void 0 : yRange.max, yRange === null || yRange === void 0 ? void 0 : yRange.min, xLength, xDomain]);
   (0, _reactNativeReanimated.useAnimatedReaction)(() => currentIndex.value, (x, prevX) => {
     if (x !== -1 && x !== prevX && onCurrentIndexChange) {
       (0, _reactNativeReanimated.runOnJS)(onCurrentIndexChange)(x);
     }
-  });
+  }, [currentIndex]);
   return /*#__PURE__*/React.createElement(_Data.LineChartDataProvider, {
     data: data
   }, /*#__PURE__*/React.createElement(LineChartContext.Provider, {

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

@@ -1 +1 @@
-{"version":3,"sources":["Context.tsx"],"names":["LineChartContext","React","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"]}
+{"version":3,"sources":["Context.tsx"],"names":["LineChartContext","React","createContext","currentX","value","currentIndex","domain","isActive","yDomain","min","max","xDomain","undefined","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  xDomain: undefined,\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  xDomain?: [number, number];\n};\n\nLineChartProvider.displayName = 'LineChartProvider';\n\nexport function LineChartProvider({\n  children,\n  data = [],\n  yRange,\n  onCurrentIndexChange,\n  xLength,\n  xDomain,\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      xDomain,\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    xDomain,\n  ]);\n\n  useAnimatedReaction(\n    () => currentIndex.value,\n    (x, prevX) => {\n      if (x !== -1 && x !== prevX && onCurrentIndexChange) {\n        runOnJS(onCurrentIndexChange)(x);\n      }\n    },\n    [currentIndex]\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/commonjs/charts/line/Cursor.js

@@ -18,6 +18,10 @@ var _Chart = require("./Chart");
 
 var _useLineChart = require("./useLineChart");
 
+var _d3Scale = require("d3-scale");
+
+var _d3Array = require("d3-array");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,8 +34,37 @@ const CursorContext = /*#__PURE__*/React.createContext({
 exports.CursorContext = CursorContext;
 LineChartCursor.displayName = 'LineChartCursor';
 
+const linearScalePositionAndIndex = ({
+  timestamps,
+  width,
+  xToUpdate,
+  currentIndex,
+  xPosition,
+  path,
+  xDomain
+}) => {
+  if (!path) {
+    return;
+  }
+
+  const domainArray = xDomain !== null && xDomain !== void 0 ? xDomain : [0, timestamps.length]; // Same scale as in /src/charts/line/utils/getPath.ts
+
+  const scaleX = (0, _d3Scale.scaleLinear)().domain(domainArray).range([0, width]); // Calculate a scaled timestamp for the current touch position
+
+  const xRelative = scaleX.invert(xPosition);
+  const closestIndex = (0, _d3Array.bisectCenter)(timestamps, xRelative);
+  const pathDataDelta = Math.abs(path.curves.length - timestamps.length); // sometimes there is a difference between data length and number of path curves.
+
+  const closestPathCurve = Math.max(Math.min((0, _d3Array.bisectCenter)(timestamps, xRelative), path.curves.length + 1) - pathDataDelta, 0);
+  const p0 = (closestIndex > 0 ? path.curves[closestPathCurve].to : path.move).x; // Update values
+
+  currentIndex.value = closestIndex;
+  xToUpdate.value = p0;
+};
+
 function LineChartCursor({
   children,
+  snapToPoint,
   type,
   ...props
 }) {
@@ -43,7 +76,8 @@ function LineChartCursor({
     currentX,
     currentIndex,
     isActive,
-    data
+    data,
+    xDomain
   } = (0, _useLineChart.useLineChart)();
   const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
     onActive: ({
@@ -52,13 +86,30 @@ function LineChartCursor({
       if (parsedPath) {
         const boundedX = Math.max(0, x <= width ? x : width);
         isActive.value = true;
-        currentX.value = boundedX; // on Web, we could drag the cursor to be negative, breaking it
+        const xValues = data.map(({
+          timestamp
+        }, i) => xDomain ? timestamp : i); // on Web, we could drag the cursor to be negative, breaking it
         // so we clamp the index at 0 to fix it
         // https://github.com/coinjar/react-native-wagmi-charts/issues/24
 
         const minIndex = 0;
         const boundedIndex = Math.max(minIndex, Math.round(boundedX / width / (1 / (data.length - 1))));
-        currentIndex.value = boundedIndex;
+
+        if (snapToPoint) {
+          // We have to run this on the JS thread unfortunately as the scaleLinear functions won't work on UI thread
+          (0, _reactNativeReanimated.runOnJS)(linearScalePositionAndIndex)({
+            timestamps: xValues,
+            width,
+            xToUpdate: currentX,
+            currentIndex,
+            xPosition: boundedX,
+            path: parsedPath,
+            xDomain
+          });
+        } else if (!snapToPoint) {
+          currentX.value = boundedX;
+          currentIndex.value = boundedIndex;
+        }
       }
     },
     onEnd: () => {
@@ -73,7 +124,8 @@ function LineChartCursor({
   }, /*#__PURE__*/React.createElement(_reactNativeGestureHandler.LongPressGestureHandler, _extends({
     minDurationMs: 0,
     maxDist: 999999,
-    onGestureEvent: onGestureEvent
+    onGestureEvent: onGestureEvent,
+    shouldCancelWhenOutside: false
   }, props), /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
     style: _reactNative.StyleSheet.absoluteFill
   }, children)));

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

@@ -1 +1 @@
-{"version":3,"sources":["Cursor.tsx"],"names":["CursorContext","React","createContext","type","LineChartCursor","displayName","children","props","pathWidth","width","parsedPath","useContext","LineChartDimensionsContext","currentX","currentIndex","isActive","data","onGestureEvent","onActive","x","boundedX","Math","max","value","minIndex","boundedIndex","round","length","onEnd","StyleSheet","absoluteFill"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AAMA;;AAEA;;AACA;;;;;;;;AAOO,MAAMA,aAAa,gBAAGC,KAAK,CAACC,aAAN,CAAoB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAApB,CAAtB;;AAEPC,eAAe,CAACC,WAAhB,GAA8B,iBAA9B;;AAEO,SAASD,eAAT,CAAyB;AAC9BE,EAAAA,QAD8B;AAE9BH,EAAAA,IAF8B;AAG9B,KAAGI;AAH2B,CAAzB,EAIkB;AACvB,QAAM;AAAEC,IAAAA,SAAS,EAAEC,KAAb;AAAoBC,IAAAA;AAApB,MAAmCT,KAAK,CAACU,UAAN,CACvCC,iCADuC,CAAzC;AAGA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,MAA6C,iCAAnD;AAEA,QAAMC,cAAc,GAAG,sDAErB;AACAC,IAAAA,QAAQ,EAAE,CAAC;AAAEC,MAAAA;AAAF,KAAD,KAAW;AACnB,UAAIT,UAAJ,EAAgB;AACd,cAAMU,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYH,CAAC,IAAIV,KAAL,GAAaU,CAAb,GAAiBV,KAA7B,CAAjB;AACAM,QAAAA,QAAQ,CAACQ,KAAT,GAAiB,IAAjB;AACAV,QAAAA,QAAQ,CAACU,KAAT,GAAiBH,QAAjB,CAHc,CAKd;AACA;AACA;;AACA,cAAMI,QAAQ,GAAG,CAAjB;AACA,cAAMC,YAAY,GAAGJ,IAAI,CAACC,GAAL,CACnBE,QADmB,EAEnBH,IAAI,CAACK,KAAL,CAAWN,QAAQ,GAAGX,KAAX,IAAoB,KAAKO,IAAI,CAACW,MAAL,GAAc,CAAnB,CAApB,CAAX,CAFmB,CAArB;AAKAb,QAAAA,YAAY,CAACS,KAAb,GAAqBE,YAArB;AACD;AACF,KAlBD;AAmBAG,IAAAA,KAAK,EAAE,MAAM;AACXb,MAAAA,QAAQ,CAACQ,KAAT,GAAiB,KAAjB;AACAT,MAAAA,YAAY,CAACS,KAAb,GAAqB,CAAC,CAAtB;AACD;AAtBD,GAFqB,CAAvB;AA2BA,sBACE,oBAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAE;AAAEpB,MAAAA;AAAF;AAA/B,kBACE,oBAAC,kDAAD;AACE,IAAA,aAAa,EAAE,CADjB;AAEE,IAAA,OAAO,EAAE,MAFX;AAGE,IAAA,cAAc,EAAEc;AAHlB,KAIMV,KAJN,gBAME,oBAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEsB,wBAAWC;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';\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, parsedPath } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, currentIndex, isActive, data } = useLineChart();\n\n  const onGestureEvent = useAnimatedGestureHandler<\n    GestureEvent<LongPressGestureHandlerEventPayload>\n  >({\n    onActive: ({ x }) => {\n      if (parsedPath) {\n        const boundedX = Math.max(0, 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":["CursorContext","React","createContext","type","LineChartCursor","displayName","linearScalePositionAndIndex","timestamps","width","xToUpdate","currentIndex","xPosition","path","xDomain","domainArray","length","scaleX","domain","range","xRelative","invert","closestIndex","pathDataDelta","Math","abs","curves","closestPathCurve","max","min","p0","to","move","x","value","children","snapToPoint","props","pathWidth","parsedPath","useContext","LineChartDimensionsContext","currentX","isActive","data","onGestureEvent","onActive","boundedX","xValues","map","timestamp","i","minIndex","boundedIndex","round","onEnd","StyleSheet","absoluteFill"],"mappings":"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","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, {\n  runOnJS,\n  useAnimatedGestureHandler,\n} from 'react-native-reanimated';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { useLineChart } from './useLineChart';\nimport { scaleLinear } from 'd3-scale';\nimport { bisectCenter } from 'd3-array';\nimport type { Path } from 'react-native-redash';\n\nexport type LineChartCursorProps = LongPressGestureHandlerProps & {\n  children: React.ReactNode;\n  type: 'line' | 'crosshair';\n  snapToPoint?: boolean;\n};\n\nexport const CursorContext = React.createContext({ type: '' });\n\nLineChartCursor.displayName = 'LineChartCursor';\n\nconst linearScalePositionAndIndex = ({\n  timestamps,\n  width,\n  xToUpdate,\n  currentIndex,\n  xPosition,\n  path,\n  xDomain,\n}: {\n  timestamps: number[];\n  width: number;\n  xToUpdate: Animated.SharedValue<number>;\n  currentIndex: Animated.SharedValue<number>;\n  xPosition: number;\n  path: Path | undefined;\n  xDomain: [number, number] | undefined;\n}) => {\n  if (!path) {\n    return;\n  }\n\n  const domainArray = xDomain ?? [0, timestamps.length];\n\n  // Same scale as in /src/charts/line/utils/getPath.ts\n  const scaleX = scaleLinear().domain(domainArray).range([0, width]);\n\n  // Calculate a scaled timestamp for the current touch position\n  const xRelative = scaleX.invert(xPosition);\n\n  const closestIndex = bisectCenter(timestamps, xRelative);\n  const pathDataDelta = Math.abs(path.curves.length - timestamps.length); // sometimes there is a difference between data length and number of path curves.\n  const closestPathCurve = Math.max(\n    Math.min(bisectCenter(timestamps, xRelative), path.curves.length + 1) -\n      pathDataDelta,\n    0\n  );\n\n  const p0 = (closestIndex > 0 ? path.curves[closestPathCurve].to : path.move)\n    .x;\n  // Update values\n  currentIndex.value = closestIndex;\n  xToUpdate.value = p0;\n};\n\nexport function LineChartCursor({\n  children,\n  snapToPoint,\n  type,\n  ...props\n}: LineChartCursorProps) {\n  const { pathWidth: width, parsedPath } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, currentIndex, isActive, data, xDomain } = useLineChart();\n\n  const onGestureEvent = useAnimatedGestureHandler<\n    GestureEvent<LongPressGestureHandlerEventPayload>\n  >({\n    onActive: ({ x }) => {\n      if (parsedPath) {\n        const boundedX = Math.max(0, x <= width ? x : width);\n        isActive.value = true;\n        const xValues = data.map(({ timestamp }, i) =>\n          xDomain ? timestamp : i\n        );\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        if (snapToPoint) {\n          // We have to run this on the JS thread unfortunately as the scaleLinear functions won't work on UI thread\n          runOnJS(linearScalePositionAndIndex)({\n            timestamps: xValues,\n            width,\n            xToUpdate: currentX,\n            currentIndex,\n            xPosition: boundedX,\n            path: parsedPath,\n            xDomain,\n          });\n        } else if (!snapToPoint) {\n          currentX.value = boundedX;\n          currentIndex.value = boundedIndex;\n        }\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        shouldCancelWhenOutside={false}\n        {...props}\n      >\n        <Animated.View style={StyleSheet.absoluteFill}>\n          {children}\n        </Animated.View>\n      </LongPressGestureHandler>\n    </CursorContext.Provider>\n  );\n}\n"]}

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

@@ -55,7 +55,7 @@ function LineChartCursorCrosshair({
         damping: 10
       }) : 0
     }]
-  }));
+  }), [currentX, currentY, enableSpringAnimation, isActive, outerSize]);
   return /*#__PURE__*/React.createElement(_Cursor.LineChartCursor, _extends({
     type: "crosshair"
   }, props), /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, _extends({}, crosshairWrapperProps, {

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

@@ -1 +1 @@
-{"version":3,"sources":["CursorCrosshair.tsx"],"names":["LineChartCursorCrosshair","displayName","children","color","size","outerSize","crosshairWrapperProps","crosshairProps","crosshairOuterProps","props","currentX","currentY","isActive","enableSpringAnimation","setEnableSpringAnimation","React","useState","Platform","OS","useEffect","setTimeout","animatedCursorStyle","transform","translateX","value","translateY","scale","damping","width","height","alignItems","justifyContent","style","backgroundColor","borderRadius","opacity","position"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAKA;;AACA;;;;;;;;AAeAA,wBAAwB,CAACC,WAAzB,GAAuC,0BAAvC;;AAEO,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,MAAmC,iCAAzC,CADgC,CAGhC;;AACA,QAAM,CAACC,qBAAD,EAAwBC,wBAAxB,IAAoDC,KAAK,CAACC,QAAN,CACxDC,sBAASC,EAAT,KAAgB,KADwC,CAA1D;AAGAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,MAAM;AACpBC,IAAAA,UAAU,CAAC,MAAM;AACfN,MAAAA,wBAAwB,CAAC,IAAD,CAAxB;AACD,KAFS,EAEP,GAFO,CAAV;AAGD,GAJD,EAIG,EAJH;AAMA,QAAMO,mBAAmB,GAAG,6CAAiB,OAAO;AAClDC,IAAAA,SAAS,EAAE,CACT;AAAEC,MAAAA,UAAU,EAAEb,QAAQ,CAACc,KAAT,GAAiBnB,SAAS,GAAG;AAA3C,KADS,EAET;AAAEoB,MAAAA,UAAU,EAAEd,QAAQ,CAACa,KAAT,GAAiBnB,SAAS,GAAG;AAA3C,KAFS,EAGT;AACEqB,MAAAA,KAAK,EAAEb,qBAAqB,GACxB,uCAAWD,QAAQ,CAACY,KAAT,GAAiB,CAAjB,GAAqB,CAAhC,EAAmC;AACjCG,QAAAA,OAAO,EAAE;AADwB,OAAnC,CADwB,GAIxB;AALN,KAHS;AADuC,GAAP,CAAjB,CAA5B;AAcA,sBACE,oBAAC,uBAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KAAsClB,KAAtC,gBACE,oBAAC,8BAAD,CAAU,IAAV,eACMH,qBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEsB,MAAAA,KAAK,EAAEvB,SADT;AAEEwB,MAAAA,MAAM,EAAExB,SAFV;AAGEyB,MAAAA,UAAU,EAAE,QAHd;AAIEC,MAAAA,cAAc,EAAE;AAJlB,KADK,EAOLV,mBAPK,EAQLf,qBAAqB,CAAC0B,KARjB;AAFT,mBAaE,oBAAC,iBAAD,eACMxB,mBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEyB,MAAAA,eAAe,EAAE9B,KADnB;AAEEyB,MAAAA,KAAK,EAAEvB,SAFT;AAGEwB,MAAAA,MAAM,EAAExB,SAHV;AAIE6B,MAAAA,YAAY,EAAE7B,SAJhB;AAKE8B,MAAAA,OAAO,EAAE,GALX;AAMEC,MAAAA,QAAQ,EAAE;AANZ,KADK,EASL5B,mBAAmB,CAACwB,KATf;AAFT,KAbF,eA2BE,oBAAC,iBAAD,eACMzB,cADN;AAEE,IAAA,KAAK,EAAE,CACL;AACE0B,MAAAA,eAAe,EAAE9B,KADnB;AAEEyB,MAAAA,KAAK,EAAExB,IAFT;AAGEyB,MAAAA,MAAM,EAAEzB,IAHV;AAIE8B,MAAAA,YAAY,EAAE9B;AAJhB,KADK,EAOLG,cAAc,CAACyB,KAPV;AAFT,KA3BF,CADF,EAyCG9B,QAzCH,CADF;AA6CD","sourcesContent":["import * as React from 'react';\nimport { Platform, View, ViewProps } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { LineChartCursor, LineChartCursorProps } from './Cursor';\nimport { useLineChart } from './useLineChart';\n\ntype LineChartCursorCrosshairProps = Omit<\n  LineChartCursorProps,\n  'children' | 'type'\n> & {\n  children?: React.ReactNode;\n  color?: string;\n  size?: number;\n  outerSize?: number;\n  crosshairWrapperProps?: Animated.AnimateProps<ViewProps>;\n  crosshairProps?: ViewProps;\n  crosshairOuterProps?: ViewProps;\n};\n\nLineChartCursorCrosshair.displayName = 'LineChartCursorCrosshair';\n\nexport function LineChartCursorCrosshair({\n  children,\n  color = 'black',\n  size = 8,\n  outerSize = 32,\n  crosshairWrapperProps = {},\n  crosshairProps = {},\n  crosshairOuterProps = {},\n  ...props\n}: LineChartCursorCrosshairProps) {\n  const { currentX, currentY, isActive } = useLineChart();\n\n  // It seems that enabling spring animation on initial render on Android causes a crash.\n  const [enableSpringAnimation, setEnableSpringAnimation] = React.useState(\n    Platform.OS === 'ios'\n  );\n  React.useEffect(() => {\n    setTimeout(() => {\n      setEnableSpringAnimation(true);\n    }, 100);\n  }, []);\n\n  const animatedCursorStyle = useAnimatedStyle(() => ({\n    transform: [\n      { translateX: currentX.value - outerSize / 2 },\n      { translateY: currentY.value - outerSize / 2 },\n      {\n        scale: enableSpringAnimation\n          ? withSpring(isActive.value ? 1 : 0, {\n              damping: 10,\n            })\n          : 0,\n      },\n    ],\n  }));\n\n  return (\n    <LineChartCursor type=\"crosshair\" {...props}>\n      <Animated.View\n        {...crosshairWrapperProps}\n        style={[\n          {\n            width: outerSize,\n            height: outerSize,\n            alignItems: 'center',\n            justifyContent: 'center',\n          },\n          animatedCursorStyle,\n          crosshairWrapperProps.style,\n        ]}\n      >\n        <View\n          {...crosshairOuterProps}\n          style={[\n            {\n              backgroundColor: color,\n              width: outerSize,\n              height: outerSize,\n              borderRadius: outerSize,\n              opacity: 0.1,\n              position: 'absolute',\n            },\n            crosshairOuterProps.style,\n          ]}\n        />\n        <View\n          {...crosshairProps}\n          style={[\n            {\n              backgroundColor: color,\n              width: size,\n              height: size,\n              borderRadius: size,\n            },\n            crosshairProps.style,\n          ]}\n        />\n      </Animated.View>\n      {children}\n    </LineChartCursor>\n  );\n}\n"]}
+{"version":3,"sources":["CursorCrosshair.tsx"],"names":["LineChartCursorCrosshair","displayName","children","color","size","outerSize","crosshairWrapperProps","crosshairProps","crosshairOuterProps","props","currentX","currentY","isActive","enableSpringAnimation","setEnableSpringAnimation","React","useState","Platform","OS","useEffect","setTimeout","animatedCursorStyle","transform","translateX","value","translateY","scale","damping","width","height","alignItems","justifyContent","style","backgroundColor","borderRadius","opacity","position"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAKA;;AACA;;;;;;;;AAeAA,wBAAwB,CAACC,WAAzB,GAAuC,0BAAvC;;AAEO,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,MAAmC,iCAAzC,CADgC,CAGhC;;AACA,QAAM,CAACC,qBAAD,EAAwBC,wBAAxB,IAAoDC,KAAK,CAACC,QAAN,CACxDC,sBAASC,EAAT,KAAgB,KADwC,CAA1D;AAGAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,MAAM;AACpBC,IAAAA,UAAU,CAAC,MAAM;AACfN,MAAAA,wBAAwB,CAAC,IAAD,CAAxB;AACD,KAFS,EAEP,GAFO,CAAV;AAGD,GAJD,EAIG,EAJH;AAMA,QAAMO,mBAAmB,GAAG,6CAC1B,OAAO;AACLC,IAAAA,SAAS,EAAE,CACT;AAAEC,MAAAA,UAAU,EAAEb,QAAQ,CAACc,KAAT,GAAiBnB,SAAS,GAAG;AAA3C,KADS,EAET;AAAEoB,MAAAA,UAAU,EAAEd,QAAQ,CAACa,KAAT,GAAiBnB,SAAS,GAAG;AAA3C,KAFS,EAGT;AACEqB,MAAAA,KAAK,EAAEb,qBAAqB,GACxB,uCAAWD,QAAQ,CAACY,KAAT,GAAiB,CAAjB,GAAqB,CAAhC,EAAmC;AACjCG,QAAAA,OAAO,EAAE;AADwB,OAAnC,CADwB,GAIxB;AALN,KAHS;AADN,GAAP,CAD0B,EAc1B,CAACjB,QAAD,EAAWC,QAAX,EAAqBE,qBAArB,EAA4CD,QAA5C,EAAsDP,SAAtD,CAd0B,CAA5B;AAiBA,sBACE,oBAAC,uBAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KAAsCI,KAAtC,gBACE,oBAAC,8BAAD,CAAU,IAAV,eACMH,qBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEsB,MAAAA,KAAK,EAAEvB,SADT;AAEEwB,MAAAA,MAAM,EAAExB,SAFV;AAGEyB,MAAAA,UAAU,EAAE,QAHd;AAIEC,MAAAA,cAAc,EAAE;AAJlB,KADK,EAOLV,mBAPK,EAQLf,qBAAqB,CAAC0B,KARjB;AAFT,mBAaE,oBAAC,iBAAD,eACMxB,mBADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEyB,MAAAA,eAAe,EAAE9B,KADnB;AAEEyB,MAAAA,KAAK,EAAEvB,SAFT;AAGEwB,MAAAA,MAAM,EAAExB,SAHV;AAIE6B,MAAAA,YAAY,EAAE7B,SAJhB;AAKE8B,MAAAA,OAAO,EAAE,GALX;AAMEC,MAAAA,QAAQ,EAAE;AANZ,KADK,EASL5B,mBAAmB,CAACwB,KATf;AAFT,KAbF,eA2BE,oBAAC,iBAAD,eACMzB,cADN;AAEE,IAAA,KAAK,EAAE,CACL;AACE0B,MAAAA,eAAe,EAAE9B,KADnB;AAEEyB,MAAAA,KAAK,EAAExB,IAFT;AAGEyB,MAAAA,MAAM,EAAEzB,IAHV;AAIE8B,MAAAA,YAAY,EAAE9B;AAJhB,KADK,EAOLG,cAAc,CAACyB,KAPV;AAFT,KA3BF,CADF,EAyCG9B,QAzCH,CADF;AA6CD","sourcesContent":["import * as React from 'react';\nimport { Platform, View, ViewProps } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { LineChartCursor, LineChartCursorProps } from './Cursor';\nimport { useLineChart } from './useLineChart';\n\ntype LineChartCursorCrosshairProps = Omit<\n  LineChartCursorProps,\n  'children' | 'type'\n> & {\n  children?: React.ReactNode;\n  color?: string;\n  size?: number;\n  outerSize?: number;\n  crosshairWrapperProps?: Animated.AnimateProps<ViewProps>;\n  crosshairProps?: ViewProps;\n  crosshairOuterProps?: ViewProps;\n};\n\nLineChartCursorCrosshair.displayName = 'LineChartCursorCrosshair';\n\nexport function LineChartCursorCrosshair({\n  children,\n  color = 'black',\n  size = 8,\n  outerSize = 32,\n  crosshairWrapperProps = {},\n  crosshairProps = {},\n  crosshairOuterProps = {},\n  ...props\n}: LineChartCursorCrosshairProps) {\n  const { currentX, currentY, isActive } = useLineChart();\n\n  // It seems that enabling spring animation on initial render on Android causes a crash.\n  const [enableSpringAnimation, setEnableSpringAnimation] = React.useState(\n    Platform.OS === 'ios'\n  );\n  React.useEffect(() => {\n    setTimeout(() => {\n      setEnableSpringAnimation(true);\n    }, 100);\n  }, []);\n\n  const animatedCursorStyle = useAnimatedStyle(\n    () => ({\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    [currentX, currentY, enableSpringAnimation, isActive, outerSize]\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"]}