react-native-wagmi-charts 1.6.0 → 2.0.1

package/src/charts/line/Chart.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
+// @ts-ignore
+import * as d3Shape from 'd3-shape';
+import { Dimensions, StyleSheet, View, ViewProps } from 'react-native';
+import { LineChartContext } from './Context';
+import { LineChartIdProvider, useLineChartData } from './Data';
 
-import { useLineChart } from './useLineChart';
 import { getArea, getPath } from './utils';
 
 export const LineChartDimensionsContext = React.createContext({
@@ -9,7 +12,9 @@ export const LineChartDimensionsContext = React.createContext({
   height: 0,
   path: '',
   area: '',
+  shape: d3Shape.curveBumpX,
   gutter: 0,
+  pathWidth: 0,
 });
 
 type LineChartProps = ViewProps & {
@@ -17,26 +22,46 @@ type LineChartProps = ViewProps & {
   yGutter?: number;
   width?: number;
   height?: number;
-  shape?: string;
+  shape?: unknown;
+  /**
+   * If your `LineChart.Provider` uses a dictionary with multiple IDs for multiple paths, then this field is required.
+   */
+  id?: string;
+  absolute?: boolean;
 };
 
 const { width: screenWidth } = Dimensions.get('window');
 
+LineChart.displayName = 'LineChart';
+
 export function LineChart({
   children,
   yGutter = 16,
   width = screenWidth,
   height = screenWidth,
-  shape,
+  shape = d3Shape.curveBumpX,
+  id,
+  absolute,
   ...props
 }: LineChartProps) {
-  const { data, yDomain } = useLineChart();
+  const { yDomain, xLength } = React.useContext(LineChartContext);
+  const { data } = useLineChartData({
+    id,
+  });
+
+  const pathWidth = React.useMemo(() => {
+    let allowedWidth = width;
+    if (xLength > data.length) {
+      allowedWidth = (width * data.length) / xLength;
+    }
+    return allowedWidth;
+  }, [data.length, width, xLength]);
 
   const path = React.useMemo(() => {
     if (data && data.length > 0) {
       return getPath({
         data,
-        width,
+        width: pathWidth,
         height,
         gutter: yGutter,
         shape,
@@ -44,13 +69,13 @@ export function LineChart({
       });
     }
     return '';
-  }, [data, width, height, yGutter, shape, yDomain]);
+  }, [data, pathWidth, height, yGutter, shape, yDomain]);
 
   const area = React.useMemo(() => {
     if (data && data.length > 0) {
       return getArea({
         data,
-        width,
+        width: pathWidth,
         height,
         gutter: yGutter,
         shape,
@@ -58,7 +83,7 @@ export function LineChart({
       });
     }
     return '';
-  }, [data, width, height, yGutter, shape, yDomain]);
+  }, [data, pathWidth, height, yGutter, shape, yDomain]);
 
   const contextValue = React.useMemo(
     () => ({
@@ -67,13 +92,25 @@ export function LineChart({
       path,
       width,
       height,
+      pathWidth,
+      shape,
     }),
-    [area, height, path, width, yGutter]
+    [yGutter, area, path, width, height, pathWidth, shape]
   );
 
   return (
-    <LineChartDimensionsContext.Provider value={contextValue}>
-      <View {...props}>{children}</View>
-    </LineChartDimensionsContext.Provider>
+    <LineChartIdProvider id={id}>
+      <LineChartDimensionsContext.Provider value={contextValue}>
+        <View {...props} style={[absolute && styles.absolute, props.style]}>
+          {children}
+        </View>
+      </LineChartDimensionsContext.Provider>
+    </LineChartIdProvider>
   );
 }
+
+const styles = StyleSheet.create({
+  absolute: {
+    position: 'absolute',
+  },
+});

package/src/charts/line/ChartPath.tsx

@@ -3,17 +3,28 @@ import { StyleSheet, View } from 'react-native';
 import { Svg } from 'react-native-svg';
 import Animated, {
   useAnimatedProps,
+  useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import flattenChildren from 'react-keyed-flatten-children';
 
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPath, LineChartPathProps } from './Path';
 import { useLineChart } from './useLineChart';
 
+const BACKGROUND_COMPONENTS = [
+  'LineChartHighlight',
+  'LineChartHorizontalLine',
+  'LineChartGradient',
+  'LineChartDot',
+];
+const FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];
+
 const AnimatedSVG = Animated.createAnimatedComponent(Svg);
 
 export const LineChartPathContext = React.createContext({
   color: '',
+  isInactive: false,
   isTransitionEnabled: true,
 });
 
@@ -22,63 +33,130 @@ type LineChartPathWrapperProps = {
   animationProps?: Partial<Animated.WithTimingConfig>;
   children?: React.ReactNode;
   color?: string;
+  inactiveColor?: string;
   width?: number;
+  widthOffset?: number;
   pathProps?: Partial<LineChartPathProps>;
   showInactivePath?: boolean;
+  animateOnMount?: 'foreground';
+  mountAnimationDuration?: number;
+  mountAnimationProps?: Partial<Animated.WithTimingConfig>;
 };
 
+LineChartPathWrapper.displayName = 'LineChartPathWrapper';
+
 export function LineChartPathWrapper({
   animationDuration = 300,
   animationProps = {},
   children,
   color = 'black',
-  width: pathWidth = 3,
+  inactiveColor,
+  width: strokeWidth = 3,
+  widthOffset = 20,
   pathProps = {},
   showInactivePath = true,
+  animateOnMount,
+  mountAnimationDuration = animationDuration,
+  mountAnimationProps = animationProps,
 }: LineChartPathWrapperProps) {
-  const { width, height } = React.useContext(LineChartDimensionsContext);
+  const { height, pathWidth, width } = React.useContext(
+    LineChartDimensionsContext
+  );
   const { currentX, isActive } = useLineChart();
+  const isMounted = useSharedValue(false);
+  const hasMountedAnimation = useSharedValue(false);
+
+  React.useEffect(() => {
+    isMounted.value = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   ////////////////////////////////////////////////
 
-  const svgProps = useAnimatedProps(() => ({
-    width: isActive.value
-      ? // on Web, <svg /> elements don't support negative widths
-        // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
-        Math.max(currentX.value, 0)
-      : withTiming(
-          width,
-          Object.assign({ duration: animationDuration }, animationProps)
-        ),
-  }));
+  const svgProps = useAnimatedProps(() => {
+    const shouldAnimateOnMount = animateOnMount === 'foreground';
+    const inactiveWidth =
+      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
+
+    const duration =
+      shouldAnimateOnMount && !hasMountedAnimation.value
+        ? mountAnimationDuration
+        : animationDuration;
+    const props =
+      shouldAnimateOnMount && !hasMountedAnimation.value
+        ? mountAnimationProps
+        : animationProps;
+
+    return {
+      width: isActive.value
+        ? // on Web, <svg /> elements don't support negative widths
+          // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
+          Math.max(currentX.value, 0)
+        : withTiming(
+            inactiveWidth + widthOffset,
+            Object.assign({ duration }, props),
+            () => {
+              hasMountedAnimation.value = true;
+            }
+          ),
+    };
+  });
 
   const viewSize = React.useMemo(() => ({ width, height }), [width, height]);
 
   ////////////////////////////////////////////////
 
+  let backgroundChildren;
+  let foregroundChildren;
+  if (children) {
+    const iterableChildren = flattenChildren(children);
+    backgroundChildren = iterableChildren.filter((child) =>
+      // @ts-ignore
+      BACKGROUND_COMPONENTS.includes(child?.type?.displayName)
+    );
+    foregroundChildren = iterableChildren.filter((child) =>
+      // @ts-ignore
+      FOREGROUND_COMPONENTS.includes(child?.type?.displayName)
+    );
+  }
+
+  ////////////////////////////////////////////////
+
   return (
-    <LineChartPathContext.Provider
-      value={{
-        color,
-        isTransitionEnabled: pathProps.isTransitionEnabled ?? true,
-      }}
-    >
-      <View style={viewSize}>
-        <Svg width={width} height={height}>
-          {children}
-          <LineChartPath
-            color={color}
-            width={pathWidth}
-            isInactive={showInactivePath}
-            {...pathProps}
-          />
-        </Svg>
-      </View>
-      <View style={StyleSheet.absoluteFill}>
-        <AnimatedSVG animatedProps={svgProps} height={height}>
-          <LineChartPath color={color} width={pathWidth} {...pathProps} />
-        </AnimatedSVG>
-      </View>
-    </LineChartPathContext.Provider>
+    <>
+      <LineChartPathContext.Provider
+        value={{
+          color,
+          isInactive: showInactivePath,
+          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,
+        }}
+      >
+        <View style={viewSize}>
+          <Svg width={width} height={height}>
+            <LineChartPath
+              color={color}
+              inactiveColor={inactiveColor}
+              width={strokeWidth}
+              {...pathProps}
+            />
+            {backgroundChildren}
+          </Svg>
+        </View>
+      </LineChartPathContext.Provider>
+      <LineChartPathContext.Provider
+        value={{
+          color,
+          isInactive: false,
+          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,
+        }}
+      >
+        <View style={StyleSheet.absoluteFill}>
+          <AnimatedSVG animatedProps={svgProps} height={height}>
+            <LineChartPath color={color} width={strokeWidth} {...pathProps} />
+            {foregroundChildren}
+          </AnimatedSVG>
+        </View>
+      </LineChartPathContext.Provider>
+    </>
   );
 }

package/src/charts/line/Context.tsx

@@ -1,68 +1,93 @@
 import * as React from 'react';
-import { useSharedValue } from 'react-native-reanimated';
+import {
+  runOnJS,
+  useAnimatedReaction,
+  useSharedValue,
+} from 'react-native-reanimated';
+import type { TLineChartDataProp } from './types';
+import { LineChartDataProvider } from './Data';
 
-import type { TLineChartContext, TLineChartData, YRangeProp } from './types';
-import { getDomain } from './utils';
+import type { TLineChartContext, YRangeProp } from './types';
+import { getDomain, lineChartDataPropToArray } from './utils';
 
 export const LineChartContext = React.createContext<TLineChartContext>({
   currentX: { value: -1 },
-  currentY: { value: -1 },
   currentIndex: { value: -1 },
-  data: [],
   domain: [0, 0],
   isActive: { value: false },
   yDomain: {
     min: 0,
     max: 0,
   },
+  xLength: 0,
 });
 
 type LineChartProviderProps = {
   children: React.ReactNode;
-  data: TLineChartData;
+  data: TLineChartDataProp;
   yRange?: YRangeProp;
+  onCurrentIndexChange?: (x: number) => void;
+  xLength?: number;
 };
 
+LineChartProvider.displayName = 'LineChartProvider';
+
 export function LineChartProvider({
   children,
   data = [],
   yRange,
+  onCurrentIndexChange,
+  xLength,
 }: LineChartProviderProps) {
   const currentX = useSharedValue(-1);
-  const currentY = useSharedValue(-1);
   const currentIndex = useSharedValue(-1);
   const isActive = useSharedValue(false);
 
-  const domain = React.useMemo(() => getDomain(data), [data]);
+  const domain = React.useMemo(
+    () => getDomain(Array.isArray(data) ? data : Object.values(data)[0]),
+    [data]
+  );
+
+  const contextValue = React.useMemo<TLineChartContext>(() => {
+    const values = lineChartDataPropToArray(data).map(({ value }) => value);
 
-  const contextValue = React.useMemo<TLineChartContext>(
-    () => ({
+    return {
       currentX,
-      currentY,
       currentIndex,
-      data,
       isActive,
       domain,
       yDomain: {
-        min: yRange?.min ?? Math.min(...data.map(({ value }) => value)),
-        max: yRange?.max ?? Math.max(...data.map(({ value }) => value)),
+        min: yRange?.min ?? Math.min(...values),
+        max: yRange?.max ?? Math.max(...values),
       },
-    }),
-    [
-      currentIndex,
-      currentX,
-      currentY,
-      data,
-      domain,
-      isActive,
-      yRange?.max,
-      yRange?.min,
-    ]
+      xLength:
+        xLength ?? (Array.isArray(data) ? data : Object.values(data)[0]).length,
+    };
+  }, [
+    currentIndex,
+    currentX,
+    data,
+    domain,
+    isActive,
+    yRange?.max,
+    yRange?.min,
+    xLength,
+  ]);
+
+  useAnimatedReaction(
+    () => currentIndex.value,
+    (x, prevX) => {
+      if (x !== -1 && x !== prevX && onCurrentIndexChange) {
+        runOnJS(onCurrentIndexChange)(x);
+      }
+    }
   );
 
   return (
-    <LineChartContext.Provider value={contextValue}>
-      {children}
-    </LineChartContext.Provider>
+    <LineChartDataProvider data={data}>
+      <LineChartContext.Provider value={contextValue}>
+        {children}
+      </LineChartContext.Provider>
+    </LineChartDataProvider>
   );
 }

package/src/charts/line/Cursor.tsx

@@ -7,7 +7,7 @@ import {
   LongPressGestureHandlerProps,
 } from 'react-native-gesture-handler';
 import Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';
-import { getYForX, parse } from 'react-native-redash';
+import { parse } from 'react-native-redash';
 
 import { LineChartDimensionsContext } from './Chart';
 import { useLineChart } from './useLineChart';
@@ -19,13 +19,17 @@ export type LineChartCursorProps = LongPressGestureHandlerProps & {
 
 export const CursorContext = React.createContext({ type: '' });
 
+LineChartCursor.displayName = 'LineChartCursor';
+
 export function LineChartCursor({
   children,
   type,
   ...props
 }: LineChartCursorProps) {
-  const { width, path } = React.useContext(LineChartDimensionsContext);
-  const { currentX, currentY, currentIndex, isActive, data } = useLineChart();
+  const { pathWidth: width, path } = React.useContext(
+    LineChartDimensionsContext
+  );
+  const { currentX, currentIndex, isActive, data } = useLineChart();
 
   const parsedPath = React.useMemo(
     () => (path ? parse(path) : undefined),
@@ -40,7 +44,6 @@ export function LineChartCursor({
         const boundedX = x <= width ? x : width;
         isActive.value = true;
         currentX.value = boundedX;
-        currentY.value = getYForX(parsedPath, boundedX) || 0;
 
         // on Web, we could drag the cursor to be negative, breaking it
         // so we clamp the index at 0 to fix it

package/src/charts/line/CursorCrosshair.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ViewProps } from 'react-native';
+import { Platform, View, ViewProps } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   withSpring,
@@ -8,7 +8,10 @@ import Animated, {
 import { LineChartCursor, LineChartCursorProps } from './Cursor';
 import { useLineChart } from './useLineChart';
 
-type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'> & {
+type LineChartCursorCrosshairProps = Omit<
+  LineChartCursorProps,
+  'children' | 'type'
+> & {
   children?: React.ReactNode;
   color?: string;
   size?: number;
@@ -18,6 +21,8 @@ type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'> & {
   crosshairOuterProps?: ViewProps;
 };
 
+LineChartCursorCrosshair.displayName = 'LineChartCursorCrosshair';
+
 export function LineChartCursorCrosshair({
   children,
   color = 'black',
@@ -30,14 +35,26 @@ export function LineChartCursorCrosshair({
 }: LineChartCursorCrosshairProps) {
   const { currentX, currentY, isActive } = useLineChart();
 
+  // It seems that enabling spring animation on initial render on Android causes a crash.
+  const [enableSpringAnimation, setEnableSpringAnimation] = React.useState(
+    Platform.OS === 'ios'
+  );
+  React.useEffect(() => {
+    setTimeout(() => {
+      setEnableSpringAnimation(true);
+    }, 100);
+  }, []);
+
   const animatedCursorStyle = useAnimatedStyle(() => ({
     transform: [
       { translateX: currentX.value - outerSize / 2 },
       { translateY: currentY.value - outerSize / 2 },
       {
-        scale: withSpring(isActive.value ? 1 : 0, {
-          damping: 10,
-        }),
+        scale: enableSpringAnimation
+          ? withSpring(isActive.value ? 1 : 0, {
+              damping: 10,
+            })
+          : 0,
       },
     ],
   }));

package/src/charts/line/CursorLine.tsx

@@ -13,11 +13,13 @@ type LineChartCursorLineProps = {
   lineProps?: Partial<LineProps>;
 };
 
-export const LineChartCursorLine = ({
+LineChartCursorLine.displayName = 'LineChartCursorLine';
+
+export function LineChartCursorLine({
   children,
   color = 'gray',
   lineProps = {},
-}: LineChartCursorLineProps) => {
+}: LineChartCursorLineProps) {
   const { height } = React.useContext(LineChartDimensionsContext);
   const { currentX, isActive } = useLineChart();
 
@@ -46,7 +48,7 @@ export const LineChartCursorLine = ({
       {children}
     </LineChartCursor>
   );
-};
+}
 
 const styles = StyleSheet.create({
   svg: {

package/src/charts/line/Data.tsx

@@ -0,0 +1,105 @@
+import type { TLineChartData } from './types';
+import React, { createContext, useContext, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import type { TLineChartDataProp } from './types';
+
+export const DefaultLineChartId = '__LineChartData';
+
+export type LineChartDataContext = {
+  [key: string]: TLineChartData;
+};
+
+const LineChartDataContext = createContext<LineChartDataContext>({
+  [DefaultLineChartId]: [],
+});
+
+export type LineChartDataProviderProps = {
+  children: ReactNode;
+  data: TLineChartDataProp;
+};
+
+export function LineChartDataProvider({
+  children,
+  data,
+}: LineChartDataProviderProps) {
+  const contextValue = useMemo<LineChartDataContext>(() => {
+    if (Array.isArray(data)) {
+      return {
+        [DefaultLineChartId]: data,
+      };
+    }
+    return data;
+  }, [data]);
+
+  return (
+    <LineChartDataContext.Provider value={contextValue}>
+      {children}
+    </LineChartDataContext.Provider>
+  );
+}
+
+const LineChartIdContext = createContext<string | undefined>(undefined);
+
+export function LineChartIdProvider({
+  id,
+  children,
+}: {
+  id?: string;
+  children: ReactNode;
+}) {
+  return (
+    <LineChartIdContext.Provider value={id}>
+      {children}
+    </LineChartIdContext.Provider>
+  );
+}
+
+export const useLineChartId = () => useContext(LineChartIdContext);
+
+export function useLineChartData({ id }: { id?: string }) {
+  const dataContext = useContext(LineChartDataContext);
+
+  validateLineChartId(dataContext, id);
+
+  const data = dataContext[id || DefaultLineChartId];
+
+  return useMemo(() => ({ data }), [data]);
+}
+
+function validateLineChartId(dataContext: LineChartDataContext, id?: string) {
+  if (id != null && !dataContext[id]) {
+    const otherIds = Object.keys(dataContext).filter(
+      (otherId) => otherId !== DefaultLineChartId
+    );
+    const singular = otherIds.length <= 1;
+
+    const joinedIds = otherIds.join(', ');
+
+    const suggestion = otherIds.length
+      ? `Did you mean to use ${
+          singular ? 'this ID' : 'one of these IDs'
+        }: ${joinedIds}`
+      : `You didn't pass any IDs to your <LineChart.Provider />'s data prop. Did you mean to pass an array instead?`;
+
+    console.warn(
+      `[react-native-wagmi-charts] Invalid usage of "id" prop on LineChart. You passed id="${id}", but this ID does not exist in your <LineChart.Provider />'s "data" prop.
+
+${suggestion}`
+    );
+  } else if (id == null && !dataContext[DefaultLineChartId]) {
+    const otherIds = Object.keys(dataContext);
+    const singular = otherIds.length <= 1;
+
+    const joinedIds = otherIds.join(', ');
+    const suggestion = otherIds.length
+      ? `Did you mean to use ${
+          singular ? 'this ID' : 'one of these IDs'
+        }: ${joinedIds}`
+      : `You didn't pass any IDs to your <LineChart.Provider />'s data prop. Did you mean to pass an array instead?`;
+
+    console.error(`[react-native-wagmi-charts] Missing data "id" prop on LineChart. You must pass an id prop to <LineChart /> when using a dictionary for your data.
+
+${suggestion}
+    `);
+  }
+}

package/src/charts/line/DatetimeText.tsx

@@ -14,6 +14,8 @@ type LineChartDatetimeProps = {
   style?: Animated.AnimateProps<RNTextProps>['style'];
 };
 
+LineChartDatetimeText.displayName = 'LineChartDatetimeText';
+
 export function LineChartDatetimeText({
   locale,
   options,