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

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

@@ -0,0 +1,318 @@
+const _excluded = ["compact"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { chartCompactHeight, chartHeight } from '@coinbase/cds-common/tokens/sparkline';
+import { debounce } from '@coinbase/cds-common/utils/debounce';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { useSparklineCoordinates } from '@coinbase/cds-common/visualizations/useSparklineCoordinates';
+import { chartFallbackNegative, chartFallbackPositive } from '@coinbase/cds-lottie-files';
+import { emptyArray, isStorybook, noop } from '@coinbase/cds-utils';
+import isEqual from 'lodash/isEqual';
+import isObject from 'lodash/isObject';
+import { Lottie } from '../../../animation';
+import { useDimensions } from '../../../hooks/useDimensions';
+import { cx, useTheme } from '../../../index';
+import { HStack, VStack } from '../../../layout';
+import { Box } from '../../../layout/Box';
+import { getBrowserGlobals } from '../../../utils/browser';
+import { VisualizationContainer } from '../../VisualizationContainer';
+import { InnerSparklineInteractiveProvider } from './InnerSparklineInteractiveProvider';
+import { SparklineInteractiveHoverDate } from './SparklineInteractiveHoverDate';
+import { SparklineInteractiveHoverPrice } from './SparklineInteractiveHoverPrice';
+import { SparklineInteractiveLineVertical } from './SparklineInteractiveLineVertical';
+import { SparklineInteractiveMarkerDates } from './SparklineInteractiveMarkerDates';
+import { SparklineInteractivePaths } from './SparklineInteractivePaths';
+import { SparklineInteractivePeriodSelector } from './SparklineInteractivePeriodSelector';
+import { SparklineInteractiveProvider, useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { SparklineInteractiveScrubHandler } from './SparklineInteractiveScrubHandler';
+import { SparklineInteractiveScrubProvider } from './SparklineInteractiveScrubProvider';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export * from '@coinbase/cds-common/types/Chart';
+const DefaultFallback = /*#__PURE__*/memo(_ref => {
+  let {
+    fallbackType
+  } = _ref;
+  // don't show lottie animation in story book
+  const skipLottie = isStorybook();
+  const source = fallbackType === 'negative' ? chartFallbackNegative : chartFallbackPositive;
+  return !skipLottie && /*#__PURE__*/_jsx(Lottie, {
+    autoplay: true,
+    loop: true,
+    height: "100%",
+    source: source,
+    width: "100%"
+  });
+});
+const mobileLayoutBreakpoint = 650;
+function SparklineInteractiveContentWithGeneric(_ref2) {
+  let {
+    data,
+    periods,
+    defaultPeriod,
+    onPeriodChanged,
+    strokeColor,
+    onScrub = noop,
+    onScrubStart = noop,
+    onScrubEnd = noop,
+    formatDate,
+    fallback = null,
+    hidePeriodSelector = false,
+    disableScrubbing = false,
+    fill = true,
+    fillType = 'gradient',
+    yAxisScalingFactor = 1.0,
+    compact,
+    formatHoverDate,
+    formatHoverPrice,
+    headerNode,
+    fallbackType = 'positive',
+    timePeriodGutter,
+    hoverData,
+    periodSelectorPlacement = 'above',
+    className,
+    classNames,
+    style,
+    styles,
+    headerTestID
+  } = _ref2;
+  const [isScrubbing, setIsScrubbing] = useState(false);
+  const [isMarkerDateVisible, setIsMarkerDateVisible] = useState(false);
+  const innerSparklineInteractiveHeight = compact ? chartCompactHeight : chartHeight;
+  const {
+    isFallbackVisible,
+    showFallback
+  } = useSparklineInteractiveContext();
+  const {
+    observe: containerRef,
+    width: containerWidth
+  } = useDimensions();
+  const isMobileLayout = containerWidth > 0 && containerWidth < mobileLayoutBreakpoint;
+  const showHeaderPeriodSelector = periodSelectorPlacement === 'above' && !hidePeriodSelector;
+  const showBottomMarkerDates = useMemo(() => periodSelectorPlacement === 'above' || periodSelectorPlacement === 'below' && hidePeriodSelector || isMarkerDateVisible, [isMarkerDateVisible, periodSelectorPlacement, hidePeriodSelector]);
+  const color = strokeColor;
+  const [selectedPeriod, setSelectedPeriod] = useState(defaultPeriod);
+  const theme = useTheme();
+  const lineVerticalColor = useMemo(() => {
+    const lineColor = color !== 'auto' ? color : getAccessibleColor({
+      background: theme.color.bg,
+      foreground: 'auto',
+      usage: 'graphic'
+    });
+    return hoverData ? 'var(--color-bgLineHeavy)' : lineColor;
+  }, [hoverData, color, theme.color.bg]);
+  const dataForPeriod = useMemo(() => {
+    var _data$selectedPeriod;
+    if (!data) {
+      return emptyArray;
+    }
+    return (_data$selectedPeriod = data[selectedPeriod]) !== null && _data$selectedPeriod !== void 0 ? _data$selectedPeriod : emptyArray;
+  }, [data, selectedPeriod]);
+  const handleScrubStart = useCallback(() => {
+    if (hoverData) {
+      setIsScrubbing(true);
+    }
+    setIsMarkerDateVisible(true);
+    onScrubStart === null || onScrubStart === void 0 || onScrubStart();
+  }, [hoverData, onScrubStart]);
+  const handleScrubEnd = useCallback(() => {
+    if (hoverData) {
+      setIsScrubbing(false);
+    }
+    setIsMarkerDateVisible(false);
+    onScrubEnd === null || onScrubEnd === void 0 || onScrubEnd();
+  }, [hoverData, onScrubEnd]);
+
+  // If dataForPeriod is empty we know that we are either loading
+  // or backend returned bad data and we should show fallback UI.
+  const hasData = dataForPeriod.length > 0;
+  useEffect(() => {
+    var _data$selectedPeriod2;
+    // If there is no data for selected period show fallback loader
+    if (isObject(data) && !((_data$selectedPeriod2 = data[selectedPeriod]) !== null && _data$selectedPeriod2 !== void 0 && _data$selectedPeriod2.length) && !isFallbackVisible) {
+      showFallback();
+    }
+  }, [data, isFallbackVisible, selectedPeriod, showFallback]);
+  const updatePeriod = useCallback(period => {
+    if (isObject(data) && period !== selectedPeriod) {
+      // This can sometimes happen for newer assets which
+      // will have their 'all' chart data be the same as
+      // their 'year' chart data. In those cases we don't
+      // want to animate out the min/max since we rely on
+      // AnimatedSparklineInteractivePath to animate those components back in -
+      // and AnimatedSparklineInteractivePath will not trigger an animation
+      // if it's chartData is the same between re-renders
+      if (!isEqual(data[period], data[selectedPeriod])) {
+        // minMaxOpacity.setValue(0);
+      }
+      setSelectedPeriod(period);
+      onPeriodChanged === null || onPeriodChanged === void 0 || onPeriodChanged(period);
+    }
+  }, [data, selectedPeriod, onPeriodChanged /* , minMaxOpacity */]);
+  const {
+    chartWidth
+  } = useSparklineInteractiveConstants();
+  const {
+    path,
+    area,
+    getMarker
+  } = useSparklineCoordinates({
+    data: dataForPeriod,
+    width: chartWidth,
+    height: innerSparklineInteractiveHeight,
+    yAxisScalingFactor
+  });
+  let header;
+  if (headerNode) {
+    header = /*#__PURE__*/_jsx(Box, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.header,
+      flexGrow: 1,
+      paddingX: !isMobileLayout ? gutter : 0,
+      style: styles === null || styles === void 0 ? void 0 : styles.header,
+      testID: headerTestID,
+      children: headerNode
+    });
+  }
+  const periodSelector = /*#__PURE__*/_jsx(SparklineInteractivePeriodSelector, {
+    color: color,
+    periods: periods,
+    selectedPeriod: selectedPeriod,
+    setSelectedPeriod: updatePeriod
+  });
+  const rootStyles = useMemo(() => _objectSpread(_objectSpread({
+    width: '100%'
+  }, style), styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    style: rootStyles,
+    children: [isMobileLayout && showHeaderPeriodSelector && /*#__PURE__*/_jsx(Box, {
+      paddingBottom: 2,
+      width: "100%",
+      children: periodSelector
+    }), (!!headerNode || !isMobileLayout && showHeaderPeriodSelector) && /*#__PURE__*/_jsxs(Box, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingBottom: 2,
+      children: [header !== null && header !== void 0 ? header : /*#__PURE__*/_jsx("div", {}), !isMobileLayout && showHeaderPeriodSelector && /*#__PURE__*/_jsx(Box, {
+        flexGrow: 0,
+        children: periodSelector
+      })]
+    }), /*#__PURE__*/_jsxs(SparklineInteractiveScrubProvider, {
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        paddingBottom: (formatHoverDate || formatHoverPrice) && 1,
+        children: [!!formatHoverDate && /*#__PURE__*/_jsx(SparklineInteractiveHoverDate, {}), !!formatHoverPrice && /*#__PURE__*/_jsx(SparklineInteractiveHoverPrice, {})]
+      }), /*#__PURE__*/_jsx(VisualizationContainer, {
+        height: innerSparklineInteractiveHeight,
+        width: "100%",
+        children: _ref3 => {
+          let {
+            width,
+            height
+          } = _ref3;
+          return /*#__PURE__*/_jsx(InnerSparklineInteractiveProvider, {
+            height: height,
+            width: width,
+            children: /*#__PURE__*/_jsx(SparklineInteractiveScrubHandler, {
+              disabled: disableScrubbing,
+              formatHoverDate: formatHoverDate,
+              formatHoverPrice: formatHoverPrice,
+              getMarker: getMarker,
+              onScrub: onScrub,
+              onScrubEnd: handleScrubEnd,
+              onScrubStart: handleScrubStart,
+              selectedPeriod: selectedPeriod,
+              children: /*#__PURE__*/_jsxs(Box, {
+                height: height,
+                position: "relative",
+                width: width,
+                children: [!!isFallbackVisible && /*#__PURE__*/_jsx(Box, {
+                  height: "100%",
+                  justifyContent: "center",
+                  position: "absolute",
+                  width: "100%",
+                  children: fallback !== null && fallback !== void 0 ? fallback : /*#__PURE__*/_jsx(DefaultFallback, {
+                    fallbackType: fallbackType
+                  })
+                }), /*#__PURE__*/_jsx(Box, {
+                  height: "100%",
+                  width: "100%",
+                  children: !!hasData && !!path && /*#__PURE__*/_jsxs(_Fragment, {
+                    children: [/*#__PURE__*/_jsx(SparklineInteractivePaths, {
+                      area: area,
+                      compact: compact,
+                      fill: fill,
+                      fillType: fillType,
+                      hoverData: hoverData,
+                      path: path,
+                      selectedPeriod: selectedPeriod,
+                      showHoverData: isScrubbing,
+                      strokeColor: color,
+                      yAxisScalingFactor: yAxisScalingFactor
+                    }), /*#__PURE__*/_jsx(SparklineInteractiveLineVertical, {
+                      color: lineVerticalColor
+                    })]
+                  })
+                })]
+              })
+            })
+          });
+        }
+      })]
+    }), /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "flex-end",
+      minHeight: 50,
+      width: "100%",
+      children: [showBottomMarkerDates && /*#__PURE__*/_jsx(SparklineInteractiveMarkerDates, {
+        formatDate: formatDate,
+        getMarker: getMarker,
+        selectedPeriod: selectedPeriod,
+        timePeriodGutter: timePeriodGutter
+      }), periodSelectorPlacement === 'below' && !isMarkerDateVisible && !hidePeriodSelector && periodSelector]
+    })]
+  });
+}
+
+// typescript doesn't understand the memo with the generic so it gets casted to a base react component
+export const SparklineInteractiveContent = /*#__PURE__*/memo(SparklineInteractiveContentWithGeneric);
+function SparklineInteractiveWithGeneric(_ref4) {
+  let {
+      compact
+    } = _ref4,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  const [resizeKey, setResizeKey] = useState(0);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const resizeHandler = useCallback(debounce(() => {
+    // no resizing on percy
+    if (!isStorybook()) {
+      setResizeKey(prev => prev + 1);
+    }
+  }, 300), []);
+  useEffect(() => {
+    var _getBrowserGlobals;
+    (_getBrowserGlobals = getBrowserGlobals()) === null || _getBrowserGlobals === void 0 || (_getBrowserGlobals = _getBrowserGlobals.window) === null || _getBrowserGlobals === void 0 || _getBrowserGlobals.addEventListener('resize', resizeHandler);
+    return () => {
+      var _getBrowserGlobals2;
+      (_getBrowserGlobals2 = getBrowserGlobals()) === null || _getBrowserGlobals2 === void 0 || (_getBrowserGlobals2 = _getBrowserGlobals2.window) === null || _getBrowserGlobals2 === void 0 || _getBrowserGlobals2.removeEventListener('resize', resizeHandler);
+    };
+  }, [resizeHandler]);
+  return /*#__PURE__*/_jsx(SparklineInteractiveProvider, {
+    compact: compact,
+    children: /*#__PURE__*/_jsx(SparklineInteractiveContent, _objectSpread({
+      compact: compact
+    }, props))
+  }, resizeKey);
+}
+
+/**
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
+ */
+export const SparklineInteractive = /*#__PURE__*/memo(SparklineInteractiveWithGeneric);

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.js

