react-native-wagmi-charts 2.0.1 → 2.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["Tooltip.tsx"],"names":["LineChartTooltip","displayName","children","xGutter","yGutter","cursorGutter","position","textProps","textStyle","props","width","height","React","useContext","LineChartDimensionsContext","type","CursorContext","currentX","currentY","isActive","x","elementWidth","elementHeight","handleLayout","useCallback","event","value","nativeEvent","layout","animatedCursorStyle","translateXOffset","xOffset","translateYOffset","transform","translateX","translateY","opacity","padding","alignSelf","style"],"mappings":";;;;;;;AAAA;;AAEA;;AAKA;;AACA;;AACA;;AACA;;;;;;;;AAYAA,gBAAgB,CAACC,WAAjB,GAA+B,kBAA/B;;AAEO,SAASD,gBAAT,CAA0B;AAC/BE,EAAAA,QAD+B;AAE/BC,EAAAA,OAAO,GAAG,CAFqB;AAG/BC,EAAAA,OAAO,GAAG,CAHqB;AAI/BC,EAAAA,YAAY,GAAG,EAJgB;AAK/BC,EAAAA,QAAQ,GAAG,KALoB;AAM/BC,EAAAA,SAN+B;AAO/BC,EAAAA,SAP+B;AAQ/B,KAAGC;AAR4B,CAA1B,EASmB;AACxB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBC,KAAK,CAACC,UAAN,CAAiBC,iCAAjB,CAA1B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAWH,KAAK,CAACC,UAAN,CAAiBG,qBAAjB,CAAjB;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsBC,IAAAA;AAAtB,MAAmC,iCAAzC;AAEA,QAAMC,CAAC,GAAG,2CAAe,CAAf,CAAV;AACA,QAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AACA,QAAMC,aAAa,GAAG,2CAAe,CAAf,CAAtB;AAEA,QAAMC,YAAY,GAAGX,KAAK,CAACY,WAAN,CAClBC,KAAD,IAAW;AACTL,IAAAA,CAAC,CAACM,KAAF,GAAUD,KAAK,CAACE,WAAN,CAAkBC,MAAlB,CAAyBR,CAAnC;AACAC,IAAAA,YAAY,CAACK,KAAb,GAAqBD,KAAK,CAACE,WAAN,CAAkBC,MAAlB,CAAyBlB,KAA9C;AACAY,IAAAA,aAAa,CAACI,KAAd,GAAsBD,KAAK,CAACE,WAAN,CAAkBC,MAAlB,CAAyBjB,MAA/C;AACD,GALkB,EAMnB,CAACW,aAAD,EAAgBD,YAAhB,EAA8BD,CAA9B,CANmB,CAArB;AASA,QAAMS,mBAAmB,GAAG,6CAAiB,MAAM;AACjD,QAAIC,gBAAgB,GAAGT,YAAY,CAACK,KAAb,GAAqB,CAA5C;;AACA,QAAIT,QAAQ,CAACS,KAAT,GAAiBL,YAAY,CAACK,KAAb,GAAqB,CAArB,GAAyBvB,OAA9C,EAAuD;AACrD,YAAM4B,OAAO,GAAGV,YAAY,CAACK,KAAb,GAAqB,CAArB,GAAyBvB,OAAzB,GAAmCc,QAAQ,CAACS,KAA5D;AACAI,MAAAA,gBAAgB,GAAGA,gBAAgB,GAAGC,OAAtC;AACD;;AACD,QAAId,QAAQ,CAACS,KAAT,GAAiBhB,KAAK,GAAGW,YAAY,CAACK,KAAb,GAAqB,CAA7B,GAAiCvB,OAAtD,EAA+D;AAC7D,YAAM4B,OAAO,GACXd,QAAQ,CAACS,KAAT,IAAkBhB,KAAK,GAAGW,YAAY,CAACK,KAAb,GAAqB,CAA7B,GAAiCvB,OAAnD,CADF;AAEA2B,MAAAA,gBAAgB,GAAGA,gBAAgB,GAAGC,OAAtC;AACD;;AAED,QAAIC,gBAAgB,GAAG,CAAvB;;AACA,QAAI1B,QAAQ,KAAK,KAAjB,EAAwB;AACtB0B,MAAAA,gBAAgB,GAAGV,aAAa,CAACI,KAAd,GAAsB,CAAtB,GAA0BrB,YAA7C;;AACA,UAAIa,QAAQ,CAACQ,KAAT,GAAiBM,gBAAjB,GAAoC5B,OAAxC,EAAiD;AAC/C4B,QAAAA,gBAAgB,GAAGd,QAAQ,CAACQ,KAAT,GAAiBtB,OAApC;AACD;AACF,KALD,MAKO,IAAIE,QAAQ,KAAK,QAAjB,EAA2B;AAChC0B,MAAAA,gBAAgB,GAAG,EAAEV,aAAa,CAACI,KAAd,GAAsB,CAAxB,IAA6BrB,YAAY,GAAG,CAA/D;;AACA,UACEa,QAAQ,CAACQ,KAAT,GAAiBM,gBAAjB,GAAoCV,aAAa,CAACI,KAAlD,GACAf,MAAM,GAAGP,OAFX,EAGE;AACA4B,QAAAA,gBAAgB,GACdd,QAAQ,CAACQ,KAAT,IAAkBf,MAAM,GAAGP,OAA3B,IAAsCkB,aAAa,CAACI,KADtD;AAED;AACF;;AAED,WAAO;AACLO,MAAAA,SAAS,EAAE,CACT;AAAEC,QAAAA,UAAU,EAAEjB,QAAQ,CAACS,KAAT,GAAiBI;AAA/B,OADS,EAET;AACEK,QAAAA,UAAU,EACRpB,IAAI,KAAK,WAAT,GACIG,QAAQ,CAACQ,KAAT,GAAiBM,gBADrB,GAEI1B,QAAQ,KAAK,KAAb,GACAF,OADA,GAEAO,MAAM,GAAGW,aAAa,CAACI,KAAvB,GAA+BtB;AANvC,OAFS,CADN;AAYLgC,MAAAA,OAAO,EAAEjB,QAAQ,CAACO,KAAT,GAAiB,CAAjB,GAAqB;AAZzB,KAAP;AAcD,GA3C2B,CAA5B;AA6CA,sBACE,oBAAC,8BAAD,CAAU,IAAV;AACE,IAAA,QAAQ,EAAEH;AADZ,KAEMd,KAFN;AAGE,IAAA,KAAK,EAAE,CACL;AACEH,MAAAA,QAAQ,EAAE,UADZ;AAEE+B,MAAAA,OAAO,EAAE,CAFX;AAGEC,MAAAA,SAAS,EAAE;AAHb,KADK,EAMLT,mBANK,EAOLpB,KAAK,CAAC8B,KAPD;AAHT,MAaGrC,QAAQ,iBAAI,oBAAC,6BAAD;AAAoB,IAAA,KAAK,EAAE,CAACM,SAAD;AAA3B,KAA4CD,SAA5C,EAbf,CADF;AAiBD","sourcesContent":["import * as React from 'react';\nimport type { ViewProps } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n} from 'react-native-reanimated';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { CursorContext } from './Cursor';\nimport { LineChartPriceText, LineChartPriceTextProps } from './PriceText';\nimport { useLineChart } from './useLineChart';\n\ntype LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {\n  children?: React.ReactNode;\n  xGutter?: number;\n  yGutter?: number;\n  cursorGutter?: number;\n  position?: 'top' | 'bottom';\n  textProps?: LineChartPriceTextProps;\n  textStyle?: LineChartPriceTextProps['style'];\n};\n\nLineChartTooltip.displayName = 'LineChartTooltip';\n\nexport function LineChartTooltip({\n  children,\n  xGutter = 8,\n  yGutter = 8,\n  cursorGutter = 48,\n  position = 'top',\n  textProps,\n  textStyle,\n  ...props\n}: LineChartTooltipProps) {\n  const { width, height } = React.useContext(LineChartDimensionsContext);\n  const { type } = React.useContext(CursorContext);\n  const { currentX, currentY, isActive } = useLineChart();\n\n  const x = useSharedValue(0);\n  const elementWidth = useSharedValue(0);\n  const elementHeight = useSharedValue(0);\n\n  const handleLayout = React.useCallback(\n    (event) => {\n      x.value = event.nativeEvent.layout.x;\n      elementWidth.value = event.nativeEvent.layout.width;\n      elementHeight.value = event.nativeEvent.layout.height;\n    },\n    [elementHeight, elementWidth, x]\n  );\n\n  const animatedCursorStyle = useAnimatedStyle(() => {\n    let translateXOffset = elementWidth.value / 2;\n    if (currentX.value < elementWidth.value / 2 + xGutter) {\n      const xOffset = elementWidth.value / 2 + xGutter - currentX.value;\n      translateXOffset = translateXOffset - xOffset;\n    }\n    if (currentX.value > width - elementWidth.value / 2 - xGutter) {\n      const xOffset =\n        currentX.value - (width - elementWidth.value / 2 - xGutter);\n      translateXOffset = translateXOffset + xOffset;\n    }\n\n    let translateYOffset = 0;\n    if (position === 'top') {\n      translateYOffset = elementHeight.value / 2 + cursorGutter;\n      if (currentY.value - translateYOffset < yGutter) {\n        translateYOffset = currentY.value - yGutter;\n      }\n    } else if (position === 'bottom') {\n      translateYOffset = -(elementHeight.value / 2) - cursorGutter / 2;\n      if (\n        currentY.value - translateYOffset + elementHeight.value >\n        height - yGutter\n      ) {\n        translateYOffset =\n          currentY.value - (height - yGutter) + elementHeight.value;\n      }\n    }\n\n    return {\n      transform: [\n        { translateX: currentX.value - translateXOffset },\n        {\n          translateY:\n            type === 'crosshair'\n              ? currentY.value - translateYOffset\n              : position === 'top'\n              ? yGutter\n              : height - elementHeight.value - yGutter,\n        },\n      ],\n      opacity: isActive.value ? 1 : 0,\n    };\n  });\n\n  return (\n    <Animated.View\n      onLayout={handleLayout}\n      {...props}\n      style={[\n        {\n          position: 'absolute',\n          padding: 4,\n          alignSelf: 'flex-start',\n        },\n        animatedCursorStyle,\n        props.style,\n      ]}\n    >\n      {children || <LineChartPriceText style={[textStyle]} {...textProps} />}\n    </Animated.View>\n  );\n}\n"]}
+{"version":3,"sources":["Tooltip.tsx"],"names":["LineChartTooltip","displayName","children","xGutter","yGutter","cursorGutter","position","textProps","textStyle","at","props","width","height","parsedPath","pointWidth","React","useContext","LineChartDimensionsContext","type","CursorContext","currentX","currentY","isActive","x","elementWidth","elementHeight","handleLayout","useCallback","event","value","nativeEvent","layout","atXPosition","undefined","atYPosition","animatedCursorStyle","translateXOffset","isStatic","xOffset","translateYOffset","y","translateY","opacity","transform","translateX","padding","alignSelf","style"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { ViewProps } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { CursorContext } from './Cursor';\nimport { LineChartPriceText, LineChartPriceTextProps } from './PriceText';\nimport { useLineChart } from './useLineChart';\nimport { getYForX } from 'react-native-redash';\nimport { useMemo } from 'react';\n\nexport type LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {\n  children?: React.ReactNode;\n  xGutter?: number;\n  yGutter?: number;\n  cursorGutter?: number;\n  position?: 'top' | 'bottom';\n  textProps?: LineChartPriceTextProps;\n  textStyle?: LineChartPriceTextProps['style'];\n  /**\n   * When specified the tooltip is considered static, and will\n   * always be rendered at the given index, unless there is interaction\n   * with the chart (like interacting with a cursor).\n   *\n   * @default undefined\n   */\n  at?: number;\n};\n\nLineChartTooltip.displayName = 'LineChartTooltip';\n\nexport function LineChartTooltip({\n  children,\n  xGutter = 8,\n  yGutter = 8,\n  cursorGutter = 48,\n  position = 'top',\n  textProps,\n  textStyle,\n  at,\n  ...props\n}: LineChartTooltipProps) {\n  const { width, height, parsedPath, pointWidth } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { type } = React.useContext(CursorContext);\n  const { currentX, currentY, isActive } = useLineChart();\n\n  const x = useSharedValue(0);\n  const elementWidth = useSharedValue(0);\n  const elementHeight = useSharedValue(0);\n\n  const handleLayout = React.useCallback(\n    (event) => {\n      x.value = event.nativeEvent.layout.x;\n      elementWidth.value = event.nativeEvent.layout.width;\n      elementHeight.value = event.nativeEvent.layout.height;\n    },\n    [elementHeight, elementWidth, x]\n  );\n\n  // When the user set a `at` index, get the index's y & x positions\n  const atXPosition = useMemo(\n    () => (at == null ? undefined : pointWidth * at),\n    [at, pointWidth]\n  );\n  const atYPosition = useDerivedValue(() => {\n    return atXPosition == null\n      ? undefined\n      : getYForX(parsedPath, atXPosition) ?? 0;\n  }, [atXPosition]);\n\n  const animatedCursorStyle = useAnimatedStyle(() => {\n    let translateXOffset = elementWidth.value / 2;\n    // the tooltip is considered static when the user specified an `at` prop\n    const isStatic = atYPosition.value != null;\n\n    // Calculate X position:\n    const x = atXPosition ?? currentX.value;\n    if (x < elementWidth.value / 2 + xGutter) {\n      const xOffset = elementWidth.value / 2 + xGutter - x;\n      translateXOffset = translateXOffset - xOffset;\n    }\n    if (x > width - elementWidth.value / 2 - xGutter) {\n      const xOffset = x - (width - elementWidth.value / 2 - xGutter);\n      translateXOffset = translateXOffset + xOffset;\n    }\n\n    // Calculate Y position:\n    let translateYOffset = 0;\n    const y = atYPosition.value ?? currentY.value;\n    if (position === 'top') {\n      translateYOffset = elementHeight.value / 2 + cursorGutter;\n      if (y - translateYOffset < yGutter) {\n        translateYOffset = y - yGutter;\n      }\n    } else if (position === 'bottom') {\n      translateYOffset = -(elementHeight.value / 2) - cursorGutter / 2;\n      if (y - translateYOffset + elementHeight.value > height - yGutter) {\n        translateYOffset = y - (height - yGutter) + elementHeight.value;\n      }\n    }\n\n    // determine final translateY value\n    let translateY: number | undefined;\n    if (type === 'crosshair' || isStatic) {\n      translateY = y - translateYOffset;\n    } else {\n      if (position === 'top') {\n        translateY = yGutter;\n      } else {\n        translateY = height - elementHeight.value - yGutter;\n      }\n    }\n\n    let opacity = isActive.value ? 1 : 0;\n    if (isStatic) {\n      // Only show static when there is no active cursor\n      opacity = withTiming(isActive.value ? 0 : 1);\n    }\n\n    return {\n      transform: [\n        { translateX: x - translateXOffset },\n        {\n          translateY: translateY,\n        },\n      ],\n      opacity: opacity,\n    };\n  });\n\n  return (\n    <Animated.View\n      onLayout={handleLayout}\n      {...props}\n      style={[\n        {\n          position: 'absolute',\n          padding: 4,\n          alignSelf: 'flex-start',\n        },\n        animatedCursorStyle,\n        props.style,\n      ]}\n    >\n      {children || (\n        <LineChartPriceText index={at} style={[textStyle]} {...textProps} />\n      )}\n    </Animated.View>\n  );\n}\n"]}

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

@@ -222,6 +222,8 @@ Object.keys(_useLineChart).forEach(function (key) {
   });
 });
 
+var _HoverTrap = require("../line/HoverTrap");
+
 var _Path = require("./Path");
 
 Object.keys(_Path).forEach(function (key) {
@@ -266,7 +268,8 @@ const LineChart = Object.assign(_Chart.LineChart, {
   DatetimeText: _DatetimeText.LineChartDatetimeText,
   useDatetime: _useDatetime.useLineChartDatetime,
   usePrice: _usePrice.useLineChartPrice,
-  useChart: _useLineChart.useLineChart
+  useChart: _useLineChart.useLineChart,
+  HoverTrap: _HoverTrap.LineChartHoverTrap
 });
 exports.LineChart = LineChart;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["LineChart","Object","assign","_LineChart","Chart","Dot","LineChartDot","Path","LineChartPathWrapper","Cursor","LineChartCursor","CursorCrosshair","LineChartCursorCrosshair","CursorLine","LineChartCursorLine","Gradient","LineChartGradient","Group","LineChartGroup","Highlight","LineChartHighlight","HorizontalLine","LineChartHorizontalLine","Tooltip","LineChartTooltip","Provider","LineChartProvider","PriceText","LineChartPriceText","DatetimeText","LineChartDatetimeText","useDatetime","useLineChartDatetime","usePrice","useLineChartPrice","useChart","useLineChart"],"mappings":";;;;;;;;;;AAAA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AACA;;AACA;;AAgBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAfA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAdA;;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAhBA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAgBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAHA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAKA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAMA,SAAS,GAAGC,MAAM,CAACC,MAAP,CAAcC,gBAAd,EAA0B;AACjDC,EAAAA,KAAK,EAAED,gBAD0C;AAEjDE,EAAAA,GAAG,EAAEC,iBAF4C;AAGjDC,EAAAA,IAAI,EAAEC,+BAH2C;AAIjDC,EAAAA,MAAM,EAAEC,uBAJyC;AAKjDC,EAAAA,eAAe,EAAEC,yCALgC;AAMjDC,EAAAA,UAAU,EAAEC,+BANqC;AAOjDC,EAAAA,QAAQ,EAAEC,2BAPuC;AAQjDC,EAAAA,KAAK,EAAEC,qBAR0C;AASjDC,EAAAA,SAAS,EAAEC,6BATsC;AAUjDC,EAAAA,cAAc,EAAEC,uCAViC;AAWjDC,EAAAA,OAAO,EAAEC,yBAXwC;AAYjDC,EAAAA,QAAQ,EAAEC,0BAZuC;AAajDC,EAAAA,SAAS,EAAEC,6BAbsC;AAcjDC,EAAAA,YAAY,EAAEC,mCAdmC;AAejDC,EAAAA,WAAW,EAAEC,iCAfoC;AAgBjDC,EAAAA,QAAQ,EAAEC,2BAhBuC;AAiBjDC,EAAAA,QAAQ,EAAEC;AAjBuC,CAA1B,CAAlB","sourcesContent":["import { LineChart as _LineChart } from './Chart';\nimport { LineChartPathWrapper } from './ChartPath';\nimport { LineChartHighlight } from './Highlight';\nimport { LineChartProvider } from './Context';\nimport { LineChartCursor } from './Cursor';\nimport { LineChartCursorCrosshair } from './CursorCrosshair';\nimport { LineChartCursorLine } from './CursorLine';\nimport { LineChartDot } from './Dot';\nimport { LineChartGradient } from './Gradient';\nimport { LineChartGroup } from './Group';\nimport { LineChartHorizontalLine } from './HorizontalLine';\nimport { LineChartTooltip } from './Tooltip';\nimport { LineChartPriceText } from './PriceText';\nimport { LineChartDatetimeText } from './DatetimeText';\nimport { useLineChartDatetime } from './useDatetime';\nimport { useLineChartPrice } from './usePrice';\nimport { useLineChart } from './useLineChart';\n\nexport * from './Chart';\nexport * from './ChartPath';\nexport * from './Highlight';\nexport * from './Context';\nexport * from './Cursor';\nexport * from './CursorCrosshair';\nexport * from './CursorLine';\nexport * from './Dot';\nexport * from './Gradient';\nexport * from './Tooltip';\nexport * from './DatetimeText';\nexport * from './Path';\nexport * from './PriceText';\nexport * from './useDatetime';\nexport * from './useLineChart';\nexport * from './usePrice';\nexport * from './types';\n\nexport const LineChart = Object.assign(_LineChart, {\n  Chart: _LineChart,\n  Dot: LineChartDot,\n  Path: LineChartPathWrapper,\n  Cursor: LineChartCursor,\n  CursorCrosshair: LineChartCursorCrosshair,\n  CursorLine: LineChartCursorLine,\n  Gradient: LineChartGradient,\n  Group: LineChartGroup,\n  Highlight: LineChartHighlight,\n  HorizontalLine: LineChartHorizontalLine,\n  Tooltip: LineChartTooltip,\n  Provider: LineChartProvider,\n  PriceText: LineChartPriceText,\n  DatetimeText: LineChartDatetimeText,\n  useDatetime: useLineChartDatetime,\n  usePrice: useLineChartPrice,\n  useChart: useLineChart,\n});\n"]}
+{"version":3,"sources":["index.ts"],"names":["LineChart","Object","assign","_LineChart","Chart","Dot","LineChartDot","Path","LineChartPathWrapper","Cursor","LineChartCursor","CursorCrosshair","LineChartCursorCrosshair","CursorLine","LineChartCursorLine","Gradient","LineChartGradient","Group","LineChartGroup","Highlight","LineChartHighlight","HorizontalLine","LineChartHorizontalLine","Tooltip","LineChartTooltip","Provider","LineChartProvider","PriceText","LineChartPriceText","DatetimeText","LineChartDatetimeText","useDatetime","useLineChartDatetime","usePrice","useLineChartPrice","useChart","useLineChart","HoverTrap","LineChartHoverTrap"],"mappings":";;;;;;;;;;AAAA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AACA;;AACA;;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAhBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAgBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAfA;;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAjBA;;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAlBA;;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAhBA;;AAaA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAKA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAMA,SAAS,GAAGC,MAAM,CAACC,MAAP,CAAcC,gBAAd,EAA0B;AACjDC,EAAAA,KAAK,EAAED,gBAD0C;AAEjDE,EAAAA,GAAG,EAAEC,iBAF4C;AAGjDC,EAAAA,IAAI,EAAEC,+BAH2C;AAIjDC,EAAAA,MAAM,EAAEC,uBAJyC;AAKjDC,EAAAA,eAAe,EAAEC,yCALgC;AAMjDC,EAAAA,UAAU,EAAEC,+BANqC;AAOjDC,EAAAA,QAAQ,EAAEC,2BAPuC;AAQjDC,EAAAA,KAAK,EAAEC,qBAR0C;AASjDC,EAAAA,SAAS,EAAEC,6BATsC;AAUjDC,EAAAA,cAAc,EAAEC,uCAViC;AAWjDC,EAAAA,OAAO,EAAEC,yBAXwC;AAYjDC,EAAAA,QAAQ,EAAEC,0BAZuC;AAajDC,EAAAA,SAAS,EAAEC,6BAbsC;AAcjDC,EAAAA,YAAY,EAAEC,mCAdmC;AAejDC,EAAAA,WAAW,EAAEC,iCAfoC;AAgBjDC,EAAAA,QAAQ,EAAEC,2BAhBuC;AAiBjDC,EAAAA,QAAQ,EAAEC,0BAjBuC;AAkBjDC,EAAAA,SAAS,EAAEC;AAlBsC,CAA1B,CAAlB","sourcesContent":["import { LineChart as _LineChart } from './Chart';\nimport { LineChartPathWrapper } from './ChartPath';\nimport { LineChartHighlight } from './Highlight';\nimport { LineChartProvider } from './Context';\nimport { LineChartCursor } from './Cursor';\nimport { LineChartCursorCrosshair } from './CursorCrosshair';\nimport { LineChartCursorLine } from './CursorLine';\nimport { LineChartDot } from './Dot';\nimport { LineChartGradient } from './Gradient';\nimport { LineChartGroup } from './Group';\nimport { LineChartHorizontalLine } from './HorizontalLine';\nimport { LineChartTooltip } from './Tooltip';\nimport { LineChartPriceText } from './PriceText';\nimport { LineChartDatetimeText } from './DatetimeText';\nimport { useLineChartDatetime } from './useDatetime';\nimport { useLineChartPrice } from './usePrice';\nimport { useLineChart } from './useLineChart';\nimport { LineChartHoverTrap } from '../line/HoverTrap';\n\nexport * from './Chart';\nexport * from './ChartPath';\nexport * from './Highlight';\nexport * from './Context';\nexport * from './Cursor';\nexport * from './CursorCrosshair';\nexport * from './CursorLine';\nexport * from './Dot';\nexport * from './Gradient';\nexport * from './Tooltip';\nexport * from './DatetimeText';\nexport * from './Path';\nexport * from './PriceText';\nexport * from './useDatetime';\nexport * from './useLineChart';\nexport * from './usePrice';\nexport * from './types';\n\nexport const LineChart = Object.assign(_LineChart, {\n  Chart: _LineChart,\n  Dot: LineChartDot,\n  Path: LineChartPathWrapper,\n  Cursor: LineChartCursor,\n  CursorCrosshair: LineChartCursorCrosshair,\n  CursorLine: LineChartCursorLine,\n  Gradient: LineChartGradient,\n  Group: LineChartGroup,\n  Highlight: LineChartHighlight,\n  HorizontalLine: LineChartHorizontalLine,\n  Tooltip: LineChartTooltip,\n  Provider: LineChartProvider,\n  PriceText: LineChartPriceText,\n  DatetimeText: LineChartDatetimeText,\n  useDatetime: useLineChartDatetime,\n  usePrice: useLineChartPrice,\n  useChart: useLineChart,\n  HoverTrap: LineChartHoverTrap,\n});\n"]}

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

@@ -13,16 +13,17 @@ var _useLineChart = require("./useLineChart");
 
 function useLineChartPrice({
   format,
-  precision = 2
+  precision = 2,
+  index
 } = {}) {
   const {
     currentIndex,
     data
   } = (0, _useLineChart.useLineChart)();
   const float = (0, _reactNativeReanimated.useDerivedValue)(() => {
-    if (typeof currentIndex.value === 'undefined' || currentIndex.value === -1) return '';
+    if ((typeof currentIndex.value === 'undefined' || currentIndex.value === -1) && index == null) return '';
     let price = 0;
-    price = data[currentIndex.value].value;
+    price = data[Math.min(index !== null && index !== void 0 ? index : currentIndex.value, data.length - 1)].value;
     return price.toFixed(precision).toString();
   });
   const formatted = (0, _reactNativeReanimated.useDerivedValue)(() => {

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

@@ -1 +1 @@
-{"version":3,"sources":["usePrice.ts"],"names":["useLineChartPrice","format","precision","currentIndex","data","float","value","price","toFixed","toString","formatted","formattedPrice"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEO,SAASA,iBAAT,CAA2B;AAChCC,EAAAA,MADgC;AAEhCC,EAAAA,SAAS,GAAG;AAFoB,IAGyB,EAHpD,EAGwD;AAC7D,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAyB,iCAA/B;AAEA,QAAMC,KAAK,GAAG,4CAAgB,MAAM;AAClC,QAAI,OAAOF,YAAY,CAACG,KAApB,KAA8B,WAA9B,IAA6CH,YAAY,CAACG,KAAb,KAAuB,CAAC,CAAzE,EACE,OAAO,EAAP;AACF,QAAIC,KAAK,GAAG,CAAZ;AACAA,IAAAA,KAAK,GAAGH,IAAI,CAACD,YAAY,CAACG,KAAd,CAAJ,CAAyBA,KAAjC;AACA,WAAOC,KAAK,CAACC,OAAN,CAAcN,SAAd,EAAyBO,QAAzB,EAAP;AACD,GANa,CAAd;AAOA,QAAMC,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAIJ,KAAK,GAAGD,KAAK,CAACC,KAAN,IAAe,EAA3B;AACA,UAAMK,cAAc,GAAGL,KAAK,GAAG,wBAAY;AAAEA,MAAAA;AAAF,KAAZ,CAAH,GAA4B,EAAxD;AACA,WAAOL,MAAM,GACTA,MAAM,CAAC;AAAEK,MAAAA,KAAF;AAASI,MAAAA,SAAS,EAAEC;AAApB,KAAD,CADG,GAETA,cAFJ;AAGD,GANiB,CAAlB;AAQA,SAAO;AAAEL,IAAAA,KAAK,EAAED,KAAT;AAAgBK,IAAAA;AAAhB,GAAP;AACD","sourcesContent":["import { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatPrice } from '../../utils';\nimport type { TFormatterFn } from '../candle/types';\nimport { useLineChart } from './useLineChart';\n\nexport function useLineChartPrice({\n  format,\n  precision = 2,\n}: { format?: TFormatterFn<string>; precision?: number } = {}) {\n  const { currentIndex, data } = useLineChart();\n\n  const float = useDerivedValue(() => {\n    if (typeof currentIndex.value === 'undefined' || currentIndex.value === -1)\n      return '';\n    let price = 0;\n    price = data[currentIndex.value].value;\n    return price.toFixed(precision).toString();\n  });\n  const formatted = useDerivedValue(() => {\n    let value = float.value || '';\n    const formattedPrice = value ? formatPrice({ value }) : '';\n    return format\n      ? format({ value, formatted: formattedPrice })\n      : formattedPrice;\n  });\n\n  return { value: float, formatted };\n}\n"]}
+{"version":3,"sources":["usePrice.ts"],"names":["useLineChartPrice","format","precision","index","currentIndex","data","float","value","price","Math","min","length","toFixed","toString","formatted","formattedPrice"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEO,SAASA,iBAAT,CAA2B;AAChCC,EAAAA,MADgC;AAEhCC,EAAAA,SAAS,GAAG,CAFoB;AAGhCC,EAAAA;AAHgC,IAIyC,EAJpE,EAIwE;AAC7E,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAyB,iCAA/B;AAEA,QAAMC,KAAK,GAAG,4CAAgB,MAAM;AAClC,QACE,CAAC,OAAOF,YAAY,CAACG,KAApB,KAA8B,WAA9B,IACCH,YAAY,CAACG,KAAb,KAAuB,CAAC,CAD1B,KAEAJ,KAAK,IAAI,IAHX,EAKE,OAAO,EAAP;AACF,QAAIK,KAAK,GAAG,CAAZ;AACAA,IAAAA,KAAK,GAAGH,IAAI,CAACI,IAAI,CAACC,GAAL,CAASP,KAAT,aAASA,KAAT,cAASA,KAAT,GAAkBC,YAAY,CAACG,KAA/B,EAAsCF,IAAI,CAACM,MAAL,GAAc,CAApD,CAAD,CAAJ,CAA6DJ,KAArE;AACA,WAAOC,KAAK,CAACI,OAAN,CAAcV,SAAd,EAAyBW,QAAzB,EAAP;AACD,GAVa,CAAd;AAWA,QAAMC,SAAS,GAAG,4CAAgB,MAAM;AACtC,QAAIP,KAAK,GAAGD,KAAK,CAACC,KAAN,IAAe,EAA3B;AACA,UAAMQ,cAAc,GAAGR,KAAK,GAAG,wBAAY;AAAEA,MAAAA;AAAF,KAAZ,CAAH,GAA4B,EAAxD;AACA,WAAON,MAAM,GACTA,MAAM,CAAC;AAAEM,MAAAA,KAAF;AAASO,MAAAA,SAAS,EAAEC;AAApB,KAAD,CADG,GAETA,cAFJ;AAGD,GANiB,CAAlB;AAQA,SAAO;AAAER,IAAAA,KAAK,EAAED,KAAT;AAAgBQ,IAAAA;AAAhB,GAAP;AACD","sourcesContent":["import { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatPrice } from '../../utils';\nimport type { TFormatterFn } from '../candle/types';\nimport { useLineChart } from './useLineChart';\n\nexport function useLineChartPrice({\n  format,\n  precision = 2,\n  index,\n}: { format?: TFormatterFn<string>; precision?: number; index?: number } = {}) {\n  const { currentIndex, data } = useLineChart();\n\n  const float = useDerivedValue(() => {\n    if (\n      (typeof currentIndex.value === 'undefined' ||\n        currentIndex.value === -1) &&\n      index == null\n    )\n      return '';\n    let price = 0;\n    price = data[Math.min(index ?? currentIndex.value, data.length - 1)].value;\n    return price.toFixed(precision).toString();\n  });\n  const formatted = useDerivedValue(() => {\n    let value = float.value || '';\n    const formattedPrice = value ? formatPrice({ value }) : '';\n    return format\n      ? format({ value, formatted: formattedPrice })\n      : formattedPrice;\n  });\n\n  return { value: float, formatted };\n}\n"]}

package/lib/commonjs/components/AnimatedText.js

@@ -28,7 +28,8 @@ const AnimatedText = ({
   text,
   style
 }) => {
-  const inputRef = _react.default.useRef(null);
+  const inputRef = _react.default.useRef(null); // eslint-disable-line @typescript-eslint/no-explicit-any
+
 
   if (_reactNative.Platform.OS === 'web') {
     // For some reason, the worklet reaction evaluates upfront regardless of any
@@ -40,10 +41,7 @@ const AnimatedText = ({
       return text.value;
     }, (data, prevData) => {
       if (data !== prevData && inputRef.current) {
-        inputRef.current.setNativeProps({
-          value: data,
-          style
-        });
+        inputRef.current.value = data;
       }
     });
   }

package/lib/commonjs/components/AnimatedText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimatedText.tsx"],"names":["Animated","addWhitelistedNativeProps","text","AnimatedTextInput","createAnimatedComponent","TextInput","AnimatedText","style","inputRef","React","useRef","Platform","OS","value","data","prevData","current","setNativeProps","animatedProps","select","web","styles","StyleSheet","create","color"],"mappings":";;;;;;;AAEA;;AACA;;AAEA;;;;;;;;AALA;AAUAA,+BAASC,yBAAT,CAAmC;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnC;;AAOA,MAAMC,iBAAiB,GAAGH,+BAASI,uBAAT,CAAiCC,sBAAjC,CAA1B;;AAEO,MAAMC,YAAY,GAAG,CAAC;AAAEJ,EAAAA,IAAF;AAAQK,EAAAA;AAAR,CAAD,KAAwC;AAClE,QAAMC,QAAQ,GAAGC,eAAMC,MAAN,CAAwB,IAAxB,CAAjB;;AAEA,MAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzB;AACA;AACA;AACA;AAEA;AACA,oDACE,MAAM;AACJ,aAAOV,IAAI,CAACW,KAAZ;AACD,KAHH,EAIE,CAACC,IAAD,EAAOC,QAAP,KAAoB;AAClB,UAAID,IAAI,KAAKC,QAAT,IAAqBP,QAAQ,CAACQ,OAAlC,EAA2C;AACzCR,QAAAA,QAAQ,CAACQ,OAAT,CAAiBC,cAAjB,CAAgC;AAC9BJ,UAAAA,KAAK,EAAEC,IADuB;AAE9BP,UAAAA;AAF8B,SAAhC;AAID;AACF,KAXH;AAaD;;AACD,QAAMW,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLhB,MAAAA,IAAI,EAAEA,IAAI,CAACW,KADN,CAEL;AACA;;AAHK,KAAP;AAKD,GANqB,CAAtB;AAOA,sBACE,6BAAC,iBAAD;AACE,IAAA,qBAAqB,EAAC,aADxB;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,IAAA,GAAG,EAAEF,sBAASQ,MAAT,CAAgB;AAAEC,MAAAA,GAAG,EAAEZ;AAAP,KAAhB,CAHP;AAIE,IAAA,KAAK,EAAEN,IAAI,CAACW,KAJd;AAKE,IAAA,KAAK,EAAE,CAACQ,MAAM,CAACnB,IAAR,EAAcK,KAAd,CALT;AAME,IAAA,aAAa,EAAEW;AANjB,IADF;AAUD,CAzCM;;;;AA2CP,MAAMG,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BrB,EAAAA,IAAI,EAAE;AACJsB,IAAAA,KAAK,EAAE;AADH;AADyB,CAAlB,CAAf","sourcesContent":["// forked from https://github.com/wcandillon/react-native-redash/blob/master/src/ReText.tsx\n\nimport React from 'react';\nimport { Platform, StyleSheet, TextProps as RNTextProps } from 'react-native';\nimport { TextInput } from 'react-native';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n} from 'react-native-reanimated';\n\nAnimated.addWhitelistedNativeProps({ text: true });\n\ninterface AnimatedTextProps {\n  text: Animated.SharedValue<string>;\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n}\n\nconst AnimatedTextInput = Animated.createAnimatedComponent(TextInput);\n\nexport const AnimatedText = ({ text, style }: AnimatedTextProps) => {\n  const inputRef = React.useRef<TextInput>(null);\n\n  if (Platform.OS === 'web') {\n    // For some reason, the worklet reaction evaluates upfront regardless of any\n    // conditionals within it, causing Android to crash upon the invokation of `setNativeProps`.\n    // We are going to break the rules of hooks here so it doesn't invoke `useAnimatedReaction`\n    // for platforms outside of the web.\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useAnimatedReaction(\n      () => {\n        return text.value;\n      },\n      (data, prevData) => {\n        if (data !== prevData && inputRef.current) {\n          inputRef.current.setNativeProps({\n            value: data,\n            style,\n          });\n        }\n      }\n    );\n  }\n  const animatedProps = useAnimatedProps(() => {\n    return {\n      text: text.value,\n      // Here we use any because the text prop is not available in the type\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any;\n  });\n  return (\n    <AnimatedTextInput\n      underlineColorAndroid=\"transparent\"\n      editable={false}\n      ref={Platform.select({ web: inputRef })}\n      value={text.value}\n      style={[styles.text, style]}\n      animatedProps={animatedProps}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    color: 'black',\n  },\n});\n"]}
+{"version":3,"sources":["AnimatedText.tsx"],"names":["Animated","addWhitelistedNativeProps","text","AnimatedTextInput","createAnimatedComponent","TextInput","AnimatedText","style","inputRef","React","useRef","Platform","OS","value","data","prevData","current","animatedProps","select","web","styles","StyleSheet","create","color"],"mappings":";;;;;;;AAEA;;AACA;;AAEA;;;;;;;;AALA;AAUAA,+BAASC,yBAAT,CAAmC;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnC;;AAOA,MAAMC,iBAAiB,GAAGH,+BAASI,uBAAT,CAAiCC,sBAAjC,CAA1B;;AAEO,MAAMC,YAAY,GAAG,CAAC;AAAEJ,EAAAA,IAAF;AAAQK,EAAAA;AAAR,CAAD,KAAwC;AAClE,QAAMC,QAAQ,GAAGC,eAAMC,MAAN,CAAkB,IAAlB,CAAjB,CADkE,CACxB;;;AAE1C,MAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzB;AACA;AACA;AACA;AAEA;AACA,oDACE,MAAM;AACJ,aAAOV,IAAI,CAACW,KAAZ;AACD,KAHH,EAIE,CAACC,IAAD,EAAOC,QAAP,KAAoB;AAClB,UAAID,IAAI,KAAKC,QAAT,IAAqBP,QAAQ,CAACQ,OAAlC,EAA2C;AACzCR,QAAAA,QAAQ,CAACQ,OAAT,CAAiBH,KAAjB,GAAyBC,IAAzB;AACD;AACF,KARH;AAUD;;AACD,QAAMG,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLf,MAAAA,IAAI,EAAEA,IAAI,CAACW,KADN,CAEL;AACA;;AAHK,KAAP;AAKD,GANqB,CAAtB;AAOA,sBACE,6BAAC,iBAAD;AACE,IAAA,qBAAqB,EAAC,aADxB;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,IAAA,GAAG,EAAEF,sBAASO,MAAT,CAAgB;AAAEC,MAAAA,GAAG,EAAEX;AAAP,KAAhB,CAHP;AAIE,IAAA,KAAK,EAAEN,IAAI,CAACW,KAJd;AAKE,IAAA,KAAK,EAAE,CAACO,MAAM,CAAClB,IAAR,EAAcK,KAAd,CALT;AAME,IAAA,aAAa,EAAEU;AANjB,IADF;AAUD,CAtCM;;;;AAwCP,MAAMG,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BpB,EAAAA,IAAI,EAAE;AACJqB,IAAAA,KAAK,EAAE;AADH;AADyB,CAAlB,CAAf","sourcesContent":["// forked from https://github.com/wcandillon/react-native-redash/blob/master/src/ReText.tsx\n\nimport React from 'react';\nimport { Platform, StyleSheet, TextProps as RNTextProps } from 'react-native';\nimport { TextInput } from 'react-native';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n} from 'react-native-reanimated';\n\nAnimated.addWhitelistedNativeProps({ text: true });\n\ninterface AnimatedTextProps {\n  text: Animated.SharedValue<string>;\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n}\n\nconst AnimatedTextInput = Animated.createAnimatedComponent(TextInput);\n\nexport const AnimatedText = ({ text, style }: AnimatedTextProps) => {\n  const inputRef = React.useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  if (Platform.OS === 'web') {\n    // For some reason, the worklet reaction evaluates upfront regardless of any\n    // conditionals within it, causing Android to crash upon the invokation of `setNativeProps`.\n    // We are going to break the rules of hooks here so it doesn't invoke `useAnimatedReaction`\n    // for platforms outside of the web.\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useAnimatedReaction(\n      () => {\n        return text.value;\n      },\n      (data, prevData) => {\n        if (data !== prevData && inputRef.current) {\n          inputRef.current.value = data;\n        }\n      }\n    );\n  }\n  const animatedProps = useAnimatedProps(() => {\n    return {\n      text: text.value,\n      // Here we use any because the text prop is not available in the type\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any;\n  });\n  return (\n    <AnimatedTextInput\n      underlineColorAndroid=\"transparent\"\n      editable={false}\n      ref={Platform.select({ web: inputRef })}\n      value={text.value}\n      style={[styles.text, style]}\n      animatedProps={animatedProps}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    color: 'black',\n  },\n});\n"]}

package/lib/module/charts/candle/HoverTrap/index.web.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { parse } from 'react-native-redash';
+import { LineChartDimensionsContext } from '../../line/Chart';
+import { useLineChart } from '../../line/useLineChart'; // @ts-expect-error missing types
+
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+let isEnabled = false; // the following logic comes from the creator of react-native-web
+// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
+// it's also used by MotiPressable's hover interactions
+// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx
+
+if (canUseDOM) {
+  /**
+   * Web browsers emulate mouse events (and hover states) after touch events.
+   * This code infers when the currently-in-use modality supports hover
+   * (including for multi-modality devices) and considers "hover" to be enabled
+   * if a mouse movement occurs more than 1 second after the last touch event.
+   * This threshold is long enough to account for longer delays between the
+   * browser firing touch and mouse events on low-powered devices.
+   */
+  const HOVER_THRESHOLD_MS = 1000;
+  let lastTouchTimestamp = 0;
+
+  function enableHover() {
+    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {
+      return;
+    }
+
+    isEnabled = true;
+  }
+
+  function disableHover() {
+    lastTouchTimestamp = Date.now();
+
+    if (isEnabled) {
+      isEnabled = false;
+    }
+  }
+
+  document.addEventListener('touchstart', disableHover, true);
+  document.addEventListener('touchmove', disableHover, true);
+  document.addEventListener('mousemove', enableHover, true);
+}
+
+function isHoverEnabled() {
+  return isEnabled;
+}
+
+export const LineChartHoverTrap = () => {
+  const {
+    width,
+    path
+  } = React.useContext(LineChartDimensionsContext);
+  const {
+    currentX,
+    currentIndex,
+    isActive,
+    data
+  } = useLineChart();
+  const parsedPath = React.useMemo(() => path ? parse(path) : undefined, [path]);
+  const onMouseMove = React.useCallback(({
+    x
+  }) => {
+    if (isHoverEnabled()) {
+      if (parsedPath) {
+        const boundedX = Math.min(x, width);
+        isActive.value = true;
+        currentX.value = boundedX; // on Web, we could drag the cursor to be negative, breaking it
+        // so we clamp the index at 0 to fix it
+        // https://github.com/coinjar/react-native-wagmi-charts/issues/24
+
+        const minIndex = 0;
+        const boundedIndex = Math.max(minIndex, Math.round(boundedX / width / (1 / (data.length - 1))));
+        currentIndex.value = boundedIndex;
+      }
+    } else {
+      isActive.value = false;
+      currentIndex.value = -1;
+    }
+  }, [currentIndex, currentX, data.length, isActive, parsedPath, width]);
+  const onMouseLeave = React.useCallback(() => {
+    isActive.value = false;
+    currentIndex.value = -1;
+  }, [currentIndex, isActive]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: StyleSheet.absoluteFill // @ts-expect-error mouse move event
+    ,
+    onMouseMove: React.useCallback( // eslint-disable-next-line no-undef
+    e => {
+      let rect = e.currentTarget.getBoundingClientRect();
+      let x = e.clientX - rect.left; // x position within the element.
+
+      onMouseMove({
+        x
+      });
+    }, [onMouseMove]),
+    onMouseLeave: onMouseLeave
+  });
+};
+//# sourceMappingURL=index.web.js.map

package/lib/module/charts/candle/HoverTrap/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.web.tsx"],"names":["React","View","StyleSheet","parse","LineChartDimensionsContext","useLineChart","canUseDOM","isEnabled","HOVER_THRESHOLD_MS","lastTouchTimestamp","enableHover","Date","now","disableHover","document","addEventListener","isHoverEnabled","LineChartHoverTrap","width","path","useContext","currentX","currentIndex","isActive","data","parsedPath","useMemo","undefined","onMouseMove","useCallback","x","boundedX","Math","min","value","minIndex","boundedIndex","max","round","length","onMouseLeave","absoluteFill","e","rect","currentTarget","getBoundingClientRect","clientX","left"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { parse } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from '../../line/Chart';\nimport { useLineChart } from '../../line/useLineChart';\n\n// @ts-expect-error missing types\nimport { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';\n\nlet isEnabled = false;\n\n// the following logic comes from the creator of react-native-web\n// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a\n// it's also used by MotiPressable's hover interactions\n// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx\nif (canUseDOM) {\n  /**\n   * Web browsers emulate mouse events (and hover states) after touch events.\n   * This code infers when the currently-in-use modality supports hover\n   * (including for multi-modality devices) and considers \"hover\" to be enabled\n   * if a mouse movement occurs more than 1 second after the last touch event.\n   * This threshold is long enough to account for longer delays between the\n   * browser firing touch and mouse events on low-powered devices.\n   */\n  const HOVER_THRESHOLD_MS = 1000;\n  let lastTouchTimestamp = 0;\n\n  function enableHover() {\n    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {\n      return;\n    }\n    isEnabled = true;\n  }\n\n  function disableHover() {\n    lastTouchTimestamp = Date.now();\n    if (isEnabled) {\n      isEnabled = false;\n    }\n  }\n\n  document.addEventListener('touchstart', disableHover, true);\n  document.addEventListener('touchmove', disableHover, true);\n  document.addEventListener('mousemove', enableHover, true);\n}\n\nfunction isHoverEnabled(): boolean {\n  return isEnabled;\n}\n\nexport const LineChartHoverTrap = () => {\n  const { width, path } = React.useContext(LineChartDimensionsContext);\n  const { currentX, currentIndex, isActive, data } = useLineChart();\n\n  const parsedPath = React.useMemo(\n    () => (path ? parse(path) : undefined),\n    [path]\n  );\n\n  const onMouseMove = React.useCallback(\n    ({ x }: { x: number }) => {\n      if (isHoverEnabled()) {\n        if (parsedPath) {\n          const boundedX = Math.min(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      } else {\n        isActive.value = false;\n        currentIndex.value = -1;\n      }\n    },\n    [currentIndex, currentX, data.length, isActive, parsedPath, width]\n  );\n\n  const onMouseLeave = React.useCallback(() => {\n    isActive.value = false;\n    currentIndex.value = -1;\n  }, [currentIndex, isActive]);\n\n  return (\n    <View\n      style={StyleSheet.absoluteFill}\n      // @ts-expect-error mouse move event\n      onMouseMove={React.useCallback(\n        // eslint-disable-next-line no-undef\n        (e: React.MouseEvent<HTMLElement>) => {\n          let rect = e.currentTarget.getBoundingClientRect();\n          let x = e.clientX - rect.left; // x position within the element.\n\n          onMouseMove({ x });\n        },\n        [onMouseMove]\n      )}\n      onMouseLeave={onMouseLeave}\n    />\n  );\n};\n"]}

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

@@ -7,9 +7,12 @@ import { Dimensions, StyleSheet, View } from 'react-native';
 import { LineChartContext } from './Context';
 import { LineChartIdProvider, useLineChartData } from './Data';
 import { getArea, getPath } from './utils';
+import { parse } from 'react-native-redash';
 export const LineChartDimensionsContext = /*#__PURE__*/React.createContext({
   width: 0,
   height: 0,
+  pointWidth: 0,
+  parsedPath: {},
   path: '',
   area: '',
   shape: d3Shape.curveBumpX,
@@ -76,15 +79,20 @@ export function LineChart({
 
     return '';
   }, [data, pathWidth, height, yGutter, shape, yDomain]);
+  const dataLength = data.length;
+  const parsedPath = React.useMemo(() => parse(path), [path]);
+  const pointWidth = React.useMemo(() => width / (dataLength - 1), [dataLength, width]);
   const contextValue = React.useMemo(() => ({
     gutter: yGutter,
+    parsedPath,
+    pointWidth,
     area,
     path,
     width,
     height,
     pathWidth,
     shape
-  }), [yGutter, area, path, width, height, pathWidth, shape]);
+  }), [yGutter, parsedPath, pointWidth, area, path, width, height, pathWidth, shape]);
   return /*#__PURE__*/React.createElement(LineChartIdProvider, {
     id: id
   }, /*#__PURE__*/React.createElement(LineChartDimensionsContext.Provider, {

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

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

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

@@ -6,16 +6,12 @@ import { Svg } from 'react-native-svg';
 import Animated, { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
 import flattenChildren from 'react-keyed-flatten-children';
 import { LineChartDimensionsContext } from './Chart';
+import { LineChartPathContext } from './LineChartPathContext';
 import { LineChartPath } from './Path';
 import { useLineChart } from './useLineChart';
-const BACKGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartHorizontalLine', 'LineChartGradient', 'LineChartDot'];
+const BACKGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartHorizontalLine', 'LineChartGradient', 'LineChartDot', 'LineChartTooltip'];
 const FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];
 const AnimatedSVG = Animated.createAnimatedComponent(Svg);
-export const LineChartPathContext = /*#__PURE__*/React.createContext({
-  color: '',
-  isInactive: false,
-  isTransitionEnabled: true
-});
 LineChartPathWrapper.displayName = 'LineChartPathWrapper';
 export function LineChartPathWrapper({
   animationDuration = 300,
@@ -51,12 +47,17 @@ export function LineChartPathWrapper({
   const svgProps = useAnimatedProps(() => {
     const shouldAnimateOnMount = animateOnMount === 'foreground';
     const inactiveWidth = !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
-    const duration = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationDuration : animationDuration;
+    let duration = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationDuration : animationDuration;
     const props = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationProps : animationProps;
+
+    if (isActive.value) {
+      duration = 0;
+    }
+
     return {
-      width: isActive.value ? // on Web, <svg /> elements don't support negative widths
+      width: withTiming(isActive.value ? // on Web, <svg /> elements don't support negative widths
       // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
-      Math.max(currentX.value, 0) : withTiming(inactiveWidth + widthOffset, Object.assign({
+      Math.max(currentX.value, 0) : inactiveWidth + widthOffset, Object.assign({
         duration
       }, props), () => {
         hasMountedAnimation.value = true;

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

@@ -1 +1 @@
-{"version":3,"sources":["ChartPath.tsx"],"names":["React","StyleSheet","View","Svg","Animated","useAnimatedProps","useSharedValue","withTiming","flattenChildren","LineChartDimensionsContext","LineChartPath","useLineChart","BACKGROUND_COMPONENTS","FOREGROUND_COMPONENTS","AnimatedSVG","createAnimatedComponent","LineChartPathContext","createContext","color","isInactive","isTransitionEnabled","LineChartPathWrapper","displayName","animationDuration","animationProps","children","inactiveColor","width","strokeWidth","widthOffset","pathProps","showInactivePath","animateOnMount","mountAnimationDuration","mountAnimationProps","height","pathWidth","useContext","currentX","isActive","isMounted","hasMountedAnimation","useEffect","value","svgProps","shouldAnimateOnMount","inactiveWidth","duration","props","Math","max","Object","assign","viewSize","useMemo","backgroundChildren","foregroundChildren","iterableChildren","filter","child","includes","type","absoluteFill"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport Animated, {\n  useAnimatedProps,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPath, LineChartPathProps } from './Path';\nimport { useLineChart } from './useLineChart';\n\nconst BACKGROUND_COMPONENTS = [\n  'LineChartHighlight',\n  'LineChartHorizontalLine',\n  'LineChartGradient',\n  'LineChartDot',\n];\nconst FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];\n\nconst AnimatedSVG = Animated.createAnimatedComponent(Svg);\n\nexport const LineChartPathContext = React.createContext({\n  color: '',\n  isInactive: false,\n  isTransitionEnabled: true,\n});\n\ntype LineChartPathWrapperProps = {\n  animationDuration?: number;\n  animationProps?: Partial<Animated.WithTimingConfig>;\n  children?: React.ReactNode;\n  color?: string;\n  inactiveColor?: string;\n  width?: number;\n  widthOffset?: number;\n  pathProps?: Partial<LineChartPathProps>;\n  showInactivePath?: boolean;\n  animateOnMount?: 'foreground';\n  mountAnimationDuration?: number;\n  mountAnimationProps?: Partial<Animated.WithTimingConfig>;\n};\n\nLineChartPathWrapper.displayName = 'LineChartPathWrapper';\n\nexport function LineChartPathWrapper({\n  animationDuration = 300,\n  animationProps = {},\n  children,\n  color = 'black',\n  inactiveColor,\n  width: strokeWidth = 3,\n  widthOffset = 20,\n  pathProps = {},\n  showInactivePath = true,\n  animateOnMount,\n  mountAnimationDuration = animationDuration,\n  mountAnimationProps = animationProps,\n}: LineChartPathWrapperProps) {\n  const { height, pathWidth, width } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, isActive } = useLineChart();\n  const isMounted = useSharedValue(false);\n  const hasMountedAnimation = useSharedValue(false);\n\n  React.useEffect(() => {\n    isMounted.value = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  ////////////////////////////////////////////////\n\n  const svgProps = useAnimatedProps(() => {\n    const shouldAnimateOnMount = animateOnMount === 'foreground';\n    const inactiveWidth =\n      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;\n\n    const duration =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationDuration\n        : animationDuration;\n    const props =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationProps\n        : animationProps;\n\n    return {\n      width: isActive.value\n        ? // on Web, <svg /> elements don't support negative widths\n          // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904\n          Math.max(currentX.value, 0)\n        : withTiming(\n            inactiveWidth + widthOffset,\n            Object.assign({ duration }, props),\n            () => {\n              hasMountedAnimation.value = true;\n            }\n          ),\n    };\n  });\n\n  const viewSize = React.useMemo(() => ({ width, height }), [width, height]);\n\n  ////////////////////////////////////////////////\n\n  let backgroundChildren;\n  let foregroundChildren;\n  if (children) {\n    const iterableChildren = flattenChildren(children);\n    backgroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      BACKGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n    foregroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      FOREGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n  }\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: showInactivePath,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={viewSize}>\n          <Svg width={width} height={height}>\n            <LineChartPath\n              color={color}\n              inactiveColor={inactiveColor}\n              width={strokeWidth}\n              {...pathProps}\n            />\n            {backgroundChildren}\n          </Svg>\n        </View>\n      </LineChartPathContext.Provider>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: false,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={StyleSheet.absoluteFill}>\n          <AnimatedSVG animatedProps={svgProps} height={height}>\n            <LineChartPath color={color} width={strokeWidth} {...pathProps} />\n            {foregroundChildren}\n          </AnimatedSVG>\n        </View>\n      </LineChartPathContext.Provider>\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["ChartPath.tsx"],"names":["React","StyleSheet","View","Svg","Animated","useAnimatedProps","useSharedValue","withTiming","flattenChildren","LineChartDimensionsContext","LineChartPathContext","LineChartPath","useLineChart","BACKGROUND_COMPONENTS","FOREGROUND_COMPONENTS","AnimatedSVG","createAnimatedComponent","LineChartPathWrapper","displayName","animationDuration","animationProps","children","color","inactiveColor","width","strokeWidth","widthOffset","pathProps","showInactivePath","animateOnMount","mountAnimationDuration","mountAnimationProps","height","pathWidth","useContext","currentX","isActive","isMounted","hasMountedAnimation","useEffect","value","svgProps","shouldAnimateOnMount","inactiveWidth","duration","props","Math","max","Object","assign","viewSize","useMemo","backgroundChildren","foregroundChildren","iterableChildren","filter","child","includes","type","isInactive","isTransitionEnabled","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\n  const viewSize = React.useMemo(() => ({ width, height }), [width, height]);\n\n  ////////////////////////////////////////////////\n\n  let backgroundChildren;\n  let foregroundChildren;\n  if (children) {\n    const iterableChildren = flattenChildren(children);\n    backgroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      BACKGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n    foregroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      FOREGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n  }\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: showInactivePath,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={viewSize}>\n          <Svg width={width} height={height}>\n            <LineChartPath\n              color={color}\n              inactiveColor={inactiveColor}\n              width={strokeWidth}\n              {...pathProps}\n            />\n            {backgroundChildren}\n          </Svg>\n        </View>\n      </LineChartPathContext.Provider>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: false,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={StyleSheet.absoluteFill}>\n          <AnimatedSVG animatedProps={svgProps} height={height}>\n            <LineChartPath color={color} width={strokeWidth} {...pathProps} />\n            {foregroundChildren}\n          </AnimatedSVG>\n        </View>\n      </LineChartPathContext.Provider>\n    </>\n  );\n}\n"]}

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

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { LongPressGestureHandler } from 'react-native-gesture-handler';
 import Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';
-import { parse } from 'react-native-redash';
 import { LineChartDimensionsContext } from './Chart';
 import { useLineChart } from './useLineChart';
 export const CursorContext = /*#__PURE__*/React.createContext({
@@ -18,7 +17,7 @@ export function LineChartCursor({
 }) {
   const {
     pathWidth: width,
-    path
+    parsedPath
   } = React.useContext(LineChartDimensionsContext);
   const {
     currentX,
@@ -26,13 +25,12 @@ export function LineChartCursor({
     isActive,
     data
   } = useLineChart();
-  const parsedPath = React.useMemo(() => path ? parse(path) : undefined, [path]);
   const onGestureEvent = useAnimatedGestureHandler({
     onActive: ({
       x
     }) => {
       if (parsedPath) {
-        const boundedX = x <= width ? x : width;
+        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
         // so we clamp the index at 0 to fix it

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

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

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

@@ -3,9 +3,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import * as React from 'react';
 import Animated, { Easing, useAnimatedProps, useDerivedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
 import { Circle } from 'react-native-svg';
-import { getYForX, parse } from 'react-native-redash';
+import { getYForX } from 'react-native-redash';
 import { LineChartDimensionsContext } from './Chart';
-import { LineChartPathContext } from './ChartPath';
+import { LineChartPathContext } from './LineChartPathContext';
 import { useLineChart } from './useLineChart';
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 LineChartDot.displayName = 'LineChartDot';
@@ -24,12 +24,11 @@ export function LineChartDot({
   outerSize = size * 4
 }) {
   const {
-    data,
     isActive
   } = useLineChart();
   const {
-    path,
-    pathWidth: width
+    parsedPath,
+    pointWidth
   } = React.useContext(LineChartDimensionsContext); ////////////////////////////////////////////////////////////
 
   const {
@@ -40,10 +39,6 @@ export function LineChartDot({
   const opacity = isInactive && !inactiveColor ? 0.5 : 1;
   const hasOuterDot = defaultHasOuterDot || hasPulse; ////////////////////////////////////////////////////////////
 
-  const parsedPath = React.useMemo(() => parse(path), [path]); ////////////////////////////////////////////////////////////
-
-  const pointWidth = React.useMemo(() => width / (data.length - 1), [data.length, width]); ////////////////////////////////////////////////////////////
-
   const x = useDerivedValue(() => withTiming(pointWidth * at));
   const y = useDerivedValue(() => withTiming(getYForX(parsedPath, x.value) || 0)); ////////////////////////////////////////////////////////////