@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

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

@@ -0,0 +1,526 @@
+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 '../../../../examples/ExampleScreen';
+import { Box } from '../../../../layout';
+import { Text } from '../../../../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/visualizations/sparkline/sparkline-interactive/useInterruptiblePathAnimation.js

@@ -0,0 +1,58 @@
+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/visualizations/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.js

@@ -0,0 +1,37 @@
+import { Animated } from 'react-native';
+import { renderHook } from '@testing-library/react-native';
+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/visualizations/sparkline/sparkline-interactive/useMinMaxTransform.js

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { Animated } from 'react-native';
+import { durations } from '@coinbase/cds-common/motion/tokens';
+import { useTheme } from '../../../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/visualizations/sparkline/sparkline-interactive/useOpacityAnimation.js

@@ -0,0 +1,23 @@
+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];
+}