@@ -0,0 +1,108 @@
+import 'd3-transition'; // Important! do not remove this, it sets up the linkage so you can use select().transition()
+
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { animatedPathConfig } from '@coinbase/cds-common/animation/sparkline';
+import { useValueChanges } from '@coinbase/cds-common/hooks/useValueChanges';
+import { interpolatePath } from 'd3-interpolate-path';
+import { select } from 'd3-selection';
+import { Sparkline } from '../Sparkline';
+import { SparklineArea } from '../SparklineArea';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  duration,
+  easing
+} = animatedPathConfig;
+export const SparklineInteractiveAnimatedPath = /*#__PURE__*/memo(_ref => {
+  let {
+    d = '',
+    color,
+    selectedPeriod,
+    area,
+    fillType = 'gradient',
+    yAxisScalingFactor,
+    initialPath,
+    initialArea
+  } = _ref;
+  const pathRef = useRef(null);
+  const areaRef = useRef(null);
+  const {
+    chartWidth,
+    chartHeight
+  } = useSparklineInteractiveConstants();
+  const {
+    isFallbackVisible,
+    hideFallback
+  } = useSparklineInteractiveContext();
+
+  // Only tween animation on period changes
+  const {
+    hasNotChanged: skipAnimation,
+    addPreviousValue: addPreviousPeriod
+  } = useValueChanges(selectedPeriod);
+  const {
+    previousValue: previousPath,
+    newValue: newPath,
+    hasChanged: shouldUpdatePath,
+    addPreviousValue: addPreviousPath
+  } = useValueChanges(d);
+  const {
+    previousValue: previousArea,
+    newValue: newArea,
+    hasChanged: shouldUpdateArea,
+    addPreviousValue: addPreviousArea
+  } = useValueChanges(area !== null && area !== void 0 ? area : '');
+  const pathInterpolator = useMemo(() => interpolatePath(previousPath !== null && previousPath !== void 0 ? previousPath : initialPath, newPath), [previousPath, initialPath, newPath]);
+  const areaInterpolator = useMemo(() => interpolatePath(previousArea !== null && previousArea !== void 0 ? previousArea : initialArea, newArea), [previousArea, initialArea, newArea]);
+  const updatePathWithoutAnimation = useCallback(() => {
+    select(pathRef.current).attr('d', pathInterpolator(1));
+    select(areaRef.current).attr('d', areaInterpolator(1));
+  }, [areaInterpolator, pathInterpolator]);
+  const playAnimation = useCallback(() => {
+    select(pathRef.current).transition().duration(duration).ease(easing).attrTween('d', function tween() {
+      const previous = select(this).attr('d');
+      const current = d;
+      return interpolatePath(previous !== null && previous !== void 0 ? previous : initialPath, current);
+    });
+    if (area) {
+      select(areaRef.current).transition().duration(duration).ease(easing).attrTween('d', function tween() {
+        const previous = select(this).attr('d');
+        const current = area;
+        return interpolatePath(previous !== null && previous !== void 0 ? previous : initialArea, current);
+      });
+    }
+  }, [area, d, initialArea, initialPath]);
+  useEffect(() => {
+    addPreviousPeriod(selectedPeriod);
+  }, [addPreviousPeriod, selectedPeriod]);
+  useEffect(() => {
+    // only update these values when they are used
+    addPreviousArea(newArea);
+    addPreviousPath(newPath);
+    if (shouldUpdatePath) {
+      if (isFallbackVisible) {
+        hideFallback();
+        updatePathWithoutAnimation();
+      } else if (skipAnimation) {
+        updatePathWithoutAnimation();
+      } else {
+        playAnimation();
+      }
+    } else if (shouldUpdateArea) {
+      updatePathWithoutAnimation();
+    }
+  }, [addPreviousArea, addPreviousPath, hideFallback, isFallbackVisible, newArea, newPath, playAnimation, shouldUpdateArea, shouldUpdatePath, skipAnimation, updatePathWithoutAnimation]);
+  return /*#__PURE__*/_jsx(Sparkline, {
+    ref: pathRef,
+    color: color,
+    fillType: fillType,
+    height: chartHeight,
+    strokeType: "solid",
+    width: chartWidth,
+    yAxisScalingFactor: yAxisScalingFactor,
+    children: !!area && /*#__PURE__*/_jsx(SparklineArea, {
+      ref: areaRef
+    })
+  });
+});

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.css

