react-native-wagmi-charts 2.9.0 → 2.10.0

package/lib/commonjs/charts/line/ChartPath.js

@@ -1,80 +1,25 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, '__esModule', {
-  value: true,
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 exports.LineChartPathWrapper = LineChartPathWrapper;
-var _react = _interopRequireDefault(require('react'));
-var _reactNative = require('react-native');
-var _reactNativeSvg = require('react-native-svg');
-var _reactNativeReanimated = _interopRequireWildcard(
-  require('react-native-reanimated')
-);
-var _reactKeyedFlattenChildren = _interopRequireDefault(
-  require('react-keyed-flatten-children')
-);
-var _Chart = require('./Chart');
-var _LineChartPathContext = require('./LineChartPathContext');
-var _Path = require('./Path');
-var _useLineChart = require('./useLineChart');
-function _interopRequireWildcard(e, t) {
-  if ('function' == typeof WeakMap)
-    var r = new WeakMap(),
-      n = new WeakMap();
-  return (_interopRequireWildcard = function (e, t) {
-    if (!t && e && e.__esModule) return e;
-    var o,
-      i,
-      f = { __proto__: null, default: e };
-    if (null === e || ('object' != typeof e && 'function' != typeof e))
-      return f;
-    if ((o = t ? n : r)) {
-      if (o.has(e)) return o.get(e);
-      o.set(e, f);
-    }
-    for (const t in e)
-      'default' !== t &&
-        {}.hasOwnProperty.call(e, t) &&
-        ((i =
-          (o = Object.defineProperty) &&
-          Object.getOwnPropertyDescriptor(e, t)) &&
-        (i.get || i.set)
-          ? o(f, t, i)
-          : (f[t] = e[t]));
-    return f;
-  })(e, t);
-}
-function _interopRequireDefault(e) {
-  return e && e.__esModule ? e : { default: e };
-}
-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)
-  );
-}
-const BACKGROUND_COMPONENTS = [
-  'LineChartHighlight',
-  'LineChartHorizontalLine',
-  'LineChartGradient',
-  'LineChartDot',
-  'LineChartTooltip',
-];
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = require("react-native-svg");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactKeyedFlattenChildren = _interopRequireDefault(require("react-keyed-flatten-children"));
+var _Chart = require("./Chart");
+var _LineChartPathContext = require("./LineChartPathContext");
+var _Path = require("./Path");
+var _useLineChart = require("./useLineChart");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const BACKGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartHorizontalLine', 'LineChartGradient', 'LineChartDot', 'LineChartTooltip'];
 const FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];
