react-native-wagmi-charts 2.7.2 → 2.8.0

package/src/charts/line/Chart.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-// @ts-ignore
+import React from 'react';
 import * as d3Shape from 'd3-shape';
 
 import { Dimensions, StyleSheet, View, ViewProps } from 'react-native';
@@ -53,6 +52,10 @@ export function LineChart({
     id,
   });
 
+  // Reserve space at the bottom for x-axis cursor labels
+  const X_AXIS_LABEL_RESERVED_HEIGHT = 40;
+  const chartDrawingHeight = height - X_AXIS_LABEL_RESERVED_HEIGHT;
+
   const pathWidth = React.useMemo(() => {
     let allowedWidth = width;
     if (data && xLength > data.length) {
@@ -66,7 +69,7 @@ export function LineChart({
       return getPath({
         data,
         width: pathWidth,
-        height,
+        height: chartDrawingHeight,
         gutter: yGutter,
         shape,
         yDomain,
@@ -74,14 +77,14 @@ export function LineChart({
       });
     }
     return '';
-  }, [data, pathWidth, height, yGutter, shape, yDomain, xDomain]);
+  }, [data, pathWidth, chartDrawingHeight, yGutter, shape, yDomain, xDomain]);
 
   const area = React.useMemo(() => {
     if (data && data.length > 0) {
       return getArea({
         data,
         width: pathWidth,
-        height,
+        height: chartDrawingHeight,
         gutter: yGutter,
         shape,
         yDomain,
@@ -89,7 +92,7 @@ export function LineChart({
       });
     }
     return '';
-  }, [data, pathWidth, height, yGutter, shape, yDomain, xDomain]);
+  }, [data, pathWidth, chartDrawingHeight, yGutter, shape, yDomain, xDomain]);
 
   const parsedPath = React.useMemo(() => parse(path), [path]);
   const pointWidth = React.useMemo(
@@ -107,7 +110,7 @@ export function LineChart({
       width,
       height,
       pathWidth,
-      shape,
+      shape: shape as d3Shape.CurveFactory,
     }),
     [
       yGutter,

package/src/charts/line/ChartPath.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { Svg } from 'react-native-svg';
+import React from 'react';
+import { StyleSheet, View, Platform } from 'react-native';
+import { Svg, Defs, ClipPath, Rect, G } from 'react-native-svg';
 import Animated, {
   useAnimatedProps,
   useSharedValue,
@@ -24,6 +24,13 @@ const BACKGROUND_COMPONENTS = [
 const FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];
 
 const AnimatedSVG = Animated.createAnimatedComponent(Svg);
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+type ReactElementWithDisplayName = React.ReactElement & {
+  type?: {
+    displayName?: string;
+  };
+};
 
 type LineChartPathWrapperProps = {
   animationDuration?: number;
@@ -65,12 +72,19 @@ export function LineChartPathWrapper({
 
   React.useEffect(() => {
     isMounted.value = true;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return () => {
+      isMounted.value = false;
+    };
   }, []);
 
   ////////////////////////////////////////////////
 
-  const svgProps = useAnimatedProps(() => {
+  const clipId = React.useMemo(
+    () => `clip-foreground-${Math.random().toString(36).substring(2, 11)}`,
+    []
+  );
+
+  const clipProps = useAnimatedProps(() => {
     const shouldAnimateOnMount = animateOnMount === 'foreground';
     const inactiveWidth =
       !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
@@ -124,12 +138,14 @@ export function LineChartPathWrapper({
   if (children) {
     const iterableChildren = flattenChildren(children);
     backgroundChildren = iterableChildren.filter((child) =>
-      // @ts-ignore
-      BACKGROUND_COMPONENTS.includes(child?.type?.displayName)
+      BACKGROUND_COMPONENTS.includes(
+        (child as ReactElementWithDisplayName)?.type?.displayName || ''
+      )
     );
     foregroundChildren = iterableChildren.filter((child) =>
-      // @ts-ignore
-      FOREGROUND_COMPONENTS.includes(child?.type?.displayName)
+      FOREGROUND_COMPONENTS.includes(
+        (child as ReactElementWithDisplayName)?.type?.displayName || ''
+      )
     );
   }
 
@@ -153,9 +169,7 @@ export function LineChartPathWrapper({
               {...pathProps}
             />
           </Svg>
-          <Svg style={StyleSheet.absoluteFill}>
-            {backgroundChildren}
-          </Svg>
+          <Svg style={StyleSheet.absoluteFill}>{backgroundChildren}</Svg>
         </View>
       </LineChartPathContext.Provider>
       <LineChartPathContext.Provider
@@ -166,12 +180,57 @@ export function LineChartPathWrapper({
         }}
       >
         <View style={StyleSheet.absoluteFill}>
-          <AnimatedSVG animatedProps={svgProps} height={height}>
-            <LineChartPath color={color} width={strokeWidth} {...pathProps} />
-          </AnimatedSVG>
-          <AnimatedSVG animatedProps={svgProps} height={height} style={StyleSheet.absoluteFill}>
-            {foregroundChildren}
-          </AnimatedSVG>
+          {/* On web, animated SVG width doesn't work without
+            react-native-svg-web, but that library breaks chart data
+            transitions. Use ClipPath instead. On native, AnimatedSVG with
+            animated width works correctly. */}
+          {Platform.OS === 'web' ? (
+            <>
+              <Svg width={width} height={height}>
+                <Defs>
+                  <ClipPath id={clipId}>
+                    <AnimatedRect
+                      x={0}
+                      y={0}
+                      animatedProps={clipProps}
+                      height={height}
+                    />
+                  </ClipPath>
+                </Defs>
+                <G clipPath={`url(#${clipId})`}>
+                  <LineChartPath
+                    color={color}
+                    width={strokeWidth}
+                    {...pathProps}
+                  />
+                </G>
+              </Svg>
+              <Svg
+                width={width}
+                height={height}
+                style={StyleSheet.absoluteFill}
+              >
+                <G clipPath={`url(#${clipId})`}>{foregroundChildren}</G>
+              </Svg>
+            </>
+          ) : (
+            <>
+              <AnimatedSVG animatedProps={clipProps} height={height}>
+                <LineChartPath
+                  color={color}
+                  width={strokeWidth}
+                  {...pathProps}
+                />
+              </AnimatedSVG>
+              <AnimatedSVG
+                animatedProps={clipProps}
+                height={height}
+                style={StyleSheet.absoluteFill}
+              >
+                {foregroundChildren}
+              </AnimatedSVG>
+            </>
+          )}
         </View>
       </LineChartPathContext.Provider>
     </>

package/src/charts/line/Context.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React, { createContext, useMemo } from 'react';
+
 import {
   runOnJS,
   useAnimatedReaction,
@@ -10,7 +11,7 @@ import { LineChartDataProvider } from './Data';
 import type { TLineChartContext, YRangeProp } from './types';
 import { getDomain, lineChartDataPropToArray } from './utils';
 
-export const LineChartContext = React.createContext<TLineChartContext>({
+export const LineChartContext = createContext<TLineChartContext>({
   currentX: { value: -1 } as TLineChartContext['currentX'],
   currentIndex: { value: -1 } as TLineChartContext['currentIndex'],
   domain: [0, 0],
@@ -32,8 +33,6 @@ type LineChartProviderProps = {
   xDomain?: [number, number];
 };
 
-LineChartProvider.displayName = 'LineChartProvider';
-
 export function LineChartProvider({
   children,
   data = [],
@@ -46,27 +45,38 @@ export function LineChartProvider({
   const currentIndex = useSharedValue(-1);
   const isActive = useSharedValue(false);
 
-  const domain = React.useMemo(
-    () => getDomain(
-      Array.isArray(data) ? data : Object.values(data)[0] as TLineChartData
-    ),
+  const domain = useMemo(
+    () =>
+      getDomain(
+        Array.isArray(data) ? data : (Object.values(data)[0] as TLineChartData)
+      ),
+    [data]
+  );
+
+  const values = useMemo(
+    () => lineChartDataPropToArray(data).map(({ value }) => value),
     [data]
   );
 
-  const contextValue = React.useMemo<TLineChartContext>(() => {
-    const values = lineChartDataPropToArray(data).map(({ value }) => value);
-    const domainRows =
-      Array.isArray(data) ? data : Object.values(data)[0] as TLineChartData;
+  const yDomainValues = useMemo(
+    () => ({
+      min: yRange?.min ?? Math.min(...values),
+      max: yRange?.max ?? Math.max(...values),
+    }),
+    [values, yRange?.min, yRange?.max]
+  );
+
+  const contextValue = useMemo<TLineChartContext>(() => {
+    const domainRows = Array.isArray(data)
+      ? data
+      : (Object.values(data)[0] as TLineChartData);
 
     return {
       currentX,
       currentIndex,
       isActive,
       domain,
-      yDomain: {
-        min: yRange?.min ?? Math.min(...values),
-        max: yRange?.max ?? Math.max(...values),
-      },
+      yDomain: yDomainValues,
       xDomain,
       xLength: xLength ?? domainRows.length,
     };
@@ -76,8 +86,7 @@ export function LineChartProvider({
     data,
     domain,
     isActive,
-    yRange?.max,
-    yRange?.min,
+    yDomainValues,
     xLength,
     xDomain,
   ]);
@@ -100,3 +109,5 @@ export function LineChartProvider({
     </LineChartDataProvider>
   );
 }
+
+LineChartProvider.displayName = 'LineChartProvider';

package/src/charts/line/Cursor.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import Animated, { runOnJS } from 'react-native-reanimated';
 import {
@@ -22,8 +22,10 @@ export type LineChartCursorProps = {
   snapToPoint?: boolean;
   at?: number;
   shouldCancelWhenOutside?: boolean;
+  minDurationMs?: number;
   onActivated?: () => void;
   onEnded?: () => void;
+  orientation?: 'horizontal' | 'vertical';
 };
 
 export const CursorContext = React.createContext({ type: '' });
@@ -36,6 +38,7 @@ export function LineChartCursor({
   type,
   at,
   shouldCancelWhenOutside = false,
+  minDurationMs = 0,
   onActivated,
   onEnded,
 }: LineChartCursorProps) {
@@ -73,11 +76,11 @@ export function LineChartCursor({
       0
     );
 
-    const newXPosition = (
-      closestIndex > 0
-        ? parsedPath.curves[closestPathCurve]!.to
-        : parsedPath.move
-    ).x;
+    const curveSegment =
+      closestIndex > 0 && parsedPath.curves[closestPathCurve]
+        ? parsedPath.curves[closestPathCurve]
+        : null;
+    const newXPosition = (curveSegment ? curveSegment.to : parsedPath.move).x;
     // Update values
     currentIndex.value = closestIndex;
     currentX.value = newXPosition;
@@ -114,7 +117,7 @@ export function LineChartCursor({
   };
 
   const longPressGesture = Gesture.LongPress()
-    .minDuration(0)
+    .minDuration(minDurationMs ?? 0)
     .maxDistance(999999)
     .shouldCancelWhenOutside(shouldCancelWhenOutside)
     .onStart(
@@ -133,8 +136,14 @@ export function LineChartCursor({
     )
     .onTouchesMove((event) => {
       'worklet';
-      if (parsedPath && isActive.value && event.allTouches.length > 0) {
-        const xPosition = Math.max(0, event.allTouches[0]!.x <= width ? event.allTouches[0]!.x : width);
+      if (
+        parsedPath &&
+        isActive.value &&
+        event.allTouches.length > 0 &&
+        event.allTouches[0]
+      ) {
+        const touchX = event.allTouches[0].x;
+        const xPosition = Math.max(0, touchX <= width ? touchX : width);
         updatePosition(xPosition);
       }
     })

package/src/charts/line/CursorCrosshair.tsx

@@ -1,13 +1,21 @@
-import * as React from 'react';
-import { Platform, View, ViewProps } from 'react-native';
+import React from 'react';
+import { Platform, View, ViewProps, StyleSheet } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   withSpring,
+  AnimatedProps,
 } from 'react-native-reanimated';
 
 import { LineChartCursor, LineChartCursorProps } from './Cursor';
 import { useLineChart } from './useLineChart';
 
+/**
+ * Delay in milliseconds before enabling spring animations on Android. This
+ * prevents crashes that can occur when spring animations are enabled on initial
+ * render.
+ */
+const ANDROID_SPRING_ANIMATION_DELAY_MS = 100;
+
 type LineChartCursorCrosshairProps = Omit<
   LineChartCursorProps,
   'children' | 'type'
@@ -16,7 +24,7 @@ type LineChartCursorCrosshairProps = Omit<
   color?: string;
   size?: number;
   outerSize?: number;
-  crosshairWrapperProps?: Animated.AnimateProps<ViewProps>;
+  crosshairWrapperProps?: AnimatedProps<ViewProps>;
   crosshairProps?: ViewProps;
   crosshairOuterProps?: ViewProps;
 };
@@ -40,9 +48,10 @@ export function LineChartCursorCrosshair({
     Platform.OS === 'ios'
   );
   React.useEffect(() => {
-    setTimeout(() => {
+    const timer = setTimeout(() => {
       setEnableSpringAnimation(true);
-    }, 100);
+    }, ANDROID_SPRING_ANIMATION_DELAY_MS);
+    return () => clearTimeout(timer);
   }, []);
 
   const animatedCursorStyle = useAnimatedStyle(
@@ -54,6 +63,8 @@ export function LineChartCursorCrosshair({
           scale: enableSpringAnimation
             ? withSpring(isActive.value ? 1 : 0, {
                 damping: 10,
+                stiffness: 100,
+                mass: 0.3,
               })
             : 0,
         },
@@ -67,11 +78,10 @@ export function LineChartCursorCrosshair({
       <Animated.View
         {...crosshairWrapperProps}
         style={[
+          styles.crosshairWrapper,
           {
             width: outerSize,
             height: outerSize,
-            alignItems: 'center',
-            justifyContent: 'center',
           },
           animatedCursorStyle,
           crosshairWrapperProps.style,
@@ -80,13 +90,12 @@ export function LineChartCursorCrosshair({
         <View
           {...crosshairOuterProps}
           style={[
+            styles.crosshairOuter,
             {
               backgroundColor: color,
               width: outerSize,
               height: outerSize,
               borderRadius: outerSize,
-              opacity: 0.1,
-              position: 'absolute',
             },
             crosshairOuterProps.style,
           ]}
@@ -108,3 +117,14 @@ export function LineChartCursorCrosshair({
     </LineChartCursor>
   );
 }
+
+const styles = StyleSheet.create({
+  crosshairWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  crosshairOuter: {
+    opacity: 0.1,
+    position: 'absolute',
+  },
+});

package/src/charts/line/CursorLine.tsx

@@ -1,53 +1,213 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-import Svg, { Line as SVGLine, LineProps } from 'react-native-svg';
+import { StyleSheet, type TextStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useAnimatedProps,
+} from 'react-native-reanimated';
+import Svg, { type LineProps, Line as SVGLine } from 'react-native-svg';
 
+import type { TFormatterFn } from '../../types';
+import { AnimatedText } from '../../components/AnimatedText';
 import { LineChartDimensionsContext } from './Chart';
-import { LineChartCursor, LineChartCursorProps } from './Cursor';
+import { LineChartCursor, type LineChartCursorProps } from './Cursor';
+import { useLineChartDatetime } from './useDatetime';
 import { useLineChart } from './useLineChart';
+import { useLineChartPrice } from './usePrice';
 
 type LineChartCursorLineProps = {
   children?: React.ReactNode;
   color?: string;
   lineProps?: Partial<LineProps>;
+  format?: TFormatterFn<string | number>;
+  textStyle?: TextStyle;
 } & Omit<LineChartCursorProps, 'type' | 'children'>;
 
 LineChartCursorLine.displayName = 'LineChartCursorLine';
 
+const TEXT_CONSTANTS = {
+  DEFAULT_COLOR: '#1A1E27',
+  DEFAULT_FONT_SIZE: 12,
+  CHAR_WIDTH_RATIO: 0.6,
+  MIN_WIDTH: 25,
+  MAX_WIDTH: 150,
+  INPUT_PADDING: 4,
+} as const;
+
+const SPACING = {
+  VERTICAL_TEXT_OFFSET: 40,
+  HORIZONTAL_TEXT_MARGIN: 8,
+  HORIZONTAL_RIGHT_MARGIN: 16,
+  BASE_LINE_GAP: 8,
+  X_AXIS_LABEL_RESERVED_HEIGHT: 40, // Reserved space at bottom for x-axis labels
+} as const;
+
+const AnimatedLine = Animated.createAnimatedComponent(SVGLine);
+
 export function LineChartCursorLine({
   children,
   color = 'gray',
   lineProps,
+  format,
+  textStyle,
   ...cursorProps
 }: LineChartCursorLineProps) {
-  const { height } = React.useContext(LineChartDimensionsContext);
-  const { currentX, isActive } = useLineChart();
+  const isHorizontal = cursorProps?.orientation === 'horizontal';
+  const { height, width } = React.useContext(LineChartDimensionsContext);
+  const { currentX, currentY, isActive } = useLineChart();
+
+  const price = useLineChartPrice({
+    format: isHorizontal ? (format as TFormatterFn<string>) : undefined,
+    precision: 2,
+  });
+
+  const datetime = useLineChartDatetime({
+    format: !isHorizontal ? (format as TFormatterFn<number>) : undefined,
+  });
+
+  const displayText = isHorizontal ? price.formatted : datetime.formatted;
+
+  const calculateTextWidth = (text: string, fontSize: number) => {
+    'worklet';
+    const charWidth = fontSize * TEXT_CONSTANTS.CHAR_WIDTH_RATIO;
+    const calculatedWidth = text.length * charWidth;
+    return Math.max(
+      TEXT_CONSTANTS.MIN_WIDTH,
+      Math.min(TEXT_CONSTANTS.MAX_WIDTH, calculatedWidth)
+    );
+  };
+
+  const textWidth = useDerivedValue(() => {
+    const text = displayText.value;
+    if (!text) return TEXT_CONSTANTS.MIN_WIDTH;
+
+    const fontSize = textStyle?.fontSize || TEXT_CONSTANTS.DEFAULT_FONT_SIZE;
+    return calculateTextWidth(text, fontSize);
+  }, [displayText, textStyle?.fontSize]);
+
+  const lineEndX = useDerivedValue(() => {
+    if (!isHorizontal) return 0;
+
+    const fontSize = textStyle?.fontSize || TEXT_CONSTANTS.DEFAULT_FONT_SIZE;
+    const gap = Math.max(SPACING.BASE_LINE_GAP, fontSize * 0.5);
+
+    return (
+      width -
+      textWidth.value -
+      gap -
+      TEXT_CONSTANTS.INPUT_PADDING -
+      SPACING.HORIZONTAL_RIGHT_MARGIN
+    );
+  });
+
+  const lineEndY = useDerivedValue(() => {
+    if (isHorizontal) return 0;
+
+    // For vertical cursor, extend line to the chart area (excluding reserved label space)
+    return height - SPACING.X_AXIS_LABEL_RESERVED_HEIGHT;
+  });
+
+  const containerStyle = useAnimatedStyle(() => ({
+    opacity: isActive.value ? 1 : 0,
+    height: '100%',
+    transform: isHorizontal
+      ? [{ translateY: currentY.value }]
+      : [{ translateX: currentX.value }],
+  }));
+
+  const calculateFontSizeAdjustment = (fontSize: number) => {
+    'worklet';
+    return Math.max(0.6, Math.min(0.8, 0.7 + (fontSize - 12) * 0.01));
+  };
+
+  const textPositionStyle = useAnimatedStyle(() => {
+    const fontSize = textStyle?.fontSize || TEXT_CONSTANTS.DEFAULT_FONT_SIZE;
+    const lineHeight = textStyle?.lineHeight || fontSize * 1.2;
+
+    const baseStyle = {
+      position: 'absolute' as const,
+      width: textWidth.value,
+      fontSize,
+      lineHeight,
+      color: textStyle?.color || TEXT_CONSTANTS.DEFAULT_COLOR,
+      ...textStyle,
+    };
+
+    if (isHorizontal) {
+      const fontSizeAdjustment = calculateFontSizeAdjustment(fontSize);
+      const textCenterOffset = -(lineHeight * fontSizeAdjustment);
+
+      return {
+        ...baseStyle,
+        left:
+          width -
+          textWidth.value -
+          SPACING.HORIZONTAL_RIGHT_MARGIN +
+          TEXT_CONSTANTS.INPUT_PADDING,
+        top: textCenterOffset,
+        textAlign: 'right' as const,
+        paddingLeft: 0,
+        paddingRight: 0,
+      };
+    }
+
+    // For vertical cursor (x-axis label)
+    const halfTextWidth = textWidth.value / 2;
+
+    // Since the container is already translated by currentX, we need to calculate
+    // the label position relative to the container's position
+    const containerX = currentX.value;
+
+    // Calculate where the label would be if centered
+    let labelLeft = -halfTextWidth;
+
+    // Check if label would overflow on the left
+    if (containerX + labelLeft < 0) {
+      labelLeft = -containerX;
+    }
+
+    // Check if label would overflow on the right
+    if (containerX + labelLeft + textWidth.value > width) {
+      labelLeft = width - containerX - textWidth.value;
+    }
+
+    // Position label in the reserved space at the bottom
+    const labelTop =
+      height -
+      SPACING.X_AXIS_LABEL_RESERVED_HEIGHT +
+      SPACING.HORIZONTAL_TEXT_MARGIN;
+
+    return {
+      ...baseStyle,
+      left: labelLeft,
+      top: labelTop,
+      textAlign: 'center' as const,
+    };
+  });
 
-  const vertical = useAnimatedStyle(
+  const lineAnimatedProps = useAnimatedProps(
     () => ({
-      opacity: isActive.value ? 1 : 0,
-      height: '100%',
-      transform: [{ translateX: currentX.value }],
+      x1: 0,
+      y1: 0,
+      x2: lineEndX.value,
+      y2: lineEndY.value,
     }),
-    [currentX, isActive]
+    [lineEndX, lineEndY]
   );
 
   return (
     <LineChartCursor {...cursorProps} type="line">
-      <Animated.View style={vertical}>
+      <Animated.View style={containerStyle}>
         <Svg style={styles.svg}>
-          <SVGLine
-            x1={0}
-            y1={0}
-            x2={0}
-            y2={height}
+          <AnimatedLine
+            animatedProps={lineAnimatedProps}
             strokeWidth={2}
             stroke={color}
             strokeDasharray="3 3"
             {...lineProps}
           />
         </Svg>
+        <AnimatedText text={displayText} style={textPositionStyle} />
       </Animated.View>
       {children}
     </LineChartCursor>
@@ -57,7 +217,6 @@ export function LineChartCursorLine({
 const styles = StyleSheet.create({
   svg: {
     ...StyleSheet.absoluteFillObject,
-    // height: 100% is required for <svg /> on web
     height: '100%',
   },
 });