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

package/esm/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/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.css

@@ -0,0 +1,2 @@
+.cds-resetFadeCss-r1flhiq9{opacity:0;}
+.cds-textCss-t1ofwd95{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/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.js

@@ -0,0 +1,26 @@
+import React, { memo, useCallback } from 'react';
+import { cx } from '@coinbase/cds-web';
+import { TextLabel2 } from '@coinbase/cds-web/typography/TextLabel2';
+import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const resetFadeCss = "cds-resetFadeCss-r1flhiq9";
+const textCss = "cds-textCss-t1ofwd95";
+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(TextLabel2, {
+    tabularNumbers: true,
+    as: "div",
+    children: /*#__PURE__*/_jsx("span", {
+      ref: setupDateRef,
+      className: cx(resetFadeCss, textCss),
+      children: dateString
+    })
+  });
+});
+import "./SparklineInteractiveHoverDate.css";

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

@@ -0,0 +1,2 @@
+.cds-resetFadeCss-r1armfip{opacity:0;}
+.cds-textCss-t1es6xjy{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/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.js

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

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

@@ -0,0 +1,4 @@
+.cds-resetFadeCss-r1p330gi{opacity:0;}
+.cds-verticalLineCss-vjctcux{position:absolute;pointer-events:none;width:100%;height:100%;overflow:hidden;}
+.cds-lineContainerCss-lfwfzju{width:2px;height:100%;}
+.cds-maskCss-mc4jbg4{width:100%;height:100%;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;}

package/esm/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 '@coinbase/cds-web';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const resetFadeCss = "cds-resetFadeCss-r1p330gi";
+const verticalLineCss = "cds-verticalLineCss-vjctcux";
+const lineContainerCss = "cds-lineContainerCss-lfwfzju";
+const maskCss = "cds-maskCss-mc4jbg4";
+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/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.css

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

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

@@ -0,0 +1,80 @@
+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 { cubicBezier } from '@coinbase/cds-web/animation/convertMotionConfig';
+import { HStack } from '@coinbase/cds-web/layout';
+import { TextLabel2 } from '@coinbase/cds-web/typography/TextLabel2';
+import times from 'lodash/times';
+import { jsx as _jsx } from "react/jsx-runtime";
+const fadeInCss = "cds-fadeInCss-f1yvdjq7";
+const labelWidth = 125;
+const noPointerEvents = {
+  pointerEvents: 'none'
+};
+const SparklineInteractiveMarkerDate = /*#__PURE__*/memo(_ref => {
+  let {
+    getFormattedDate
+  } = _ref;
+  const [xPos, setXPos] = useState(0);
+  const setupRef = useCallback(ref => {
+    if (ref) {
+      setXPos(ref.offsetLeft + ref.offsetWidth / 2);
+    }
+  }, []);
+  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(TextLabel2, {
+      as: "span",
+      color: "fgMuted",
+      textAlign: "center",
+      children: dateStr || fallback
+    })
+  });
+});
+function SparklineInteractiveMarkerDatesWithGeneric(_ref2) {
+  let {
+    formatDate,
+    selectedPeriod,
+    getMarker,
+    timePeriodGutter = 2
+  } = _ref2;
+  const [numberOfLabels, setNumberOfLabels] = 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));
+    }
+  }, []);
+  const markers = useMemo(() => {
+    return times(numberOfLabels).map((_, i) => {
+      return /*#__PURE__*/_jsx(SparklineInteractiveMarkerDate, {
+        getFormattedDate: getFormattedDate
+      }, i);
+    });
+  }, [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";

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

@@ -0,0 +1,56 @@
+import React, { memo, useCallback, useRef } from 'react';
+import { chartCompactHeight, chartHeight } from '@coinbase/cds-common/tokens/sparkline';
+import { SparklineInteractiveAnimatedPath } from './SparklineInteractiveAnimatedPath';
+import { SparklineInteractiveTimeseriesPaths } from './SparklineInteractiveTimeseriesPaths';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function SparklineInteractivePathsWithGeneric(_ref) {
+  let {
+    showHoverData,
+    fill,
+    fillType = 'gradient',
+    path,
+    area,
+    selectedPeriod,
+    yAxisScalingFactor,
+    strokeColor,
+    hoverData,
+    compact
+  } = _ref;
+  // Map 'dotted' to 'gradientDotted' for Sparkline
+  const sparklineFillType = fillType === 'dotted' ? 'gradientDotted' : 'gradient';
+  const hoverPathRef = useRef(undefined);
+  const hoverAreaRef = useRef(undefined);
+  const shouldShowFill = !!fill;
+  const {
+    chartWidth
+  } = useSparklineInteractiveConstants();
+  const innerSparklineInteractiveHeight = compact ? chartCompactHeight : chartHeight;
+  const handleMultiTimeseriesRender = useCallback(_ref2 => {
+    let {
+      area: timeseriesArea,
+      path: timeseriesPath
+    } = _ref2;
+    hoverPathRef.current = timeseriesPath;
+    hoverAreaRef.current = timeseriesArea;
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!showHoverData && /*#__PURE__*/_jsx(SparklineInteractiveAnimatedPath, {
+      area: shouldShowFill ? area : undefined,
+      color: strokeColor,
+      d: path,
+      fillType: sparklineFillType,
+      initialArea: hoverAreaRef.current,
+      initialPath: hoverPathRef.current,
+      selectedPeriod: selectedPeriod,
+      yAxisScalingFactor: yAxisScalingFactor
+    }), !!showHoverData && /*#__PURE__*/_jsx(SparklineInteractiveTimeseriesPaths, {
+      data: hoverData === null || hoverData === void 0 ? void 0 : hoverData[selectedPeriod],
+      height: innerSparklineInteractiveHeight,
+      initialPath: path,
+      onRender: handleMultiTimeseriesRender,
+      width: chartWidth
+    })]
+  });
+}
+export const SparklineInteractivePaths = /*#__PURE__*/memo(SparklineInteractivePathsWithGeneric);

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

@@ -0,0 +1,70 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { periodLabelMap } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+import { Box, HStack } from '@coinbase/cds-web/layout';
+import { Pressable } from '@coinbase/cds-web/system/Pressable';
+import { TextLabel1 } from '@coinbase/cds-web/typography/TextLabel1';
+import { jsx as _jsx } from "react/jsx-runtime";
+function SparklineInteractivePeriodWithGeneric(_ref) {
+  var _periodLabelMap$perio;
+  let {
+    period,
+    selectedPeriod,
+    setSelectedPeriod,
+    color
+  } = _ref;
+  const periodLabel = (_periodLabelMap$perio = periodLabelMap[period.label]) !== null && _periodLabelMap$perio !== void 0 ? _periodLabelMap$perio : period.label;
+  const isSelected = period.value === selectedPeriod;
+  const handleOnClick = useCallback(() => {
+    setSelectedPeriod(period.value);
+  }, [period, setSelectedPeriod]);
+  const background = useMemo(() => isSelected ? 'bgPrimaryWash' : 'transparent', [isSelected]);
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: "center",
+    height: "fit-content",
+    justifyContent: "center",
+    children: /*#__PURE__*/_jsx(Pressable, {
+      accessibilityLabel: periodLabel,
+      "aria-pressed": isSelected,
+      background: background,
+      borderRadius: 200,
+      onClick: handleOnClick,
+      children: /*#__PURE__*/_jsx(TextLabel1, {
+        noWrap: true,
+        as: "span",
+        dangerouslySetColor: isSelected ? color : 'var(--color-fgMuted)',
+        display: "block",
+        paddingX: 2,
+        paddingY: 1,
+        children: period.label
+      })
+    })
+  });
+}
+const SparklineInteractivePeriod = /*#__PURE__*/memo(SparklineInteractivePeriodWithGeneric);
+export const SparklineInteractivePeriodSelector = _ref2 => {
+  let {
+    selectedPeriod,
+    setSelectedPeriod,
+    periods,
+    color
+  } = _ref2;
+  const theme = useTheme();
+  const accessibleForeground = color !== 'auto' ? color : getAccessibleColor({
+    background: theme.color.bg,
+    foreground: 'auto',
+    enhanced: true
+  });
+  return /*#__PURE__*/_jsx(HStack, {
+    justifyContent: "space-between",
+    paddingX: 1,
+    width: "100%",
+    children: periods.map(period => /*#__PURE__*/_jsx(SparklineInteractivePeriod, {
+      color: accessibleForeground,
+      period: period,
+      selectedPeriod: selectedPeriod,
+      setSelectedPeriod: setSelectedPeriod
+    }, period.value))
+  });
+};

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

