react-native-wagmi-charts 1.7.0 → 2.1.0

package/src/charts/candle/utils/getHeight.ts

@@ -0,0 +1,21 @@
+import { interpolate, Extrapolate } from 'react-native-reanimated';
+
+import type { TDomain } from '../types';
+
+export function getHeight({
+  value,
+  domain,
+  maxHeight,
+}: {
+  value: number;
+  domain: TDomain;
+  maxHeight: number;
+}) {
+  'worklet';
+  return interpolate(
+    value,
+    [0, Math.max(...domain) - Math.min(...domain)],
+    [0, maxHeight],
+    Extrapolate.CLAMP
+  );
+}

package/src/charts/candle/utils/getPrice.ts

@@ -0,0 +1,17 @@
+import { interpolate, Extrapolate } from 'react-native-reanimated';
+
+import type { TDomain } from '../types';
+
+export function getPrice({
+  y,
+  domain,
+  maxHeight,
+}: {
+  y: number;
+  domain: TDomain;
+  maxHeight: number;
+}) {
+  'worklet';
+  if (y === -1) return -1;
+  return interpolate(y, [0, maxHeight], domain.reverse(), Extrapolate.CLAMP);
+}

package/src/charts/candle/utils/getY.ts

@@ -0,0 +1,16 @@
+import { interpolate, Extrapolate } from 'react-native-reanimated';
+
+import type { TDomain } from '../types';
+
+export function getY({
+  value,
+  domain,
+  maxHeight,
+}: {
+  value: number;
+  domain: TDomain;
+  maxHeight: number;
+}) {
+  'worklet';
+  return interpolate(value, domain, [maxHeight, 0], Extrapolate.CLAMP);
+}

package/src/charts/candle/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './getDomain';
+export * from './getHeight';
+export * from './getPrice';
+export * from './getY';

package/src/charts/line/Chart.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+// @ts-ignore
+import * as d3Shape from 'd3-shape';
 import { Dimensions, StyleSheet, View, ViewProps } from 'react-native';
 import { LineChartContext } from './Context';
 import { LineChartIdProvider, useLineChartData } from './Data';
