react-native-wagmi-charts 2.0.1 → 2.2.0

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

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

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import Animated from 'react-native-reanimated';
 import { Defs, LinearGradient, Stop, Path } from 'react-native-svg';
 import { LineChartDimensionsContext } from './Chart';
-import { LineChartPathContext } from './ChartPath';
+import { LineChartPathContext } from './LineChartPathContext';
 import useAnimatedPath from './useAnimatedPath';
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 let id = 0;

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

@@ -1 +1 @@
-{"version":3,"sources":["Gradient.tsx"],"names":["React","Animated","Defs","LinearGradient","Stop","Path","LineChartDimensionsContext","LineChartPathContext","useAnimatedPath","AnimatedPath","createAnimatedComponent","id","LineChartGradient","displayName","color","overrideColor","undefined","children","props","area","useContext","contextColor","isTransitionEnabled","animatedProps","enabled","path","localId","useRef","current"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,SAASC,IAAT,EAAeC,cAAf,EAA+BC,IAA/B,EAAqCC,IAArC,QAA4D,kBAA5D;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,oBAAT,QAAqC,aAArC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,MAAMC,YAAY,GAAGR,QAAQ,CAACS,uBAAT,CAAiCL,IAAjC,CAArB;AAOA,IAAIM,EAAE,GAAG,CAAT;AAEAC,iBAAiB,CAACC,WAAlB,GAAgC,mBAAhC;AAEA,OAAO,SAASD,iBAAT,CAA2B;AAChCE,EAAAA,KAAK,EAAEC,aAAa,GAAGC,SADS;AAEhCC,EAAAA,QAFgC;AAGhC,KAAGC;AAH6B,CAA3B,EAIoB;AACzB,QAAM;AAAEC,IAAAA;AAAF,MAAWnB,KAAK,CAACoB,UAAN,CAAiBd,0BAAjB,CAAjB;AACA,QAAM;AAAEQ,IAAAA,KAAK,EAAEO,YAAT;AAAuBC,IAAAA;AAAvB,MACJtB,KAAK,CAACoB,UAAN,CAAiBb,oBAAjB,CADF;AAGA,QAAMO,KAAK,GAAGC,aAAa,IAAIM,YAA/B,CALyB,CAOzB;;AAEA,QAAM;AAAEE,IAAAA;AAAF,MAAoBf,eAAe,CAAC;AACxCgB,IAAAA,OAAO,EAAEF,mBAD+B;AAExCG,IAAAA,IAAI,EAAEN;AAFkC,GAAD,CAAzC,CATyB,CAczB;;AAEA,QAAMO,OAAO,GAAG1B,KAAK,CAAC2B,MAAN,CAAa,EAAEhB,EAAf,CAAhB,CAhByB,CAkBzB;;AAEA,sBACE,0CACGM,QAAQ,gBACP,oBAAC,IAAD,qBACE,oBAAC,cAAD;AACE,IAAA,EAAE,EAAG,GAAES,OAAO,CAACE,OAAQ,EADzB;AAEE,IAAA,EAAE,EAAC,GAFL;AAGE,IAAA,EAAE,EAAC,GAHL;AAIE,IAAA,EAAE,EAAC,GAJL;AAKE,IAAA,EAAE,EAAC;AALL,KAOGX,QAPH,CADF,CADO,gBAaP,oBAAC,IAAD,qBACE,oBAAC,cAAD;AACE,IAAA,EAAE,EAAG,GAAES,OAAO,CAACE,OAAQ,EADzB;AAEE,IAAA,EAAE,EAAC,GAFL;AAGE,IAAA,EAAE,EAAC,GAHL;AAIE,IAAA,EAAE,EAAC,GAJL;AAKE,IAAA,EAAE,EAAC;AALL,kBAOE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,KAAb;AAAmB,IAAA,SAAS,EAAEd,KAA9B;AAAqC,IAAA,WAAW,EAAE;AAAlD,IAPF,eAQE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,KAAb;AAAmB,IAAA,SAAS,EAAEA,KAA9B;AAAqC,IAAA,WAAW,EAAE;AAAlD,IARF,eASE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,MAAb;AAAoB,IAAA,SAAS,EAAEA,KAA/B;AAAsC,IAAA,WAAW,EAAE;AAAnD,IATF,CADF,CAdJ,eA4BE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAES,aADjB;AAEE,IAAA,IAAI,EAAG,QAAOG,OAAO,CAACE,OAAQ;AAFhC,KAGMV,KAHN,EA5BF,CADF;AAoCD","sourcesContent":["import * as React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { Defs, LinearGradient, Stop, Path, PathProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPathContext } from './ChartPath';\nimport useAnimatedPath from './useAnimatedPath';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nexport type LineChartGradientProps = Animated.AnimateProps<PathProps> & {\n  color?: string;\n  children?: React.ReactNode;\n};\n\nlet id = 0;\n\nLineChartGradient.displayName = 'LineChartGradient';\n\nexport function LineChartGradient({\n  color: overrideColor = undefined,\n  children,\n  ...props\n}: LineChartGradientProps) {\n  const { area } = React.useContext(LineChartDimensionsContext);\n  const { color: contextColor, isTransitionEnabled } =\n    React.useContext(LineChartPathContext);\n\n  const color = overrideColor || contextColor;\n\n  ////////////////////////////////////////////////\n\n  const { animatedProps } = useAnimatedPath({\n    enabled: isTransitionEnabled,\n    path: area,\n  });\n\n  ////////////////////////////////////////////////\n\n  const localId = React.useRef(++id);\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      {children ? (\n        <Defs>\n          <LinearGradient\n            id={`${localId.current}`}\n            x1=\"0\"\n            x2=\"0\"\n            y1=\"0\"\n            y2=\"100%\"\n          >\n            {children}\n          </LinearGradient>\n        </Defs>\n      ) : (\n        <Defs>\n          <LinearGradient\n            id={`${localId.current}`}\n            x1=\"0\"\n            x2=\"0\"\n            y1=\"0\"\n            y2=\"100%\"\n          >\n            <Stop offset=\"20%\" stopColor={color} stopOpacity={0.15} />\n            <Stop offset=\"40%\" stopColor={color} stopOpacity={0.05} />\n            <Stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n          </LinearGradient>\n        </Defs>\n      )}\n      <AnimatedPath\n        animatedProps={animatedProps}\n        fill={`url(#${localId.current})`}\n        {...props}\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["Gradient.tsx"],"names":["React","Animated","Defs","LinearGradient","Stop","Path","LineChartDimensionsContext","LineChartPathContext","useAnimatedPath","AnimatedPath","createAnimatedComponent","id","LineChartGradient","displayName","color","overrideColor","undefined","children","props","area","useContext","contextColor","isTransitionEnabled","animatedProps","enabled","path","localId","useRef","current"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,SAASC,IAAT,EAAeC,cAAf,EAA+BC,IAA/B,EAAqCC,IAArC,QAA4D,kBAA5D;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,oBAAT,QAAqC,wBAArC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,MAAMC,YAAY,GAAGR,QAAQ,CAACS,uBAAT,CAAiCL,IAAjC,CAArB;AAOA,IAAIM,EAAE,GAAG,CAAT;AAEAC,iBAAiB,CAACC,WAAlB,GAAgC,mBAAhC;AAEA,OAAO,SAASD,iBAAT,CAA2B;AAChCE,EAAAA,KAAK,EAAEC,aAAa,GAAGC,SADS;AAEhCC,EAAAA,QAFgC;AAGhC,KAAGC;AAH6B,CAA3B,EAIoB;AACzB,QAAM;AAAEC,IAAAA;AAAF,MAAWnB,KAAK,CAACoB,UAAN,CAAiBd,0BAAjB,CAAjB;AACA,QAAM;AAAEQ,IAAAA,KAAK,EAAEO,YAAT;AAAuBC,IAAAA;AAAvB,MACJtB,KAAK,CAACoB,UAAN,CAAiBb,oBAAjB,CADF;AAGA,QAAMO,KAAK,GAAGC,aAAa,IAAIM,YAA/B,CALyB,CAOzB;;AAEA,QAAM;AAAEE,IAAAA;AAAF,MAAoBf,eAAe,CAAC;AACxCgB,IAAAA,OAAO,EAAEF,mBAD+B;AAExCG,IAAAA,IAAI,EAAEN;AAFkC,GAAD,CAAzC,CATyB,CAczB;;AAEA,QAAMO,OAAO,GAAG1B,KAAK,CAAC2B,MAAN,CAAa,EAAEhB,EAAf,CAAhB,CAhByB,CAkBzB;;AAEA,sBACE,0CACGM,QAAQ,gBACP,oBAAC,IAAD,qBACE,oBAAC,cAAD;AACE,IAAA,EAAE,EAAG,GAAES,OAAO,CAACE,OAAQ,EADzB;AAEE,IAAA,EAAE,EAAC,GAFL;AAGE,IAAA,EAAE,EAAC,GAHL;AAIE,IAAA,EAAE,EAAC,GAJL;AAKE,IAAA,EAAE,EAAC;AALL,KAOGX,QAPH,CADF,CADO,gBAaP,oBAAC,IAAD,qBACE,oBAAC,cAAD;AACE,IAAA,EAAE,EAAG,GAAES,OAAO,CAACE,OAAQ,EADzB;AAEE,IAAA,EAAE,EAAC,GAFL;AAGE,IAAA,EAAE,EAAC,GAHL;AAIE,IAAA,EAAE,EAAC,GAJL;AAKE,IAAA,EAAE,EAAC;AALL,kBAOE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,KAAb;AAAmB,IAAA,SAAS,EAAEd,KAA9B;AAAqC,IAAA,WAAW,EAAE;AAAlD,IAPF,eAQE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,KAAb;AAAmB,IAAA,SAAS,EAAEA,KAA9B;AAAqC,IAAA,WAAW,EAAE;AAAlD,IARF,eASE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,MAAb;AAAoB,IAAA,SAAS,EAAEA,KAA/B;AAAsC,IAAA,WAAW,EAAE;AAAnD,IATF,CADF,CAdJ,eA4BE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAES,aADjB;AAEE,IAAA,IAAI,EAAG,QAAOG,OAAO,CAACE,OAAQ;AAFhC,KAGMV,KAHN,EA5BF,CADF;AAoCD","sourcesContent":["import * as React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { Defs, LinearGradient, Stop, Path, PathProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPathContext } from './LineChartPathContext';\nimport useAnimatedPath from './useAnimatedPath';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nexport type LineChartGradientProps = Animated.AnimateProps<PathProps> & {\n  color?: string;\n  children?: React.ReactNode;\n};\n\nlet id = 0;\n\nLineChartGradient.displayName = 'LineChartGradient';\n\nexport function LineChartGradient({\n  color: overrideColor = undefined,\n  children,\n  ...props\n}: LineChartGradientProps) {\n  const { area } = React.useContext(LineChartDimensionsContext);\n  const { color: contextColor, isTransitionEnabled } =\n    React.useContext(LineChartPathContext);\n\n  const color = overrideColor || contextColor;\n\n  ////////////////////////////////////////////////\n\n  const { animatedProps } = useAnimatedPath({\n    enabled: isTransitionEnabled,\n    path: area,\n  });\n\n  ////////////////////////////////////////////////\n\n  const localId = React.useRef(++id);\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      {children ? (\n        <Defs>\n          <LinearGradient\n            id={`${localId.current}`}\n            x1=\"0\"\n            x2=\"0\"\n            y1=\"0\"\n            y2=\"100%\"\n          >\n            {children}\n          </LinearGradient>\n        </Defs>\n      ) : (\n        <Defs>\n          <LinearGradient\n            id={`${localId.current}`}\n            x1=\"0\"\n            x2=\"0\"\n            y1=\"0\"\n            y2=\"100%\"\n          >\n            <Stop offset=\"20%\" stopColor={color} stopOpacity={0.15} />\n            <Stop offset=\"40%\" stopColor={color} stopOpacity={0.05} />\n            <Stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n          </LinearGradient>\n        </Defs>\n      )}\n      <AnimatedPath\n        animatedProps={animatedProps}\n        fill={`url(#${localId.current})`}\n        {...props}\n      />\n    </>\n  );\n}\n"]}

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import Animated from 'react-native-reanimated';
 import { Path } from 'react-native-svg';
 import { LineChartDimensionsContext } from './Chart';
-import { LineChartPathContext } from './ChartPath';
+import { LineChartPathContext } from './LineChartPathContext';
 import useAnimatedPath from './useAnimatedPath';
 import { useLineChart } from './useLineChart';
 import { getPath } from './utils';

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

@@ -1 +1 @@
-{"version":3,"sources":["Highlight.tsx"],"names":["React","Animated","Path","LineChartDimensionsContext","LineChartPathContext","useAnimatedPath","useLineChart","getPath","AnimatedPath","createAnimatedComponent","LineChartHighlight","displayName","color","inactiveColor","showInactiveColor","from","to","width","strokeWidth","props","data","yDomain","pathWidth","height","gutter","shape","useContext","isTransitionEnabled","isInactive","_isInactive","path","useMemo","length","animatedProps","enabled"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,SAASC,IAAT,QAAgC,kBAAhC;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,oBAAT,QAAqC,aAArC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,OAAT,QAAwB,SAAxB;AAEA,MAAMC,YAAY,GAAGP,QAAQ,CAACQ,uBAAT,CAAiCP,IAAjC,CAArB;AAWAQ,kBAAkB,CAACC,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,SAASD,kBAAT,CAA4B;AACjCE,EAAAA,KAAK,GAAG,OADyB;AAEjCC,EAAAA,aAFiC;AAGjCC,EAAAA,iBAAiB,GAAG,IAHa;AAIjCC,EAAAA,IAJiC;AAKjCC,EAAAA,EALiC;AAMjCC,EAAAA,KAAK,EAAEC,WAAW,GAAG,CANY;AAOjC,KAAGC;AAP8B,CAA5B,EAQiB;AACtB,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAoBf,YAAY,EAAtC;AACA,QAAM;AAAEgB,IAAAA,SAAF;AAAaC,IAAAA,MAAb;AAAqBC,IAAAA,MAArB;AAA6BC,IAAAA;AAA7B,MAAuCzB,KAAK,CAAC0B,UAAN,CAC3CvB,0BAD2C,CAA7C;AAGA,QAAM;AAAEwB,IAAAA,mBAAF;AAAuBC,IAAAA,UAAU,EAAEC;AAAnC,MACJ7B,KAAK,CAAC0B,UAAN,CAAiBtB,oBAAjB,CADF;AAEA,QAAMwB,UAAU,GAAGd,iBAAiB,IAAIe,WAAxC,CAPsB,CAStB;;AAEA,QAAMC,IAAI,GAAG9B,KAAK,CAAC+B,OAAN,CAAc,MAAM;AAC/B,QAAIX,IAAI,IAAIA,IAAI,CAACY,MAAL,GAAc,CAA1B,EAA6B;AAC3B,aAAOzB,OAAO,CAAC;AACba,QAAAA,IADa;AAEbL,QAAAA,IAFa;AAGbC,QAAAA,EAHa;AAIbC,QAAAA,KAAK,EAAEK,SAJM;AAKbC,QAAAA,MALa;AAMbC,QAAAA,MANa;AAObC,QAAAA,KAPa;AAQbJ,QAAAA;AARa,OAAD,CAAd;AAUD;;AACD,WAAO,EAAP;AACD,GAdY,EAcV,CAACD,IAAD,EAAOL,IAAP,EAAaC,EAAb,EAAiBM,SAAjB,EAA4BC,MAA5B,EAAoCC,MAApC,EAA4CC,KAA5C,EAAmDJ,OAAnD,CAdU,CAAb;AAgBA,QAAM;AAAEY,IAAAA;AAAF,MAAoB5B,eAAe,CAAC;AACxC6B,IAAAA,OAAO,EAAEP,mBAD+B;AAExCG,IAAAA;AAFwC,GAAD,CAAzC,CA3BsB,CAgCtB;;AAEA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEG,aADjB;AAEE,IAAA,IAAI,EAAC,aAFP;AAGE,IAAA,MAAM,EAAEL,UAAU,GAAGf,aAAa,IAAID,KAApB,GAA4BA,KAHhD;AAIE,IAAA,WAAW,EAAEM,WAJf;AAKE,IAAA,aAAa,EAAEU,UAAU,IAAI,CAACf,aAAf,GAA+B,GAA/B,GAAqC;AALtD,KAMMM,KANN,EADF,CADF;AAYD","sourcesContent":["import * as React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { Path, PathProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPathContext } from './ChartPath';\nimport useAnimatedPath from './useAnimatedPath';\nimport { useLineChart } from './useLineChart';\nimport { getPath } from './utils';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nexport type LineChartColorProps = Animated.AnimateProps<PathProps> & {\n  color?: string;\n  from: number;\n  to: number;\n  showInactiveColor?: boolean;\n  inactiveColor?: string;\n  width?: number;\n};\n\nLineChartHighlight.displayName = 'LineChartHighlight';\n\nexport function LineChartHighlight({\n  color = 'black',\n  inactiveColor,\n  showInactiveColor = true,\n  from,\n  to,\n  width: strokeWidth = 3,\n  ...props\n}: LineChartColorProps) {\n  const { data, yDomain } = useLineChart();\n  const { pathWidth, height, gutter, shape } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { isTransitionEnabled, isInactive: _isInactive } =\n    React.useContext(LineChartPathContext);\n  const isInactive = showInactiveColor && _isInactive;\n\n  ////////////////////////////////////////////////\n\n  const path = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getPath({\n        data,\n        from,\n        to,\n        width: pathWidth,\n        height,\n        gutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, from, to, pathWidth, height, gutter, shape, yDomain]);\n\n  const { animatedProps } = useAnimatedPath({\n    enabled: isTransitionEnabled,\n    path,\n  });\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <AnimatedPath\n        animatedProps={animatedProps}\n        fill=\"transparent\"\n        stroke={isInactive ? inactiveColor || color : color}\n        strokeWidth={strokeWidth}\n        strokeOpacity={isInactive && !inactiveColor ? 0.5 : 1}\n        {...props}\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["Highlight.tsx"],"names":["React","Animated","Path","LineChartDimensionsContext","LineChartPathContext","useAnimatedPath","useLineChart","getPath","AnimatedPath","createAnimatedComponent","LineChartHighlight","displayName","color","inactiveColor","showInactiveColor","from","to","width","strokeWidth","props","data","yDomain","pathWidth","height","gutter","shape","useContext","isTransitionEnabled","isInactive","_isInactive","path","useMemo","length","animatedProps","enabled"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,SAASC,IAAT,QAAgC,kBAAhC;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,oBAAT,QAAqC,wBAArC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,OAAT,QAAwB,SAAxB;AAEA,MAAMC,YAAY,GAAGP,QAAQ,CAACQ,uBAAT,CAAiCP,IAAjC,CAArB;AAWAQ,kBAAkB,CAACC,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,SAASD,kBAAT,CAA4B;AACjCE,EAAAA,KAAK,GAAG,OADyB;AAEjCC,EAAAA,aAFiC;AAGjCC,EAAAA,iBAAiB,GAAG,IAHa;AAIjCC,EAAAA,IAJiC;AAKjCC,EAAAA,EALiC;AAMjCC,EAAAA,KAAK,EAAEC,WAAW,GAAG,CANY;AAOjC,KAAGC;AAP8B,CAA5B,EAQiB;AACtB,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAoBf,YAAY,EAAtC;AACA,QAAM;AAAEgB,IAAAA,SAAF;AAAaC,IAAAA,MAAb;AAAqBC,IAAAA,MAArB;AAA6BC,IAAAA;AAA7B,MAAuCzB,KAAK,CAAC0B,UAAN,CAC3CvB,0BAD2C,CAA7C;AAGA,QAAM;AAAEwB,IAAAA,mBAAF;AAAuBC,IAAAA,UAAU,EAAEC;AAAnC,MACJ7B,KAAK,CAAC0B,UAAN,CAAiBtB,oBAAjB,CADF;AAEA,QAAMwB,UAAU,GAAGd,iBAAiB,IAAIe,WAAxC,CAPsB,CAStB;;AAEA,QAAMC,IAAI,GAAG9B,KAAK,CAAC+B,OAAN,CAAc,MAAM;AAC/B,QAAIX,IAAI,IAAIA,IAAI,CAACY,MAAL,GAAc,CAA1B,EAA6B;AAC3B,aAAOzB,OAAO,CAAC;AACba,QAAAA,IADa;AAEbL,QAAAA,IAFa;AAGbC,QAAAA,EAHa;AAIbC,QAAAA,KAAK,EAAEK,SAJM;AAKbC,QAAAA,MALa;AAMbC,QAAAA,MANa;AAObC,QAAAA,KAPa;AAQbJ,QAAAA;AARa,OAAD,CAAd;AAUD;;AACD,WAAO,EAAP;AACD,GAdY,EAcV,CAACD,IAAD,EAAOL,IAAP,EAAaC,EAAb,EAAiBM,SAAjB,EAA4BC,MAA5B,EAAoCC,MAApC,EAA4CC,KAA5C,EAAmDJ,OAAnD,CAdU,CAAb;AAgBA,QAAM;AAAEY,IAAAA;AAAF,MAAoB5B,eAAe,CAAC;AACxC6B,IAAAA,OAAO,EAAEP,mBAD+B;AAExCG,IAAAA;AAFwC,GAAD,CAAzC,CA3BsB,CAgCtB;;AAEA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEG,aADjB;AAEE,IAAA,IAAI,EAAC,aAFP;AAGE,IAAA,MAAM,EAAEL,UAAU,GAAGf,aAAa,IAAID,KAApB,GAA4BA,KAHhD;AAIE,IAAA,WAAW,EAAEM,WAJf;AAKE,IAAA,aAAa,EAAEU,UAAU,IAAI,CAACf,aAAf,GAA+B,GAA/B,GAAqC;AALtD,KAMMM,KANN,EADF,CADF;AAYD","sourcesContent":["import * as React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { Path, PathProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPathContext } from './LineChartPathContext';\nimport useAnimatedPath from './useAnimatedPath';\nimport { useLineChart } from './useLineChart';\nimport { getPath } from './utils';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nexport type LineChartColorProps = Animated.AnimateProps<PathProps> & {\n  color?: string;\n  from: number;\n  to: number;\n  showInactiveColor?: boolean;\n  inactiveColor?: string;\n  width?: number;\n};\n\nLineChartHighlight.displayName = 'LineChartHighlight';\n\nexport function LineChartHighlight({\n  color = 'black',\n  inactiveColor,\n  showInactiveColor = true,\n  from,\n  to,\n  width: strokeWidth = 3,\n  ...props\n}: LineChartColorProps) {\n  const { data, yDomain } = useLineChart();\n  const { pathWidth, height, gutter, shape } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { isTransitionEnabled, isInactive: _isInactive } =\n    React.useContext(LineChartPathContext);\n  const isInactive = showInactiveColor && _isInactive;\n\n  ////////////////////////////////////////////////\n\n  const path = React.useMemo(() => {\n    if (data && data.length > 0) {\n      return getPath({\n        data,\n        from,\n        to,\n        width: pathWidth,\n        height,\n        gutter,\n        shape,\n        yDomain,\n      });\n    }\n    return '';\n  }, [data, from, to, pathWidth, height, gutter, shape, yDomain]);\n\n  const { animatedProps } = useAnimatedPath({\n    enabled: isTransitionEnabled,\n    path,\n  });\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <AnimatedPath\n        animatedProps={animatedProps}\n        fill=\"transparent\"\n        stroke={isInactive ? inactiveColor || color : color}\n        strokeWidth={strokeWidth}\n        strokeOpacity={isInactive && !inactiveColor ? 0.5 : 1}\n        {...props}\n      />\n    </>\n  );\n}\n"]}

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

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import Animated, { useAnimatedProps, useDerivedValue, withTiming } from 'react-native-reanimated';
 import { Line as SVGLine } from 'react-native-svg';
-import { getYForX, parse } from 'react-native-redash';
+import { getYForX } from 'react-native-redash';
 import { LineChartDimensionsContext } from './Chart';
 import { useLineChart } from './useLineChart';
 const AnimatedLine = Animated.createAnimatedComponent(SVGLine);
@@ -18,16 +18,14 @@ export function LineChartHorizontalLine({
 }) {
   const {
     width,
-    path,
+    parsedPath,
+    pointWidth,
     height,
     gutter
   } = React.useContext(LineChartDimensionsContext);
   const {
-    data,
     yDomain
   } = useLineChart();
-  const parsedPath = React.useMemo(() => parse(path), [path]);
-  const pointWidth = React.useMemo(() => width / data.length, [data.length, width]);
   const y = useDerivedValue(() => {
     if (typeof at === 'number' || at.index != null) {
       const index = typeof at === 'number' ? at : at.index;

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

@@ -1 +1 @@
-{"version":3,"sources":["HorizontalLine.tsx"],"names":["React","Animated","useAnimatedProps","useDerivedValue","withTiming","Line","SVGLine","getYForX","parse","LineChartDimensionsContext","useLineChart","AnimatedLine","createAnimatedComponent","LineChartHorizontalLine","displayName","color","lineProps","at","index","offsetY","width","path","height","gutter","useContext","data","yDomain","parsedPath","useMemo","pointWidth","length","y","yForX","offsetTop","max","value","percentageOffsetTop","min","heightBetweenGutters","offsetTopPixels","lineAnimatedProps","x1","x2","y1","y2"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,eAFF,EAGEC,UAHF,QAIO,yBAJP;AAKA,SAASC,IAAI,IAAIC,OAAjB,QAA2C,kBAA3C;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,qBAAhC;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,MAAMC,YAAY,GAAGV,QAAQ,CAACW,uBAAT,CAAiCN,OAAjC,CAArB;AAmCAO,uBAAuB,CAACC,WAAxB,GAAsC,yBAAtC;AAEA,OAAO,SAASD,uBAAT,CAAiC;AACtCE,EAAAA,KAAK,GAAG,MAD8B;AAEtCC,EAAAA,SAAS,GAAG,EAF0B;AAGtCC,EAAAA,EAAE,GAAG;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAHiC;AAItCC,EAAAA,OAAO,GAAG;AAJ4B,CAAjC,EAKiB;AACtB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,MAAf;AAAuBC,IAAAA;AAAvB,MAAkCvB,KAAK,CAACwB,UAAN,CACtCf,0BADsC,CAAxC;AAGA,QAAM;AAAEgB,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAoBhB,YAAY,EAAtC;AAEA,QAAMiB,UAAU,GAAG3B,KAAK,CAAC4B,OAAN,CAAc,MAAMpB,KAAK,CAACa,IAAD,CAAzB,EAAiC,CAACA,IAAD,CAAjC,CAAnB;AACA,QAAMQ,UAAU,GAAG7B,KAAK,CAAC4B,OAAN,CACjB,MAAMR,KAAK,GAAGK,IAAI,CAACK,MADF,EAEjB,CAACL,IAAI,CAACK,MAAN,EAAcV,KAAd,CAFiB,CAAnB;AAKA,QAAMW,CAAC,GAAG5B,eAAe,CAAC,MAAM;AAC9B,QAAI,OAAOc,EAAP,KAAc,QAAd,IAA0BA,EAAE,CAACC,KAAH,IAAY,IAA1C,EAAgD;AAC9C,YAAMA,KAAK,GAAG,OAAOD,EAAP,KAAc,QAAd,GAAyBA,EAAzB,GAA8BA,EAAE,CAACC,KAA/C;AACA,YAAMc,KAAK,GAAGzB,QAAQ,CAACoB,UAAD,EAAcE,UAAU,GAAGX,KAA3B,CAAR,IAA6C,CAA3D;AACA,aAAOd,UAAU,CAAC4B,KAAK,GAAGb,OAAT,CAAjB;AACD;AACD;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAEI,UAAMc,SAAS,GAAGP,OAAO,CAACQ,GAAR,GAAcjB,EAAE,CAACkB,KAAnC;AACA,UAAMC,mBAAmB,GAAGH,SAAS,IAAIP,OAAO,CAACQ,GAAR,GAAcR,OAAO,CAACW,GAA1B,CAArC;AAEA,UAAMC,oBAAoB,GAAGhB,MAAM,GAAGC,MAAM,GAAG,CAA/C;AAEA,UAAMgB,eAAe,GAAGhB,MAAM,GAAGa,mBAAmB,GAAGE,oBAAvD;AAEA,WAAOlC,UAAU,CAACmC,eAAe,GAAGpB,OAAnB,CAAjB;AACD,GAxBwB,CAAzB;AA0BA,QAAMqB,iBAAiB,GAAGtC,gBAAgB,CAAC,OAAO;AAChDuC,IAAAA,EAAE,EAAE,CAD4C;AAEhDC,IAAAA,EAAE,EAAEtB,KAF4C;AAGhDuB,IAAAA,EAAE,EAAEZ,CAAC,CAACI,KAH0C;AAIhDS,IAAAA,EAAE,EAAEb,CAAC,CAACI;AAJ0C,GAAP,CAAD,CAA1C;AAOA,sBACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEK,iBADjB;AAEE,IAAA,WAAW,EAAE,CAFf;AAGE,IAAA,MAAM,EAAEzB,KAHV;AAIE,IAAA,eAAe,EAAC;AAJlB,KAKMC,SALN,EADF;AASD","sourcesContent":["import React from 'react';\nimport Animated, {\n  useAnimatedProps,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { Line as SVGLine, LineProps } from 'react-native-svg';\nimport { getYForX, parse } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { useLineChart } from './useLineChart';\n\nconst AnimatedLine = Animated.createAnimatedComponent(SVGLine);\n\ntype HorizontalLineProps = {\n  color?: string;\n  lineProps?: Partial<LineProps>;\n  offsetY?: number;\n  /**\n   * (Optional) A pixel value to nudge the line up or down.\n   *\n   * This may be useful to customize the line's position based on the thickness of your cursor or chart path.\n   *\n   * ```tsx\n   * <LineChart.HorizontalLine\n   *   at={{ index: 3 }}\n   * />\n   *\n   * // or\n   *\n   * <LineChart.HorizontalLine\n   *   at={{ value: 320.32}}\n   * />\n   * ```\n   */\n  at?:\n    | {\n        index: number;\n        value?: never;\n      }\n    | {\n        index?: never;\n        value: number;\n      }\n    | number;\n};\n\nLineChartHorizontalLine.displayName = 'LineChartHorizontalLine';\n\nexport function LineChartHorizontalLine({\n  color = 'gray',\n  lineProps = {},\n  at = { index: 0 },\n  offsetY = 0,\n}: HorizontalLineProps) {\n  const { width, path, height, gutter } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { data, yDomain } = useLineChart();\n\n  const parsedPath = React.useMemo(() => parse(path), [path]);\n  const pointWidth = React.useMemo(\n    () => width / data.length,\n    [data.length, width]\n  );\n\n  const y = useDerivedValue(() => {\n    if (typeof at === 'number' || at.index != null) {\n      const index = typeof at === 'number' ? at : at.index;\n      const yForX = getYForX(parsedPath!, pointWidth * index) || 0;\n      return withTiming(yForX + offsetY);\n    }\n    /**\n     * <gutter>\n     * | ---------- | <- yDomain.max  |\n     * |            |                 | offsetTop\n     * |            | <- value        |\n     * |            |\n     * |            | <- yDomain.min\n     * <gutter>\n     */\n\n    const offsetTop = yDomain.max - at.value;\n    const percentageOffsetTop = offsetTop / (yDomain.max - yDomain.min);\n\n    const heightBetweenGutters = height - gutter * 2;\n\n    const offsetTopPixels = gutter + percentageOffsetTop * heightBetweenGutters;\n\n    return withTiming(offsetTopPixels + offsetY);\n  });\n\n  const lineAnimatedProps = useAnimatedProps(() => ({\n    x1: 0,\n    x2: width,\n    y1: y.value,\n    y2: y.value,\n  }));\n\n  return (\n    <AnimatedLine\n      animatedProps={lineAnimatedProps}\n      strokeWidth={2}\n      stroke={color}\n      strokeDasharray=\"3 3\"\n      {...lineProps}\n    />\n  );\n}\n"]}
+{"version":3,"sources":["HorizontalLine.tsx"],"names":["React","Animated","useAnimatedProps","useDerivedValue","withTiming","Line","SVGLine","getYForX","LineChartDimensionsContext","useLineChart","AnimatedLine","createAnimatedComponent","LineChartHorizontalLine","displayName","color","lineProps","at","index","offsetY","width","parsedPath","pointWidth","height","gutter","useContext","yDomain","y","yForX","offsetTop","max","value","percentageOffsetTop","min","heightBetweenGutters","offsetTopPixels","lineAnimatedProps","x1","x2","y1","y2"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,eAFF,EAGEC,UAHF,QAIO,yBAJP;AAKA,SAASC,IAAI,IAAIC,OAAjB,QAA2C,kBAA3C;AACA,SAASC,QAAT,QAAyB,qBAAzB;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,MAAMC,YAAY,GAAGT,QAAQ,CAACU,uBAAT,CAAiCL,OAAjC,CAArB;AAmCAM,uBAAuB,CAACC,WAAxB,GAAsC,yBAAtC;AAEA,OAAO,SAASD,uBAAT,CAAiC;AACtCE,EAAAA,KAAK,GAAG,MAD8B;AAEtCC,EAAAA,SAAS,GAAG,EAF0B;AAGtCC,EAAAA,EAAE,GAAG;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAHiC;AAItCC,EAAAA,OAAO,GAAG;AAJ4B,CAAjC,EAKiB;AACtB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,UAAT;AAAqBC,IAAAA,UAArB;AAAiCC,IAAAA,MAAjC;AAAyCC,IAAAA;AAAzC,MAAoDvB,KAAK,CAACwB,UAAN,CACxDhB,0BADwD,CAA1D;AAGA,QAAM;AAAEiB,IAAAA;AAAF,MAAchB,YAAY,EAAhC;AAEA,QAAMiB,CAAC,GAAGvB,eAAe,CAAC,MAAM;AAC9B,QAAI,OAAOa,EAAP,KAAc,QAAd,IAA0BA,EAAE,CAACC,KAAH,IAAY,IAA1C,EAAgD;AAC9C,YAAMA,KAAK,GAAG,OAAOD,EAAP,KAAc,QAAd,GAAyBA,EAAzB,GAA8BA,EAAE,CAACC,KAA/C;AACA,YAAMU,KAAK,GAAGpB,QAAQ,CAACa,UAAD,EAAcC,UAAU,GAAGJ,KAA3B,CAAR,IAA6C,CAA3D;AACA,aAAOb,UAAU,CAACuB,KAAK,GAAGT,OAAT,CAAjB;AACD;AACD;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAEI,UAAMU,SAAS,GAAGH,OAAO,CAACI,GAAR,GAAcb,EAAE,CAACc,KAAnC;AACA,UAAMC,mBAAmB,GAAGH,SAAS,IAAIH,OAAO,CAACI,GAAR,GAAcJ,OAAO,CAACO,GAA1B,CAArC;AAEA,UAAMC,oBAAoB,GAAGX,MAAM,GAAGC,MAAM,GAAG,CAA/C;AAEA,UAAMW,eAAe,GAAGX,MAAM,GAAGQ,mBAAmB,GAAGE,oBAAvD;AAEA,WAAO7B,UAAU,CAAC8B,eAAe,GAAGhB,OAAnB,CAAjB;AACD,GAxBwB,CAAzB;AA0BA,QAAMiB,iBAAiB,GAAGjC,gBAAgB,CAAC,OAAO;AAChDkC,IAAAA,EAAE,EAAE,CAD4C;AAEhDC,IAAAA,EAAE,EAAElB,KAF4C;AAGhDmB,IAAAA,EAAE,EAAEZ,CAAC,CAACI,KAH0C;AAIhDS,IAAAA,EAAE,EAAEb,CAAC,CAACI;AAJ0C,GAAP,CAAD,CAA1C;AAOA,sBACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEK,iBADjB;AAEE,IAAA,WAAW,EAAE,CAFf;AAGE,IAAA,MAAM,EAAErB,KAHV;AAIE,IAAA,eAAe,EAAC;AAJlB,KAKMC,SALN,EADF;AASD","sourcesContent":["import React from 'react';\nimport Animated, {\n  useAnimatedProps,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { Line as SVGLine, LineProps } from 'react-native-svg';\nimport { getYForX } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { useLineChart } from './useLineChart';\n\nconst AnimatedLine = Animated.createAnimatedComponent(SVGLine);\n\ntype HorizontalLineProps = {\n  color?: string;\n  lineProps?: Partial<LineProps>;\n  offsetY?: number;\n  /**\n   * (Optional) A pixel value to nudge the line up or down.\n   *\n   * This may be useful to customize the line's position based on the thickness of your cursor or chart path.\n   *\n   * ```tsx\n   * <LineChart.HorizontalLine\n   *   at={{ index: 3 }}\n   * />\n   *\n   * // or\n   *\n   * <LineChart.HorizontalLine\n   *   at={{ value: 320.32}}\n   * />\n   * ```\n   */\n  at?:\n    | {\n        index: number;\n        value?: never;\n      }\n    | {\n        index?: never;\n        value: number;\n      }\n    | number;\n};\n\nLineChartHorizontalLine.displayName = 'LineChartHorizontalLine';\n\nexport function LineChartHorizontalLine({\n  color = 'gray',\n  lineProps = {},\n  at = { index: 0 },\n  offsetY = 0,\n}: HorizontalLineProps) {\n  const { width, parsedPath, pointWidth, height, gutter } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { yDomain } = useLineChart();\n\n  const y = useDerivedValue(() => {\n    if (typeof at === 'number' || at.index != null) {\n      const index = typeof at === 'number' ? at : at.index;\n      const yForX = getYForX(parsedPath!, pointWidth * index) || 0;\n      return withTiming(yForX + offsetY);\n    }\n    /**\n     * <gutter>\n     * | ---------- | <- yDomain.max  |\n     * |            |                 | offsetTop\n     * |            | <- value        |\n     * |            |\n     * |            | <- yDomain.min\n     * <gutter>\n     */\n\n    const offsetTop = yDomain.max - at.value;\n    const percentageOffsetTop = offsetTop / (yDomain.max - yDomain.min);\n\n    const heightBetweenGutters = height - gutter * 2;\n\n    const offsetTopPixels = gutter + percentageOffsetTop * heightBetweenGutters;\n\n    return withTiming(offsetTopPixels + offsetY);\n  });\n\n  const lineAnimatedProps = useAnimatedProps(() => ({\n    x1: 0,\n    x2: width,\n    y1: y.value,\n    y2: y.value,\n  }));\n\n  return (\n    <AnimatedLine\n      animatedProps={lineAnimatedProps}\n      strokeWidth={2}\n      stroke={color}\n      strokeDasharray=\"3 3\"\n      {...lineProps}\n    />\n  );\n}\n"]}

package/lib/module/charts/line/HoverTrap/index.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const LineChartHoverTrap = () => /*#__PURE__*/React.createElement(React.Fragment, null);
+//# sourceMappingURL=index.js.map

package/lib/module/charts/line/HoverTrap/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["React","LineChartHoverTrap"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,mBAAM,yCAAjC","sourcesContent":["import React from 'react';\n\nexport const LineChartHoverTrap = () => <></>;\n"]}

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

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { LineChartDimensionsContext } from '../Chart';
+import { useLineChart } from '../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,
+    parsedPath
+  } = React.useContext(LineChartDimensionsContext);
+  const {
+    currentX,
+    currentIndex,
+    isActive,
+    data
+  } = useLineChart();
+  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/line/HoverTrap/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.web.tsx"],"names":["React","View","StyleSheet","LineChartDimensionsContext","useLineChart","canUseDOM","isEnabled","HOVER_THRESHOLD_MS","lastTouchTimestamp","enableHover","Date","now","disableHover","document","addEventListener","isHoverEnabled","LineChartHoverTrap","width","parsedPath","useContext","currentX","currentIndex","isActive","data","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';\n\nimport { LineChartDimensionsContext } from '../Chart';\nimport { useLineChart } from '../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, parsedPath } = React.useContext(LineChartDimensionsContext);\n  const { currentX, currentIndex, isActive, data } = useLineChart();\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/LineChartPathContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export const LineChartPathContext = /*#__PURE__*/React.createContext({
+  color: '',
+  isInactive: false,
+  isTransitionEnabled: true
+});
+//# sourceMappingURL=LineChartPathContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["LineChartPathContext.ts"],"names":["React","LineChartPathContext","createContext","color","isInactive","isTransitionEnabled"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,MAAMC,oBAAoB,gBAAGD,KAAK,CAACE,aAAN,CAAoB;AACtDC,EAAAA,KAAK,EAAE,EAD+C;AAEtDC,EAAAA,UAAU,EAAE,KAF0C;AAGtDC,EAAAA,mBAAmB,EAAE;AAHiC,CAApB,CAA7B","sourcesContent":["import React from 'react';\n\nexport const LineChartPathContext = React.createContext({\n  color: '',\n  isInactive: false,\n  isTransitionEnabled: true,\n});\n"]}

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import Animated from 'react-native-reanimated';
 import { Path } from 'react-native-svg';
 import { LineChartDimensionsContext } from './Chart';
-import { LineChartPathContext } from './ChartPath';
+import { LineChartPathContext } from './LineChartPathContext';
 import useAnimatedPath from './useAnimatedPath';
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 LineChartPath.displayName = 'LineChartPath';

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

@@ -1 +1 @@
-{"version":3,"sources":["Path.tsx"],"names":["React","Animated","Path","LineChartDimensionsContext","LineChartPathContext","useAnimatedPath","AnimatedPath","createAnimatedComponent","LineChartPath","displayName","color","inactiveColor","width","strokeWidth","props","path","useContext","isTransitionEnabled","isInactive","animatedProps","enabled"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,SAASC,IAAT,QAAgC,kBAAhC;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,oBAAT,QAAqC,aAArC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,MAAMC,YAAY,GAAGL,QAAQ,CAACM,uBAAT,CAAiCL,IAAjC,CAArB;AAyBAM,aAAa,CAACC,WAAd,GAA4B,eAA5B;AAEA,OAAO,SAASD,aAAT,CAAuB;AAC5BE,EAAAA,KAAK,GAAG,OADoB;AAE5BC,EAAAA,aAF4B;AAG5BC,EAAAA,KAAK,EAAEC,WAAW,GAAG,CAHO;AAI5B,KAAGC;AAJyB,CAAvB,EAKgB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAWf,KAAK,CAACgB,UAAN,CAAiBb,0BAAjB,CAAjB;AACA,QAAM;AAAEc,IAAAA,mBAAF;AAAuBC,IAAAA;AAAvB,MACJlB,KAAK,CAACgB,UAAN,CAAiBZ,oBAAjB,CADF,CAFqB,CAKrB;;AAEA,QAAM;AAAEe,IAAAA;AAAF,MAAoBd,eAAe,CAAC;AACxCe,IAAAA,OAAO,EAAEH,mBAD+B;AAExCF,IAAAA;AAFwC,GAAD,CAAzC,CAPqB,CAYrB;;AAEA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEI,aADjB;AAEE,IAAA,IAAI,EAAC,aAFP;AAGE,IAAA,MAAM,EAAED,UAAU,GAAGP,aAAa,IAAID,KAApB,GAA4BA,KAHhD;AAIE,IAAA,aAAa,EAAEQ,UAAU,IAAI,CAACP,aAAf,GAA+B,GAA/B,GAAqC,CAJtD;AAKE,IAAA,WAAW,EAAEE;AALf,KAMMC,KANN,EADF,CADF;AAYD","sourcesContent":["import * as React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { Path, PathProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPathContext } from './ChartPath';\nimport useAnimatedPath from './useAnimatedPath';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nexport type LineChartPathProps = Animated.AnimateProps<PathProps> & {\n  color?: string;\n  inactiveColor?: string;\n  width?: number;\n  isInactive?: boolean;\n  /**\n   * Default: `true`.\n   *\n   * If `false`, changes in the chart's path will not animate.\n   *\n   * While this use case is rare, it may be useful on web, where animations might not work as well.\n   *\n   * **Example**\n   *\n   * ```tsx\n   * <LineChart.Path\n   *   pathProps={{ isTransitionEnabled: Platform.OS !== 'web' }}\n   * />\n   * ```\n   */\n  isTransitionEnabled?: boolean;\n};\n\nLineChartPath.displayName = 'LineChartPath';\n\nexport function LineChartPath({\n  color = 'black',\n  inactiveColor,\n  width: strokeWidth = 3,\n  ...props\n}: LineChartPathProps) {\n  const { path } = React.useContext(LineChartDimensionsContext);\n  const { isTransitionEnabled, isInactive } =\n    React.useContext(LineChartPathContext);\n\n  ////////////////////////////////////////////////\n\n  const { animatedProps } = useAnimatedPath({\n    enabled: isTransitionEnabled,\n    path,\n  });\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <AnimatedPath\n        animatedProps={animatedProps}\n        fill=\"transparent\"\n        stroke={isInactive ? inactiveColor || color : color}\n        strokeOpacity={isInactive && !inactiveColor ? 0.2 : 1}\n        strokeWidth={strokeWidth}\n        {...props}\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["Path.tsx"],"names":["React","Animated","Path","LineChartDimensionsContext","LineChartPathContext","useAnimatedPath","AnimatedPath","createAnimatedComponent","LineChartPath","displayName","color","inactiveColor","width","strokeWidth","props","path","useContext","isTransitionEnabled","isInactive","animatedProps","enabled"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,SAASC,IAAT,QAAgC,kBAAhC;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,SAASC,oBAAT,QAAqC,wBAArC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,MAAMC,YAAY,GAAGL,QAAQ,CAACM,uBAAT,CAAiCL,IAAjC,CAArB;AAyBAM,aAAa,CAACC,WAAd,GAA4B,eAA5B;AAEA,OAAO,SAASD,aAAT,CAAuB;AAC5BE,EAAAA,KAAK,GAAG,OADoB;AAE5BC,EAAAA,aAF4B;AAG5BC,EAAAA,KAAK,EAAEC,WAAW,GAAG,CAHO;AAI5B,KAAGC;AAJyB,CAAvB,EAKgB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAWf,KAAK,CAACgB,UAAN,CAAiBb,0BAAjB,CAAjB;AACA,QAAM;AAAEc,IAAAA,mBAAF;AAAuBC,IAAAA;AAAvB,MACJlB,KAAK,CAACgB,UAAN,CAAiBZ,oBAAjB,CADF,CAFqB,CAKrB;;AAEA,QAAM;AAAEe,IAAAA;AAAF,MAAoBd,eAAe,CAAC;AACxCe,IAAAA,OAAO,EAAEH,mBAD+B;AAExCF,IAAAA;AAFwC,GAAD,CAAzC,CAPqB,CAYrB;;AAEA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEI,aADjB;AAEE,IAAA,IAAI,EAAC,aAFP;AAGE,IAAA,MAAM,EAAED,UAAU,GAAGP,aAAa,IAAID,KAApB,GAA4BA,KAHhD;AAIE,IAAA,aAAa,EAAEQ,UAAU,IAAI,CAACP,aAAf,GAA+B,GAA/B,GAAqC,CAJtD;AAKE,IAAA,WAAW,EAAEE;AALf,KAMMC,KANN,EADF,CADF;AAYD","sourcesContent":["import * as React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { Path, PathProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPathContext } from './LineChartPathContext';\nimport useAnimatedPath from './useAnimatedPath';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nexport type LineChartPathProps = Animated.AnimateProps<PathProps> & {\n  color?: string;\n  inactiveColor?: string;\n  width?: number;\n  isInactive?: boolean;\n  /**\n   * Default: `true`.\n   *\n   * If `false`, changes in the chart's path will not animate.\n   *\n   * While this use case is rare, it may be useful on web, where animations might not work as well.\n   *\n   * **Example**\n   *\n   * ```tsx\n   * <LineChart.Path\n   *   pathProps={{ isTransitionEnabled: Platform.OS !== 'web' }}\n   * />\n   * ```\n   */\n  isTransitionEnabled?: boolean;\n};\n\nLineChartPath.displayName = 'LineChartPath';\n\nexport function LineChartPath({\n  color = 'black',\n  inactiveColor,\n  width: strokeWidth = 3,\n  ...props\n}: LineChartPathProps) {\n  const { path } = React.useContext(LineChartDimensionsContext);\n  const { isTransitionEnabled, isInactive } =\n    React.useContext(LineChartPathContext);\n\n  ////////////////////////////////////////////////\n\n  const { animatedProps } = useAnimatedPath({\n    enabled: isTransitionEnabled,\n    path,\n  });\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <AnimatedPath\n        animatedProps={animatedProps}\n        fill=\"transparent\"\n        stroke={isInactive ? inactiveColor || color : color}\n        strokeOpacity={isInactive && !inactiveColor ? 0.2 : 1}\n        strokeWidth={strokeWidth}\n        {...props}\n      />\n    </>\n  );\n}\n"]}

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

@@ -6,11 +6,13 @@ export function LineChartPriceText({
   format,
   precision = 2,
   variant = 'formatted',
-  style
+  style,
+  index
 }) {
   const price = useLineChartPrice({
     format,
-    precision
+    precision,
+    index
   });
   return /*#__PURE__*/React.createElement(AnimatedText, {
     text: price[variant],

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

@@ -1 +1 @@
-{"version":3,"sources":["PriceText.tsx"],"names":["React","useLineChartPrice","AnimatedText","LineChartPriceText","displayName","format","precision","variant","style","price"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,iBAAT,QAAkC,YAAlC;AAEA,SAASC,YAAT,QAA6B,+BAA7B;AASAC,kBAAkB,CAACC,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,SAASD,kBAAT,CAA4B;AACjCE,EAAAA,MADiC;AAEjCC,EAAAA,SAAS,GAAG,CAFqB;AAGjCC,EAAAA,OAAO,GAAG,WAHuB;AAIjCC,EAAAA;AAJiC,CAA5B,EAKqB;AAC1B,QAAMC,KAAK,GAAGR,iBAAiB,CAAC;AAAEI,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAD,CAA/B;AACA,sBAAO,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAEG,KAAK,CAACF,OAAD,CAAzB;AAAoC,IAAA,KAAK,EAAEC;AAA3C,IAAP;AACD","sourcesContent":["import * as React from 'react';\nimport type { TextProps as RNTextProps } from 'react-native';\nimport type Animated from 'react-native-reanimated';\n\nimport { useLineChartPrice } from './usePrice';\nimport type { TFormatterFn } from '../candle/types';\nimport { AnimatedText } from '../../components/AnimatedText';\n\nexport type LineChartPriceTextProps = {\n  format?: TFormatterFn<string>;\n  precision?: number;\n  variant?: 'formatted' | 'value';\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n};\n\nLineChartPriceText.displayName = 'LineChartPriceText';\n\nexport function LineChartPriceText({\n  format,\n  precision = 2,\n  variant = 'formatted',\n  style,\n}: LineChartPriceTextProps) {\n  const price = useLineChartPrice({ format, precision });\n  return <AnimatedText text={price[variant]} style={style} />;\n}\n"]}
+{"version":3,"sources":["PriceText.tsx"],"names":["React","useLineChartPrice","AnimatedText","LineChartPriceText","displayName","format","precision","variant","style","index","price"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,iBAAT,QAAkC,YAAlC;AAEA,SAASC,YAAT,QAA6B,+BAA7B;AAcAC,kBAAkB,CAACC,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,SAASD,kBAAT,CAA4B;AACjCE,EAAAA,MADiC;AAEjCC,EAAAA,SAAS,GAAG,CAFqB;AAGjCC,EAAAA,OAAO,GAAG,WAHuB;AAIjCC,EAAAA,KAJiC;AAKjCC,EAAAA;AALiC,CAA5B,EAMqB;AAC1B,QAAMC,KAAK,GAAGT,iBAAiB,CAAC;AAAEI,IAAAA,MAAF;AAAUC,IAAAA,SAAV;AAAqBG,IAAAA;AAArB,GAAD,CAA/B;AACA,sBAAO,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAEC,KAAK,CAACH,OAAD,CAAzB;AAAoC,IAAA,KAAK,EAAEC;AAA3C,IAAP;AACD","sourcesContent":["import * as React from 'react';\nimport type { TextProps as RNTextProps } from 'react-native';\nimport type Animated from 'react-native-reanimated';\n\nimport { useLineChartPrice } from './usePrice';\nimport type { TFormatterFn } from '../candle/types';\nimport { AnimatedText } from '../../components/AnimatedText';\n\nexport type LineChartPriceTextProps = {\n  format?: TFormatterFn<string>;\n  precision?: number;\n  variant?: 'formatted' | 'value';\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n  /**\n   * By default, it will use the current active index from the chart.\n   * If this is set it will use the index provided.\n   */\n  index?: number;\n};\n\nLineChartPriceText.displayName = 'LineChartPriceText';\n\nexport function LineChartPriceText({\n  format,\n  precision = 2,\n  variant = 'formatted',\n  style,\n  index,\n}: LineChartPriceTextProps) {\n  const price = useLineChartPrice({ format, precision, index });\n  return <AnimatedText text={price[variant]} style={style} />;\n}\n"]}

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

@@ -1,11 +1,13 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import * as React from 'react';
-import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
 import { LineChartDimensionsContext } from './Chart';
 import { CursorContext } from './Cursor';
 import { LineChartPriceText } from './PriceText';
 import { useLineChart } from './useLineChart';
+import { getYForX } from 'react-native-redash';
+import { useMemo } from 'react';
 LineChartTooltip.displayName = 'LineChartTooltip';
 export function LineChartTooltip({
   children,
@@ -15,11 +17,14 @@ export function LineChartTooltip({
   position = 'top',
   textProps,
   textStyle,
+  at,
   ...props
 }) {
   const {
     width,
-    height
+    height,
+    parsedPath,
+    pointWidth
   } = React.useContext(LineChartDimensionsContext);
   const {
     type
@@ -36,43 +41,78 @@ export function LineChartTooltip({
     x.value = event.nativeEvent.layout.x;
     elementWidth.value = event.nativeEvent.layout.width;
     elementHeight.value = event.nativeEvent.layout.height;
-  }, [elementHeight, elementWidth, x]);
+  }, [elementHeight, elementWidth, x]); // When the user set a `at` index, get the index's y & x positions
+
+  const atXPosition = useMemo(() => at == null ? undefined : pointWidth * at, [at, pointWidth]);
+  const atYPosition = useDerivedValue(() => {
+    var _getYForX;
+
+    return atXPosition == null ? undefined : (_getYForX = getYForX(parsedPath, atXPosition)) !== null && _getYForX !== void 0 ? _getYForX : 0;
+  }, [atXPosition]);
   const animatedCursorStyle = useAnimatedStyle(() => {
-    let translateXOffset = elementWidth.value / 2;
+    var _atYPosition$value;
+
+    let translateXOffset = elementWidth.value / 2; // the tooltip is considered static when the user specified an `at` prop
+
+    const isStatic = atYPosition.value != null; // Calculate X position:
 
-    if (currentX.value < elementWidth.value / 2 + xGutter) {
-      const xOffset = elementWidth.value / 2 + xGutter - currentX.value;
+    const x = atXPosition !== null && atXPosition !== void 0 ? atXPosition : currentX.value;
+
+    if (x < elementWidth.value / 2 + xGutter) {
+      const xOffset = elementWidth.value / 2 + xGutter - x;
       translateXOffset = translateXOffset - xOffset;
     }
 
-    if (currentX.value > width - elementWidth.value / 2 - xGutter) {
-      const xOffset = currentX.value - (width - elementWidth.value / 2 - xGutter);
+    if (x > width - elementWidth.value / 2 - xGutter) {
+      const xOffset = x - (width - elementWidth.value / 2 - xGutter);
       translateXOffset = translateXOffset + xOffset;
-    }
+    } // Calculate Y position:
+
 
     let translateYOffset = 0;
+    const y = (_atYPosition$value = atYPosition.value) !== null && _atYPosition$value !== void 0 ? _atYPosition$value : currentY.value;
 
     if (position === 'top') {
       translateYOffset = elementHeight.value / 2 + cursorGutter;
 
-      if (currentY.value - translateYOffset < yGutter) {
-        translateYOffset = currentY.value - yGutter;
+      if (y - translateYOffset < yGutter) {
+        translateYOffset = y - yGutter;
       }
     } else if (position === 'bottom') {
       translateYOffset = -(elementHeight.value / 2) - cursorGutter / 2;
 
-      if (currentY.value - translateYOffset + elementHeight.value > height - yGutter) {
-        translateYOffset = currentY.value - (height - yGutter) + elementHeight.value;
+      if (y - translateYOffset + elementHeight.value > height - yGutter) {
+        translateYOffset = y - (height - yGutter) + elementHeight.value;
       }
+    } // determine final translateY value
+
+
+    let translateY;
+
+    if (type === 'crosshair' || isStatic) {
+      translateY = y - translateYOffset;
+    } else {
+      if (position === 'top') {
+        translateY = yGutter;
+      } else {
+        translateY = height - elementHeight.value - yGutter;
+      }
+    }
+
+    let opacity = isActive.value ? 1 : 0;
+
+    if (isStatic) {
+      // Only show static when there is no active cursor
+      opacity = withTiming(isActive.value ? 0 : 1);
     }
 
     return {
       transform: [{
-        translateX: currentX.value - translateXOffset
+        translateX: x - translateXOffset
       }, {
-        translateY: type === 'crosshair' ? currentY.value - translateYOffset : position === 'top' ? yGutter : height - elementHeight.value - yGutter
+        translateY: translateY
       }],
-      opacity: isActive.value ? 1 : 0
+      opacity: opacity
     };
   });
   return /*#__PURE__*/React.createElement(Animated.View, _extends({
@@ -84,6 +124,7 @@ export function LineChartTooltip({
       alignSelf: 'flex-start'
     }, animatedCursorStyle, props.style]
   }), children || /*#__PURE__*/React.createElement(LineChartPriceText, _extends({
+    index: at,
     style: [textStyle]
   }, textProps)));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["Tooltip.tsx"],"names":["React","Animated","useAnimatedStyle","useSharedValue","LineChartDimensionsContext","CursorContext","LineChartPriceText","useLineChart","LineChartTooltip","displayName","children","xGutter","yGutter","cursorGutter","position","textProps","textStyle","props","width","height","useContext","type","currentX","currentY","isActive","x","elementWidth","elementHeight","handleLayout","useCallback","event","value","nativeEvent","layout","animatedCursorStyle","translateXOffset","xOffset","translateYOffset","transform","translateX","translateY","opacity","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  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":["React","Animated","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","LineChartDimensionsContext","CursorContext","LineChartPriceText","useLineChart","getYForX","useMemo","LineChartTooltip","displayName","children","xGutter","yGutter","cursorGutter","position","textProps","textStyle","at","props","width","height","parsedPath","pointWidth","useContext","type","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/module/charts/line/index.js

@@ -15,6 +15,7 @@ import { LineChartDatetimeText } from './DatetimeText';
 import { useLineChartDatetime } from './useDatetime';
 import { useLineChartPrice } from './usePrice';
 import { useLineChart } from './useLineChart';
+import { LineChartHoverTrap } from '../line/HoverTrap';
 export * from './Chart';
 export * from './ChartPath';
 export * from './Highlight';
@@ -49,6 +50,7 @@ export const LineChart = Object.assign(_LineChart, {
   DatetimeText: LineChartDatetimeText,
   useDatetime: useLineChartDatetime,
   usePrice: useLineChartPrice,
-  useChart: useLineChart
+  useChart: useLineChart,
+  HoverTrap: LineChartHoverTrap
 });
 //# sourceMappingURL=index.js.map