react-native-wagmi-charts 2.9.0 → 2.10.0

package/lib/module/charts/line/HorizontalLine.js

@@ -1,22 +1,5 @@
-function _extends() {
-  return (
-    (_extends = Object.assign
-      ? Object.assign.bind()
-      : function (n) {
-          for (var e = 1; e < arguments.length; e++) {
-            var t = arguments[e];
-            for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-          }
-          return n;
-        }),
-    _extends.apply(null, arguments)
-  );
-}
-import Animated, {
-  useAnimatedProps,
-  useDerivedValue,
-  withTiming,
-} from 'react-native-reanimated';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import Animated, { useAnimatedProps, useDerivedValue, withTiming } from 'react-native-reanimated';
 import { Line as SVGLine } from 'react-native-svg';
 import { LineChartDimensionsContext } from './Chart';
 import React from 'react';
@@ -29,19 +12,23 @@ export function LineChartHorizontalLine({
   color = 'gray',
   lineProps = {},
   at = {
-    index: 0,
+    index: 0
   },
-  offsetY = 0,
+  offsetY = 0
 }) {
-  const { width, parsedPath, height, gutter } = React.useContext(
-    LineChartDimensionsContext
-  );
-  const { yDomain } = useLineChart();
+  const {
+    width,
+    parsedPath,
+    height,
+    gutter
+  } = React.useContext(LineChartDimensionsContext);
+  const {
+    yDomain
+  } = useLineChart();
   const y = useDerivedValue(() => {
     if (typeof at === 'number' || at.index != null) {
       const index = typeof at === 'number' ? at : at.index;
-      const yForX =
-        getYForX(parsedPath, getXPositionForCurve(parsedPath, index)) || 0;
+      const yForX = getYForX(parsedPath, getXPositionForCurve(parsedPath, index)) || 0;
       return withTiming(yForX + offsetY);
     }
     /**
@@ -60,26 +47,17 @@ export function LineChartHorizontalLine({
     const offsetTopPixels = gutter + percentageOffsetTop * heightBetweenGutters;
     return withTiming(offsetTopPixels + offsetY);
   }, [at, gutter, height, offsetY, parsedPath, yDomain.max, yDomain.min]);
-  const lineAnimatedProps = useAnimatedProps(
-    () => ({
-      x1: 0,
-      x2: width,
-      y1: y.value,
-      y2: y.value,
-    }),
-    [width, y]
-  );
-  return /*#__PURE__*/ React.createElement(
-    AnimatedLine,
-    _extends(
-      {
-        animatedProps: lineAnimatedProps,
-        strokeWidth: 2,
-        stroke: color,
-        strokeDasharray: '3 3',
-      },
-      lineProps
-    )
-  );
+  const lineAnimatedProps = useAnimatedProps(() => ({
+    x1: 0,
+    x2: width,
+    y1: y.value,
+    y2: y.value
+  }), [width, y]);
+  return /*#__PURE__*/React.createElement(AnimatedLine, _extends({
+    animatedProps: lineAnimatedProps,
+    strokeWidth: 2,
+    stroke: color,
+    strokeDasharray: "3 3"
+  }, lineProps));
 }
-//# sourceMappingURL=HorizontalLine.js.map
+//# sourceMappingURL=HorizontalLine.js.map

package/lib/module/charts/line/HoverTrap/index.js

@@ -1,4 +1,3 @@
 import React from 'react';
-export const LineChartHoverTrap = () =>
-  /*#__PURE__*/ React.createElement(React.Fragment, null);
-//# sourceMappingURL=index.js.map
+export const LineChartHoverTrap = () => /*#__PURE__*/React.createElement(React.Fragment, null);
+//# sourceMappingURL=index.js.map

package/lib/module/charts/line/HoverTrap/index.web.js

@@ -45,10 +45,7 @@ class HoverStateManager {
     this.initialized = true;
   }
   enableHover = () => {
-    if (
-      this.isEnabled ||
-      Date.now() - this.lastTouchTimestamp < HOVER_THRESHOLD_MS
-    ) {
+    if (this.isEnabled || Date.now() - this.lastTouchTimestamp < HOVER_THRESHOLD_MS) {
       return;
     }
     this.isEnabled = true;
@@ -80,42 +77,45 @@ class HoverStateManager {
 // Singleton instance
 const hoverStateManager = new HoverStateManager();
 export const LineChartHoverTrap = () => {
-  const { width, parsedPath } = React.useContext(LineChartDimensionsContext);
-  const { currentX, currentIndex, isActive, data } = useLineChart();
-  const onMouseMove = React.useCallback(
-    (e) => {
-      if (!hoverStateManager.isHoverEnabled()) {
-        isActive.value = false;
-        currentIndex.value = -1;
-        return;
-      }
-      if (!parsedPath) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      const boundedX = Math.min(e.clientX - rect.left, width);
-      isActive.value = true;
-      currentX.value = boundedX;
+  const {
+    width,
+    parsedPath
+  } = React.useContext(LineChartDimensionsContext);
+  const {
+    currentX,
+    currentIndex,
+    isActive,
+    data
+  } = useLineChart();
+  const onMouseMove = React.useCallback(e => {
+    if (!hoverStateManager.isHoverEnabled()) {
+      isActive.value = false;
+      currentIndex.value = -1;
+      return;
+    }
+    if (!parsedPath) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const boundedX = Math.min(e.clientX - rect.left, width);
+    isActive.value = true;
+    currentX.value = boundedX;
 
-      // on Web, we could drag the cursor to be negative, breaking it
-      // so we clamp the index at 0 to fix it
-      // https://github.com/coinjar/react-native-wagmi-charts/issues/24
-      const minIndex = 0;
-      const boundedIndex = Math.max(
-        minIndex,
-        Math.round(boundedX / width / (1 / (data ? data.length - 1 : 1)))
-      );
-      currentIndex.value = boundedIndex;
-    },
-    [currentIndex, currentX, data, isActive, parsedPath, width]
-  );
+    // on Web, we could drag the cursor to be negative, breaking it
+    // so we clamp the index at 0 to fix it
+    // https://github.com/coinjar/react-native-wagmi-charts/issues/24
+    const minIndex = 0;
+    const boundedIndex = Math.max(minIndex, Math.round(boundedX / width / (1 / (data ? data.length - 1 : 1))));
+    currentIndex.value = boundedIndex;
+  }, [currentIndex, currentX, data, isActive, parsedPath, width]);
   const onMouseLeave = React.useCallback(() => {
     isActive.value = false;
     currentIndex.value = -1;
   }, [currentIndex, isActive]);
-  return /*#__PURE__*/ React.createElement(View, {
-    style: StyleSheet.absoluteFill,
+  return /*#__PURE__*/React.createElement(View, {
+    style: StyleSheet.absoluteFill
     // @ts-expect-error mouse move event
+    ,
     onMouseMove: onMouseMove,
-    onMouseLeave: onMouseLeave,
+    onMouseLeave: onMouseLeave
   });
 };
-//# sourceMappingURL=index.web.js.map
+//# sourceMappingURL=index.web.js.map

package/lib/module/charts/line/LineChartPathContext.js

@@ -1,7 +1,7 @@
 import React from 'react';
-export const LineChartPathContext = /*#__PURE__*/ React.createContext({
+export const LineChartPathContext = /*#__PURE__*/React.createContext({
   color: '',
   isInactive: false,
-  isTransitionEnabled: true,
+  isTransitionEnabled: true
 });
-//# sourceMappingURL=LineChartPathContext.js.map
+//# sourceMappingURL=LineChartPathContext.js.map

package/lib/module/charts/line/Path.js

@@ -1,17 +1,4 @@
-function _extends() {
-  return (
-    (_extends = Object.assign
-      ? Object.assign.bind()
-      : function (n) {
-          for (var e = 1; e < arguments.length; e++) {
-            var t = arguments[e];
-            for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-          }
-          return n;
-        }),
-    _extends.apply(null, arguments)
-  );
-}
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 import { Path } from 'react-native-svg';
@@ -26,25 +13,25 @@ export function LineChartPath({
   width: strokeWidth = 3,
   ...props
 }) {
-  const { path } = React.useContext(LineChartDimensionsContext);
-  const { isTransitionEnabled, isInactive } =
-    React.useContext(LineChartPathContext);
-  const { animatedProps } = useAnimatedPath({
+  const {
+    path
+  } = React.useContext(LineChartDimensionsContext);
+  const {
+    isTransitionEnabled,
+    isInactive
+  } = React.useContext(LineChartPathContext);
+  const {
+    animatedProps
+  } = useAnimatedPath({
     enabled: isTransitionEnabled,
-    path,
+    path
   });
-  return /*#__PURE__*/ React.createElement(
-    AnimatedPath,
-    _extends(
-      {
-        animatedProps: animatedProps,
-        fill: 'transparent',
-        stroke: isInactive ? inactiveColor || color : color,
-        strokeOpacity: isInactive && !inactiveColor ? 0.2 : 1,
-        strokeWidth: strokeWidth,
-      },
-      props
-    )
-  );
+  return /*#__PURE__*/React.createElement(AnimatedPath, _extends({
+    animatedProps: animatedProps,
+    fill: "transparent",
+    stroke: isInactive ? inactiveColor || color : color,
+    strokeOpacity: isInactive && !inactiveColor ? 0.2 : 1,
+    strokeWidth: strokeWidth
+  }, props));
 }
-//# sourceMappingURL=Path.js.map
+//# sourceMappingURL=Path.js.map

package/lib/module/charts/line/PriceText.js

@@ -1,10 +1,6 @@
 import React, { useState } from 'react';
 import { Text } from 'react-native';
-import {
-  useDerivedValue,
-  useAnimatedReaction,
-  runOnJS,
-} from 'react-native-reanimated';
+import { useDerivedValue, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
 import { useLineChartPrice } from './usePrice';
 import { useLineChart } from './useLineChart';
 import { AnimatedText } from '../../components/AnimatedText';
@@ -16,21 +12,24 @@ export function LineChartPriceText({
   style,
   index,
   useOptimizedRendering = false,
-  getTextColor,
+  getTextColor
 }) {
   const price = useLineChartPrice({
     format,
     precision,
-    index,
+    index
   });
 
   // If we have a custom format function and optimized rendering is enabled,
   // use regular React state instead of AnimatedText
   if (format && useOptimizedRendering) {
-    const { currentIndex, data } = useLineChart();
+    const {
+      currentIndex,
+      data
+    } = useLineChart();
     const [displayText, setDisplayText] = useState('');
     const [textColor, setTextColor] = useState('#000000');
-    const updateText = (newText) => {
+    const updateText = newText => {
       setDisplayText(newText);
       // Update color if getTextColor function is provided
       if (getTextColor) {
@@ -41,56 +40,40 @@ export function LineChartPriceText({
       if (!data) {
         return '';
       }
-      if (
-        (typeof currentIndex.value === 'undefined' ||
-          currentIndex.value === -1) &&
-        index == null
-      ) {
+      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;
       const valueString = price.toFixed(precision).toString();
 
       // Call format function directly in worklet
       return format({
         value: valueString,
-        formatted: valueString,
+        formatted: valueString
       });
     }, [currentIndex, data, precision]);
 
     // Use useAnimatedReaction to update React state with runOnJS
-    useAnimatedReaction(
-      () => textValue.value,
-      (current, previous) => {
-        if (current !== previous) {
-          runOnJS(updateText)(current);
-        }
-      },
-      [textValue]
-    );
+    useAnimatedReaction(() => textValue.value, (current, previous) => {
+      if (current !== previous) {
+        runOnJS(updateText)(current);
+      }
+    }, [textValue]);
 
     // Merge the text color with the provided style
-    const dynamicStyle = [
-      style,
-      {
-        color: textColor,
-      },
-    ];
-    return /*#__PURE__*/ React.createElement(
-      Text,
-      {
-        style: dynamicStyle,
-      },
-      displayText
-    );
+    const dynamicStyle = [style, {
+      color: textColor
+    }];
+    return /*#__PURE__*/React.createElement(Text, {
+      style: dynamicStyle
+    }, displayText);
   }
 
   // For non-custom format, use the original approach
-  return /*#__PURE__*/ React.createElement(AnimatedText, {
+  return /*#__PURE__*/React.createElement(AnimatedText, {
     text: price[variant],
-    style: style,
+    style: style
   });
 }
-//# sourceMappingURL=PriceText.js.map
+//# sourceMappingURL=PriceText.js.map