@coinbase/cds-web-visualization 0.0.0 → 3.4.0-beta.1

package/esm/sparkline/Sparkline.js

@@ -0,0 +1,164 @@
+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, { forwardRef, memo, useId, useMemo, useRef } from 'react';
+import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineRange } from '@coinbase/cds-common/visualizations/getSparklineRange';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { generateRandomId } from '@coinbase/cds-utils';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+import { generateSparklineAreaWithId } from './generateSparklineWithId';
+import { SparklineAreaPattern } from './SparklineAreaPattern';
+import { SparklinePath } from './SparklinePath';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @deprecated Use LineChart instead.
+ */
+export const Sparkline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    background,
+    color,
+    height,
+    path,
+    width,
+    yAxisScalingFactor,
+    children,
+    strokeType = 'solid',
+    fillType = 'dotted'
+  } = _ref;
+  const theme = useTheme();
+  const patternId = useRef(generateRandomId());
+  const strokeColor = color !== 'auto' ? color : getAccessibleColor({
+    background: background !== null && background !== void 0 ? background : theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
+  const hasChildren = !!children;
+  const useModernFill = fillType === 'gradient' || fillType === 'gradientDotted';
+
+  // Stroke gradient (for strokeType='gradient')
+  const strokeGradient = useMemo(() => {
+    if (strokeType !== 'gradient') return null;
+    return getAccessibleForegroundGradient({
+      background: background !== null && background !== void 0 ? background : theme.color.bg,
+      color,
+      colorScheme: theme.activeColorScheme,
+      usage: 'graphic'
+    });
+  }, [strokeType, background, color, theme]);
+
+  // Calculate gradient coordinates for modern fills
+  const {
+    gradientY1,
+    gradientY2
+  } = useMemo(() => {
+    if (!useModernFill) return {
+      gradientY1: 0,
+      gradientY2: 0
+    };
+    if (!Number.isFinite(yAxisScalingFactor)) {
+      return {
+        gradientY1: 2,
+        gradientY2: height - 2
+      };
+    }
+    const {
+      yRange
+    } = getSparklineRange({
+      height,
+      width,
+      yAxisScalingFactor
+    });
+    const pathHeight = Math.abs(yRange[0] - yRange[1]);
+    const yTranslate = height / 2 - pathHeight / 2;
+    return {
+      gradientY1: yRange[1],
+      gradientY2: height - yTranslate
+    };
+  }, [useModernFill, height, width, yAxisScalingFactor]);
+  const strokeGradientId = useId();
+  const maskGradientId = "".concat(patternId.current, "-mask-gradient");
+  const maskId = "".concat(patternId.current, "-mask");
+  const defs = useMemo(() => {
+    if (!strokeGradient && !hasChildren) return null;
+    return /*#__PURE__*/_jsxs("defs", {
+      children: [strokeGradient && /*#__PURE__*/_jsx("linearGradient", {
+        id: strokeGradientId,
+        x1: "0%",
+        x2: "100%",
+        y1: "0%",
+        y2: "0%",
+        children: strokeGradient.map((item, i) => /*#__PURE__*/_jsx("stop", {
+          offset: item.offset,
+          stopColor: item.color
+        }, "".concat(i, "_").concat(item)))
+      }), hasChildren && fillType === 'dotted' && /*#__PURE__*/_jsx(SparklineAreaPattern, {
+        color: strokeColor,
+        id: patternId.current
+      }), hasChildren && fillType === 'gradient' && /*#__PURE__*/_jsxs("linearGradient", {
+        gradientUnits: "userSpaceOnUse",
+        id: patternId.current,
+        x1: "0",
+        x2: "0",
+        y1: gradientY1,
+        y2: gradientY2,
+        children: [/*#__PURE__*/_jsx("stop", {
+          offset: "0%",
+          stopColor: strokeColor,
+          stopOpacity: 0.3
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "100%",
+          stopColor: strokeColor,
+          stopOpacity: 0
+        })]
+      }), hasChildren && fillType === 'gradientDotted' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(SparklineAreaPattern, {
+          color: strokeColor,
+          id: patternId.current,
+          opacity: 1
+        }), /*#__PURE__*/_jsxs("linearGradient", {
+          gradientUnits: "userSpaceOnUse",
+          id: maskGradientId,
+          x1: "0",
+          x2: "0",
+          y1: gradientY1,
+          y2: gradientY2,
+          children: [/*#__PURE__*/_jsx("stop", {
+            offset: "0%",
+            stopColor: "white",
+            stopOpacity: 1
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: "white",
+            stopOpacity: 0
+          })]
+        }), /*#__PURE__*/_jsx("mask", {
+          id: maskId,
+          children: /*#__PURE__*/_jsx("rect", {
+            fill: "url(#".concat(maskGradientId, ")"),
+            height: height,
+            width: width
+          })
+        })]
+      })]
+    });
+  }, [strokeGradient, strokeGradientId, hasChildren, fillType, strokeColor, gradientY1, gradientY2, height, width, maskGradientId, maskId]);
+  const stroke = strokeType === 'gradient' ? "url(#".concat(strokeGradientId, ")") : strokeColor;
+  const shouldPlaceDefsInside = useModernFill;
+  return /*#__PURE__*/_jsxs("svg", {
+    height: height,
+    width: width,
+    children: [!shouldPlaceDefsInside && defs, /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({}, translateProps), {}, {
+      children: [shouldPlaceDefsInside && defs, /*#__PURE__*/_jsx(SparklinePath, {
+        ref: ref,
+        path: path,
+        stroke: stroke
+      }), generateSparklineAreaWithId(patternId.current, children, fillType === 'gradientDotted' ? maskId : undefined)]
+    }))]
+  });
+}));
+Sparkline.displayName = 'Sparkline';