@@ -0,0 +1,45 @@
+import React, { createContext, memo, useCallback, useContext, useMemo, useState } from 'react';
+import { noop } from '@coinbase/cds-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SparklineInteractiveContext = /*#__PURE__*/createContext({
+  isFallbackVisible: true,
+  compact: false,
+  width: 0,
+  height: 0,
+  showFallback: noop,
+  hideFallback: noop,
+  setWidth: noop,
+  setHeight: noop
+});
+export const SparklineInteractiveProvider = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    compact = false
+  } = _ref;
+  const [isFallbackVisible, setIsFallbackVisible] = useState(true);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const showFallback = useCallback(() => {
+    setIsFallbackVisible(true);
+  }, [setIsFallbackVisible]);
+  const hideFallback = useCallback(() => {
+    setIsFallbackVisible(false);
+  }, [setIsFallbackVisible]);
+  const value = useMemo(() => ({
+    compact,
+    width,
+    height,
+    showFallback,
+    hideFallback,
+    isFallbackVisible,
+    setHeight,
+    setWidth
+  }), [compact, height, hideFallback, isFallbackVisible, showFallback, width]);
+  return /*#__PURE__*/_jsx(SparklineInteractiveContext.Provider, {
+    value: value,
+    children: children
+  });
+});
+export function useSparklineInteractiveContext() {
+  return useContext(SparklineInteractiveContext);
+}