-const AnimatedSVG = _reactNativeReanimated.default.createAnimatedComponent(
-  _reactNativeSvg.Svg
-);
-const AnimatedRect = _reactNativeReanimated.default.createAnimatedComponent(
-  _reactNativeSvg.Rect
-);
+const AnimatedSVG = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Svg);
+const AnimatedRect = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Rect);
 LineChartPathWrapper.displayName = 'LineChartPathWrapper';
 function LineChartPathWrapper({
   animationDuration = 300,
@@ -88,12 +33,17 @@ function LineChartPathWrapper({
   showInactivePath = true,
   animateOnMount,
   mountAnimationDuration = animationDuration,
-  mountAnimationProps = animationProps,
+  mountAnimationProps = animationProps
 }) {
-  const { height, pathWidth, width } = _react.default.useContext(
-    _Chart.LineChartDimensionsContext
-  );
-  const { currentX, isActive } = (0, _useLineChart.useLineChart)();
+  const {
+    height,
+    pathWidth,
+    width
+  } = _react.default.useContext(_Chart.LineChartDimensionsContext);
+  const {
+    currentX,
+    isActive
+  } = (0, _useLineChart.useLineChart)();
   const isMounted = (0, _reactNativeReanimated.useSharedValue)(false);
   const hasMountedAnimation = (0, _reactNativeReanimated.useSharedValue)(false);
   _react.default.useEffect(() => {
@@ -105,63 +55,30 @@ function LineChartPathWrapper({
 
   ////////////////////////////////////////////////
 
-  const clipId = _react.default.useMemo(
-    () => `clip-foreground-${Math.random().toString(36).substring(2, 11)}`,
-    []
-  );
+  const clipId = _react.default.useMemo(() => `clip-foreground-${Math.random().toString(36).substring(2, 11)}`, []);
   const clipProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
     const shouldAnimateOnMount = animateOnMount === 'foreground';
-    const inactiveWidth =
-      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
-    let duration =
-      shouldAnimateOnMount && !hasMountedAnimation.value
-        ? mountAnimationDuration
-        : animationDuration;
-    const props =
-      shouldAnimateOnMount && !hasMountedAnimation.value
-        ? mountAnimationProps
-        : animationProps;
+    const inactiveWidth = !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
+    let duration = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationDuration : animationDuration;
+    const props = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationProps : animationProps;
     if (isActive.value) {
       duration = 0;
     }
     return {
-      width: (0, _reactNativeReanimated.withTiming)(
-        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)
-          : inactiveWidth + widthOffset,
-        Object.assign(
-          {
-            duration,
-          },
-          props
-        ),
-        () => {
-          hasMountedAnimation.value = true;
-        }
-      ),
+      width: (0, _reactNativeReanimated.withTiming)(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) : inactiveWidth + widthOffset, Object.assign({
+        duration
+      }, props), () => {
+        hasMountedAnimation.value = true;
+      })
     };
-  }, [
-    animateOnMount,
-    animationDuration,
-    animationProps,
-    currentX,
-    hasMountedAnimation,
-    isActive,
-    isMounted,
-    mountAnimationDuration,
-    mountAnimationProps,
-    pathWidth,
-    widthOffset,
-  ]);
-  const viewSize = _react.default.useMemo(
-    () => ({
-      width,
-      height,
-    }),
-    [width, height]
-  );
+  }, [animateOnMount, animationDuration, animationProps, currentX, hasMountedAnimation, isActive, isMounted, mountAnimationDuration, mountAnimationProps, pathWidth, widthOffset]);
+  const viewSize = _react.default.useMemo(() => ({
+    width,
+    height
+  }), [width, height]);
 
   ////////////////////////////////////////////////
 
@@ -169,165 +86,68 @@ function LineChartPathWrapper({
   let foregroundChildren;
   if (children) {
     const iterableChildren = (0, _reactKeyedFlattenChildren.default)(children);
-    backgroundChildren = iterableChildren.filter((child) =>
-      BACKGROUND_COMPONENTS.includes(child?.type?.displayName || '')
-    );
-    foregroundChildren = iterableChildren.filter((child) =>
-      FOREGROUND_COMPONENTS.includes(child?.type?.displayName || '')
-    );
+    backgroundChildren = iterableChildren.filter(child => BACKGROUND_COMPONENTS.includes(child?.type?.displayName || ''));
+    foregroundChildren = iterableChildren.filter(child => FOREGROUND_COMPONENTS.includes(child?.type?.displayName || ''));
   }
 
   ////////////////////////////////////////////////
 
-  return /*#__PURE__*/ _react.default.createElement(
-    _react.default.Fragment,
-    null,
-    /*#__PURE__*/ _react.default.createElement(
-      _LineChartPathContext.LineChartPathContext.Provider,
-      {
-        value: {
-          color,
-          isInactive: showInactivePath,
-          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,
-        },
-      },
-      /*#__PURE__*/ _react.default.createElement(
-        _reactNative.View,
-        {
-          style: viewSize,
-        },
-        /*#__PURE__*/ _react.default.createElement(
-          _reactNativeSvg.Svg,
-          {
-            width: width,
-            height: height,
-          },
-          /*#__PURE__*/ _react.default.createElement(
-            _Path.LineChartPath,
-            _extends(
-              {
-                color: color,
-                inactiveColor: inactiveColor,
-                width: strokeWidth,
-              },
-              pathProps
-            )
-          )
-        ),
-        /*#__PURE__*/ _react.default.createElement(
-          _reactNativeSvg.Svg,
-          {
-            style: _reactNative.StyleSheet.absoluteFill,
-          },
-          backgroundChildren
-        )
-      )
-    ),
-    /*#__PURE__*/ _react.default.createElement(
-      _LineChartPathContext.LineChartPathContext.Provider,
-      {
-        value: {
-          color,
-          isInactive: false,
-          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,
-        },
-      },
-      /*#__PURE__*/ _react.default.createElement(
-        _reactNative.View,
-        {
-          style: _reactNative.StyleSheet.absoluteFill,
-        },
-        _reactNative.Platform.OS === 'web'
-          ? /*#__PURE__*/ _react.default.createElement(
-              _react.default.Fragment,
-              null,
-              /*#__PURE__*/ _react.default.createElement(
-                _reactNativeSvg.Svg,
-                {
-                  width: width,
-                  height: height,
-                },
-                /*#__PURE__*/ _react.default.createElement(
-                  _reactNativeSvg.Defs,
-                  null,
-                  /*#__PURE__*/ _react.default.createElement(
-                    _reactNativeSvg.ClipPath,
-                    {
-                      id: clipId,
-                    },
-                    /*#__PURE__*/ _react.default.createElement(AnimatedRect, {
-                      x: 0,
-                      y: 0,
-                      animatedProps: clipProps,
-                      height: height,
-                    })
-                  )
-                ),
-                /*#__PURE__*/ _react.default.createElement(
-                  _reactNativeSvg.G,
-                  {
-                    clipPath: `url(#${clipId})`,
-                  },
-                  /*#__PURE__*/ _react.default.createElement(
-                    _Path.LineChartPath,
-                    _extends(
-                      {
-                        color: color,
-                        width: strokeWidth,
-                      },
-                      pathProps
-                    )
-                  )
-                )
-              ),
-              /*#__PURE__*/ _react.default.createElement(
-                _reactNativeSvg.Svg,
-                {
-                  width: width,
-                  height: height,
-                  style: _reactNative.StyleSheet.absoluteFill,
-                },
-                /*#__PURE__*/ _react.default.createElement(
-                  _reactNativeSvg.G,
-                  {
-                    clipPath: `url(#${clipId})`,
-                  },
-                  foregroundChildren
-                )
-              )
-            )
-          : /*#__PURE__*/ _react.default.createElement(
-              _react.default.Fragment,
-              null,
-              /*#__PURE__*/ _react.default.createElement(
-                AnimatedSVG,
-                {
-                  animatedProps: clipProps,
-                  height: height,
-                },
-                /*#__PURE__*/ _react.default.createElement(
-                  _Path.LineChartPath,
-                  _extends(
-                    {
-                      color: color,
-                      width: strokeWidth,
-                    },
-                    pathProps
-                  )
-                )
-              ),
-              /*#__PURE__*/ _react.default.createElement(
-                AnimatedSVG,
-                {
-                  animatedProps: clipProps,
-                  height: height,
-                  style: _reactNative.StyleSheet.absoluteFill,
-                },
-                foregroundChildren
-              )
-            )
-      )
-    )
-  );
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LineChartPathContext.LineChartPathContext.Provider, {
+    value: {
+      color,
+      isInactive: showInactivePath,
+      isTransitionEnabled: pathProps.isTransitionEnabled ?? true
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: viewSize
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Svg, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Path.LineChartPath, _extends({
+    color: color,
+    inactiveColor: inactiveColor,
+    width: strokeWidth
+  }, pathProps))), /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Svg, {
+    style: _reactNative.StyleSheet.absoluteFill
+  }, backgroundChildren))), /*#__PURE__*/_react.default.createElement(_LineChartPathContext.LineChartPathContext.Provider, {
+    value: {
+      color,
+      isInactive: false,
+      isTransitionEnabled: pathProps.isTransitionEnabled ?? true
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _reactNative.StyleSheet.absoluteFill
+  }, _reactNative.Platform.OS === 'web' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Svg, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Defs, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.ClipPath, {
+    id: clipId
+  }, /*#__PURE__*/_react.default.createElement(AnimatedRect, {
+    x: 0,
+    y: 0,
+    animatedProps: clipProps,
+    height: height
+  }))), /*#__PURE__*/_react.default.createElement(_reactNativeSvg.G, {
+    clipPath: `url(#${clipId})`
+  }, /*#__PURE__*/_react.default.createElement(_Path.LineChartPath, _extends({
+    color: color,
+    width: strokeWidth
+  }, pathProps)))), /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Svg, {
+    width: width,
+    height: height,
+    style: _reactNative.StyleSheet.absoluteFill
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.G, {
+    clipPath: `url(#${clipId})`
+  }, foregroundChildren))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AnimatedSVG, {
+    animatedProps: clipProps,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Path.LineChartPath, _extends({
+    color: color,
+    width: strokeWidth
+  }, pathProps))), /*#__PURE__*/_react.default.createElement(AnimatedSVG, {
+    animatedProps: clipProps,
+    height: height,
+    style: _reactNative.StyleSheet.absoluteFill
+  }, foregroundChildren)))));
 }
