react-native-wagmi-charts 1.6.0 → 2.0.1

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

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

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

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

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

@@ -1,14 +1,14 @@
 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, { useAnimatedProps, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { Defs, LinearGradient, Stop, Path } from 'react-native-svg';
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPathContext } from './ChartPath';
-import interpolatePath from './interpolatePath';
-import { usePrevious } from '../../utils';
+import useAnimatedPath from './useAnimatedPath';
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 let id = 0;
+LineChartGradient.displayName = 'LineChartGradient';
 export function LineChartGradient({
   color: overrideColor = undefined,
   children,
@@ -23,27 +23,11 @@ export function LineChartGradient({
   } = React.useContext(LineChartPathContext);
   const color = overrideColor || contextColor; ////////////////////////////////////////////////
 
-  const transition = useSharedValue(0);
-  const previousPath = usePrevious(area);
-  useAnimatedReaction(() => {
-    return area;
-  }, (_, previous) => {
-    if (previous) {
-      transition.value = 0;
-      transition.value = withTiming(1);
-    }
-  }, [area]);
-  const animatedProps = useAnimatedProps(() => {
-    let d = area || '';
-
-    if (previousPath && isTransitionEnabled) {
-      const pathInterpolator = interpolatePath(previousPath, area, null);
-      d = pathInterpolator(transition.value);
-    }
-
-    return {
-      d
-    };
+  const {
+    animatedProps
+  } = useAnimatedPath({
+    enabled: isTransitionEnabled,
+    path: area
   }); ////////////////////////////////////////////////
 
   const localId = React.useRef(++id); ////////////////////////////////////////////////

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

@@ -1 +1 @@
-{"version":3,"sources":["Gradient.tsx"],"names":["React","Animated","useAnimatedProps","useAnimatedReaction","useSharedValue","withTiming","Defs","LinearGradient","Stop","Path","LineChartDimensionsContext","LineChartPathContext","interpolatePath","usePrevious","AnimatedPath","createAnimatedComponent","id","LineChartGradient","color","overrideColor","undefined","children","props","area","useContext","contextColor","isTransitionEnabled","transition","previousPath","_","previous","value","animatedProps","d","pathInterpolator","localId","useRef","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { Defs, LinearGradient, Stop, Path, PathProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPathContext } from './ChartPath';\nimport interpolatePath from './interpolatePath';\nimport { usePrevious } from '../../utils';\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\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 transition = useSharedValue(0);\n\n  const previousPath = usePrevious(area);\n\n  useAnimatedReaction(\n    () => {\n      return area;\n    },\n    (_, previous) => {\n      if (previous) {\n        transition.value = 0;\n        transition.value = withTiming(1);\n      }\n    },\n    [area]\n  );\n\n  const animatedProps = useAnimatedProps(() => {\n    let d = area || '';\n    if (previousPath && isTransitionEnabled) {\n      const pathInterpolator = interpolatePath(previousPath, area, null);\n      d = pathInterpolator(transition.value);\n    }\n    return {\n      d,\n    };\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,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"]}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Children, cloneElement } from 'react';
+import { View } from 'react-native';
+import flattenChildren from 'react-keyed-flatten-children';
+import { LineChart } from './Chart';
+export function LineChartGroup({
+  children,
+  ...props
+}) {
+  const flatChildren = flattenChildren(children);
+  const flatChildrenCount = Children.count(flatChildren);
+  return /*#__PURE__*/React.createElement(View, props, Children.map(flatChildren, (child, index) => {
+    const isLast = index === flatChildrenCount - 1;
+
+    if (!isLast && child.type === LineChart) {
+      return /*#__PURE__*/cloneElement(child, {
+        absolute: true
+      });
+    }
+
+    return child;
+  }));
+}
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Group.tsx"],"names":["React","Children","cloneElement","View","flattenChildren","LineChart","LineChartGroup","children","props","flatChildren","flatChildrenCount","count","map","child","index","isLast","type","absolute"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,QAApB,EAA8BC,YAA9B,QAAkD,OAAlD;AACA,SAAoBC,IAApB,QAAgC,cAAhC;AACA,OAAOC,eAAP,MAA4B,8BAA5B;AAEA,SAASC,SAAT,QAA0B,SAA1B;AAMA,OAAO,SAASC,cAAT,CAAwB;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAxB,EAAuD;AAC5D,QAAMC,YAAY,GAAGL,eAAe,CAACG,QAAD,CAApC;AACA,QAAMG,iBAAiB,GAAGT,QAAQ,CAACU,KAAT,CAAeF,YAAf,CAA1B;AACA,sBACE,oBAAC,IAAD,EAAUD,KAAV,EAEGP,QAAQ,CAACW,GAAT,CAAaH,YAAb,EAA2B,CAACI,KAAD,EAAaC,KAAb,KAAuB;AACjD,UAAMC,MAAM,GAAGD,KAAK,KAAKJ,iBAAiB,GAAG,CAA7C;;AACA,QAAI,CAACK,MAAD,IAAWF,KAAK,CAACG,IAAN,KAAeX,SAA9B,EAAyC;AACvC,0BAAOH,YAAY,CAACW,KAAD,EAAQ;AACzBI,QAAAA,QAAQ,EAAE;AADe,OAAR,CAAnB;AAGD;;AACD,WAAOJ,KAAP;AACD,GARA,CAFH,CADF;AAcD","sourcesContent":["import React from 'react';\nimport { ReactNode, Children, cloneElement } from 'react';\nimport { ViewProps, View } from 'react-native';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { LineChart } from './Chart';\n\ntype Props = {\n  children: ReactNode;\n} & ViewProps;\n\nexport function LineChartGroup({ children, ...props }: Props) {\n  const flatChildren = flattenChildren(children);\n  const flatChildrenCount = Children.count(flatChildren);\n  return (\n    <View {...props}>\n      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n      {Children.map(flatChildren, (child: any, index) => {\n        const isLast = index === flatChildrenCount - 1;\n        if (!isLast && child.type === LineChart) {\n          return cloneElement(child, {\n            absolute: true,\n          });\n        }\n        return child;\n      })}\n    </View>\n  );\n}\n"]}

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

@@ -0,0 +1,69 @@
+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 from 'react-native-reanimated';
+import { Path } from 'react-native-svg';
+import { LineChartDimensionsContext } from './Chart';
+import { LineChartPathContext } from './ChartPath';
+import useAnimatedPath from './useAnimatedPath';
+import { useLineChart } from './useLineChart';
+import { getPath } from './utils';
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+LineChartHighlight.displayName = 'LineChartHighlight';
+export function LineChartHighlight({
+  color = 'black',
+  inactiveColor,
+  showInactiveColor = true,
+  from,
+  to,
+  width: strokeWidth = 3,
+  ...props
+}) {
+  const {
+    data,
+    yDomain
+  } = useLineChart();
+  const {
+    pathWidth,
+    height,
+    gutter,
+    shape
+  } = React.useContext(LineChartDimensionsContext);
+  const {
+    isTransitionEnabled,
+    isInactive: _isInactive
+  } = React.useContext(LineChartPathContext);
+  const isInactive = showInactiveColor && _isInactive; ////////////////////////////////////////////////
+
+  const path = React.useMemo(() => {
+    if (data && data.length > 0) {
+      return getPath({
+        data,
+        from,
+        to,
+        width: pathWidth,
+        height,
+        gutter,
+        shape,
+        yDomain
+      });
+    }
+
+    return '';
+  }, [data, from, to, pathWidth, height, gutter, shape, yDomain]);
+  const {
+    animatedProps
+  } = useAnimatedPath({
+    enabled: isTransitionEnabled,
+    path
+  }); ////////////////////////////////////////////////
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedPath, _extends({
+    animatedProps: animatedProps,
+    fill: "transparent",
+    stroke: isInactive ? inactiveColor || color : color,
+    strokeWidth: strokeWidth,
+    strokeOpacity: isInactive && !inactiveColor ? 0.5 : 1
+  }, props)));
+}
+//# sourceMappingURL=Highlight.js.map

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

@@ -0,0 +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"]}

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

@@ -7,14 +7,15 @@ import { getYForX, parse } from 'react-native-redash';
 import { LineChartDimensionsContext } from './Chart';
 import { useLineChart } from './useLineChart';
 const AnimatedLine = Animated.createAnimatedComponent(SVGLine);
-export const LineChartHorizontalLine = ({
+LineChartHorizontalLine.displayName = 'LineChartHorizontalLine';
+export function LineChartHorizontalLine({
   color = 'gray',
   lineProps = {},
   at = {
     index: 0
   },
   offsetY = 0
-}) => {
+}) {
   const {
     width,
     path,
@@ -62,5 +63,5 @@ export const LineChartHorizontalLine = ({
     stroke: color,
     strokeDasharray: "3 3"
   }, lineProps));
-};
+}
 //# sourceMappingURL=HorizontalLine.js.map

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","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;AAmCA,OAAO,MAAMO,uBAAuB,GAAG,CAAC;AACtCC,EAAAA,KAAK,GAAG,MAD8B;AAEtCC,EAAAA,SAAS,GAAG,EAF0B;AAGtCC,EAAAA,EAAE,GAAG;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAHiC;AAItCC,EAAAA,OAAO,GAAG;AAJ4B,CAAD,KAKZ;AACzB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,MAAf;AAAuBC,IAAAA;AAAvB,MAAkCtB,KAAK,CAACuB,UAAN,CACtCd,0BADsC,CAAxC;AAGA,QAAM;AAAEe,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAoBf,YAAY,EAAtC;AAEA,QAAMgB,UAAU,GAAG1B,KAAK,CAAC2B,OAAN,CAAc,MAAMnB,KAAK,CAACY,IAAD,CAAzB,EAAiC,CAACA,IAAD,CAAjC,CAAnB;AACA,QAAMQ,UAAU,GAAG5B,KAAK,CAAC2B,OAAN,CACjB,MAAMR,KAAK,GAAGK,IAAI,CAACK,MADF,EAEjB,CAACL,IAAI,CAACK,MAAN,EAAcV,KAAd,CAFiB,CAAnB;AAKA,QAAMW,CAAC,GAAG3B,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,YAAMc,KAAK,GAAGxB,QAAQ,CAACmB,UAAD,EAAcE,UAAU,GAAGX,KAA3B,CAAR,IAA6C,CAA3D;AACA,aAAOb,UAAU,CAAC2B,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,WAAOjC,UAAU,CAACkC,eAAe,GAAGpB,OAAnB,CAAjB;AACD,GAxBwB,CAAzB;AA0BA,QAAMqB,iBAAiB,GAAGrC,gBAAgB,CAAC,OAAO;AAChDsC,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,CA3DM","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\nexport const 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","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"]}

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

@@ -1,51 +1,39 @@
 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, { useAnimatedProps, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { Path } from 'react-native-svg';
 import { LineChartDimensionsContext } from './Chart';
-import interpolatePath from './interpolatePath';
-import { usePrevious } from '../../utils';
+import { LineChartPathContext } from './ChartPath';
+import useAnimatedPath from './useAnimatedPath';
 const AnimatedPath = Animated.createAnimatedComponent(Path);
+LineChartPath.displayName = 'LineChartPath';
 export function LineChartPath({
   color = 'black',
+  inactiveColor,
   width: strokeWidth = 3,
-  isInactive,
-  isTransitionEnabled = true,
   ...props
 }) {
   const {
     path
-  } = React.useContext(LineChartDimensionsContext); ////////////////////////////////////////////////
-
-  const transition = useSharedValue(0);
-  const previousPath = usePrevious(path);
-  useAnimatedReaction(() => {
-    return path;
-  }, (_, previous) => {
-    if (previous) {
-      transition.value = 0;
-      transition.value = withTiming(1);
-    }
-  }, [path]);
-  const animatedProps = useAnimatedProps(() => {
-    let d = path || '';
-
-    if (previousPath && isTransitionEnabled) {
-      const pathInterpolator = interpolatePath(previousPath, path, null);
-      d = pathInterpolator(transition.value);
-    }
+  } = React.useContext(LineChartDimensionsContext);
+  const {
+    isTransitionEnabled,
+    isInactive
+  } = React.useContext(LineChartPathContext); ////////////////////////////////////////////////
 
-    return {
-      d
-    };
+  const {
+    animatedProps
+  } = useAnimatedPath({
+    enabled: isTransitionEnabled,
+    path
   }); ////////////////////////////////////////////////
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedPath, _extends({
     animatedProps: animatedProps,
     fill: "transparent",
-    stroke: color,
-    strokeOpacity: isInactive ? 0.2 : 1,
+    stroke: isInactive ? inactiveColor || color : color,
+    strokeOpacity: isInactive && !inactiveColor ? 0.2 : 1,
     strokeWidth: strokeWidth
   }, props)));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["Path.tsx"],"names":["React","Animated","useAnimatedProps","useAnimatedReaction","useSharedValue","withTiming","Path","LineChartDimensionsContext","interpolatePath","usePrevious","AnimatedPath","createAnimatedComponent","LineChartPath","color","width","strokeWidth","isInactive","isTransitionEnabled","props","path","useContext","transition","previousPath","_","previous","value","animatedProps","d","pathInterpolator"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,mBAFF,EAGEC,cAHF,EAIEC,UAJF,QAKO,yBALP;AAMA,SAASC,IAAT,QAAgC,kBAAhC;AAEA,SAASC,0BAAT,QAA2C,SAA3C;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,SAASC,WAAT,QAA4B,aAA5B;AAEA,MAAMC,YAAY,GAAGT,QAAQ,CAACU,uBAAT,CAAiCL,IAAjC,CAArB;AAwBA,OAAO,SAASM,aAAT,CAAuB;AAC5BC,EAAAA,KAAK,GAAG,OADoB;AAE5BC,EAAAA,KAAK,EAAEC,WAAW,GAAG,CAFO;AAG5BC,EAAAA,UAH4B;AAI5BC,EAAAA,mBAAmB,GAAG,IAJM;AAK5B,KAAGC;AALyB,CAAvB,EAMgB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAWnB,KAAK,CAACoB,UAAN,CAAiBb,0BAAjB,CAAjB,CADqB,CAGrB;;AAEA,QAAMc,UAAU,GAAGjB,cAAc,CAAC,CAAD,CAAjC;AAEA,QAAMkB,YAAY,GAAGb,WAAW,CAACU,IAAD,CAAhC;AAEAhB,EAAAA,mBAAmB,CACjB,MAAM;AACJ,WAAOgB,IAAP;AACD,GAHgB,EAIjB,CAACI,CAAD,EAAIC,QAAJ,KAAiB;AACf,QAAIA,QAAJ,EAAc;AACZH,MAAAA,UAAU,CAACI,KAAX,GAAmB,CAAnB;AACAJ,MAAAA,UAAU,CAACI,KAAX,GAAmBpB,UAAU,CAAC,CAAD,CAA7B;AACD;AACF,GATgB,EAUjB,CAACc,IAAD,CAViB,CAAnB;AAaA,QAAMO,aAAa,GAAGxB,gBAAgB,CAAC,MAAM;AAC3C,QAAIyB,CAAC,GAAGR,IAAI,IAAI,EAAhB;;AACA,QAAIG,YAAY,IAAIL,mBAApB,EAAyC;AACvC,YAAMW,gBAAgB,GAAGpB,eAAe,CAACc,YAAD,EAAeH,IAAf,EAAqB,IAArB,CAAxC;AACAQ,MAAAA,CAAC,GAAGC,gBAAgB,CAACP,UAAU,CAACI,KAAZ,CAApB;AACD;;AACD,WAAO;AACLE,MAAAA;AADK,KAAP;AAGD,GATqC,CAAtC,CAtBqB,CAiCrB;;AAEA,sBACE,uDACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAED,aADjB;AAEE,IAAA,IAAI,EAAC,aAFP;AAGE,IAAA,MAAM,EAAEb,KAHV;AAIE,IAAA,aAAa,EAAEG,UAAU,GAAG,GAAH,GAAS,CAJpC;AAKE,IAAA,WAAW,EAAED;AALf,KAMMG,KANN,EADF,CADF;AAYD","sourcesContent":["import * as React from 'react';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { Path, PathProps } from 'react-native-svg';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport interpolatePath from './interpolatePath';\nimport { usePrevious } from '../../utils';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nexport type LineChartPathProps = Animated.AnimateProps<PathProps> & {\n  color?: 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\nexport function LineChartPath({\n  color = 'black',\n  width: strokeWidth = 3,\n  isInactive,\n  isTransitionEnabled = true,\n  ...props\n}: LineChartPathProps) {\n  const { path } = React.useContext(LineChartDimensionsContext);\n\n  ////////////////////////////////////////////////\n\n  const transition = useSharedValue(0);\n\n  const previousPath = usePrevious(path);\n\n  useAnimatedReaction(\n    () => {\n      return path;\n    },\n    (_, previous) => {\n      if (previous) {\n        transition.value = 0;\n        transition.value = withTiming(1);\n      }\n    },\n    [path]\n  );\n\n  const animatedProps = useAnimatedProps(() => {\n    let d = path || '';\n    if (previousPath && isTransitionEnabled) {\n      const pathInterpolator = interpolatePath(previousPath, path, null);\n      d = pathInterpolator(transition.value);\n    }\n    return {\n      d,\n    };\n  });\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <AnimatedPath\n        animatedProps={animatedProps}\n        fill=\"transparent\"\n        stroke={color}\n        strokeOpacity={isInactive ? 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,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"]}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useLineChartPrice } from './usePrice';
 import { AnimatedText } from '../../components/AnimatedText';
+LineChartPriceText.displayName = 'LineChartPriceText';
 export function LineChartPriceText({
   format,
   precision = 2,

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

@@ -1 +1 @@
-{"version":3,"sources":["PriceText.tsx"],"names":["React","useLineChartPrice","AnimatedText","LineChartPriceText","format","precision","variant","style","price"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,iBAAT,QAAkC,YAAlC;AAEA,SAASC,YAAT,QAA6B,+BAA7B;AASA,OAAO,SAASC,kBAAT,CAA4B;AACjCC,EAAAA,MADiC;AAEjCC,EAAAA,SAAS,GAAG,CAFqB;AAGjCC,EAAAA,OAAO,GAAG,WAHuB;AAIjCC,EAAAA;AAJiC,CAA5B,EAKqB;AAC1B,QAAMC,KAAK,GAAGP,iBAAiB,CAAC;AAAEG,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\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","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"]}

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

@@ -6,6 +6,7 @@ import { LineChartDimensionsContext } from './Chart';
 import { CursorContext } from './Cursor';
 import { LineChartPriceText } from './PriceText';
 import { useLineChart } from './useLineChart';
+LineChartTooltip.displayName = 'LineChartTooltip';
 export function LineChartTooltip({
   children,
   xGutter = 8,

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","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\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","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"]}

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

@@ -1,10 +1,13 @@
-import { LineChartGradient } from './Gradient';
 import { LineChart as _LineChart } from './Chart';
 import { LineChartPathWrapper } from './ChartPath';
+import { LineChartHighlight } from './Highlight';
 import { LineChartProvider } from './Context';
 import { LineChartCursor } from './Cursor';
 import { LineChartCursorCrosshair } from './CursorCrosshair';
 import { LineChartCursorLine } from './CursorLine';
+import { LineChartDot } from './Dot';
+import { LineChartGradient } from './Gradient';
+import { LineChartGroup } from './Group';
 import { LineChartHorizontalLine } from './HorizontalLine';
 import { LineChartTooltip } from './Tooltip';
 import { LineChartPriceText } from './PriceText';
@@ -12,13 +15,15 @@ import { LineChartDatetimeText } from './DatetimeText';
 import { useLineChartDatetime } from './useDatetime';
 import { useLineChartPrice } from './usePrice';
 import { useLineChart } from './useLineChart';
-export * from './Gradient';
 export * from './Chart';
 export * from './ChartPath';
+export * from './Highlight';
 export * from './Context';
 export * from './Cursor';
 export * from './CursorCrosshair';
 export * from './CursorLine';
+export * from './Dot';
+export * from './Gradient';
 export * from './Tooltip';
 export * from './DatetimeText';
 export * from './Path';
@@ -28,12 +33,15 @@ export * from './useLineChart';
 export * from './usePrice';
 export * from './types';
 export const LineChart = Object.assign(_LineChart, {
-  Gradient: LineChartGradient,
   Chart: _LineChart,
+  Dot: LineChartDot,
   Path: LineChartPathWrapper,
   Cursor: LineChartCursor,
   CursorCrosshair: LineChartCursorCrosshair,
   CursorLine: LineChartCursorLine,
+  Gradient: LineChartGradient,
+  Group: LineChartGroup,
+  Highlight: LineChartHighlight,
   HorizontalLine: LineChartHorizontalLine,
   Tooltip: LineChartTooltip,
   Provider: LineChartProvider,