react-native-wagmi-charts 2.4.0 → 2.5.1

package/src/charts/candle/useDatetime.ts

@@ -1,8 +1,9 @@
-import Animated, { useDerivedValue } from 'react-native-reanimated';
+import { useDerivedValue } from 'react-native-reanimated';
 
 import { formatDatetime } from '../../utils';
 import type { TFormatterFn } from './types';
 import { useCandleData } from './useCandleData';
+import type { SharedValue } from 'react-native-reanimated';
 
 export function useCandlestickChartDatetime({
   format,
@@ -13,8 +14,8 @@ export function useCandlestickChartDatetime({
   locale?: string;
   options?: { [key: string]: string };
 } = {}): {
-  value: Readonly<Animated.SharedValue<string>>;
-  formatted: Readonly<Animated.SharedValue<string>>;
+  value: Readonly<SharedValue<string>>;
+  formatted: Readonly<SharedValue<string>>;
 } {
   const candle = useCandleData();
 

package/src/charts/candle/usePrice.ts

@@ -1,10 +1,11 @@
-import Animated, { useDerivedValue } from 'react-native-reanimated';
+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 { useCandleData } from './useCandleData';
+import type { SharedValue } from 'react-native-reanimated';
 
 export function useCandlestickChartPrice({
   format,
@@ -15,8 +16,8 @@ export function useCandlestickChartPrice({
   precision?: number;
   type?: TPriceType;
 } = {}): {
-  value: Readonly<Animated.SharedValue<string>>;
-  formatted: Readonly<Animated.SharedValue<string>>;
+  value: Readonly<SharedValue<string>>;
+  formatted: Readonly<SharedValue<string>>;
 } {
   const { currentY, domain, height } = useCandlestickChart();
   const candle = useCandleData();

package/src/charts/line/Chart.tsx

@@ -55,11 +55,11 @@ export function LineChart({
 
   const pathWidth = React.useMemo(() => {
     let allowedWidth = width;
-    if (xLength > data.length) {
+    if (data && xLength > data.length) {
       allowedWidth = (width * data.length) / xLength;
     }
     return allowedWidth;
-  }, [data.length, width, xLength]);
+  }, [data, width, xLength]);
 
   const path = React.useMemo(() => {
     if (data && data.length > 0) {
@@ -91,11 +91,10 @@ export function LineChart({
     return '';
   }, [data, pathWidth, height, yGutter, shape, yDomain, xDomain]);
 
-  const dataLength = data.length;
   const parsedPath = React.useMemo(() => parse(path), [path]);
   const pointWidth = React.useMemo(
-    () => width / (dataLength - 1),
-    [dataLength, width]
+    () => width / (data ? data.length - 1 : 1),
+    [data, width]
   );
 
   const contextValue = React.useMemo(

package/src/charts/line/Context.tsx

@@ -4,17 +4,17 @@ import {
   useAnimatedReaction,
   useSharedValue,
 } from 'react-native-reanimated';
-import type { TLineChartDataProp } from './types';
+import type { TLineChartData, TLineChartDataProp } from './types';
 import { LineChartDataProvider } from './Data';
 
 import type { TLineChartContext, YRangeProp } from './types';
 import { getDomain, lineChartDataPropToArray } from './utils';
 
 export const LineChartContext = React.createContext<TLineChartContext>({
-  currentX: { value: -1 },
-  currentIndex: { value: -1 },
+  currentX: { value: -1 } as TLineChartContext['currentX'],
+  currentIndex: { value: -1 } as TLineChartContext['currentIndex'],
   domain: [0, 0],
-  isActive: { value: false },
+  isActive: { value: false } as TLineChartContext['isActive'],
   yDomain: {
     min: 0,
     max: 0,
@@ -47,12 +47,16 @@ export function LineChartProvider({
   const isActive = useSharedValue(false);
 
   const domain = React.useMemo(
-    () => getDomain(Array.isArray(data) ? data : Object.values(data)[0]),
+    () => getDomain(
+      Array.isArray(data) ? data : Object.values(data)[0] as TLineChartData
+    ),
     [data]
   );
 
   const contextValue = React.useMemo<TLineChartContext>(() => {
     const values = lineChartDataPropToArray(data).map(({ value }) => value);
+    const domainRows =
+      Array.isArray(data) ? data : Object.values(data)[0] as TLineChartData;
 
     return {
       currentX,
@@ -64,8 +68,7 @@ export function LineChartProvider({
         max: yRange?.max ?? Math.max(...values),
       },
       xDomain,
-      xLength:
-        xLength ?? (Array.isArray(data) ? data : Object.values(data)[0]).length,
+      xLength: xLength ?? domainRows.length,
     };
   }, [
     currentIndex,

package/src/charts/line/Cursor.tsx

@@ -39,7 +39,7 @@ export function LineChartCursor({
   );
   const { currentX, currentIndex, isActive, data, xDomain } = useLineChart();
   const xValues = React.useMemo(
-    () => data.map(({ timestamp }, i) => (xDomain ? timestamp : i)),
+    () => (data ?? []).map(({ timestamp }, i) => (xDomain ? timestamp : i)),
     [data, xDomain]
   );
 
@@ -70,7 +70,7 @@ export function LineChartCursor({
 
     const newXPosition = (
       closestIndex > 0
-        ? parsedPath.curves[closestPathCurve].to
+        ? parsedPath.curves[closestPathCurve]!.to
         : parsedPath.move
     ).x;
     // Update values
@@ -92,7 +92,7 @@ export function LineChartCursor({
         const minIndex = 0;
         const boundedIndex = Math.max(
           minIndex,
-          Math.round(xPosition / width / (1 / (data.length - 1)))
+          Math.round(xPosition / width / (1 / (data ? data.length - 1 : 1)))
         );
 
         if (snapToPoint) {

package/src/charts/line/Data.tsx

@@ -1,5 +1,5 @@
 import type { TLineChartData } from './types';
-import React, { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import type { ReactNode } from 'react';
 import type { TLineChartDataProp } from './types';
 

package/src/charts/line/DatetimeText.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { TextProps as RNTextProps } from 'react-native';
 import type Animated from 'react-native-reanimated';
 

package/src/charts/line/Group.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ReactNode, Children, cloneElement } from 'react';
 import { ViewProps, View } from 'react-native';
 import flattenChildren from 'react-keyed-flatten-children';

package/src/charts/line/Highlight.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
-import { Path, PathProps } from 'react-native-svg';
+import { ClipPath, Defs, G, Path, PathProps, Rect } from 'react-native-svg';
 
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPathContext } from './LineChartPathContext';
 import useAnimatedPath from './useAnimatedPath';
-import { useLineChart } from './useLineChart';
-import { getPath } from './utils';
+import { getXPositionForCurve } from './utils/getXPositionForCurve';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -30,8 +29,7 @@ export function LineChartHighlight({
   width: strokeWidth = 3,
   ...props
 }: LineChartColorProps) {
-  const { data, yDomain } = useLineChart();
-  const { pathWidth, height, gutter, shape } = React.useContext(
+  const { path, parsedPath, height } = React.useContext(
     LineChartDimensionsContext
   );
   const { isTransitionEnabled, isInactive: _isInactive } =
@@ -40,22 +38,6 @@ export function LineChartHighlight({
 
   ////////////////////////////////////////////////
 
-  const path = React.useMemo(() => {
-    if (data && data.length > 0) {
-      return getPath({
-        data,
-        from,
-        to,
-        width: pathWidth,
-        height,
-        gutter,
-        shape,
-        yDomain,
-      });
-    }
-    return '';
-  }, [data, from, to, pathWidth, height, gutter, shape, yDomain]);
-
   const { animatedProps } = useAnimatedPath({
     enabled: isTransitionEnabled,
     path,
@@ -63,9 +45,24 @@ export function LineChartHighlight({
 
   ////////////////////////////////////////////////
 
+  const clipStart = getXPositionForCurve(parsedPath, from);
+  const clipEnd = getXPositionForCurve(parsedPath, to);
+
   return (
-    <>
+    <G>
+      <Defs>
+        <ClipPath id="clip">
+          <Rect
+            x={clipStart}
+            y="0"
+            width={clipEnd - clipStart}
+            height={height}
+            fill="white"
+          />
+        </ClipPath>
+      </Defs>
       <AnimatedPath
+        clipPath="url(#clip)"
         animatedProps={animatedProps}
         fill="transparent"
         stroke={isInactive ? inactiveColor || color : color}
@@ -73,6 +70,6 @@ export function LineChartHighlight({
         strokeOpacity={isInactive && !inactiveColor ? 0.5 : 1}
         {...props}
       />
-    </>
+    </G>
   );
 }

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

@@ -1,3 +1 @@
-import React from 'react';
-
 export const LineChartHoverTrap = () => <></>;

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

@@ -65,7 +65,7 @@ export const LineChartHoverTrap = () => {
           const minIndex = 0;
           const boundedIndex = Math.max(
             minIndex,
-            Math.round(boundedX / width / (1 / (data.length - 1)))
+            Math.round(boundedX / width / (1 / (data ? data.length - 1 : 1)))
           );
 
           currentIndex.value = boundedIndex;
@@ -75,7 +75,7 @@ export const LineChartHoverTrap = () => {
         currentIndex.value = -1;
       }
     },
-    [currentIndex, currentX, data.length, isActive, parsedPath, width]
+    [currentIndex, currentX, data, isActive, parsedPath, width]
   );
 
   const onMouseLeave = React.useCallback(() => {

package/src/charts/line/PriceText.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { TextProps as RNTextProps } from 'react-native';
 import type Animated from 'react-native-reanimated';
 

package/src/charts/line/types.ts

@@ -1,4 +1,4 @@
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 export type TLineChartPoint = {
   timestamp: number;
@@ -12,9 +12,9 @@ export type TLineChartDataProp =
 export type TLineChartData = Array<TLineChartPoint>;
 export type TLineChartDomain = [number, number];
 export type TLineChartContext = {
-  currentX: Animated.SharedValue<number>;
-  currentIndex: Animated.SharedValue<number>;
-  isActive: Animated.SharedValue<boolean>;
+  currentX: SharedValue<number>;
+  currentIndex: SharedValue<number>;
+  isActive: SharedValue<boolean>;
   domain: TLineChartDomain;
   yDomain: YDomain;
   xLength: number;

package/src/charts/line/useDatetime.ts

@@ -16,9 +16,14 @@ export function useLineChartDatetime({
   const { currentIndex, data } = useLineChart();
 
   const timestamp = useDerivedValue(() => {
-    if (typeof currentIndex.value === 'undefined' || currentIndex.value === -1)
+    if (
+      !data ||
+      typeof currentIndex.value === 'undefined' ||
+      currentIndex.value === -1
+    ) {
       return '';
-    return data[currentIndex.value].timestamp;
+    }
+    return data[currentIndex.value]?.timestamp ?? '';
   }, [currentIndex, data]);
 
   const timestampString = useDerivedValue(() => {

package/src/charts/line/usePrice.ts

@@ -12,14 +12,20 @@ export function useLineChartPrice({
   const { currentIndex, data } = useLineChart();
 
   const float = 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;
+    price = data[Math.min(index ?? currentIndex.value, data.length - 1)]!.value;
     return price.toFixed(precision).toString();
   }, [currentIndex, data, precision]);
   const formatted = useDerivedValue(() => {

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

@@ -33,7 +33,7 @@ export function getArea({
     .range([height - gutter, gutter]);
   const area = shape
     .area()
-    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] : i))
+    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] ?? i : i))
     .y0((d: { value: unknown }) => scaleY(d.value as number))
     .y1(() => height)
     .curve(_shape)(data);

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

@@ -43,7 +43,7 @@ export function getPath({
             .find((item) => item.timestamp === d.timestamp)
         : true
     )
-    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] : i))
+    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] ?? i : i))
     .y((d: { value: number }) => scaleY(d.value))
     .curve(_shape)(data);
   return path;

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

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

package/src/components/AnimatedText.tsx

@@ -7,12 +7,12 @@ import Animated, {
   useAnimatedProps,
   useAnimatedReaction,
 } from 'react-native-reanimated';
-
+import type { SharedValue, AnimatedProps } from 'react-native-reanimated';
 Animated.addWhitelistedNativeProps({ text: true });
 
 interface AnimatedTextProps {
-  text: Animated.SharedValue<string>;
-  style?: Animated.AnimateProps<RNTextProps>['style'];
+  text: SharedValue<string>;
+  style?: AnimatedProps<RNTextProps>['style'];
 }
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

package/src/utils/formatPrice.ts

@@ -31,7 +31,7 @@ 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, ',');
+    res = vals[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     if (vals.length === 2) {
       return res + '.' + vals[1];
     }

package/.editorconfig

@@ -1,15 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-
-indent_style = space
-indent_size = 2
-
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.gitattributes

@@ -1,3 +0,0 @@
-*.pbxproj -text
-# specific for windows script files
-*.bat text eol=crlf

package/.gitignore

@@ -1,60 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# XDE
-.expo/
-
-# VSCode
-.vscode/
-jsconfig.json
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IJ
-#
-.idea
-.gradle
-local.properties
-android.iml
-
-# Cocoapods
-#
-example/ios/Pods
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-android/app/libs
-android/keystores/debug.keystore
-
-# Expo
-.expo/*
-
-# generated by bob
-lib/

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn lint --fix && git add -A && yarn typescript

package/.prettierrc.js

@@ -1,5 +0,0 @@
-const packageJson = require('./package.json');
-
-const config = packageJson.eslintConfig.rules['prettier/prettier'][1];
-
-module.exports = config;

package/.yarnrc

@@ -1,3 +0,0 @@
-# Override Yarn command so we can automatically setup the repo on running `yarn`
-
-yarn-path "scripts/bootstrap.js"

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-};

package/example/.expo/README.md

@@ -1,8 +0,0 @@
-> Why do I have a folder named ".expo" in my project?
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-> What do the files contain?
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-> Should I commit the ".expo" folder?
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/example/.expo/devices.json

@@ -1,3 +0,0 @@
-{
-  "devices": []
-}

package/example/README.md

@@ -1,32 +0,0 @@
-# react-native-wagmi-charts Example Project 🧑‍🏫
-
-## Getting Started
-
-First install project dependencies in this directory:
-
-`npm install`
-
-After dependencies are installed, you can go ahead and run the project on either a simulator, or a real device using the following commands
-
-For iOS:
-
-`npm run ios`
-
-For Android:
-
-`npm run android`
-
-For Web:
-
-`npm run web`
-
-
-## Example Charts
-
-The following charts are included:
-
-- Candlestick Chart
-- Line Chart
-
-### Sample Data
-The charts in this example use hardcoded data, which is stored in the `src/data` directory

package/example/app.json

@@ -1,22 +0,0 @@
-{
-  "name": "react-native-wagmi-charts-example",
-  "displayName": "CandlestickChart Example",
-  "expo": {
-    "name": "react-native-wagmi-charts-example",
-    "slug": "react-native-wagmi-charts-example",
-    "description": "Example app for react-native-wagmi-charts",
-    "privacy": "public",
-    "version": "1.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
-    "ios": {
-      "supportsTablet": true
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ]
-  }
-}

package/example/babel.config.js

@@ -1,23 +0,0 @@
-const path = require('path');
-const pkg = require('../package.json');
-
-module.exports = function (api) {
-  api.cache(true);
-
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            // For development, we want to alias the library to the source
-            [pkg.name]: path.join(__dirname, '..', pkg.source),
-          },
-        },
-      ],
-      'react-native-reanimated/plugin',
-    ],
-  };
-};

package/example/index.js

@@ -1,8 +0,0 @@
-import { registerRootComponent } from 'expo';
-
-import App from './src/App';
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in the Expo client or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);

package/example/metro.config.js

@@ -1,40 +0,0 @@
-const path = require('path');
-const blacklist = require('metro-config/src/defaults/exclusionList');
-const escape = require('escape-string-regexp');
-const pak = require('../package.json');
-
-const root = path.resolve(__dirname, '..');
-
-const modules = Object.keys({
-  ...pak.peerDependencies,
-});
-
-module.exports = {
-  projectRoot: __dirname,
-  watchFolders: [root],
-
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we blacklist them at the root, and alias them to the versions in example's node_modules
-  resolver: {
-    blacklistRE: blacklist(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
-
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
-  },
-
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-};