react-native-wagmi-charts 2.7.2 → 2.8.0

package/src/charts/line/Tooltip.tsx

@@ -1,11 +1,13 @@
-import * as React from 'react';
+import React from 'react';
 
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
   withTiming,
+  AnimatedProps,
 } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native';
 import { LineChartPriceText, LineChartPriceTextProps } from './PriceText';
 
 import { CursorContext } from './Cursor';
@@ -15,11 +17,11 @@ import { getXPositionForCurve } from './utils/getXPositionForCurve';
 import { getYForX } from 'react-native-redash';
 import { useLineChart } from './useLineChart';
 import { useMemo } from 'react';
-import type { TFormatterFn } from '../candle/types';
+import type { TFormatterFn } from '../../types';
 
 export type LineChartTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
 
-export type LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {
+export type LineChartTooltipProps = AnimatedProps<ViewProps> & {
   children?: React.ReactNode;
   format?: TFormatterFn<string>;
   xGutter?: number;
@@ -96,74 +98,136 @@ export function LineChartTooltip({
     [cursorGutter, position]
   );
 
-  const animatedCursorStyle = useAnimatedStyle(() => {
-    // the tooltip is considered static when the user specified an `at` prop
-    const isStatic = atYPosition.value != null;
+  /**
+   * Helper function to calculate the X translation offset based on position
+   * and boundary constraints
+   */
+  const calculateXTranslateOffset = React.useCallback(
+    (params: {
+      position: LineChartTooltipPosition;
+      x: number;
+      elementWidth: number;
+      width: number;
+      xGutter: number;
+      cursorGutter: number;
+      withHorizontalFloating: boolean;
+    }) => {
+      'worklet';
+      const {
+        position,
+        x,
+        elementWidth,
+        width,
+        xGutter,
+        cursorGutter,
+        withHorizontalFloating,
+      } = params;
 
-    // Calculate X position:
-    let translateXOffset = getInitialTranslateXOffset(elementWidth.value);
-    const x = atXPosition ?? currentX.value;
-    const elementFullWidth = elementWidth.value + xGutter + cursorGutter;
-
-    if (position === 'right') {
-      if (x < elementFullWidth) {
-        if (withHorizontalFloating) {
-          translateXOffset = -cursorGutter;
-        } else {
-          translateXOffset = translateXOffset - elementFullWidth + x;
+      let translateXOffset = getInitialTranslateXOffset(elementWidth);
+      const elementFullWidth = elementWidth + xGutter + cursorGutter;
+
+      if (position === 'right') {
+        if (x < elementFullWidth) {
+          translateXOffset = withHorizontalFloating
+            ? -cursorGutter
+            : translateXOffset - elementFullWidth + x;
         }
-      }
-    } else if (position === 'left') {
-      if (x > width - elementFullWidth) {
-        if (withHorizontalFloating) {
-          translateXOffset = elementWidth.value + cursorGutter;
-        } else {
-          const xOffset = x - (width - elementFullWidth);
-          translateXOffset = translateXOffset + xOffset;
+      } else if (position === 'left') {
+        if (x > width - elementFullWidth) {
+          translateXOffset = withHorizontalFloating
+            ? elementWidth + cursorGutter
+            : translateXOffset + (x - (width - elementFullWidth));
+        }
+      } else {
+        // Center position
+        if (x < elementWidth / 2 + xGutter) {
+          translateXOffset -= elementWidth / 2 + xGutter - x;
+        }
+        if (x > width - elementWidth / 2 - xGutter) {
+          translateXOffset += x - (width - elementWidth / 2 - xGutter);
         }
       }
-    } else {
-      if (x < elementWidth.value / 2 + xGutter) {
-        const xOffset = elementWidth.value / 2 + xGutter - x;
-        translateXOffset = translateXOffset - xOffset;
-      }
-      if (x > width - elementWidth.value / 2 - xGutter) {
-        const xOffset = x - (width - elementWidth.value / 2 - xGutter);
-        translateXOffset = translateXOffset + xOffset;
+
+      return translateXOffset;
+    },
+    [getInitialTranslateXOffset]
+  );
+
+  /**
+   * Helper function to calculate the Y translation offset based on position and
+   * boundary constraints
+   */
+  const calculateYTranslateOffset = React.useCallback(
+    (params: {
+      position: LineChartTooltipPosition;
+      y: number;
+      elementHeight: number;
+      height: number;
+      yGutter: number;
+      cursorGutter: number;
+    }) => {
+      'worklet';
+      const { position, y, elementHeight, height, yGutter, cursorGutter } =
+        params;
+      let translateYOffset = 0;
+
+      if (position === 'top') {
+        translateYOffset = elementHeight / 2 + cursorGutter;
+        if (y - translateYOffset < yGutter) {
+          translateYOffset = y - yGutter;
+        }
+      } else if (position === 'bottom') {
+        translateYOffset = -(elementHeight / 2) - cursorGutter / 2;
+        if (y - translateYOffset + elementHeight > height - yGutter) {
+          translateYOffset = y - (height - yGutter) + elementHeight;
+        }
+      } else if (position === 'right' || position === 'left') {
+        translateYOffset = elementHeight / 2;
       }
-    }
 
+      return translateYOffset;
+    },
+    []
+  );
+
+  const animatedCursorStyle = useAnimatedStyle(() => {
+    // the tooltip is considered static when the user specified an `at` prop
+    const isStatic = atYPosition.value != null;
+
+    // Calculate X position:
+    const x = atXPosition ?? currentX.value;
+    const translateXOffset = calculateXTranslateOffset({
+      position,
+      x,
+      elementWidth: elementWidth.value,
+      width,
+      xGutter,
+      cursorGutter,
+      withHorizontalFloating,
+    });
     const translateX = x - translateXOffset;
 
     // Calculate Y position:
-    let translateYOffset = 0;
     const y = atYPosition.value ?? currentY.value;
-    if (position === 'top') {
-      translateYOffset = elementHeight.value / 2 + cursorGutter;
-      if (y - translateYOffset < yGutter) {
-        translateYOffset = y - yGutter;
-      }
-    } else if (position === 'bottom') {
-      translateYOffset = -(elementHeight.value / 2) - cursorGutter / 2;
-      if (y - translateYOffset + elementHeight.value > height - yGutter) {
-        translateYOffset = y - (height - yGutter) + elementHeight.value;
-      }
-    } else if (position === 'right' || position === 'left') {
-      translateYOffset = elementHeight.value / 2;
-    }
+    const translateYOffset = calculateYTranslateOffset({
+      position,
+      y,
+      elementHeight: elementHeight.value,
+      height,
+      yGutter,
+      cursorGutter,
+    });
 
-    // determine final translateY value
-    let translateY: number | undefined;
+    // Determine final translateY value
+    let translateY: number;
     if (type === 'crosshair' || isStatic) {
       translateY = y - translateYOffset;
     } else {
-      if (position === 'top') {
-        translateY = yGutter;
-      } else {
-        translateY = height - elementHeight.value - yGutter;
-      }
+      translateY =
+        position === 'top' ? yGutter : height - elementHeight.value - yGutter;
     }
 
+    // Calculate opacity
     let opacity = isActive.value ? 1 : 0;
     if (isStatic) {
       // Only show static when there is no active cursor
@@ -177,6 +241,8 @@ export function LineChartTooltip({
   }, [
     atXPosition,
     atYPosition.value,
+    calculateXTranslateOffset,
+    calculateYTranslateOffset,
     currentX.value,
     currentY.value,
     cursorGutter,
@@ -187,6 +253,7 @@ export function LineChartTooltip({
     position,
     type,
     width,
+    withHorizontalFloating,
     xGutter,
     yGutter,
   ]);
@@ -195,15 +262,7 @@ export function LineChartTooltip({
     <Animated.View
       onLayout={handleLayout}
       {...props}
-      style={[
-        {
-          position: 'absolute',
-          padding: 4,
-          alignSelf: 'flex-start',
-        },
-        animatedCursorStyle,
-        props.style,
-      ]}
+      style={[styles.tooltip, animatedCursorStyle, props.style]}
     >
       {children || (
         <LineChartPriceText
@@ -216,3 +275,11 @@ export function LineChartTooltip({
     </Animated.View>
   );
 }
+
+const styles = StyleSheet.create({
+  tooltip: {
+    position: 'absolute',
+    padding: 4,
+    alignSelf: 'flex-start',
+  },
+});

package/src/charts/line/index.ts

@@ -1,3 +1,4 @@
+import { LineChartAxis } from './Axis';
 import { LineChart as _LineChart } from './Chart';
 import { LineChartPathWrapper } from './ChartPath';
 import { LineChartHighlight } from './Highlight';
@@ -15,8 +16,9 @@ import { LineChartDatetimeText } from './DatetimeText';
 import { useLineChartDatetime } from './useDatetime';
 import { useLineChartPrice } from './usePrice';
 import { useLineChart } from './useLineChart';
-import { LineChartHoverTrap } from '../line/HoverTrap';
+import { LineChartHoverTrap } from './HoverTrap';
 
+export * from './Axis';
 export * from './Chart';
 export * from './ChartPath';
 export * from './Highlight';
@@ -36,6 +38,7 @@ export * from './usePrice';
 export * from './types';
 
 export const LineChart = Object.assign(_LineChart, {
+  Axis: LineChartAxis,
   Chart: _LineChart,
   Dot: LineChartDot,
   Path: LineChartPathWrapper,

package/src/charts/line/types.ts

@@ -10,12 +10,11 @@ export type TLineChartDataProp =
       [key: string]: TLineChartData;
     };
 export type TLineChartData = Array<TLineChartPoint>;
-export type TLineChartDomain = [number, number];
 export type TLineChartContext = {
   currentX: SharedValue<number>;
   currentIndex: SharedValue<number>;
   isActive: SharedValue<boolean>;
-  domain: TLineChartDomain;
+  domain: [number, number];
   yDomain: YDomain;
   xLength: number;
   xDomain?: [number, number] | undefined;

package/src/charts/line/useAnimatedPath.ts

@@ -8,7 +8,7 @@ import {
 import { interpolatePath } from './utils';
 import { usePrevious } from '../../utils';
 
-export default function useAnimatedPath({
+export function useAnimatedPath({
   enabled = true,
   path,
 }: {
@@ -16,7 +16,6 @@ export default function useAnimatedPath({
   path: string;
 }) {
   const transition = useSharedValue(0);
-
   const previousPath = usePrevious(path);
 
   useAnimatedReaction(

package/src/charts/line/useDatetime.ts

@@ -1,7 +1,7 @@
 import { useDerivedValue } from 'react-native-reanimated';
 
 import { formatDatetime } from '../../utils';
-import type { TFormatterFn } from '../candle/types';
+import type { TFormatterFn } from '../../types';
 import { useLineChart } from './useLineChart';
 
 export function useLineChartDatetime({
@@ -26,23 +26,26 @@ export function useLineChartDatetime({
     return data[currentIndex.value]?.timestamp ?? '';
   }, [currentIndex, data]);
 
-  const timestampString = useDerivedValue(() => {
-    if (timestamp.value === '') return '';
-    return timestamp.value.toString();
-  }, [timestamp]);
+  const value = useDerivedValue(
+    () => new Date(timestamp.value).getTime(),
+    [timestamp]
+  );
 
   const formatted = useDerivedValue(() => {
-    const formattedDatetime = timestamp.value
+    const formattedDatetime = value.value
       ? formatDatetime({
-          value: timestamp.value,
+          value: value.value,
           locale,
           options,
         })
       : '';
     return format
-      ? format({ value: timestamp.value || -1, formatted: formattedDatetime })
+      ? format({
+          value: value.value || -1,
+          formatted: formattedDatetime,
+        })
       : formattedDatetime;
-  }, [format, locale, options, timestamp]);
+  }, [format, locale, options, value]);
 
-  return { value: timestampString, formatted };
+  return { value, formatted };
 }

package/src/charts/line/useLineChart.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { LineChartContext } from './Context';
 import { useLineChartData, useLineChartId } from './Data';

package/src/charts/line/usePrice.ts

@@ -1,7 +1,7 @@
 import { useDerivedValue } from 'react-native-reanimated';
 
 import { formatPrice } from '../../utils';
-import type { TFormatterFn } from '../candle/types';
+import type { TFormatterFn } from '../../types';
 import { useLineChart } from './useLineChart';
 
 export function useLineChartPrice({
@@ -24,12 +24,14 @@ export function useLineChartPrice({
       return '';
     }
 
-    let price = 0;
-    price = data[Math.min(index ?? currentIndex.value, data.length - 1)]!.value;
+    const dataPoint =
+      data[Math.min(index ?? currentIndex.value, data.length - 1)];
+    const price = dataPoint?.value ?? 0;
     return price.toFixed(precision).toString();
   }, [currentIndex, data, precision]);
+
   const formatted = useDerivedValue(() => {
-    let value = float.value || '';
+    const value = float.value || '';
     const formattedPrice = value ? formatPrice({ value }) : '';
     return format
       ? format({ value, formatted: formattedPrice })

package/src/charts/line/utils/getArea.ts

@@ -1,11 +1,8 @@
-// @ts-ignore
 import * as shape from 'd3-shape';
-
-import type { TLineChartData, YDomain } from '../types';
-
-// @ts-ignore
 import { scaleLinear } from 'd3-scale';
 
+import type { TLineChartData, TLineChartPoint, YDomain } from '../types';
+
 export function getArea({
   data,
   width,
@@ -28,14 +25,19 @@ export function getArea({
   const scaleX = scaleLinear()
     .domain(xDomain ?? [Math.min(...timestamps), Math.max(...timestamps)])
     .range([0, width]);
+
   const scaleY = scaleLinear()
     .domain([yDomain.min, yDomain.max])
     .range([height - gutter, gutter]);
+
   const area = shape
-    .area()
-    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] ?? i : i))
-    .y0((d: { value: unknown }) => scaleY(d.value as number))
+    .area<TLineChartPoint>()
+    .x((_: TLineChartPoint, i: number) =>
+      scaleX(xDomain ? timestamps[i] ?? i : i)
+    )
+    .y0((d: TLineChartPoint) => scaleY(d.value))
     .y1(() => height)
-    .curve(_shape)(data);
-  return area;
+    .curve(_shape as shape.CurveFactory)(data);
+
+  return area || '';
 }

package/src/charts/line/utils/getPath.ts

@@ -1,9 +1,7 @@
-// @ts-ignore
 import * as shape from 'd3-shape';
-// @ts-ignore
 import { scaleLinear } from 'd3-scale';
 
-import type { TLineChartData, YDomain } from '../types';
+import type { TLineChartData, TLineChartPoint, YDomain } from '../types';
 
 export function getPath({
   data,
@@ -31,20 +29,25 @@ export function getPath({
   const scaleX = scaleLinear()
     .domain(xDomain ?? [Math.min(...timestamps), Math.max(...timestamps)])
     .range([0, width]);
+
   const scaleY = scaleLinear()
     .domain([yDomain.min, yDomain.max])
     .range([height - gutter, gutter]);
+
   const path = shape
-    .line()
-    .defined((d: { timestamp: number }) =>
+    .line<TLineChartPoint>()
+    .defined((d: TLineChartPoint) =>
       from || to
-        ? data
+        ? !!data
             .slice(from, to ? to + 1 : undefined)
             .find((item) => item.timestamp === d.timestamp)
         : true
     )
-    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] ?? i : i))
-    .y((d: { value: number }) => scaleY(d.value))
-    .curve(_shape)(data);
-  return path;
+    .x((_: TLineChartPoint, i: number) =>
+      scaleX(xDomain ? timestamps[i] ?? i : i)
+    )
+    .y((d: TLineChartPoint) => scaleY(d.value))
+    .curve(_shape as shape.CurveFactory)(data);
+
+  return path || '';
 }

package/src/charts/line/utils/getXPositionForCurve.ts

@@ -11,7 +11,7 @@ export function getXPositionForCurve(path: Path, index: number) {
   if (point === undefined) {
     throw new Error(
       `Index out of bounds: ${index}. ` +
-      `Expected an integer in the range [0, ${path.curves.length}]`
+        `Expected an integer in the range [0, ${path.curves.length}]`
     );
   }
 

package/src/charts/line/utils/interpolatePath.ts

@@ -611,8 +611,8 @@ export function interpolatePathCommands(
 export function interpolatePath(a, b, excludeSegment) {
   'worklet';
 
-  let aCommands = pathCommandsFromString(a);
-  let bCommands = pathCommandsFromString(b);
+  const aCommands = pathCommandsFromString(a);
+  const bCommands = pathCommandsFromString(b);
 
   if (!aCommands.length && !bCommands.length) {
     return function nullInterpolator() {

package/src/components/AnimatedText.tsx

@@ -18,34 +18,27 @@ interface AnimatedTextProps {
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 export const AnimatedText = ({ text, style }: AnimatedTextProps) => {
-  const inputRef = React.useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any
+  const inputRef = React.useRef<TextInput>(null);
 
-  if (Platform.OS === 'web') {
-    // For some reason, the worklet reaction evaluates upfront regardless of any
-    // conditionals within it, causing Android to crash upon the invokation of `setNativeProps`.
-    // We are going to break the rules of hooks here so it doesn't invoke `useAnimatedReaction`
-    // for platforms outside of the web.
+  useAnimatedReaction(
+    () => text.value,
+    (data, prevData) => {
+      // Only execute for web platform
+      if (Platform.OS === 'web' && data !== prevData && inputRef.current) {
+        // @ts-expect-error - web TextInput has value property
+        inputRef.current.value = data;
+      }
+    },
+    [text]
+  );
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useAnimatedReaction(
-      () => {
-        return text.value;
-      },
-      (data, prevData) => {
-        if (data !== prevData && inputRef.current) {
-          inputRef.current.value = data;
-        }
-      },
-      [text]
-    );
-  }
   const animatedProps = useAnimatedProps(() => {
     return {
       text: text.value,
-      // Here we use any because the text prop is not available in the type
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } as any;
   });
+
   return (
     <AnimatedTextInput
       underlineColorAndroid="transparent"

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './charts/candle';
 export * from './charts/line';
 export * from './components/AnimatedText';
 export * from './utils';
+export * from './types';

package/src/types.ts

@@ -0,0 +1,7 @@
+export type TFormatterFn<T> = ({
+  value,
+  formatted,
+}: {
+  value: T;
+  formatted: string;
+}) => string;

package/src/utils/formatPrice.ts

@@ -7,22 +7,22 @@ export function formatPrice({
   precision,
 }: {
   value: string;
-  defaultPrice?: string;
+  defaultPrice?: string | number;
   precision?: number;
 }) {
   'worklet';
 
   let defaultPrice = _defaultPrice;
   if (typeof defaultPrice === 'number') {
-    defaultPrice = (defaultPrice as number).toString();
+    defaultPrice = defaultPrice.toString();
   }
 
-  let value = _value || defaultPrice?.replace?.(',', '');
+  const value = _value || defaultPrice?.replace?.(',', '');
   if (!value) {
     return `0.00`;
   }
 
-  let decimals =
+  const decimals =
     precision ??
     (Number(value) < 1
       ? Math.min(8, value.toString().slice(2).search(/[^0]/g) + 3)
@@ -30,9 +30,9 @@ export function formatPrice({
 
   let res = `${Number(value).toFixed(decimals)}`;
   const vals = res.split('.');
-  if (vals.length > 0) {
-    res = vals[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    if (vals.length === 2) {
+  if (vals.length > 0 && vals[0]) {
+    res = vals[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    if (vals.length === 2 && vals[1]) {
       return res + '.' + vals[1];
     }
   }

package/src/utils/usePrevious.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 export function usePrevious<T>(value: T) {
   // The ref object is a generic container whose current property is mutable ...