react-native-wagmi-charts 2.3.0 → 2.4.0

package/src/charts/line/HorizontalLine.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
 import Animated, {
   useAnimatedProps,
   useDerivedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { Line as SVGLine, LineProps } from 'react-native-svg';
-import { getYForX } from 'react-native-redash';
+import { LineProps, Line as SVGLine } from 'react-native-svg';
 
 import { LineChartDimensionsContext } from './Chart';
+import React from 'react';
+import { getXPositionForCurve } from './utils/getXPositionForCurve';
+import { getYForX } from 'react-native-redash';
 import { useLineChart } from './useLineChart';
 
 const AnimatedLine = Animated.createAnimatedComponent(SVGLine);
@@ -53,7 +54,7 @@ export function LineChartHorizontalLine({
   at = { index: 0 },
   offsetY = 0,
 }: HorizontalLineProps) {
-  const { width, parsedPath, pointWidth, height, gutter } = React.useContext(
+  const { width, parsedPath, height, gutter } = React.useContext(
     LineChartDimensionsContext
   );
   const { yDomain } = useLineChart();
@@ -61,7 +62,8 @@ export function LineChartHorizontalLine({
   const y = useDerivedValue(() => {
     if (typeof at === 'number' || at.index != null) {
       const index = typeof at === 'number' ? at : at.index;
-      const yForX = getYForX(parsedPath!, pointWidth * index) || 0;
+      const yForX =
+        getYForX(parsedPath!, getXPositionForCurve(parsedPath, index)) || 0;
       return withTiming(yForX + offsetY);
     }
     /**
@@ -82,16 +84,7 @@ export function LineChartHorizontalLine({
     const offsetTopPixels = gutter + percentageOffsetTop * heightBetweenGutters;
 
     return withTiming(offsetTopPixels + offsetY);
-  }, [
-    at,
-    gutter,
-    height,
-    offsetY,
-    parsedPath,
-    pointWidth,
-    yDomain.max,
-    yDomain.min,
-  ]);
+  }, [at, gutter, height, offsetY, parsedPath, yDomain.max, yDomain.min]);
 
   const lineAnimatedProps = useAnimatedProps(
     () => ({

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

@@ -4,7 +4,6 @@ import { View, StyleSheet } from 'react-native';
 import { LineChartDimensionsContext } from '../Chart';
 import { useLineChart } from '../useLineChart';
 
-// @ts-expect-error missing types
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 
 let isEnabled = false;

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;
+}

package/tsconfig.build.json

@@ -0,0 +1,5 @@
+
+{
+  "extends": "./tsconfig",
+  "exclude": ["example/"]
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "react-native-wagmi-charts": ["./src/index"],
+      "react": ["./node_modules/@types/react"]
+    },
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": false,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext", "dom"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+  }
+}