react-native-wagmi-charts 2.7.3 → 2.8.1

package/src/charts/candle/Context.tsx

@@ -1,5 +1,10 @@
-import * as React from 'react';
-import { SharedValue, useSharedValue } from 'react-native-reanimated';
+import React from 'react';
+import {
+  runOnJS,
+  SharedValue,
+  useAnimatedReaction,
+  useSharedValue,
+} from 'react-native-reanimated';
 
 import type { TContext, TData, TDomain } from './types';
 import { getDomain } from './utils';
@@ -7,6 +12,7 @@ import { getDomain } from './utils';
 export const CandlestickChartContext = React.createContext<TContext>({
   currentX: { value: -1 } as SharedValue<number>,
   currentY: { value: -1 } as SharedValue<number>,
+  currentIndex: { value: -1 } as SharedValue<number>,
   data: [],
   height: 0,
   width: 0,
@@ -19,28 +25,33 @@ export const CandlestickChartContext = React.createContext<TContext>({
 type CandlestickChartProviderProps = {
   children: React.ReactNode;
   data: TData;
-  width?: number;
-  height?: number;
   valueRangeY?: TDomain;
+  onCurrentIndexChange?: (x: number) => void;
 };
 
 export function CandlestickChartProvider({
   children,
   data = [],
   valueRangeY,
+  onCurrentIndexChange,
 }: CandlestickChartProviderProps) {
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
   const currentX = useSharedValue(-1);
   const currentY = useSharedValue(-1);
-  const domain = React.useMemo(() => valueRangeY ?? getDomain(data), [data, valueRangeY]);
+  const currentIndex = useSharedValue(-1);
+  const domain = React.useMemo(
+    () => valueRangeY ?? getDomain(data),
+    [data, valueRangeY]
+  );
 
-  const step = React.useMemo(() => width / data.length, [data.length, width])
+  const step = React.useMemo(() => width / data.length, [data.length, width]);
 
   const contextValue = React.useMemo(
     () => ({
       currentX,
       currentY,
+      currentIndex,
       data,
       width,
       height,
@@ -49,7 +60,17 @@ export function CandlestickChartProvider({
       setWidth,
       setHeight,
     }),
-    [currentX, currentY, data, domain, height, step, width]
+    [currentIndex, currentX, currentY, data, domain, height, step, width]
+  );
+
+  useAnimatedReaction(
+    () => currentIndex.value,
+    (x, prevX) => {
+      if (x !== prevX && onCurrentIndexChange) {
+        runOnJS(onCurrentIndexChange)(x);
+      }
+    },
+    [currentIndex]
   );
 
   return (
@@ -58,3 +79,5 @@ export function CandlestickChartProvider({
     </CandlestickChartContext.Provider>
   );
 }
+
+CandlestickChartProvider.displayName = 'CandlestickChartProvider';

package/src/charts/candle/Crosshair.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { StyleSheet, ViewProps } from 'react-native';
 import {
   Gesture,
@@ -20,6 +20,12 @@ import { CandlestickChartLine, CandlestickChartLineProps } from './Line';
 import { useCandlestickChart } from './useCandlestickChart';
 import { CandlestickChartCrosshairTooltipContext } from './CrosshairTooltip';
 
+/**
+ * Threshold in pixels from the left edge of the chart. When the cursor is
+ * within this distance, the tooltip will be positioned on the right side.
+ */
+const TOOLTIP_POSITION_THRESHOLD = 100;
+
 type CandlestickChartCrosshairProps = {
   color?: string;
   children?: React.ReactNode;
@@ -40,26 +46,25 @@ export function CandlestickChartCrosshair({
   minDurationMs = 0,
 }: CandlestickChartCrosshairProps) {
   const { width, height } = React.useContext(CandlestickChartDimensionsContext);
-  const { currentX, currentY, step } = useCandlestickChart();
-
+  const { currentX, currentY, currentIndex, step } = useCandlestickChart();
   const tooltipPosition = useSharedValue<'left' | 'right'>('left');
-
   const opacity = useSharedValue(0);
 
   const updatePosition = (x: number, y: number) => {
     'worklet';
     const boundedX = x <= width - 1 ? x : width - 1;
-    if (boundedX < 100) {
+    if (boundedX < TOOLTIP_POSITION_THRESHOLD) {
       tooltipPosition.value = 'right';
     } else {
       tooltipPosition.value = 'left';
     }
     currentY.value = clamp(y, 0, height);
     currentX.value = boundedX - (boundedX % step) + step / 2;
+    currentIndex.value = Math.floor(boundedX / step);
   };
 
   const longPressGesture = Gesture.LongPress()
-    .minDuration(minDurationMs ?? 0)
+    .minDuration(minDurationMs)
     .maxDistance(999999)
     .onStart(
       (event: GestureStateChangeEvent<LongPressGestureHandlerEventPayload>) => {
@@ -70,8 +75,12 @@ export function CandlestickChartCrosshair({
     )
     .onTouchesMove((event) => {
       'worklet';
-      if (opacity.value === 1 && event.allTouches.length > 0) {
-        updatePosition(event.allTouches[0]!.x, event.allTouches[0]!.y);
+      if (
+        opacity.value === 1 &&
+        event.allTouches.length > 0 &&
+        event.allTouches[0]
+      ) {
+        updatePosition(event.allTouches[0].x, event.allTouches[0].y);
       }
     })
     .onEnd(() => {
@@ -79,7 +88,9 @@ export function CandlestickChartCrosshair({
       opacity.value = 0;
       currentY.value = -1;
       currentX.value = -1;
+      currentIndex.value = -1;
     });
+
   const horizontal = useAnimatedStyle(
     () => ({
       opacity: opacity.value,
@@ -87,6 +98,7 @@ export function CandlestickChartCrosshair({
     }),
     [opacity, currentY]
   );
+
   const vertical = useAnimatedStyle(
     () => ({
       opacity: opacity.value,

package/src/charts/candle/CrosshairTooltip.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import type {
   LayoutChangeEvent,
   StyleProp,
@@ -83,6 +83,7 @@ export function CandlestickChartCrosshairTooltip({
     }),
     []
   );
+
   const leftTooltip = useAnimatedStyle(
     () => ({
       left: xGutter,
@@ -91,6 +92,7 @@ export function CandlestickChartCrosshairTooltip({
     }),
     [elementHeight, position, topOffset, xGutter]
   );
+
   const rightTooltip = useAnimatedStyle(
     () => ({
       left: width - elementWidth.value - xGutter,

package/src/charts/candle/DatetimeText.tsx

@@ -3,7 +3,7 @@ import type { TextProps as RNTextProps } from 'react-native';
 import type { AnimatedProps } from 'react-native-reanimated';
 
 import { useCandlestickChartDatetime } from './useDatetime';
-import type { TFormatterFn } from 'react-native-wagmi-charts';
+import type { TFormatterFn } from '../../types';
 import { AnimatedText } from '../../components/AnimatedText';
 
 type CandlestickChartPriceTextProps = {

package/src/charts/candle/PriceText.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import type { TextProps as RNTextProps } from 'react-native';
 import type { AnimatedProps } from 'react-native-reanimated';
 
-import type { TFormatterFn, TPriceType } from './types';
+import type { TFormatterFn } from '../../types';
+import type { TPriceType } from './types';
 import { useCandlestickChartPrice } from './usePrice';
 import { AnimatedText } from '../../components/AnimatedText';
 

package/src/charts/candle/types.ts

@@ -13,6 +13,7 @@ export type TDomain = [min: number, max: number];
 export type TContext = {
   currentX: SharedValue<number>;
   currentY: SharedValue<number>;
+  currentIndex: SharedValue<number>;
   data: TData;
   width: number;
   height: number;
@@ -22,10 +23,3 @@ export type TContext = {
   setHeight: React.Dispatch<React.SetStateAction<number>>;
 };
 export type TPriceType = 'crosshair' | 'open' | 'close' | 'low' | 'high';
-export type TFormatterFn<T> = ({
-  value,
-  formatted,
-}: {
-  value: T;
-  formatted: string;
-}) => string;

package/src/charts/candle/useCandlestickChart.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { CandlestickChartContext } from './Context';
 import type { TContext } from './types';

package/src/charts/candle/useDatetime.ts

@@ -1,7 +1,7 @@
 import { useDerivedValue } from 'react-native-reanimated';
 
 import { formatDatetime } from '../../utils';
-import type { TFormatterFn } from './types';
+import type { TFormatterFn } from '../../types';
 import { useCandleData } from './useCandleData';
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -30,11 +30,13 @@ export function useCandlestickChartDatetime({
 
   const formatted = useDerivedValue(() => {
     if (timestamp.value === -1) return '';
+
     const formattedDatetime = formatDatetime({
       value: timestamp.value,
       locale,
       options,
     });
+
     return format
       ? format({ value: timestamp.value, formatted: formattedDatetime })
       : formattedDatetime;

package/src/charts/candle/usePrice.ts

@@ -3,7 +3,8 @@ import { useDerivedValue } from 'react-native-reanimated';
 import { formatPrice } from '../../utils';
 import { useCandlestickChart } from './useCandlestickChart';
 import { getPrice } from './utils';
-import type { TFormatterFn, TPriceType } from './types';
+import type { TFormatterFn } from '../../types';
+import type { TPriceType } from './types';
 import { useCandleData } from './useCandleData';
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -24,6 +25,7 @@ export function useCandlestickChartPrice({
 
   const float = useDerivedValue(() => {
     let price = 0;
+
     if (type === 'crosshair') {
       price = getPrice({
         y: currentY.value,
@@ -33,9 +35,11 @@ export function useCandlestickChartPrice({
     } else {
       price = candle.value[type];
     }
+
     if (price === -1) return '';
     return price.toFixed(precision).toString();
   }, [currentY, domain, height, candle, type, precision]);
+
   const formatted = useDerivedValue(() => {
     if (!float.value) return '';
     const formattedPrice = formatPrice({ value: float.value });

package/src/charts/line/Axis.tsx

@@ -0,0 +1,363 @@
+import React from 'react';
+import {
+  ViewProps,
+  StyleSheet,
+  Text,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import { Line, Svg } from 'react-native-svg';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { LineChartDimensionsContext } from './Chart';
+import { useLineChart } from './useLineChart';
+
+export type LineChartAxisPosition = 'left' | 'right' | 'top' | 'bottom';
+export type LineChartAxisOrientation = 'horizontal' | 'vertical';
+
+export type LineChartAxisProps = ViewProps & {
+  position: LineChartAxisPosition;
+  orientation: LineChartAxisOrientation;
+  color?: string;
+  strokeWidth?: number;
+  tickCount?: number;
+  domain?: [number, number];
+  hideOnInteraction?: boolean;
+  format?: (value: number | string) => string | number;
+  textStyle?: TextStyle;
+  labelPadding?: number; // Padding to prevent labels from going off-screen
+  labelWidth?: number; // Width allocated for labels
+  containerStyle?: ViewStyle; // Custom container style
+};
+
+export const LineChartAxis = ({
+  position,
+  orientation,
+  color = '#666',
+  strokeWidth,
+  tickCount = 5,
+  domain = [0, 100],
+  hideOnInteraction = false,
+  format = (value) => value,
+  textStyle,
+  labelPadding = 3,
+  containerStyle,
+  ...props
+}: LineChartAxisProps) => {
+  const { width, height } = React.useContext(LineChartDimensionsContext);
+  const { isActive } = useLineChart();
+
+  // Reserve space at the bottom for x-axis cursor labels
+  const X_AXIS_LABEL_RESERVED_HEIGHT = 40;
+  // For vertical axes, don't extend into the reserved cursor label space
+  const effectiveHeight =
+    orientation === 'vertical' ? height - X_AXIS_LABEL_RESERVED_HEIGHT : height;
+
+  const padding = {
+    left: 5,
+    right: 5,
+    top: 20,
+    bottom: 20,
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: hideOnInteraction && isActive.value ? 0 : 1,
+    };
+  }, [hideOnInteraction, isActive]);
+
+  const renderTicks = () => {
+    const [min, max] = domain;
+    const ticks = [];
+    const labels = [];
+    const tickLength = 5;
+    const labelOffset = 8;
+
+    // Calculate maximum label width needed dynamically
+    let maxLabelWidth = 0;
+    const fontSize = textStyle?.fontSize || 10;
+    const charWidth = fontSize * 0.6; // Dynamic character width based on font size
+
+    for (let i = 0; i <= tickCount; i++) {
+      const value = min + (max - min) * (i / tickCount);
+      const formattedValue = String(format(value));
+      // Dynamic width calculation based on actual font size
+      const estimatedWidth = formattedValue.length * charWidth;
+      maxLabelWidth = Math.max(maxLabelWidth, estimatedWidth);
+    }
+
+    // Dynamic width allocation - ensure we don't exceed available space
+    const maxAllowableWidth =
+      position === 'left' || position === 'right'
+        ? Math.max(width * 0.3, 60) // Allow up to 30% of chart width for y-axis labels, minimum 60px
+        : width * 0.9; // For horizontal labels, use most of the width
+
+    const dynamicLabelWidth = Math.min(
+      Math.max(maxLabelWidth + 16, 40), // Minimum 40px, add 16px padding
+      maxAllowableWidth // Don't exceed the calculated max
+    );
+
+    for (let i = 0; i <= tickCount; i++) {
+      const value = min + (max - min) * (i / tickCount);
+      const tickPosition = i / tickCount;
+
+      if (orientation === 'vertical') {
+        // Add padding to prevent labels from going off-screen
+        const topPadding = labelPadding;
+        const bottomPadding = labelPadding;
+
+        // Calculate y position with padding to keep labels on screen
+        const availableHeight = effectiveHeight - topPadding - bottomPadding;
+        const y = topPadding + availableHeight * (1 - tickPosition);
+        const x = position === 'left' ? padding.left : width - padding.right;
+
+        if (strokeWidth) {
+          ticks.push(
+            <Line
+              key={`tick-${i}`}
+              x1={x}
+              y1={y}
+              x2={position === 'left' ? x - tickLength : x + tickLength}
+              y2={y}
+              stroke={color}
+              strokeWidth={strokeWidth}
+            />
+          );
+        }
+
+        labels.push(
+          <Animated.View
+            key={`label-${i}`}
+            style={[
+              styles.verticalLabel,
+              {
+                width: dynamicLabelWidth, // Use calculated width
+                left:
+                  position === 'left'
+                    ? Math.max(0, x - labelOffset - dynamicLabelWidth) // Keep labels within left boundary
+                    : Math.min(width - dynamicLabelWidth - 5, x + labelOffset), // Keep labels within right boundary with 5px margin
+                top: y - 10, // Center the label vertically on the tick mark
+              },
+              position === 'left' ? styles.alignEnd : styles.alignStart,
+            ]}
+          >
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[
+                styles.labelText,
+                { color: color },
+                position === 'left' ? styles.textRight : styles.textLeft,
+                textStyle,
+              ]}
+              adjustsFontSizeToFit={true}
+              minimumFontScale={0.7}
+            >
+              {String(format(value))}
+            </Text>
+          </Animated.View>
+        );
+      } else {
+        const x = width * tickPosition;
+        const y = position === 'top' ? 15 : height - padding.bottom;
+
+        if (strokeWidth) {
+          ticks.push(
+            <Line
+              key={`tick-${i}`}
+              x1={x}
+              y1={y}
+              x2={x}
+              y2={position === 'top' ? y - tickLength : height - 15}
+              stroke={color}
+              strokeWidth={strokeWidth}
+            />
+          );
+        }
+
+        const alignmentStyle =
+          i === 0
+            ? styles.alignStart
+            : i === tickCount
+            ? styles.alignEnd
+            : styles.alignCenter;
+        const textAlignStyle =
+          i === 0
+            ? styles.textLeft
+            : i === tickCount
+            ? styles.textRight
+            : styles.textCenter;
+
+        labels.push(
+          <Animated.View
+            key={`label-${i}`}
+            style={[
+              styles.horizontalLabel,
+              {
+                width: dynamicLabelWidth, // Use dynamic width for horizontal labels too
+                left: Math.max(
+                  0,
+                  Math.min(
+                    width - dynamicLabelWidth,
+                    i === 0
+                      ? x + labelOffset
+                      : i === tickCount
+                      ? x - dynamicLabelWidth - labelOffset
+                      : x - dynamicLabelWidth / 2
+                  )
+                ),
+                top:
+                  position === 'top'
+                    ? Math.max(0, y - labelOffset - 15)
+                    : Math.max(0, height - 35),
+              },
+              alignmentStyle,
+            ]}
+          >
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[
+                styles.labelText,
+                { color: color },
+                textAlignStyle,
+                textStyle,
+              ]}
+              adjustsFontSizeToFit={true}
+              minimumFontScale={0.7}
+            >
+              {String(format(value))}
+            </Text>
+          </Animated.View>
+        );
+      }
+    }
+
+    return { ticks, labels };
+  };
+
+  const renderAxis = () => {
+    const { ticks, labels } = renderTicks();
+
+    let axisLine = null;
+
+    if (strokeWidth) {
+      switch (position) {
+        case 'left':
+          axisLine = (
+            <Line
+              x1={padding.left}
+              y1={0}
+              x2={padding.left}
+              y2={effectiveHeight}
+              stroke={color}
+              strokeWidth={strokeWidth}
+            />
+          );
+          break;
+        case 'right':
+          axisLine = (
+            <Line
+              x1={width - padding.right}
+              y1={0}
+              x2={width - padding.right}
+              y2={effectiveHeight}
+              stroke={color}
+              strokeWidth={strokeWidth}
+            />
+          );
+          break;
+        case 'top':
+          axisLine = (
+            <Line
+              x1={0}
+              y1={20}
+              x2={width}
+              y2={20}
+              stroke={color}
+              strokeWidth={strokeWidth}
+            />
+          );
+          break;
+        case 'bottom':
+          axisLine = (
+            <Line
+              x1={0}
+              y1={height - 20}
+              x2={width}
+              y2={height - 20}
+              stroke={color}
+              strokeWidth={strokeWidth}
+            />
+          );
+          break;
+      }
+    }
+
+    return { axisLine, ticks, labels };
+  };
+
+  const { axisLine, ticks, labels } = renderAxis();
+
+  return (
+    <Animated.View
+      style={[styles.container, containerStyle, props.style, animatedStyle]}
+    >
+      <Svg width={width} height={height} style={StyleSheet.absoluteFill}>
+        {axisLine}
+        {ticks}
+      </Svg>
+      <Animated.View style={[StyleSheet.absoluteFill, styles.labelsContainer]}>
+        {labels}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+  },
+  verticalLabel: {
+    position: 'absolute',
+    minHeight: 20,
+    zIndex: 1000,
+    overflow: 'visible',
+    justifyContent: 'center',
+  },
+  horizontalLabel: {
+    position: 'absolute',
+    minHeight: 20,
+    zIndex: 1000,
+    overflow: 'hidden',
+    justifyContent: 'center',
+  },
+  labelText: {
+    fontSize: 10,
+  },
+  labelsContainer: {
+    zIndex: 1000,
+  },
+  alignStart: {
+    alignItems: 'flex-start',
+  },
+  alignEnd: {
+    alignItems: 'flex-end',
+  },
+  alignCenter: {
+    alignItems: 'center',
+  },
+  textLeft: {
+    textAlign: 'left',
+  },
+  textRight: {
+    textAlign: 'right',
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+});