@@ -0,0 +1,2 @@
+@layer cds{.resetFadeCss-ruh142w{opacity:0;}
+.textCss-t2lq08e{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.js

@@ -0,0 +1,27 @@
+import React, { memo, useCallback } from 'react';
+import { cx } from '../../../index';
+import { Text } from '../../../typography/Text';
+import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const resetFadeCss = "resetFadeCss-ruh142w";
+const textCss = "textCss-t2lq08e";
+export const SparklineInteractiveHoverDate = /*#__PURE__*/memo(() => {
+  const {
+    setHoverDateDOMNode
+  } = useSparklineInteractiveScrubContext();
+  const dateString = new Date().toLocaleString();
+  const setupDateRef = useCallback(ref => {
+    setHoverDateDOMNode(ref !== null && ref !== void 0 ? ref : null);
+  }, [setHoverDateDOMNode]);
+  return /*#__PURE__*/_jsx(Text, {
+    tabularNumbers: true,
+    as: "div",
+    font: "label2",
+    children: /*#__PURE__*/_jsx("span", {
+      ref: setupDateRef,
+      className: cx(resetFadeCss, textCss),
+      children: dateString
+    })
+  });
+});
+import "./SparklineInteractiveHoverDate.css";

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.css

@@ -0,0 +1,2 @@
+@layer cds{.resetFadeCss-r5crmz9{opacity:0;}
+.textCss-t1grvzun{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.js

@@ -0,0 +1,25 @@
+import React, { memo, useCallback } from 'react';
+import { cx } from '../../../index';
+import { Text } from '../../../typography/Text';
+import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const resetFadeCss = "resetFadeCss-r5crmz9";
+const textCss = "textCss-t1grvzun";
+export const SparklineInteractiveHoverPrice = /*#__PURE__*/memo(() => {
+  const {
+    setHoverPriceDOMNode
+  } = useSparklineInteractiveScrubContext();
+  const setupPriceRef = useCallback(ref => {
+    setHoverPriceDOMNode(ref !== null && ref !== void 0 ? ref : null);
+  }, [setHoverPriceDOMNode]);
+  return /*#__PURE__*/_jsx(Text, {
+    tabularNumbers: true,
+    as: "div",
+    font: "label2",
+    children: /*#__PURE__*/_jsx("span", {
+      ref: setupPriceRef,
+      className: cx(resetFadeCss, textCss)
+    })
+  });
+});
+import "./SparklineInteractiveHoverPrice.css";

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.css

@@ -0,0 +1,4 @@
+@layer cds{.resetFadeCss-r1ueub74{opacity:0;}
+.verticalLineCss-v1c0vx7z{position:absolute;pointer-events:none;width:100%;height:100%;overflow:hidden;}
+.lineContainerCss-l1tzo2w{width:2px;height:100%;}
+.maskCss-mvpqoje{width:100%;height:100%;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;}}

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.js

@@ -0,0 +1,65 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { memo, useCallback } from 'react';
+import { borderWidth, lineDashArray } from '@coinbase/cds-common/tokens/sparkline';
+import { cx } from '../../../index';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const resetFadeCss = "resetFadeCss-r1ueub74";
+const verticalLineCss = "verticalLineCss-v1c0vx7z";
+const lineContainerCss = "lineContainerCss-l1tzo2w";
+const maskCss = "maskCss-mvpqoje";
+const lineProps = {
+  x1: 0,
+  x2: 0,
+  y1: 0,
+  y2: 0,
+  strokeDasharray: lineDashArray.join(','),
+  strokeWidth: borderWidth
+};
+export const SparklineInteractiveLineVertical = /*#__PURE__*/memo(_ref => {
+  let {
+    color
+  } = _ref;
+  const {
+    setLineDOMNode,
+    setMaskDOMNode
+  } = useSparklineInteractiveScrubContext();
+  const {
+    height
+  } = useSparklineInteractiveContext();
+  const setupLineRef = useCallback(ref => {
+    setLineDOMNode(ref !== null && ref !== void 0 ? ref : null);
+  }, [setLineDOMNode]);
+  const setupMaskRef = useCallback(ref => {
+    setMaskDOMNode(ref !== null && ref !== void 0 ? ref : null);
+  }, [setMaskDOMNode]);
+  const maskStyle = {
+    backgroundColor: 'var(--color-bg)'
+  };
+
+  // hook up the line and mask
+  return /*#__PURE__*/_jsxs("div", {
+    className: verticalLineCss,
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: setupMaskRef,
+      className: cx(maskCss, resetFadeCss),
+      style: maskStyle
+    }), /*#__PURE__*/_jsx("div", {
+      ref: setupLineRef,
+      className: cx(lineContainerCss, resetFadeCss),
+      children: /*#__PURE__*/_jsx("svg", {
+        className: lineContainerCss,
+        children: /*#__PURE__*/_jsx("line", _objectSpread(_objectSpread({}, lineProps), {}, {
+          stroke: color,
+          y2: height
+        }))
+      })
+    })]
+  });
+});
+import "./SparklineInteractiveLineVertical.css";

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.css

@@ -0,0 +1 @@
+@layer cds{.fadeInCss-f128m5n3.fadeInCss-f128m5n3{-webkit-animation:cdsSparklineInteractiveFadeIn-fadeInCss-f128m5n3 200ms cubic-bezier(0.6,0,0.15,1);animation:cdsSparklineInteractiveFadeIn-fadeInCss-f128m5n3 200ms cubic-bezier(0.6,0,0.15,1);opacity:1;}@-webkit-keyframes cdsSparklineInteractiveFadeIn-fadeInCss-f128m5n3{0%{opacity:0;}100%{opacity:1;}}@keyframes cdsSparklineInteractiveFadeIn-fadeInCss-f128m5n3{0%{opacity:0;}100%{opacity:1;}}}

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.js

@@ -0,0 +1,85 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { fadeDuration } from '@coinbase/cds-common/tokens/sparkline';
+import { useDateLookup } from '@coinbase/cds-common/visualizations/useDateLookup';
+import times from 'lodash/times';
+import { cubicBezier } from '../../../animation/convertMotionConfig';
+import { HStack } from '../../../layout';
+import { Text } from '../../../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+const fadeInCss = "fadeInCss-f128m5n3";
+const labelWidth = 125;
+const noPointerEvents = {
+  pointerEvents: 'none'
+};
+const SparklineInteractiveMarkerDate = /*#__PURE__*/memo(_ref => {
+  let {
+    getFormattedDate,
+    containerOffsetLeft
+  } = _ref;
+  const [xPos, setXPos] = useState(0);
+  const setupRef = useCallback(ref => {
+    if (ref) {
+      setXPos(ref.offsetLeft + ref.offsetWidth / 2 - containerOffsetLeft);
+    }
+  }, [containerOffsetLeft]);
+  const dateStr = getFormattedDate(xPos);
+
+  // take up space while loading so when it finishes loading there is no jump
+  const fallback = /*#__PURE__*/_jsx("span", {
+    style: {
+      visibility: 'hidden'
+    },
+    children: "-"
+  });
+  return /*#__PURE__*/_jsx("span", {
+    ref: setupRef,
+    children: /*#__PURE__*/_jsx(Text, {
+      as: "span",
+      color: "fgMuted",
+      font: "label2",
+      textAlign: "center",
+      children: dateStr || fallback
+    })
+  });
+});
+function SparklineInteractiveMarkerDatesWithGeneric(_ref2) {
+  let {
+    formatDate,
+    selectedPeriod,
+    getMarker,
+    timePeriodGutter = 2
+  } = _ref2;
+  const [numberOfLabels, setNumberOfLabels] = useState(0);
+  const [containerOffsetLeft, setContainerOffsetLeft] = useState(0);
+  const getFormattedDate = useDateLookup({
+    getMarker,
+    formatDate,
+    selectedPeriod
+  });
+  const setupRef = useCallback(ref => {
+    if (ref) {
+      const numberOfLabelsFromWidth = Math.floor(ref.offsetWidth / labelWidth);
+      setNumberOfLabels(Math.max(numberOfLabelsFromWidth, 4));
+      setContainerOffsetLeft(ref.offsetLeft);
+    }
+  }, []);
+  const markers = useMemo(() => {
+    return times(numberOfLabels).map((_, i) => {
+      return /*#__PURE__*/_jsx(SparklineInteractiveMarkerDate, {
+        containerOffsetLeft: containerOffsetLeft,
+        getFormattedDate: getFormattedDate
+      }, i);
+    });
+  }, [containerOffsetLeft, getFormattedDate, numberOfLabels]);
+  return /*#__PURE__*/_jsx(HStack, {
+    ref: setupRef,
+    className: fadeInCss,
+    justifyContent: "space-between",
+    paddingX: timePeriodGutter,
+    style: noPointerEvents,
+    width: "100%",
+    children: markers
+  }, selectedPeriod);
+}
+export const SparklineInteractiveMarkerDates = /*#__PURE__*/memo(SparklineInteractiveMarkerDatesWithGeneric);
+import "./SparklineInteractiveMarkerDates.css";