@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.js

@@ -1,526 +0,0 @@
-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 React, { memo, useCallback, useMemo, useRef, useState } from 'react';
-import { sparklineInteractiveData, sparklineInteractiveHoverData, strokeColor } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { Box } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
-import { SparklineInteractiveHeader } from '../../sparkline-interactive-header/SparklineInteractiveHeader';
-import { SparklineInteractive } from '../SparklineInteractive';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_PERIOD = 'day';
-function numToLocaleString(num) {
-  return num.toLocaleString('en-US', {
-    maximumFractionDigits: 2
-  });
-}
-const getFormattingConfigForPeriod = period => {
-  switch (period) {
-    case 'hour':
-    case 'day':
-      return {
-        hour: 'numeric',
-        minute: 'numeric'
-      };
-    case 'week':
-    case 'month':
-      return {
-        month: 'numeric',
-        day: 'numeric'
-      };
-    case 'year':
-    case 'all':
-      return {
-        month: 'numeric',
-        year: 'numeric'
-      };
-  }
-};
-const getDateHoverOptions = period => {
-  switch (period) {
-    case 'hour':
-    case 'day':
-    case 'week':
-    case 'month':
-      return {
-        weekday: 'short',
-        month: 'short',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric'
-      };
-    default:
-      return {
-        weekday: 'short',
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
-      };
-  }
-};
-const periods = [{
-  label: '1H',
-  value: 'hour'
-}, {
-  label: '1D',
-  value: 'day'
-}, {
-  label: '1W',
-  value: 'week'
-}, {
-  label: '1M',
-  value: 'month'
-}, {
-  label: '1Y',
-  value: 'year'
-}, {
-  label: 'All',
-  value: 'all'
-}];
-const SparklineInteractiveBuild = /*#__PURE__*/memo(props => {
-  var _props$defaultPeriod;
-  const formatDateWithConfig = useCallback((value, period) => {
-    const config = getFormattingConfigForPeriod(period);
-    return value.toLocaleString('en-US', _extends({}, config));
-  }, []);
-  const formatHoverDate = useCallback((date, period) => {
-    return date.toLocaleString('en-US', _extends({}, getDateHoverOptions(period)));
-  }, []);
-  const formatMinMaxLabel = useCallback(amount => {
-    return "$" + numToLocaleString(parseInt(amount, 10));
-  }, []);
-  return /*#__PURE__*/_jsx(SparklineInteractive, _extends({
-    disableScrubbing: !__DEV__
-  }, props, {
-    defaultPeriod: (_props$defaultPeriod = props.defaultPeriod) != null ? _props$defaultPeriod : DEFAULT_PERIOD,
-    formatDate: formatDateWithConfig,
-    formatHoverDate: !props.hideHoverDate ? formatHoverDate : undefined,
-    formatMinMaxLabel: formatMinMaxLabel,
-    periods: periods
-  }));
-});
-const generateSubHead = (point, period, sparklineInteractiveData) => {
-  const data = sparklineInteractiveData[period];
-  const firstPoint = data[0];
-  const increase = point.value > firstPoint.value;
-  return {
-    percent: numToLocaleString(Math.abs((point.value - firstPoint.value) / firstPoint.value) * 100) + "%",
-    sign: increase ? 'upwardTrend' : 'downwardTrend',
-    variant: increase ? 'positive' : 'negative',
-    accessibilityLabel: "" + (increase ? 'up' : 'down'),
-    priceChange: "$" + numToLocaleString(Math.abs(point.value - firstPoint.value))
-  };
-};
-const SparklineInteractiveWithHeaderBuild = /*#__PURE__*/memo(props => {
-  var _props$defaultPeriod2;
-  const {
-    data: sparklineData,
-    trailing,
-    labelNode,
-    compact
-  } = props;
-  const sparklineInteractiveData = sparklineData;
-  const headerRef = useRef(null);
-  const [currentPeriod, setCurrentPeriod] = useState((_props$defaultPeriod2 = props.defaultPeriod) != null ? _props$defaultPeriod2 : DEFAULT_PERIOD);
-  const data = sparklineInteractiveData[currentPeriod];
-  const lastPoint = data[data.length - 1];
-  const handleScrub = useCallback(_ref => {
-    var _headerRef$current;
-    let {
-      point,
-      period
-    } = _ref;
-    (_headerRef$current = headerRef.current) == null || _headerRef$current.update({
-      title: "$" + point.value.toLocaleString('en-US'),
-      subHead: generateSubHead(point, period, sparklineInteractiveData)
-    });
-  }, [sparklineInteractiveData, headerRef]);
-  const handleScrubEnd = useCallback(() => {
-    var _headerRef$current2;
-    (_headerRef$current2 = headerRef.current) == null || _headerRef$current2.update({
-      title: "$" + numToLocaleString(lastPoint.value),
-      subHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData)
-    });
-  }, [currentPeriod, sparklineInteractiveData, lastPoint, headerRef]);
-  const handleOnPeriodChanged = useCallback(period => {
-    var _headerRef$current3;
-    setCurrentPeriod(period);
-    const newData = sparklineInteractiveData[period];
-    const newLastPoint = newData[newData.length - 1];
-    (_headerRef$current3 = headerRef.current) == null || _headerRef$current3.update({
-      title: "$" + numToLocaleString(newLastPoint.value),
-      subHead: generateSubHead(newLastPoint, period, sparklineInteractiveData)
-    });
-  }, [sparklineInteractiveData, headerRef]);
-  const header = useMemo(() => /*#__PURE__*/_jsx(SparklineInteractiveHeader, {
-    ref: headerRef,
-    compact: compact,
-    defaultLabel: labelNode ? 'CustomHeader' : 'Bitcoin Price',
-    defaultSubHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData),
-    defaultTitle: "$" + numToLocaleString(lastPoint.value),
-    labelNode: labelNode,
-    trailing: trailing
-  }), [compact, labelNode, lastPoint, currentPeriod, sparklineInteractiveData, trailing]);
-  return /*#__PURE__*/_jsx(SparklineInteractiveBuild, _extends({}, props, {
-    headerNode: header,
-    onPeriodChanged: handleOnPeriodChanged,
-    onScrub: handleScrub,
-    onScrubEnd: handleScrubEnd
-  }));
-});
-const rgbaStrokeColor = 'rgba(123, 1, 1, 5)';
-const rgbStrokeColor = 'rgb(123, 1, 121)';
-const autoStrokeColor = 'auto';
-const SparklineInteractiveScreen = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Default"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Compact"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          compact: true,
-          data: sparklineInteractiveData,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Disable Scrubbing"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          disableScrubbing: true,
-          data: sparklineInteractiveData,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Hide period selector"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          hidePeriodSelector: true,
-          data: sparklineInteractiveData,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Hide min/max label"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          hideMinMaxLabel: true,
-          data: sparklineInteractiveData,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Default period All"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          defaultPeriod: "all",
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Fill Disabled"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          fill: false,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Y axis scaling"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          strokeColor: strokeColor,
-          yAxisScalingFactor: 0.1
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Fallback"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Fallback Negative"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          fallbackType: "negative",
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Fallback Compact"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          compact: true,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "No Hover Date"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          hideHoverDate: true,
-          data: sparklineInteractiveData,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "With Header Node"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
-          data: sparklineInteractiveData,
-          strokeColor: "#F7931A"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "No padding"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          gutter: 0,
-          strokeColor: "#F7931A",
-          timePeriodGutter: 3
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 4,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingY: 3,
-          children: "In Container With 4 padding"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
-          disableHorizontalPadding: true,
-          data: sparklineInteractiveData,
-          gutter: 4,
-          strokeColor: "#F7931A"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Custom screen padding 6"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          gutter: 6,
-          strokeColor: "#F7931A"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Hover data"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          hoverData: sparklineInteractiveHoverData,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Auto Stoke Color"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          strokeColor: autoStrokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Custom RGB Stoke Color"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          strokeColor: rgbStrokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Custom RGBA Stoke Color"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          strokeColor: rgbaStrokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "No Data In SelectedPeriod"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: _extends({}, sparklineInteractiveData, {
-            hour: []
-          }),
-          strokeColor: rgbaStrokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Enable Interaction When Outside"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          allowOverflowGestures: true,
-          data: sparklineInteractiveData,
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Custom Node Header Styles"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
-          data: sparklineInteractiveData,
-          strokeColor: "#F7931A",
-          styles: {
-            header: {
-              paddingBottom: 0
-            }
-          }
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Dotted Fill Type"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          fillType: "dotted",
-          strokeColor: strokeColor
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "Y Scale Custom"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-          data: sparklineInteractiveData,
-          fillType: "dotted",
-          strokeColor: strokeColor,
-          yAxisScalingFactor: 0.1
-        })]
-      })
-    })]
-  });
-};
-export default SparklineInteractiveScreen;