package/esm/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.css

@@ -0,0 +1,5 @@
+.cds-insetFocusRingCss-is0dyrn{position:relative;}.cds-insetFocusRingCss-is0dyrn:focus{outline:none;}.cds-insetFocusRingCss-is0dyrn:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:0;}
+.cds-scrubHandlerContainerCss-s9euk9d{position:relative;width:100%;height:100%;}
+.cds-scrubHandlerCss-s6b8h5z.cds-sparkline--scrubhandler{position:absolute;width:100%;height:100%;top:0;left:0;}
+.cds-fadeInMaskCss-f1bwvdrs.cds-fadeInMaskCss-f1bwvdrs{-webkit-animation:cdsSparklineInteractiveScrubFadeInMask-cds-fadeInMaskCss-f1bwvdrs 200ms cubic-bezier(0.6,0,0.15,1);animation:cdsSparklineInteractiveScrubFadeInMask-cds-fadeInMaskCss-f1bwvdrs 200ms cubic-bezier(0.6,0,0.15,1);opacity:0.8;}@-webkit-keyframes cdsSparklineInteractiveScrubFadeInMask-cds-fadeInMaskCss-f1bwvdrs{0%{opacity:0;}100%{opacity:0.8;}}@keyframes cdsSparklineInteractiveScrubFadeInMask-cds-fadeInMaskCss-f1bwvdrs{0%{opacity:0;}100%{opacity:0.8;}}
+.cds-fadeOutMaskCss-f19rjrl4.cds-fadeOutMaskCss-f19rjrl4{-webkit-animation:cdsSparklineInteractiveScrubFadeOutMask-cds-fadeOutMaskCss-f19rjrl4 200ms cubic-bezier(0.6,0,0.15,1);animation:cdsSparklineInteractiveScrubFadeOutMask-cds-fadeOutMaskCss-f19rjrl4 200ms cubic-bezier(0.6,0,0.15,1);opacity:0;}@-webkit-keyframes cdsSparklineInteractiveScrubFadeOutMask-cds-fadeOutMaskCss-f19rjrl4{0%{opacity:0.8;}100%{opacity:0;}}@keyframes cdsSparklineInteractiveScrubFadeOutMask-cds-fadeOutMaskCss-f19rjrl4{0%{opacity:0.8;}100%{opacity:0;}}