package/esm/sparkline/SparklineArea.js

@@ -0,0 +1,18 @@
+import React, { forwardRef, memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use AreaChart instead.
+ */
+export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    area,
+    patternId,
+    maskId
+  } = _ref;
+  return /*#__PURE__*/_jsx("path", {
+    ref: ref,
+    d: area,
+    fill: "url(#".concat(patternId, ")"),
+    mask: maskId ? "url(#".concat(maskId, ")") : undefined
+  });
+}));

package/esm/sparkline/SparklineAreaPattern.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useSparklineAreaOpacity } from '@coinbase/cds-common/visualizations/useSparklineAreaOpacity';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SparklineAreaPattern = _ref => {
+  let {
+    color,
+    id,
+    opacity
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const themeOpacity = useSparklineAreaOpacity(activeColorScheme);
+  const fillOpacity = opacity !== null && opacity !== void 0 ? opacity : themeOpacity;
+  return /*#__PURE__*/_jsx("pattern", {
+    height: "4",
+    id: id,
+    patternUnits: "userSpaceOnUse",
+    width: "4",
+    x: "0",
+    y: "0",
+    children: /*#__PURE__*/_jsxs("g", {
+      children: [/*#__PURE__*/_jsx("rect", {
+        fill: "transparent",
+        height: "4",
+        width: "4"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: "1",
+        cy: "1",
+        fill: color,
+        fillOpacity: fillOpacity,
+        r: "1"
+      })]
+    })
+  });
+};

package/esm/sparkline/SparklineGradient.js

@@ -0,0 +1,30 @@
+import React, { forwardRef, memo } from 'react';
+import { Sparkline } from './Sparkline';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use LineChart instead.
+ */
+export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    background,
+    color,
+    path,
+    height,
+    width,
+    yAxisScalingFactor,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Sparkline, {
+    ref: ref,
+    background: background,
+    color: color,
+    fillType: "dotted",
+    height: height,
+    path: path,
+    strokeType: "gradient",
+    width: width,
+    yAxisScalingFactor: yAxisScalingFactor,
+    children: children
+  });
+}));
+SparklineGradient.displayName = 'SparklineGradient';

package/esm/sparkline/SparklinePath.js

@@ -0,0 +1,19 @@
+import React, { forwardRef, memo } from 'react';
+import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SparklinePath = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    path,
+    stroke
+  } = _ref;
+  return /*#__PURE__*/_jsx("path", {
+    ref: forwardedRef,
+    d: path,
+    fill: "transparent",
+    stroke: stroke,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: borderWidth
+  });
+}));
+SparklinePath.displayName = 'SparklinePath';

package/esm/sparkline/__figma__/Sparkline.figma.js

@@ -0,0 +1,24 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { Sparkline } from '../Sparkline';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-15040&m=dev', {
+  imports: ["import { Sparkline } from '@coinbase/cds-web-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  example: () => {
+    const data = [20, 30, 5, 45, 0];
+    // @ts-expect-error: useSparklinePath is not typed correctly
+    const path = useSparklinePath({
+      height: 200,
+      width: 200,
+      data
+    });
+    return /*#__PURE__*/_jsx(Sparkline, {
+      color: "auto",
+      height: 200,
+      path: path,
+      width: 400
+    });
+  }
+});

package/esm/sparkline/generateSparklineWithId.js

@@ -0,0 +1,7 @@
+import { cloneElement } from 'react';
+export function generateSparklineAreaWithId(id, children, maskId) {
+  return children ? /*#__PURE__*/cloneElement(children, {
+    patternId: id,
+    maskId
+  }) : undefined;
+}

package/esm/sparkline/index.js

@@ -0,0 +1,5 @@
+export * from './Sparkline';
+export * from './sparkline-interactive/SparklineInteractive';
+export * from './sparkline-interactive-header/SparklineInteractiveHeader';
+export * from './SparklineArea';
+export * from './SparklineGradient';

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

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const InnerSparklineInteractiveProvider = _ref => {
+  let {
+    width,
+    height,
+    children
+  } = _ref;
+  const {
+    setWidth,
+    setHeight
+  } = useSparklineInteractiveContext();
+  useEffect(() => {
+    setWidth(width);
+    setHeight(height);
+  }, [width, height, setWidth, setHeight]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};

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

@@ -0,0 +1,317 @@
+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 { cx, useTheme } from '@coinbase/cds-web';
+import { Lottie } from '@coinbase/cds-web/animation';
+import { useDimensions } from '@coinbase/cds-web/hooks/useDimensions';
+import { HStack, VStack } from '@coinbase/cds-web/layout';
+import { Box } from '@coinbase/cds-web/layout/Box';
+import { getBrowserGlobals } from '@coinbase/cds-web/utils/browser';
+import { VisualizationContainer } from '@coinbase/cds-web/visualizations/VisualizationContainer';
+import isEqual from 'lodash/isEqual';
+import isObject from 'lodash/isObject';
+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.
+ */
+export const SparklineInteractive = /*#__PURE__*/memo(SparklineInteractiveWithGeneric);