react-native-wagmi-charts 2.3.0 → 2.3.2

package/src/charts/line/Tooltip.tsx

@@ -1,17 +1,19 @@
 import * as React from 'react';
-import type { ViewProps } from 'react-native';
+
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { LineChartPriceText, LineChartPriceTextProps } from './PriceText';
 
-import { LineChartDimensionsContext } from './Chart';
 import { CursorContext } from './Cursor';
-import { LineChartPriceText, LineChartPriceTextProps } from './PriceText';
-import { useLineChart } from './useLineChart';
+import { LineChartDimensionsContext } from './Chart';
+import type { LayoutChangeEvent, ViewProps } from 'react-native';
+import { getXPositionForCurve } from './utils/getXPositionForCurve';
 import { getYForX } from 'react-native-redash';
+import { useLineChart } from './useLineChart';
 import { useMemo } from 'react';
 
 export type LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {
@@ -45,7 +47,7 @@ export function LineChartTooltip({
   at,
   ...props
 }: LineChartTooltipProps) {
-  const { width, height, parsedPath, pointWidth } = React.useContext(
+  const { width, height, parsedPath } = React.useContext(
     LineChartDimensionsContext
   );
   const { type } = React.useContext(CursorContext);
@@ -56,7 +58,7 @@ export function LineChartTooltip({
   const elementHeight = useSharedValue(0);
 
   const handleLayout = React.useCallback(
-    (event) => {
+    (event: LayoutChangeEvent) => {
       x.value = event.nativeEvent.layout.x;
       elementWidth.value = event.nativeEvent.layout.width;
       elementHeight.value = event.nativeEvent.layout.height;
@@ -66,9 +68,13 @@ export function LineChartTooltip({
 
   // When the user set a `at` index, get the index's y & x positions
   const atXPosition = useMemo(
-    () => (at == null ? undefined : pointWidth * at),
-    [at, pointWidth]
+    () =>
+      at !== null && at !== undefined
+        ? getXPositionForCurve(parsedPath, at)
+        : undefined,
+    [at, parsedPath]
   );
+
   const atYPosition = useDerivedValue(() => {
     return atXPosition == null
       ? undefined
@@ -134,13 +140,15 @@ export function LineChartTooltip({
       opacity: opacity,
     };
   }, [
-    currentX,
-    currentY,
+    atXPosition,
+    atYPosition.value,
+    currentX.value,
+    currentY.value,
     cursorGutter,
-    elementHeight,
-    elementWidth,
+    elementHeight.value,
+    elementWidth.value,
     height,
-    isActive,
+    isActive.value,
     position,
     type,
     width,

package/src/charts/line/useAnimatedPath.ts

@@ -5,8 +5,8 @@ import {
   withTiming,
 } from 'react-native-reanimated';
 
-import { usePrevious } from '../../utils';
 import { interpolatePath } from './utils';
+import { usePrevious } from '../../utils';
 
 export default function useAnimatedPath({
   enabled = true,
@@ -23,8 +23,8 @@ export default function useAnimatedPath({
     () => {
       return path;
     },
-    (_, previous) => {
-      if (previous) {
+    (result, previous) => {
+      if (result !== previous) {
         transition.value = 0;
         transition.value = withTiming(1);
       }

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

@@ -1,10 +1,11 @@
 // @ts-ignore
 import * as shape from 'd3-shape';
-// @ts-ignore
-import { scaleLinear } from 'd3-scale';
 
 import type { TLineChartData, YDomain } from '../types';
 
+// @ts-ignore
+import { scaleLinear } from 'd3-scale';
+
 export function getArea({
   data,
   width,
@@ -12,6 +13,7 @@ export function getArea({
   gutter,
   shape: _shape,
   yDomain,
+  xDomain,
 }: {
   data: TLineChartData;
   width: number;
@@ -19,18 +21,19 @@ export function getArea({
   gutter: number;
   shape?: unknown;
   yDomain: YDomain;
+  xDomain?: [number, number];
 }): string {
-  const timestamps = data.map((_, i) => i);
+  const timestamps = data.map(({ timestamp }, i) => (xDomain ? timestamp : i));
 
   const scaleX = scaleLinear()
-    .domain([Math.min(...timestamps), Math.max(...timestamps)])
+    .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(i))
+    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] : i))
     .y0((d: { value: unknown }) => scaleY(d.value as number))
     .y1(() => height)
     .curve(_shape)(data);

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

@@ -0,0 +1,9 @@
+import type { Path } from 'react-native-redash';
+
+export function getXPositionForCurve(path: Path, index: number) {
+  'worklet';
+  if (index === 0) {
+    return path.move.x;
+  }
+  return path.curves[index - 1].to.x;
+}