package/esm/sparkline/sparkline-interactive/useInterruptiblePathAnimation.js

@@ -1,58 +0,0 @@
-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 { useCallback, useEffect, useRef } from 'react';
-import { Animated } from 'react-native';
-import { animatedPathConfig } from '@coinbase/cds-common/animation/sparkline';
-import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
-const animationConfig = _extends({}, animatedPathConfig, {
-  toValue: 1,
-  useNativeDriver: true
-});
-export const useInterruptiblePathAnimation = _ref => {
-  let {
-    animationListener,
-    onInterrupt,
-    ignoreMinMax
-  } = _ref;
-  const {
-    animateMinMaxIn
-  } = useSparklineInteractiveContext();
-  const isRunning = useRef(false);
-  const animationProgress = useRef(new Animated.Value(0)).current;
-  const animations = [Animated.timing(animationProgress, animationConfig)];
-  if (!ignoreMinMax) {
-    animations.push(animateMinMaxIn);
-  }
-  const animation = Animated.sequence(animations);
-  const onFinishAnimation = useCallback(_ref2 => {
-    let {
-      finished
-    } = _ref2;
-    if (finished) {
-      animationProgress.removeAllListeners();
-      animationProgress.setValue(0);
-      isRunning.current = false;
-    }
-  }, [animationProgress]);
-
-  // Clean up listeners
-  useEffect(() => {
-    return () => {
-      animationProgress.removeAllListeners();
-    };
-  }, [animationProgress]);
-  return useCallback(() => {
-    // If try to re-run animation while currently running
-    // we should interrupt it and start new one
-    if (isRunning.current) {
-      animation.stop();
-      onFinishAnimation({
-        finished: true
-      });
-      onInterrupt();
-    } else {
-      isRunning.current = true;
-      animationProgress.addListener(animationListener);
-      animation.start(onFinishAnimation);
-    }
-  }, [animation, animationListener, animationProgress, onFinishAnimation, onInterrupt]);
-};

