react-native-wagmi-charts 2.7.2 → 2.8.0

package/src/charts/line/Data.tsx

@@ -76,8 +76,9 @@ function validateLineChartId(dataContext: LineChartDataContext, id?: string) {
     const joinedIds = otherIds.join(', ');
 
     const suggestion = otherIds.length
-      ? `Did you mean to use ${singular ? 'this ID' : 'one of these IDs'
-      }: ${joinedIds}`
+      ? `Did you mean to use ${
+          singular ? 'this ID' : 'one of these IDs'
+        }: ${joinedIds}`
       : `You didn't pass any IDs to your <LineChart.Provider />'s data prop. Did you mean to pass an array instead?`;
 
     console.warn(
@@ -91,8 +92,9 @@ ${suggestion}`
 
     const joinedIds = otherIds.join(', ');
     const suggestion = otherIds.length
-      ? `Did you mean to use ${singular ? 'this ID' : 'one of these IDs'
-      }: ${joinedIds}`
+      ? `Did you mean to use ${
+          singular ? 'this ID' : 'one of these IDs'
+        }: ${joinedIds}`
       : `You didn't pass any IDs to your <LineChart.Provider />'s data prop. Did you mean to pass an array instead?`;
 
     console.error(`[react-native-wagmi-charts] Missing data "id" prop on LineChart. You must pass an id prop to <LineChart /> when using a dictionary for your data.

package/src/charts/line/DatetimeText.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { TextProps as RNTextProps } from 'react-native';
-import type Animated from 'react-native-reanimated';
-
+import type { AnimatedProps } from 'react-native-reanimated';
+import { useDerivedValue } from 'react-native-reanimated';
 import { useLineChartDatetime } from './useDatetime';
-import type { TFormatterFn } from 'react-native-wagmi-charts';
+import type { TFormatterFn } from '../../types';
 import { AnimatedText } from '../../components/AnimatedText';
 
 type LineChartDatetimeProps = {
@@ -11,7 +11,7 @@ type LineChartDatetimeProps = {
   options?: Intl.DateTimeFormatOptions;
   format?: TFormatterFn<number>;
   variant?: 'formatted' | 'value';
-  style?: Animated.AnimateProps<RNTextProps>['style'];
+  style?: AnimatedProps<RNTextProps>['style'];
 };
 
 LineChartDatetimeText.displayName = 'LineChartDatetimeText';
@@ -24,5 +24,14 @@ export function LineChartDatetimeText({
   style,
 }: LineChartDatetimeProps) {
   const datetime = useLineChartDatetime({ format, locale, options });
-  return <AnimatedText text={datetime[variant]} style={style} />;
+
+  const text = useDerivedValue(() => {
+    const value = datetime[variant].value;
+    if (typeof value === 'number') {
+      return value === 0 || isNaN(value) ? '' : value.toString();
+    }
+    return value || '';
+  }, [datetime, variant]);
+
+  return <AnimatedText text={text} style={style} />;
 }

package/src/charts/line/Dot.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import Animated, {
   Easing,
@@ -7,6 +7,7 @@ import Animated, {
   withRepeat,
   withSequence,
   withTiming,
+  AnimatedProps,
 } from 'react-native-reanimated';
 import { Circle, CircleProps } from 'react-native-svg';
 
@@ -19,8 +20,8 @@ import { useLineChart } from './useLineChart';
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
 export type LineChartDotProps = {
-  dotProps?: Animated.AnimateProps<CircleProps>;
-  outerDotProps?: Animated.AnimateProps<CircleProps>;
+  dotProps?: AnimatedProps<CircleProps>;
+  outerDotProps?: AnimatedProps<CircleProps>;
   color?: string;
   inactiveColor?: string;
   showInactiveColor?: boolean;
@@ -92,7 +93,7 @@ export function LineChartDot({
   );
 
   const animatedOuterDotProps = useAnimatedProps(() => {
-    let defaultProps = {
+    const defaultProps = {
       cx: x.value,
       cy: y.value,
       opacity: 0.1,

package/src/charts/line/Gradient.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import Animated from 'react-native-reanimated';
+import Animated, { AnimatedProps } from 'react-native-reanimated';
 import { Defs, LinearGradient, Stop, Path, PathProps } from 'react-native-svg';
-
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPathContext } from './LineChartPathContext';
-import useAnimatedPath from './useAnimatedPath';
+import { useAnimatedPath } from './useAnimatedPath';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
-export type LineChartGradientProps = Animated.AnimateProps<PathProps> & {
+export type LineChartGradientProps = AnimatedProps<PathProps> & {
   color?: string;
   children?: React.ReactNode;
 };
@@ -25,7 +24,6 @@ export function LineChartGradient({
   const { area } = React.useContext(LineChartDimensionsContext);
   const { color: contextColor, isTransitionEnabled } =
     React.useContext(LineChartPathContext);
-
   const color = overrideColor || contextColor;
 
   ////////////////////////////////////////////////
@@ -52,8 +50,7 @@ export function LineChartGradient({
             y1="0"
             y2="100%"
           >
-            {/*@ts-ignore*/}
-            {children}
+            {children as React.ReactElement[]}
           </LinearGradient>
         </Defs>
       ) : (

package/src/charts/line/Highlight.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import Animated from 'react-native-reanimated';
+import Animated, { AnimatedProps } from 'react-native-reanimated';
 import { ClipPath, Defs, G, Path, PathProps, Rect } from 'react-native-svg';
-
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPathContext } from './LineChartPathContext';
-import useAnimatedPath from './useAnimatedPath';
+import { useAnimatedPath } from './useAnimatedPath';
 import { getXPositionForCurve } from './utils/getXPositionForCurve';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
-export type LineChartColorProps = Animated.AnimateProps<PathProps> & {
+export type LineChartColorProps = AnimatedProps<PathProps> & {
   color?: string;
   from: number;
   to: number;
@@ -45,13 +44,18 @@ export function LineChartHighlight({
 
   ////////////////////////////////////////////////
 
+  const clipId = React.useMemo(
+    () => `clip-${Math.random().toString(36).substring(2, 11)}`,
+    []
+  );
+
   const clipStart = getXPositionForCurve(parsedPath, from);
   const clipEnd = getXPositionForCurve(parsedPath, to);
 
   return (
     <G>
       <Defs>
-        <ClipPath id="clip">
+        <ClipPath id={clipId}>
           <Rect
             x={clipStart}
             y="0"
@@ -62,7 +66,7 @@ export function LineChartHighlight({
         </ClipPath>
       </Defs>
       <AnimatedPath
-        clipPath="url(#clip)"
+        clipPath={`url(#${clipId})`}
         animatedProps={animatedProps}
         fill="transparent"
         stroke={isInactive ? inactiveColor || color : color}

package/src/charts/line/HorizontalLine.tsx

@@ -23,15 +23,11 @@ type HorizontalLineProps = {
    * This may be useful to customize the line's position based on the thickness of your cursor or chart path.
    *
    * ```tsx
-   * <LineChart.HorizontalLine
-   *   at={{ index: 3 }}
-   * />
+   * <LineChart.HorizontalLine at={{ index: 3 }} />
    *
    * // or
    *
-   * <LineChart.HorizontalLine
-   *   at={{ value: 320.32}}
-   * />
+   * <LineChart.HorizontalLine at={{ value: 320.32 }} />
    * ```
    */
   at?:
@@ -78,9 +74,7 @@ export function LineChartHorizontalLine({
 
     const offsetTop = yDomain.max - at.value;
     const percentageOffsetTop = offsetTop / (yDomain.max - yDomain.min);
-
     const heightBetweenGutters = height - gutter * 2;
-
     const offsetTopPixels = gutter + percentageOffsetTop * heightBetweenGutters;
 
     return withTiming(offsetTopPixels + offsetY);

package/src/charts/line/HoverTrap/index.web.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { LineChartDimensionsContext } from '../Chart';
@@ -6,74 +6,116 @@ import { useLineChart } from '../useLineChart';
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 
-let isEnabled = false;
+/**
+ * Minimum time in milliseconds that must pass between touch events before a
+ * hover state is activated on web.
+ */
+const HOVER_THRESHOLD_MS = 1000;
 
-// the following logic comes from the creator of react-native-web
-// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
-// it's also used by MotiPressable's hover interactions
-// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx
-if (canUseDOM) {
-  /**
-   * Web browsers emulate mouse events (and hover states) after touch events.
-   * This code infers when the currently-in-use modality supports hover
-   * (including for multi-modality devices) and considers "hover" to be enabled
-   * if a mouse movement occurs more than 1 second after the last touch event.
-   * This threshold is long enough to account for longer delays between the
-   * browser firing touch and mouse events on low-powered devices.
-   */
-  const HOVER_THRESHOLD_MS = 1000;
-  let lastTouchTimestamp = 0;
+/**
+ * Hover state manager for web platform. This singleton ensures global hover
+ * detection is properly initialized and cleaned up.
+ */
+class HoverStateManager {
+  private isEnabled = false;
+  private lastTouchTimestamp = 0;
+  private initialized = false;
 
-  function enableHover() {
-    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {
-      return;
+  constructor() {
+    if (canUseDOM) {
+      this.initialize();
     }
-    isEnabled = true;
   }
 
-  function disableHover() {
-    lastTouchTimestamp = Date.now();
-    if (isEnabled) {
-      isEnabled = false;
+  private initialize() {
+    if (this.initialized) return;
+
+    /**
+     * The following logic comes from the creator of react-native-web:
+     * https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
+     * It's also used by MotiPressable's hover interactions:
+     * https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx
+     *
+     * Web browsers emulate mouse events (and hover states) after touch events.
+     * This code infers when the currently-in-use modality supports hover
+     * (including for multi-modality devices) and considers "hover" to be enabled
+     * if a mouse movement occurs more than 1 second after the last touch event.
+     * This threshold is long enough to account for longer delays between the
+     * browser firing touch and mouse events on low-powered devices.
+     */
+    document.addEventListener('touchstart', this.disableHover, true);
+    document.addEventListener('touchmove', this.disableHover, true);
+    document.addEventListener('mousemove', this.enableHover, true);
+    this.initialized = true;
+  }
+
+  private enableHover = () => {
+    if (
+      this.isEnabled ||
+      Date.now() - this.lastTouchTimestamp < HOVER_THRESHOLD_MS
+    ) {
+      return;
+    }
+    this.isEnabled = true;
+  };
+
+  private disableHover = () => {
+    this.lastTouchTimestamp = Date.now();
+    if (this.isEnabled) {
+      this.isEnabled = false;
     }
+  };
+
+  public isHoverEnabled(): boolean {
+    return this.isEnabled;
   }
 
-  document.addEventListener('touchstart', disableHover, true);
-  document.addEventListener('touchmove', disableHover, true);
-  document.addEventListener('mousemove', enableHover, true);
+  /**
+   * Cleanup method for removing event listeners. Note: In practice, this may
+   * never be called since these are app-level listeners, but it's provided for
+   * completeness and testing purposes.
+   */
+  public cleanup() {
+    if (!this.initialized || !canUseDOM) return;
+    document.removeEventListener('touchstart', this.disableHover, true);
+    document.removeEventListener('touchmove', this.disableHover, true);
+    document.removeEventListener('mousemove', this.enableHover, true);
+    this.initialized = false;
+  }
 }
 
-function isHoverEnabled(): boolean {
-  return isEnabled;
-}
+// Singleton instance
+const hoverStateManager = new HoverStateManager();
 
 export const LineChartHoverTrap = () => {
   const { width, parsedPath } = React.useContext(LineChartDimensionsContext);
   const { currentX, currentIndex, isActive, data } = useLineChart();
 
   const onMouseMove = React.useCallback(
-    ({ x }: { x: number }) => {
-      if (isHoverEnabled()) {
-        if (parsedPath) {
-          const boundedX = Math.min(x, width);
-          isActive.value = true;
-          currentX.value = boundedX;
-
-          // on Web, we could drag the cursor to be negative, breaking it
-          // so we clamp the index at 0 to fix it
-          // https://github.com/coinjar/react-native-wagmi-charts/issues/24
-          const minIndex = 0;
-          const boundedIndex = Math.max(
-            minIndex,
-            Math.round(boundedX / width / (1 / (data ? data.length - 1 : 1)))
-          );
-
-          currentIndex.value = boundedIndex;
-        }
-      } else {
+    (e: React.MouseEvent<HTMLElement>) => {
+      if (!hoverStateManager.isHoverEnabled()) {
         isActive.value = false;
         currentIndex.value = -1;
+        return;
       }
+
+      if (!parsedPath) return;
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      const boundedX = Math.min(e.clientX - rect.left, width);
+      isActive.value = true;
+      currentX.value = boundedX;
+
+      // on Web, we could drag the cursor to be negative, breaking it
+      // so we clamp the index at 0 to fix it
+      // https://github.com/coinjar/react-native-wagmi-charts/issues/24
+      const minIndex = 0;
+      const boundedIndex = Math.max(
+        minIndex,
+        Math.round(boundedX / width / (1 / (data ? data.length - 1 : 1)))
+      );
+
+      currentIndex.value = boundedIndex;
     },
     [currentIndex, currentX, data, isActive, parsedPath, width]
   );
@@ -87,16 +129,7 @@ export const LineChartHoverTrap = () => {
     <View
       style={StyleSheet.absoluteFill}
       // @ts-expect-error mouse move event
-      onMouseMove={React.useCallback(
-        // eslint-disable-next-line no-undef
-        (e: React.MouseEvent<HTMLElement>) => {
-          let rect = e.currentTarget.getBoundingClientRect();
-          let x = e.clientX - rect.left; // x position within the element.
-
-          onMouseMove({ x });
-        },
-        [onMouseMove]
-      )}
+      onMouseMove={onMouseMove}
       onMouseLeave={onMouseLeave}
     />
   );

package/src/charts/line/Path.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import Animated from 'react-native-reanimated';
+import Animated, { AnimatedProps } from 'react-native-reanimated';
 import { Path, PathProps } from 'react-native-svg';
-
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPathContext } from './LineChartPathContext';
-import useAnimatedPath from './useAnimatedPath';
+import { useAnimatedPath } from './useAnimatedPath';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
-export type LineChartPathProps = Animated.AnimateProps<PathProps> & {
+export type LineChartPathProps = AnimatedProps<PathProps> & {
   color?: string;
   inactiveColor?: string;
   width?: number;
@@ -20,7 +19,7 @@ export type LineChartPathProps = Animated.AnimateProps<PathProps> & {
    *
    * While this use case is rare, it may be useful on web, where animations might not work as well.
    *
-   * **Example**
+   ***Example**
    *
    * ```tsx
    * <LineChart.Path
@@ -43,25 +42,19 @@ export function LineChartPath({
   const { isTransitionEnabled, isInactive } =
     React.useContext(LineChartPathContext);
 
-  ////////////////////////////////////////////////
-
   const { animatedProps } = useAnimatedPath({
     enabled: isTransitionEnabled,
     path,
   });
 
-  ////////////////////////////////////////////////
-
   return (
-    <>
-      <AnimatedPath
-        animatedProps={animatedProps}
-        fill="transparent"
-        stroke={isInactive ? inactiveColor || color : color}
-        strokeOpacity={isInactive && !inactiveColor ? 0.2 : 1}
-        strokeWidth={strokeWidth}
-        {...props}
-      />
-    </>
+    <AnimatedPath
+      animatedProps={animatedProps}
+      fill="transparent"
+      stroke={isInactive ? inactiveColor || color : color}
+      strokeOpacity={isInactive && !inactiveColor ? 0.2 : 1}
+      strokeWidth={strokeWidth}
+      {...props}
+    />
   );
 }

package/src/charts/line/PriceText.tsx

@@ -1,21 +1,35 @@
-import React from 'react';
-import type { TextProps as RNTextProps } from 'react-native';
-import type Animated from 'react-native-reanimated';
-
+import React, { useState } from 'react';
+import { Text, TextStyle } from 'react-native';
+import type { TextProps as RNTextProps, StyleProp } from 'react-native';
+import type { AnimatedProps } from 'react-native-reanimated';
+import {
+  useDerivedValue,
+  useAnimatedReaction,
+  runOnJS,
+} from 'react-native-reanimated';
 import { useLineChartPrice } from './usePrice';
-import type { TFormatterFn } from '../candle/types';
+import { useLineChart } from './useLineChart';
+import type { TFormatterFn } from '../../types';
 import { AnimatedText } from '../../components/AnimatedText';
 
 export type LineChartPriceTextProps = {
   format?: TFormatterFn<string>;
   precision?: number;
   variant?: 'formatted' | 'value';
-  style?: Animated.AnimateProps<RNTextProps>['style'];
+  style?: AnimatedProps<RNTextProps>['style'];
   /**
    * By default, it will use the current active index from the chart.
    * If this is set it will use the index provided.
    */
   index?: number;
+  /**
+   * Use optimized rendering for high-frequency updates (bypasses AnimatedText)
+   */
+  useOptimizedRendering?: boolean;
+  /**
+   * Function to determine text color based on the formatted value
+   */
+  getTextColor?: (formattedValue: string) => string;
 };
 
 LineChartPriceText.displayName = 'LineChartPriceText';
@@ -26,7 +40,63 @@ export function LineChartPriceText({
   variant = 'formatted',
   style,
   index,
+  useOptimizedRendering = false,
+  getTextColor,
 }: LineChartPriceTextProps) {
   const price = useLineChartPrice({ format, precision, index });
+
+  // If we have a custom format function and optimized rendering is enabled,
+  // use regular React state instead of AnimatedText
+  if (format && useOptimizedRendering) {
+    const { currentIndex, data } = useLineChart();
+    const [displayText, setDisplayText] = useState('');
+    const [textColor, setTextColor] = useState('#000000');
+
+    const updateText = (newText: string) => {
+      setDisplayText(newText);
+      // Update color if getTextColor function is provided
+      if (getTextColor) {
+        setTextColor(getTextColor(newText));
+      }
+    };
+
+    const textValue = useDerivedValue(() => {
+      if (!data) {
+        return '';
+      }
+      if (
+        (typeof currentIndex.value === 'undefined' ||
+          currentIndex.value === -1) &&
+        index == null
+      ) {
+        return '';
+      }
+      let price = 0;
+      price =
+        data[Math.min(index ?? currentIndex.value, data.length - 1)]!.value;
+      const valueString = price.toFixed(precision).toString();
+
+      // Call format function directly in worklet
+      return format({ value: valueString, formatted: valueString });
+    }, [currentIndex, data, precision]);
+
+    // Use useAnimatedReaction to update React state with runOnJS
+    useAnimatedReaction(
+      () => textValue.value,
+      (current, previous) => {
+        if (current !== previous) {
+          runOnJS(updateText)(current);
+        }
+      },
+      [textValue]
+    );
+
+    // Merge the text color with the provided style
+    const dynamicStyle = [style, { color: textColor }] as StyleProp<TextStyle>;
+
+    return <Text style={dynamicStyle}>{displayText}</Text>;
+  }
+
+  // For non-custom format, use the original approach
   return <AnimatedText text={price[variant]} style={style} />;
 }