@@ -10,7 +12,9 @@ export const LineChartDimensionsContext = React.createContext({
   height: 0,
   path: '',
   area: '',
+  shape: d3Shape.curveBumpX,
   gutter: 0,
+  pathWidth: 0,
 });
 
 type LineChartProps = ViewProps & {
@@ -18,7 +22,7 @@ type LineChartProps = ViewProps & {
   yGutter?: number;
   width?: number;
   height?: number;
-  shape?: string;
+  shape?: unknown;
   /**
    * If your `LineChart.Provider` uses a dictionary with multiple IDs for multiple paths, then this field is required.
    */
@@ -28,26 +32,36 @@ type LineChartProps = ViewProps & {
 
 const { width: screenWidth } = Dimensions.get('window');
 
+LineChart.displayName = 'LineChart';
+
 export function LineChart({
   children,
   yGutter = 16,
   width = screenWidth,
   height = screenWidth,
-  shape,
+  shape = d3Shape.curveBumpX,
   id,
   absolute,
   ...props
 }: LineChartProps) {
-  const { yDomain } = React.useContext(LineChartContext);
+  const { yDomain, xLength } = React.useContext(LineChartContext);
   const { data } = useLineChartData({
     id,
   });
 
+  const pathWidth = React.useMemo(() => {
+    let allowedWidth = width;
+    if (xLength > data.length) {
+      allowedWidth = (width * data.length) / xLength;
+    }
+    return allowedWidth;
+  }, [data.length, width, xLength]);
+
   const path = React.useMemo(() => {
     if (data && data.length > 0) {
       return getPath({
         data,
-        width,
+        width: pathWidth,
         height,
         gutter: yGutter,
         shape,
@@ -55,13 +69,13 @@ export function LineChart({
       });
     }
     return '';
-  }, [data, width, height, yGutter, shape, yDomain]);
+  }, [data, pathWidth, height, yGutter, shape, yDomain]);
 
   const area = React.useMemo(() => {
     if (data && data.length > 0) {
       return getArea({
         data,
-        width,
+        width: pathWidth,
         height,
         gutter: yGutter,
         shape,
@@ -69,7 +83,7 @@ export function LineChart({
       });
     }
     return '';
-  }, [data, width, height, yGutter, shape, yDomain]);
+  }, [data, pathWidth, height, yGutter, shape, yDomain]);
 
   const contextValue = React.useMemo(
     () => ({
@@ -78,8 +92,10 @@ export function LineChart({
       path,
       width,
       height,
+      pathWidth,
+      shape,
     }),
-    [area, height, path, width, yGutter]
+    [yGutter, area, path, width, height, pathWidth, shape]
   );
 
   return (

package/src/charts/line/ChartPath.tsx

@@ -3,82 +3,165 @@ import { StyleSheet, View } from 'react-native';
 import { Svg } from 'react-native-svg';
 import Animated, {
   useAnimatedProps,
+  useSharedValue,
   withTiming,
+  WithTimingConfig,
 } 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,
 });
 
 type LineChartPathWrapperProps = {
   animationDuration?: number;
-  animationProps?: Partial<Animated.WithTimingConfig>;
+  animationProps?: Omit<Partial<WithTimingConfig>, 'duration'>;
   children?: React.ReactNode;
   color?: string;
+  inactiveColor?: string;
   width?: number;
+  widthOffset?: number;
   pathProps?: Partial<LineChartPathProps>;
   showInactivePath?: boolean;
+  animateOnMount?: 'foreground';
+  mountAnimationDuration?: number;
+  mountAnimationProps?: Partial<WithTimingConfig>;
 };
 
+LineChartPathWrapper.displayName = 'LineChartPathWrapper';
+
 export function LineChartPathWrapper({
   animationDuration = 300,
   animationProps = {},
   children,
   color = 'black',
-  width: pathWidth = 3,
+  inactiveColor,
+  width: strokeWidth = 3,
+  widthOffset = 20,
   pathProps = {},
   showInactivePath = true,
+  animateOnMount,
+  mountAnimationDuration = animationDuration,
+  mountAnimationProps = animationProps,
 }: LineChartPathWrapperProps) {
-  const { width, height } = React.useContext(LineChartDimensionsContext);
+  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(
-          width,
-          Object.assign({ duration: animationDuration }, animationProps)
-        ),
-  }));
+  const svgProps = useAnimatedProps(() => {
+    const shouldAnimateOnMount = animateOnMount === 'foreground';
+    const inactiveWidth =
+      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
+
+    let duration =
+      shouldAnimateOnMount && !hasMountedAnimation.value
+        ? mountAnimationDuration
+        : animationDuration;
+    const props =
+      shouldAnimateOnMount && !hasMountedAnimation.value
+        ? mountAnimationProps
+        : animationProps;
+
+    if (isActive.value) {
+      duration = 0;
+    }
+
+    return {
+      width: withTiming(
+        isActive.value
+          ? // on Web, <svg /> elements don't support negative widths
+            // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
+            Math.max(currentX.value, 0)
+          : 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={pathWidth}
-            isInactive={showInactivePath}
-            {...pathProps}
-          />
-        </Svg>
-      </View>
-      <View style={StyleSheet.absoluteFill}>
-        <AnimatedSVG animatedProps={svgProps} height={height}>
-          <LineChartPath color={color} width={pathWidth} {...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

@@ -19,6 +19,7 @@ export const LineChartContext = React.createContext<TLineChartContext>({
     min: 0,
     max: 0,
   },
+  xLength: 0,
 });
 
 type LineChartProviderProps = {
@@ -26,13 +27,17 @@ type LineChartProviderProps = {
   data: TLineChartDataProp;
   yRange?: YRangeProp;
   onCurrentIndexChange?: (x: number) => void;
+  xLength?: number;
 };
 
+LineChartProvider.displayName = 'LineChartProvider';
+
 export function LineChartProvider({
   children,
   data = [],
   yRange,
   onCurrentIndexChange,
+  xLength,
 }: LineChartProviderProps) {
   const currentX = useSharedValue(-1);
   const currentIndex = useSharedValue(-1);
@@ -55,6 +60,8 @@ export function LineChartProvider({
         min: yRange?.min ?? Math.min(...values),
         max: yRange?.max ?? Math.max(...values),
       },
+      xLength:
+        xLength ?? (Array.isArray(data) ? data : Object.values(data)[0]).length,
     };
   }, [
     currentIndex,
@@ -64,6 +71,7 @@ export function LineChartProvider({
     isActive,
     yRange?.max,
     yRange?.min,
+    xLength,
   ]);
 
   useAnimatedReaction(

package/src/charts/line/Cursor.tsx

@@ -19,12 +19,16 @@ export type LineChartCursorProps = LongPressGestureHandlerProps & {
 
 export const CursorContext = React.createContext({ type: '' });
 
+LineChartCursor.displayName = 'LineChartCursor';
+
 export function LineChartCursor({
   children,
   type,
   ...props
 }: LineChartCursorProps) {
-  const { width, path } = React.useContext(LineChartDimensionsContext);
+  const { pathWidth: width, path } = React.useContext(
+    LineChartDimensionsContext
+  );
   const { currentX, currentIndex, isActive, data } = useLineChart();
 
   const parsedPath = React.useMemo(

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,26 @@ 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(() => {
+    setTimeout(() => {
+      setEnableSpringAnimation(true);
+    }, 100);
+  }, []);
+
   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,