package/esm/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.js

@@ -1,37 +0,0 @@
-import { Animated } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
-import { useInterruptiblePathAnimation } from './useInterruptiblePathAnimation';
-jest.useFakeTimers({
-  legacyFakeTimers: true
-});
-describe('useInterruptiblePathAnimation', () => {
-  const animationListenerSpy = jest.fn();
-  const onInterruptSpy = jest.fn();
-  it('plays correctly', () => {
-    const {
-      result
-    } = renderHook(() => {
-      return useInterruptiblePathAnimation({
-        animationListener: animationListenerSpy,
-        onInterrupt: onInterruptSpy
-      });
-    });
-    result.current();
-    expect(Animated.timing).toHaveBeenCalled();
-  });
-  it('interrupts correctly if triggering play while already playing', () => {
-    const {
-      result
-    } = renderHook(() => {
-      return useInterruptiblePathAnimation({
-        animationListener: animationListenerSpy,
-        onInterrupt: onInterruptSpy
-      });
-    });
-    result.current();
-    expect(Animated.timing).toHaveBeenCalled();
-    result.current();
-    expect(onInterruptSpy).toHaveBeenCalled();
-    jest.runAllTimers();
-  });
-});

package/esm/sparkline/sparkline-interactive/useMinMaxTransform.js

@@ -1,56 +0,0 @@
-import { useEffect } from 'react';
-import { Animated } from 'react-native';
-import { durations } from '@coinbase/cds-common/motion/tokens';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
-import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
-export function useMinMaxTransform(_ref) {
-  let {
-    minMaxLayout,
-    x,
-    transform,
-    opacity
-  } = _ref;
-  const theme = useTheme();
-  const {
-    height,
-    width
-  } = minMaxLayout;
-  const {
-    SparklineInteractiveMinMaxLabelHeight,
-    chartWidth
-  } = useSparklineInteractiveConstants({});
-  const {
-    gutter
-  } = useSparklineInteractiveContext();
-  useEffect(() => {
-    // If onLayout has not finished we don't want to show min/max
-    // or else it will abruptly change positions
-    if (height === 0 && width === 0) {
-      opacity.setValue(0);
-      return;
-    }
-
-    // if we have no gutter the min/max label needs some space so it's not right up against the edge of the screen
-    const minGutter = gutter === 0 ? theme.space['1'] : 0;
-
-    // Position min or max at center of the desired x coordinate when possible.
-    // If this is not possible, ensure that it's never positioned outside of chart container.
-    // This means the x transform should never be less than 0 or greater than chartWidth - labelWidth
-    const idealX = x - width / 2;
-    const translateX = Math.round(Math.max(minGutter, Math.min(idealX, chartWidth - width - minGutter)));
-    // Vertically center the min/max label within SparklineInteractiveMinMaxLabelHeight.
-    // This is the area between the vertical dotted line and the top or bottom
-    // of sparkline where min/max is displayed
-    const translateY = SparklineInteractiveMinMaxLabelHeight / 2 - height / 2;
-    transform.setValue({
-      x: translateX,
-      y: translateY
-    });
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: durations.moderate1,
-      useNativeDriver: true
-    }).start();
-  }, [SparklineInteractiveMinMaxLabelHeight, chartWidth, gutter, height, opacity, theme.space, transform, width, x]);
-}

package/esm/sparkline/sparkline-interactive/useOpacityAnimation.js

@@ -1,23 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { Animated } from 'react-native';
-import { fadeDuration } from '@coinbase/cds-common/tokens/sparkline';
-export function useOpacityAnimation(initialValue, duration) {
-  if (initialValue === void 0) {
-    initialValue = 0;
-  }
-  if (duration === void 0) {
-    duration = fadeDuration;
-  }
-  const animation = useRef(new Animated.Value(initialValue)).current;
-  const animateIn = useMemo(() => Animated.timing(animation, {
-    toValue: 1,
-    duration,
-    useNativeDriver: true
-  }), [animation, duration]);
-  const animateOut = useMemo(() => Animated.timing(animation, {
-    toValue: 0,
-    duration,
-    useNativeDriver: true
-  }), [animation, duration]);
-  return [animation, animateIn, animateOut];
-}