react-native-wagmi-charts 1.8.0 → 2.0.0

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

@@ -1,21 +1,27 @@
 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, useAnimatedStyle, useDerivedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
-import { View } from 'react-native';
+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 { useMemo } from 'react';
 import { LineChartDimensionsContext } from './Chart';
+import { LineChartPathContext } from './ChartPath';
 import { useLineChart } from './useLineChart';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 LineChartDot.displayName = 'LineChartDot';
 export function LineChartDot({
-  color = 'black',
   at,
-  size = 8,
-  pulsesOuter = 'while-inactive',
-  outerSize = size * 4,
+  color: defaultColor = 'black',
   dotProps,
-  outerDotProps
+  hasOuterDot: defaultHasOuterDot = false,
+  hasPulse = false,
+  inactiveColor,
+  outerDotProps,
+  pulseBehaviour = 'while-inactive',
+  pulseDurationMs = 800,
+  showInactiveColor = true,
+  size = 4,
+  outerSize = size * 4
 }) {
   const {
     data,
@@ -24,79 +30,76 @@ export function LineChartDot({
   const {
     path,
     pathWidth: width
-  } = React.useContext(LineChartDimensionsContext);
-  const parsedPath = React.useMemo(() => parse(path), [path]);
-  const pointWidth = React.useMemo(() => width / (data.length - 1), [data.length, 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 containerStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{
-        translateX: x.value - outerSize / 2
-      }, {
-        translateY: y.value - outerSize / 2
-      }]
+  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
     };
-  });
-  const outerStyle = useAnimatedStyle(() => {
-    let opacity = 0.1;
 
-    if (pulsesOuter === 'never') {
-      return {
-        opacity
+    if (!hasPulse) {
+      return defaultProps;
+    }
+
+    if (isActive.value && pulseBehaviour === 'while-inactive') {
+      return { ...defaultProps,
+        r: 0
       };
     }
 
-    const enterMs = 800;
     const easing = Easing.out(Easing.sin);
     const animatedOpacity = withRepeat(withSequence(withTiming(0.8), withTiming(0, {
-      duration: enterMs,
+      duration: pulseDurationMs,
       easing
     })), -1, false);
-    const scale = withRepeat(withSequence(withTiming(0), withTiming(1, {
-      duration: enterMs,
+    const scale = withRepeat(withSequence(withTiming(0), withTiming(outerSize, {
+      duration: pulseDurationMs,
       easing
     })), -1, false);
 
-    if (pulsesOuter === 'while-inactive') {
-      return {
+    if (pulseBehaviour === 'while-inactive') {
+      return { ...defaultProps,
         opacity: isActive.value ? withTiming(0) : animatedOpacity,
-        transform: [{
-          scale: isActive.value ? withTiming(0) : scale
-        }]
+        r: isActive.value ? withTiming(0) : scale
       };
     }
 
-    return {
+    return { ...defaultProps,
       opacity: animatedOpacity,
-      transform: [{
-        scale
-      }]
+      r: scale
     };
-  }, [pulsesOuter]);
-  return /*#__PURE__*/React.createElement(Animated.View, {
-    pointerEvents: "none",
-    style: useMemo(() => [{
-      width: outerSize,
-      height: outerSize,
-      alignItems: 'center',
-      justifyContent: 'center'
-    }, containerStyle], [containerStyle, outerSize])
-  }, /*#__PURE__*/React.createElement(Animated.View, _extends({}, outerDotProps, {
-    style: useMemo(() => [{
-      backgroundColor: color,
-      width: outerSize,
-      height: outerSize,
-      borderRadius: outerSize,
-      position: 'absolute'
-    }, outerStyle, outerDotProps === null || outerDotProps === void 0 ? void 0 : outerDotProps.style], [color, outerSize, outerStyle, outerDotProps === null || outerDotProps === void 0 ? void 0 : outerDotProps.style])
-  })), /*#__PURE__*/React.createElement(View, _extends({}, dotProps, {
-    style: useMemo(() => [{
-      backgroundColor: color,
-      width: size,
-      height: size,
-      borderRadius: size
-    }, dotProps === null || dotProps === void 0 ? void 0 : dotProps.style], [color, size, dotProps === null || dotProps === void 0 ? void 0 : dotProps.style])
-  })));
+  }, [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

@@ -1 +1 @@
-{"version":3,"sources":["Dot.tsx"],"names":["React","Animated","Easing","useAnimatedStyle","useDerivedValue","withRepeat","withSequence","withTiming","View","getYForX","parse","useMemo","LineChartDimensionsContext","useLineChart","LineChartDot","displayName","color","at","size","pulsesOuter","outerSize","dotProps","outerDotProps","data","isActive","path","pathWidth","width","useContext","parsedPath","pointWidth","length","x","y","value","containerStyle","transform","translateX","translateY","outerStyle","opacity","enterMs","easing","out","sin","animatedOpacity","duration","scale","height","alignItems","justifyContent","backgroundColor","borderRadius","position","style"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  withRepeat,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport { View } from 'react-native';\nimport { getYForX, parse } from 'react-native-redash';\nimport { useMemo } from 'react';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { useLineChart } from './useLineChart';\nimport type { ViewProps } from 'react-native';\n\nexport type LineChartDotProps = {\n  dotProps?: ViewProps;\n  outerDotProps?: ViewProps;\n  color?: string;\n  at: number;\n  size?: number;\n  /**\n   * If `always`, the outer dot will still animate when interaction is active.\n   *\n   * If `never`, the outer dot will never animate.\n   *\n   * If `while-inactive`, the outer dot will animate only when the interaction is inactive.\n   *\n   * Default: `while-inactive`\n   */\n  pulsesOuter?: 'always' | 'while-inactive' | 'never';\n  /**\n   * Defaults to `size * 4`\n   */\n  outerSize?: number;\n  pulseDurationMs?: number;\n};\n\nLineChartDot.displayName = 'LineChartDot';\n\nexport function LineChartDot({\n  color = 'black',\n  at,\n  size = 8,\n  pulsesOuter = 'while-inactive',\n  outerSize = size * 4,\n  dotProps,\n  outerDotProps,\n}: LineChartDotProps) {\n  const { data, isActive } = useLineChart();\n  const { path, pathWidth: width } = React.useContext(\n    LineChartDimensionsContext\n  );\n\n  const parsedPath = React.useMemo(() => parse(path), [path]);\n  const pointWidth = React.useMemo(\n    () => width / (data.length - 1),\n    [data.length, width]\n  );\n\n  const x = useDerivedValue(() => withTiming(pointWidth * at));\n  const y = useDerivedValue(() =>\n    withTiming(getYForX(parsedPath!, x.value) || 0)\n  );\n\n  const containerStyle = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { translateX: x.value - outerSize / 2 },\n        { translateY: y.value - outerSize / 2 },\n      ],\n    };\n  });\n  const outerStyle = useAnimatedStyle(() => {\n    let opacity = 0.1;\n    if (pulsesOuter === 'never') {\n      return {\n        opacity,\n      };\n    }\n    const enterMs = 800;\n    const easing = Easing.out(Easing.sin);\n    const animatedOpacity = withRepeat(\n      withSequence(\n        withTiming(0.8),\n        withTiming(0, {\n          duration: enterMs,\n          easing,\n        })\n      ),\n      -1,\n      false\n    );\n    const scale = withRepeat(\n      withSequence(\n        withTiming(0),\n        withTiming(1, {\n          duration: enterMs,\n          easing,\n        })\n      ),\n      -1,\n      false\n    );\n\n    if (pulsesOuter === 'while-inactive') {\n      return {\n        opacity: isActive.value ? withTiming(0) : animatedOpacity,\n        transform: [\n          {\n            scale: isActive.value ? withTiming(0) : scale,\n          },\n        ],\n      };\n    }\n    return {\n      opacity: animatedOpacity,\n      transform: [\n        {\n          scale,\n        },\n      ],\n    };\n  }, [pulsesOuter]);\n\n  return (\n    <Animated.View\n      pointerEvents=\"none\"\n      style={useMemo(\n        () => [\n          {\n            width: outerSize,\n            height: outerSize,\n            alignItems: 'center',\n            justifyContent: 'center',\n          },\n          containerStyle,\n        ],\n        [containerStyle, outerSize]\n      )}\n    >\n      <Animated.View\n        {...outerDotProps}\n        style={useMemo(\n          () => [\n            {\n              backgroundColor: color,\n              width: outerSize,\n              height: outerSize,\n              borderRadius: outerSize,\n              position: 'absolute',\n            },\n            outerStyle,\n            outerDotProps?.style,\n          ],\n          [color, outerSize, outerStyle, outerDotProps?.style]\n        )}\n      />\n      <View\n        {...dotProps}\n        style={useMemo(\n          () => [\n            {\n              backgroundColor: color,\n              width: size,\n              height: size,\n              borderRadius: size,\n            },\n            dotProps?.style,\n          ],\n          [color, size, dotProps?.style]\n        )}\n      />\n    </Animated.View>\n  );\n}\n"]}
+{"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

@@ -1,30 +1,8 @@
 import React from 'react';
-/* Returns React children into an array, flattening fragments.
-
-Forked from https://github.com/grrowl/react-keyed-flatten-children/blob/master/index.ts
-*/
-
-import { Children, isValidElement, cloneElement } from 'react';
+import { Children, cloneElement } from 'react';
 import { View } from 'react-native';
+import flattenChildren from 'react-keyed-flatten-children';
 import { LineChart } from './Chart';
-export default function flattenChildren(children, depth = 0, keys = []) {
-  return Children.toArray(children).reduce( // eslint-disable-next-line
-  (acc, node, nodeIndex) => {
-    if (node.type === React.Fragment) {
-      acc.push.apply(acc, flattenChildren(node.props.children, depth + 1, keys.concat(node.key || nodeIndex)));
-    } else {
-      if ( /*#__PURE__*/isValidElement(node)) {
-        acc.push( /*#__PURE__*/cloneElement(node, {
-          key: keys.concat(String(node.key)).join('.')
-        }));
-      } else if (typeof node === 'string' || typeof node === 'number') {
-        acc.push(node);
-      }
-    }
-
-    return acc;
-  }, []);
-}
 export function LineChartGroup({
   children,
   ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","Children","isValidElement","cloneElement","View","LineChart","flattenChildren","children","depth","keys","toArray","reduce","acc","node","nodeIndex","type","Fragment","push","apply","props","concat","key","String","join","LineChartGroup","flatChildren","flatChildrenCount","count","map","child","index","isLast","absolute"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA;AACA;AACA;AACA;;AACA,SAGEC,QAHF,EAIEC,cAJF,EAKEC,YALF,QAMO,OANP;AAOA,SAAoBC,IAApB,QAAgC,cAAhC;AACA,SAASC,SAAT,QAA0B,SAA1B;AAEA,eAAe,SAASC,eAAT,CACbC,QADa,EAEbC,KAAa,GAAG,CAFH,EAGbC,IAAyB,GAAG,EAHf,EAIC;AACd,SAAOR,QAAQ,CAACS,OAAT,CAAiBH,QAAjB,EAA2BI,MAA3B,EACL;AACA,GAACC,GAAD,EAAoBC,IAApB,EAA+BC,SAA/B,KAA6C;AAC3C,QAAID,IAAI,CAACE,IAAL,KAAcf,KAAK,CAACgB,QAAxB,EAAkC;AAChCJ,MAAAA,GAAG,CAACK,IAAJ,CAASC,KAAT,CACEN,GADF,EAEEN,eAAe,CACbO,IAAI,CAACM,KAAL,CAAWZ,QADE,EAEbC,KAAK,GAAG,CAFK,EAGbC,IAAI,CAACW,MAAL,CAAYP,IAAI,CAACQ,GAAL,IAAYP,SAAxB,CAHa,CAFjB;AAQD,KATD,MASO;AACL,wBAAIZ,cAAc,CAACW,IAAD,CAAlB,EAA0B;AACxBD,QAAAA,GAAG,CAACK,IAAJ,eACEd,YAAY,CAACU,IAAD,EAAO;AACjBQ,UAAAA,GAAG,EAAEZ,IAAI,CAACW,MAAL,CAAYE,MAAM,CAACT,IAAI,CAACQ,GAAN,CAAlB,EAA8BE,IAA9B,CAAmC,GAAnC;AADY,SAAP,CADd;AAKD,OAND,MAMO,IAAI,OAAOV,IAAP,KAAgB,QAAhB,IAA4B,OAAOA,IAAP,KAAgB,QAAhD,EAA0D;AAC/DD,QAAAA,GAAG,CAACK,IAAJ,CAASJ,IAAT;AACD;AACF;;AACD,WAAOD,GAAP;AACD,GAxBI,EAyBL,EAzBK,CAAP;AA2BD;AAMD,OAAO,SAASY,cAAT,CAAwB;AAAEjB,EAAAA,QAAF;AAAY,KAAGY;AAAf,CAAxB,EAAuD;AAC5D,QAAMM,YAAY,GAAGnB,eAAe,CAACC,QAAD,CAApC;AACA,QAAMmB,iBAAiB,GAAGzB,QAAQ,CAAC0B,KAAT,CAAeF,YAAf,CAA1B;AACA,sBACE,oBAAC,IAAD,EAAUN,KAAV,EAEGlB,QAAQ,CAAC2B,GAAT,CAAaH,YAAb,EAA2B,CAACI,KAAD,EAAaC,KAAb,KAAuB;AACjD,UAAMC,MAAM,GAAGD,KAAK,KAAKJ,iBAAiB,GAAG,CAA7C;;AACA,QAAI,CAACK,MAAD,IAAWF,KAAK,CAACd,IAAN,KAAeV,SAA9B,EAAyC;AACvC,0BAAOF,YAAY,CAAC0B,KAAD,EAAQ;AACzBG,QAAAA,QAAQ,EAAE;AADe,OAAR,CAAnB;AAGD;;AACD,WAAOH,KAAP;AACD,GARA,CAFH,CADF;AAcD","sourcesContent":["import React from 'react';\n\n/* Returns React children into an array, flattening fragments.\n\nForked from https://github.com/grrowl/react-keyed-flatten-children/blob/master/index.ts\n*/\nimport {\n  ReactNode,\n  ReactChild,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { ViewProps, View } from 'react-native';\nimport { LineChart } from './Chart';\n\nexport default function flattenChildren(\n  children: ReactNode,\n  depth: number = 0,\n  keys: (string | number)[] = []\n): ReactChild[] {\n  return Children.toArray(children).reduce(\n    // eslint-disable-next-line\n    (acc: ReactChild[], node: any, nodeIndex) => {\n      if (node.type === React.Fragment) {\n        acc.push.apply(\n          acc,\n          flattenChildren(\n            node.props.children,\n            depth + 1,\n            keys.concat(node.key || nodeIndex)\n          )\n        );\n      } else {\n        if (isValidElement(node)) {\n          acc.push(\n            cloneElement(node, {\n              key: keys.concat(String(node.key)).join('.'),\n            })\n          );\n        } else if (typeof node === 'string' || typeof node === 'number') {\n          acc.push(node);\n        }\n      }\n      return acc;\n    },\n    []\n  );\n}\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 */}\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"]}
+{"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,