-//# sourceMappingURL=ChartPath.js.map
+//# sourceMappingURL=ChartPath.js.map

package/lib/commonjs/charts/line/Context.js

@@ -1,89 +1,52 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, '__esModule', {
-  value: true,
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 exports.LineChartContext = void 0;
 exports.LineChartProvider = LineChartProvider;
-var _react = _interopRequireWildcard(require('react'));
-var _reactNativeReanimated = require('react-native-reanimated');
-var _Data = require('./Data');
-var _utils = require('./utils');
-function _interopRequireWildcard(e, t) {
-  if ('function' == typeof WeakMap)
-    var r = new WeakMap(),
-      n = new WeakMap();
-  return (_interopRequireWildcard = function (e, t) {
-    if (!t && e && e.__esModule) return e;
-    var o,
-      i,
-      f = { __proto__: null, default: e };
-    if (null === e || ('object' != typeof e && 'function' != typeof e))
-      return f;
-    if ((o = t ? n : r)) {
-      if (o.has(e)) return o.get(e);
-      o.set(e, f);
-    }
-    for (const t in e)
-      'default' !== t &&
-        {}.hasOwnProperty.call(e, t) &&
-        ((i =
-          (o = Object.defineProperty) &&
-          Object.getOwnPropertyDescriptor(e, t)) &&
-        (i.get || i.set)
-          ? o(f, t, i)
-          : (f[t] = e[t]));
-    return f;
-  })(e, t);
-}
-const LineChartContext = (exports.LineChartContext = /*#__PURE__*/ (0,
-_react.createContext)({
+var _react = _interopRequireWildcard(require("react"));
+var _reactNativeReanimated = require("react-native-reanimated");
+var _Data = require("./Data");
+var _utils = require("./utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const LineChartContext = exports.LineChartContext = /*#__PURE__*/(0, _react.createContext)({
   currentX: {
-    value: -1,
+    value: -1
   },
   currentIndex: {
-    value: -1,
+    value: -1
   },
   domain: [0, 0],
   isActive: {
-    value: false,
+    value: false
   },
   yDomain: {
     min: 0,
-    max: 0,
+    max: 0
   },
   xDomain: undefined,
-  xLength: 0,
-}));
+  xLength: 0
+});
 function LineChartProvider({
   children,
   data = [],
   yRange,
   onCurrentIndexChange,
   xLength,
-  xDomain,
+  xDomain
 }) {
   const currentX = (0, _reactNativeReanimated.useSharedValue)(-1);
   const currentIndex = (0, _reactNativeReanimated.useSharedValue)(-1);
   const isActive = (0, _reactNativeReanimated.useSharedValue)(false);
-  const domain = (0, _react.useMemo)(
-    () =>
-      (0, _utils.getDomain)(
-        Array.isArray(data) ? data : Object.values(data)[0]
-      ),
-    [data]
-  );
-  const values = (0, _react.useMemo)(
-    () => (0, _utils.lineChartDataPropToArray)(data).map(({ value }) => value),
-    [data]
-  );
-  const yDomainValues = (0, _react.useMemo)(
-    () => ({
-      min: yRange?.min ?? Math.min(...values),
-      max: yRange?.max ?? Math.max(...values),
-    }),
-    [values, yRange?.min, yRange?.max]
-  );
+  const domain = (0, _react.useMemo)(() => (0, _utils.getDomain)(Array.isArray(data) ? data : Object.values(data)[0]), [data]);
+  const values = (0, _react.useMemo)(() => (0, _utils.lineChartDataPropToArray)(data).map(({
+    value
+  }) => value), [data]);
+  const yDomainValues = (0, _react.useMemo)(() => ({
+    min: yRange?.min ?? Math.min(...values),
+    max: yRange?.max ?? Math.max(...values)
+  }), [values, yRange?.min, yRange?.max]);
   const contextValue = (0, _react.useMemo)(() => {
     const domainRows = Array.isArray(data) ? data : Object.values(data)[0];
     return {
@@ -93,40 +56,19 @@ function LineChartProvider({
       domain,
       yDomain: yDomainValues,
       xDomain,
-      xLength: xLength ?? domainRows.length,
+      xLength: xLength ?? domainRows.length
     };
-  }, [
-    currentIndex,
-    currentX,
-    data,
-    domain,
-    isActive,
-    yDomainValues,
-    xLength,
-    xDomain,
-  ]);
-  (0, _reactNativeReanimated.useAnimatedReaction)(
-    () => currentIndex.value,
-    (x, prevX) => {
-      if (x !== prevX && onCurrentIndexChange) {
-        (0, _reactNativeReanimated.runOnJS)(onCurrentIndexChange)(x);
-      }
-    },
-    [currentIndex]
-  );
-  return /*#__PURE__*/ _react.default.createElement(
-    _Data.LineChartDataProvider,
-    {
-      data: data,
-    },
-    /*#__PURE__*/ _react.default.createElement(
-      LineChartContext.Provider,
-      {
-        value: contextValue,
-      },
-      children
-    )
-  );
+  }, [currentIndex, currentX, data, domain, isActive, yDomainValues, xLength, xDomain]);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => currentIndex.value, (x, prevX) => {
+    if (x !== prevX && onCurrentIndexChange) {
+      (0, _reactNativeReanimated.runOnJS)(onCurrentIndexChange)(x);
+    }
+  }, [currentIndex]);
+  return /*#__PURE__*/_react.default.createElement(_Data.LineChartDataProvider, {
+    data: data
+  }, /*#__PURE__*/_react.default.createElement(LineChartContext.Provider, {
+    value: contextValue
+  }, children));
 }
 LineChartProvider.displayName = 'LineChartProvider';
-//# sourceMappingURL=Context.js.map
+//# sourceMappingURL=Context.js.map