react-native-wagmi-charts 1.8.0 → 2.0.0

package/src/charts/line/ChartPath.tsx

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

package/src/charts/line/Context.tsx

@@ -30,6 +30,8 @@ type LineChartProviderProps = {
   xLength?: number;
 };
 
+LineChartProvider.displayName = 'LineChartProvider';
+
 export function LineChartProvider({
   children,
   data = [],

package/src/charts/line/Cursor.tsx

@@ -19,6 +19,8 @@ export type LineChartCursorProps = LongPressGestureHandlerProps & {
 
 export const CursorContext = React.createContext({ type: '' });
 
+LineChartCursor.displayName = 'LineChartCursor';
+
 export function LineChartCursor({
   children,
   type,

package/src/charts/line/CursorCrosshair.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ViewProps } from 'react-native';
+import { Platform, View, ViewProps } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   withSpring,
@@ -8,7 +8,10 @@ import Animated, {
 import { LineChartCursor, LineChartCursorProps } from './Cursor';
 import { useLineChart } from './useLineChart';
 
-type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'> & {
+type LineChartCursorCrosshairProps = Omit<
+  LineChartCursorProps,
+  'children' | 'type'
+> & {
   children?: React.ReactNode;
   color?: string;
   size?: number;
@@ -18,6 +21,8 @@ type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'> & {
   crosshairOuterProps?: ViewProps;
 };
 
+LineChartCursorCrosshair.displayName = 'LineChartCursorCrosshair';
+
 export function LineChartCursorCrosshair({
   children,
   color = 'black',
@@ -30,14 +35,24 @@ export function LineChartCursorCrosshair({
 }: LineChartCursorCrosshairProps) {
   const { currentX, currentY, isActive } = useLineChart();
 
+  // It seems that enabling spring animation on initial render on Android causes a crash.
+  const [enableSpringAnimation, setEnableSpringAnimation] = React.useState(
+    Platform.OS === 'ios'
+  );
+  React.useEffect(() => {
+    setEnableSpringAnimation(true);
+  }, []);
+
   const animatedCursorStyle = useAnimatedStyle(() => ({
     transform: [
       { translateX: currentX.value - outerSize / 2 },
       { translateY: currentY.value - outerSize / 2 },
       {
-        scale: withSpring(isActive.value ? 1 : 0, {
-          damping: 10,
-        }),
+        scale: enableSpringAnimation
+          ? withSpring(isActive.value ? 1 : 0, {
+              damping: 10,
+            })
+          : 0,
       },
     ],
   }));

package/src/charts/line/CursorLine.tsx

@@ -13,11 +13,13 @@ type LineChartCursorLineProps = {
   lineProps?: Partial<LineProps>;
 };
 
-export const LineChartCursorLine = ({
+LineChartCursorLine.displayName = 'LineChartCursorLine';
+
+export function LineChartCursorLine({
   children,
   color = 'gray',
   lineProps = {},
-}: LineChartCursorLineProps) => {
+}: LineChartCursorLineProps) {
   const { height } = React.useContext(LineChartDimensionsContext);
   const { currentX, isActive } = useLineChart();
 
@@ -46,7 +48,7 @@ export const LineChartCursorLine = ({
       {children}
     </LineChartCursor>
   );
-};
+}
 
 const styles = StyleSheet.create({
   svg: {

package/src/charts/line/DatetimeText.tsx

@@ -14,6 +14,8 @@ type LineChartDatetimeProps = {
   style?: Animated.AnimateProps<RNTextProps>['style'];
 };
 
+LineChartDatetimeText.displayName = 'LineChartDatetimeText';
+
 export function LineChartDatetimeText({
   locale,
   options,

package/src/charts/line/Dot.tsx

@@ -1,36 +1,39 @@
 import * as React from 'react';
 import Animated, {
   Easing,
-  useAnimatedStyle,
+  useAnimatedProps,
   useDerivedValue,
   withRepeat,
   withSequence,
   withTiming,
 } from 'react-native-reanimated';
-import { View } from 'react-native';
+import { Circle, CircleProps } 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';
-import type { ViewProps } from 'react-native';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
 export type LineChartDotProps = {
-  dotProps?: ViewProps;
-  outerDotProps?: ViewProps;
+  dotProps?: Animated.AnimateProps<CircleProps>;
+  outerDotProps?: Animated.AnimateProps<CircleProps>;
   color?: string;
+  inactiveColor?: string;
+  showInactiveColor?: boolean;
   at: number;
   size?: number;
+  hasPulse?: boolean;
+  hasOuterDot?: boolean;
   /**
    * If `always`, the outer dot will still animate when interaction is active.
    *
-   * If `never`, the outer dot will never animate.
-   *
    * If `while-inactive`, the outer dot will animate only when the interaction is inactive.
    *
    * Default: `while-inactive`
    */
-  pulsesOuter?: 'always' | 'while-inactive' | 'never';
+  pulseBehaviour?: 'always' | 'while-inactive';
   /**
    * Defaults to `size * 4`
    */
@@ -41,52 +44,82 @@ export type LineChartDotProps = {
 LineChartDot.displayName = 'LineChartDot';
 
 export function LineChartDot({
-  color = 'black',
   at,
-  size = 8,
-  pulsesOuter = 'while-inactive',
-  outerSize = size * 4,
+  color: defaultColor = 'black',
   dotProps,
+  hasOuterDot: defaultHasOuterDot = false,
+  hasPulse = false,
+  inactiveColor,
   outerDotProps,
+  pulseBehaviour = 'while-inactive',
+  pulseDurationMs = 800,
+  showInactiveColor = true,
+  size = 4,
+  outerSize = size * 4,
 }: LineChartDotProps) {
   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 containerStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        { translateX: x.value - outerSize / 2 },
-        { translateY: y.value - outerSize / 2 },
-      ],
+  ////////////////////////////////////////////////////////////
+
+  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') {
+
+    if (!hasPulse) {
+      return defaultProps;
+    }
+
+    if (isActive.value && pulseBehaviour === 'while-inactive') {
       return {
-        opacity,
+        ...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,
         })
       ),
@@ -96,8 +129,8 @@ export function LineChartDot({
     const scale = withRepeat(
       withSequence(
         withTiming(0),
-        withTiming(1, {
-          duration: enterMs,
+        withTiming(outerSize, {
+          duration: pulseDurationMs,
           easing,
         })
       ),
@@ -105,74 +138,38 @@ export function LineChartDot({
       false
     );
 
-    if (pulsesOuter === 'while-inactive') {
+    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 {
+      ...defaultProps,
       opacity: animatedOpacity,
-      transform: [
-        {
-          scale,
-        },
-      ],
+      r: scale,
     };
-  }, [pulsesOuter]);
+  }, [outerSize]);
+
+  ////////////////////////////////////////////////////////////
 
   return (
-    <Animated.View
-      pointerEvents="none"
-      style={useMemo(
-        () => [
-          {
-            width: outerSize,
-            height: outerSize,
-            alignItems: 'center',
-            justifyContent: 'center',
-          },
-          containerStyle,
-        ],
-        [containerStyle, outerSize]
-      )}
-    >
-      <Animated.View
-        {...outerDotProps}
-        style={useMemo(
-          () => [
-            {
-              backgroundColor: color,
-              width: outerSize,
-              height: outerSize,
-              borderRadius: outerSize,
-              position: 'absolute',
-            },
-            outerStyle,
-            outerDotProps?.style,
-          ],
-          [color, outerSize, outerStyle, outerDotProps?.style]
-        )}
-      />
-      <View
+    <>
+      <AnimatedCircle
+        animatedProps={animatedDotProps}
+        r={size}
+        fill={color}
+        opacity={opacity}
         {...dotProps}
-        style={useMemo(
-          () => [
-            {
-              backgroundColor: color,
-              width: size,
-              height: size,
-              borderRadius: size,
-            },
-            dotProps?.style,
-          ],
-          [color, size, dotProps?.style]
-        )}
       />
-    </Animated.View>
+      {hasOuterDot && (
+        <AnimatedCircle
+          animatedProps={animatedOuterDotProps}
+          fill={color}
+          {...outerDotProps}
+        />
+      )}
+    </>
   );
 }

package/src/charts/line/Gradient.tsx

@@ -1,16 +1,10 @@
 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, PathProps } 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);
 
@@ -21,6 +15,8 @@ export type LineChartGradientProps = Animated.AnimateProps<PathProps> & {
 
 let id = 0;
 
+LineChartGradient.displayName = 'LineChartGradient';
+
 export function LineChartGradient({
   color: overrideColor = undefined,
   children,
@@ -34,32 +30,9 @@ export function LineChartGradient({
 
   ////////////////////////////////////////////////
 
-  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,
   });
 
   ////////////////////////////////////////////////

package/src/charts/line/Group.tsx

@@ -1,52 +1,9 @@
 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 {
-  ReactNode,
-  ReactChild,
-  Children,
-  isValidElement,
-  cloneElement,
-} from 'react';
+import { ReactNode, Children, cloneElement } from 'react';
 import { ViewProps, View } from 'react-native';
-import { LineChart } from './Chart';
+import flattenChildren from 'react-keyed-flatten-children';
 
-export default function flattenChildren(
-  children: ReactNode,
-  depth: number = 0,
-  keys: (string | number)[] = []
-): ReactChild[] {
-  return Children.toArray(children).reduce(
-    // eslint-disable-next-line
-    (acc: ReactChild[], node: any, nodeIndex) => {
-      if (node.type === React.Fragment) {
-        acc.push.apply(
-          acc,
-          flattenChildren(
-            node.props.children,
-            depth + 1,
-            keys.concat(node.key || nodeIndex)
-          )
-        );
-      } else {
-        if (isValidElement(node)) {
-          acc.push(
-            cloneElement(node, {
-              key: keys.concat(String(node.key)).join('.'),
-            })
-          );
-        } else if (typeof node === 'string' || typeof node === 'number') {
-          acc.push(node);
-        }
-      }
-      return acc;
-    },
-    []
-  );
-}
+import { LineChart } from './Chart';
 
 type Props = {
   children: ReactNode;
@@ -57,7 +14,7 @@ export function LineChartGroup({ children, ...props }: Props) {
   const flatChildrenCount = Children.count(flatChildren);
   return (
     <View {...props}>
-      {/* eslint-disable-next-line */}
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       {Children.map(flatChildren, (child: any, index) => {
         const isLast = index === flatChildrenCount - 1;
         if (!isLast && child.type === LineChart) {