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

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

@@ -0,0 +1,199 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { fadeDuration, maskOpacity } from '@coinbase/cds-common/tokens/sparkline';
+import { debounce } from '@coinbase/cds-common/utils/debounce';
+import { noop } from '@coinbase/cds-utils';
+import { cx } from '@coinbase/cds-web';
+import { cubicBezier } from '@coinbase/cds-web/animation/convertMotionConfig';
+import { useDimensions } from '@coinbase/cds-web/hooks/useDimensions';
+import { fadeIn, fadeOut } from './fade';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const scrubHandlerStaticClassName = 'cds-sparkline--scrubhandler';
+const insetFocusRingCss = "cds-insetFocusRingCss-is0dyrn";
+const scrubHandlerContainerCss = "cds-scrubHandlerContainerCss-s9euk9d";
+const scrubHandlerCss = "cds-scrubHandlerCss-s6b8h5z";
+const fadeInMaskCss = "cds-fadeInMaskCss-f1bwvdrs";
+const fadeOutMaskCss = "cds-fadeOutMaskCss-f19rjrl4";
+
+// Number of steps for keyboard users to navigate through the sparkline
+const STEPS = 100;
+const STEPS_ARRAY = Array.from(Array(STEPS).keys());
+const padding = 8;
+function fadeOutMask(domNode) {
+  domNode === null || domNode === void 0 || domNode.classList.remove(fadeInMaskCss);
+  domNode === null || domNode === void 0 || domNode.classList.add(fadeOutMaskCss);
+}
+export function fadeInMask(domNode) {
+  domNode === null || domNode === void 0 || domNode.classList.add(fadeInMaskCss);
+  domNode === null || domNode === void 0 || domNode.classList.remove(fadeOutMaskCss);
+}
+const SparklineInteractiveScrubHandlerWithGeneric = _ref => {
+  let {
+    onScrubEnd = noop,
+    onScrubStart = noop,
+    children,
+    disabled,
+    onScrub,
+    getMarker,
+    selectedPeriod,
+    formatHoverDate,
+    formatHoverPrice
+  } = _ref;
+  const containerRef = useRef(null);
+  const {
+    lineDOMNode,
+    maskDOMNode,
+    hoverDateDOMNode,
+    hoverPriceDOMNode
+  } = useSparklineInteractiveScrubContext();
+  const {
+    width: chartWidth
+  } = useSparklineInteractiveContext();
+  const scrubHandlerCssWithFocus = cx(scrubHandlerStaticClassName, scrubHandlerCss, insetFocusRingCss);
+  const [xPos, setXPos] = useState(0);
+  const {
+    width,
+    observe
+  } = useDimensions();
+  const steps = useMemo(() => {
+    const sparklineSteps = STEPS_ARRAY.map(step => {
+      return Math.floor(Number(width) / STEPS * step) || 1;
+    });
+
+    // Make sure each step is within the sparkline container
+    sparklineSteps[0] = 1;
+    sparklineSteps[STEPS] = Math.floor(width) - 1;
+    return sparklineSteps;
+  }, [width]);
+  const debouncedUpdatePositionHandler = useMemo(() => debounce(position => {
+    setXPos(position);
+  }, 20), [setXPos]);
+  const safelyUpdatePosition = useCallback(debouncedUpdatePositionHandler, [debouncedUpdatePositionHandler]);
+
+  // This method is used by mouseMove and keyboard events
+  const updateScrubber = useCallback(position => {
+    const dataPoint = getMarker(position);
+    if (dataPoint) {
+      onScrub === null || onScrub === void 0 || onScrub({
+        point: dataPoint,
+        period: selectedPeriod
+      });
+      if (lineDOMNode) {
+        lineDOMNode.style.transform = "translateX(".concat(position, "px)");
+      }
+      if (maskDOMNode) {
+        maskDOMNode.style.transform = "translateX(".concat(position, "px)");
+      }
+      if (hoverDateDOMNode && formatHoverDate) {
+        fadeIn(hoverDateDOMNode);
+        hoverDateDOMNode.innerText = formatHoverDate(dataPoint.date, selectedPeriod);
+        const textWidth = hoverDateDOMNode.offsetWidth;
+        const halfTextWidth = textWidth / 2;
+        let textPos = position - halfTextWidth;
+        textPos = Math.max(padding, textPos);
+        textPos = Math.min(textPos, chartWidth - textWidth - padding);
+        hoverDateDOMNode.style.transform = "translateX(".concat(textPos, "px)");
+      }
+      if (hoverPriceDOMNode && formatHoverPrice) {
+        fadeIn(hoverPriceDOMNode);
+        hoverPriceDOMNode.innerText = formatHoverPrice(dataPoint.value);
+        const textWidth = hoverPriceDOMNode.offsetWidth;
+        const halfTextWidth = textWidth / 2;
+        let textPos = position - halfTextWidth;
+        textPos = Math.max(padding, textPos);
+        textPos = Math.min(textPos, chartWidth - textWidth - padding);
+        hoverPriceDOMNode.style.transform = "translateX(".concat(textPos, "px)");
+      }
+    }
+
+    /**
+     *  Keep track of the position for a seamless
+     *  transition from MouseMove to Keyboard interaction
+     */
+    safelyUpdatePosition(position);
+  }, [getMarker, safelyUpdatePosition, onScrub, selectedPeriod, lineDOMNode, maskDOMNode, hoverDateDOMNode, formatHoverDate, formatHoverPrice, hoverPriceDOMNode, chartWidth]);
+
+  // Show the scrub UI
+  const handleMouseEnter = useCallback(() => {
+    onScrubStart === null || onScrubStart === void 0 || onScrubStart();
+    fadeIn(lineDOMNode);
+    fadeInMask(maskDOMNode);
+  }, [lineDOMNode, maskDOMNode, onScrubStart]);
+  const handleMouseMove = useCallback(event => {
+    var _containerRef$current, _containerRef$current2;
+    const xPosition = Math.max(0, event.clientX - ((_containerRef$current = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().left) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0));
+
+    // Update UI
+    updateScrubber(xPosition);
+  }, [updateScrubber]);
+  const getPosition = useCallback((direction, multiSkip) => {
+    // Use the xPos to find the nearest step
+    const closestStep = steps.reduce((prev, curr) => {
+      return Math.abs(curr - xPos) < Math.abs(prev - xPos) ? curr : prev;
+    });
+    // The index of the closest step
+    const currentIndex = steps.findIndex(pos => pos === closestStep);
+    // Holding the shift key allows users to jump 10 steps
+    const stepIncrement = multiSkip ? 10 : 1;
+
+    // The location to move to
+    const nextLocation = currentIndex + (direction === 'next' ? stepIncrement : -stepIncrement);
+
+    // return the location if we're within bounds of the chart
+    return nextLocation > 0 && nextLocation < STEPS ? nextLocation : null;
+  }, [steps, xPos]);
+  const handleKeyDown = useCallback(e => {
+    const multiSkip = !!e.shiftKey;
+
+    // Go to the correct step
+    if (e.key === 'ArrowRight') {
+      var _getPosition;
+      e.preventDefault();
+      const nextStep = (_getPosition = getPosition('next', multiSkip)) !== null && _getPosition !== void 0 ? _getPosition : STEPS;
+      updateScrubber(steps[nextStep] - 1);
+    }
+    if (e.key === 'ArrowLeft') {
+      var _getPosition2;
+      e.preventDefault();
+      const previousStep = (_getPosition2 = getPosition('previous', multiSkip)) !== null && _getPosition2 !== void 0 ? _getPosition2 : 0;
+      updateScrubber(steps[previousStep]);
+    }
+
+    // Jump to beginning or end
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      updateScrubber(steps[STEPS] - 1);
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      updateScrubber(0);
+    }
+  }, [getPosition, updateScrubber, steps]);
+  const handleMouseLeave = useCallback(() => {
+    onScrubEnd === null || onScrubEnd === void 0 || onScrubEnd();
+    fadeOut(lineDOMNode);
+    fadeOutMask(maskDOMNode);
+    fadeOut(hoverDateDOMNode);
+    fadeOut(hoverPriceDOMNode);
+  }, [hoverDateDOMNode, lineDOMNode, maskDOMNode, hoverPriceDOMNode, onScrubEnd]);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: scrubHandlerContainerCss,
+    children: [children, !disabled && /*#__PURE__*/_jsx("div", {
+      ref: observe,
+      "aria-label": "Price chart (use arrow keys to adjust view)",
+      className: scrubHandlerCssWithFocus,
+      onBlur: handleMouseLeave,
+      onFocus: handleMouseEnter,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: handleMouseMove,
+      role: "button",
+      tabIndex: 0
+    })]
+  });
+};
+export const SparklineInteractiveScrubHandler = /*#__PURE__*/memo(SparklineInteractiveScrubHandlerWithGeneric);
+import "./SparklineInteractiveScrubHandler.css";

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

@@ -0,0 +1,39 @@
+import React, { createContext, memo, useContext, useMemo, useState } from 'react';
+import { noop } from '@coinbase/cds-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SparklineInteractiveScrubContext = /*#__PURE__*/createContext({
+  setLineDOMNode: noop,
+  setMaskDOMNode: noop,
+  setHoverDateDOMNode: noop,
+  setHoverPriceDOMNode: noop,
+  lineDOMNode: null,
+  maskDOMNode: null,
+  hoverDateDOMNode: null,
+  hoverPriceDOMNode: null
+});
+export const SparklineInteractiveScrubProvider = /*#__PURE__*/memo(_ref => {
+  let {
+    children
+  } = _ref;
+  const [lineDOMNode, setLineDOMNode] = useState(null);
+  const [maskDOMNode, setMaskDOMNode] = useState(null);
+  const [hoverDateDOMNode, setHoverDateDOMNode] = useState(null);
+  const [hoverPriceDOMNode, setHoverPriceDOMNode] = useState(null);
+  const value = useMemo(() => ({
+    setLineDOMNode,
+    setMaskDOMNode,
+    lineDOMNode,
+    maskDOMNode,
+    hoverDateDOMNode,
+    setHoverDateDOMNode,
+    setHoverPriceDOMNode,
+    hoverPriceDOMNode
+  }), [hoverDateDOMNode, lineDOMNode, maskDOMNode, hoverPriceDOMNode]);
+  return /*#__PURE__*/_jsx(SparklineInteractiveScrubContext.Provider, {
+    value: value,
+    children: children
+  });
+});
+export function useSparklineInteractiveScrubContext() {
+  return useContext(SparklineInteractiveScrubContext);
+}

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

@@ -0,0 +1,92 @@
+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, useRef } from 'react';
+import { animatedPathConfig } from '@coinbase/cds-common/animation/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { useTimeseriesPaths } from '@coinbase/cds-common/visualizations/useTimeseriesPaths';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+import { interpolatePath } from 'd3-interpolate-path';
+import { select } from 'd3-selection';
+import { SparklinePath } from '../SparklinePath';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  duration,
+  easing
+} = animatedPathConfig;
+const TimeseriesPath = /*#__PURE__*/memo(_ref => {
+  let {
+    timeseries,
+    lineFn,
+    initialPath,
+    onRender,
+    areaFn
+  } = _ref;
+  const theme = useTheme();
+  const pathRef = useRef(null);
+  const {
+    strokeColor
+  } = timeseries;
+  const lineColor = strokeColor !== 'auto' ? strokeColor : getAccessibleColor({
+    background: theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const newPath = useMemo(() => lineFn(timeseries.points), [lineFn, timeseries.points]);
+  const newArea = useMemo(() => onRender ? areaFn(timeseries.points) : null, [areaFn, onRender, timeseries.points]);
+  const playAnimation = useCallback(() => {
+    select(pathRef.current).transition().duration(duration).ease(easing).attrTween('d', function tween() {
+      const current = newPath;
+      return interpolatePath(initialPath, current);
+    });
+  }, [initialPath, newPath]);
+  useEffect(() => {
+    playAnimation();
+    onRender === null || onRender === void 0 || onRender({
+      path: newPath,
+      area: newArea
+    });
+  }, [newArea, newPath, onRender, playAnimation]);
+  return /*#__PURE__*/_jsx(SparklinePath, {
+    ref: pathRef,
+    path: initialPath,
+    stroke: lineColor
+  });
+});
+export const SparklineInteractiveTimeseriesPaths = /*#__PURE__*/memo(_ref2 => {
+  let {
+    data,
+    width,
+    height,
+    initialPath,
+    onRender
+  } = _ref2;
+  const {
+    lineFn,
+    areaFn
+  } = useTimeseriesPaths({
+    data,
+    width,
+    height
+  });
+  const translateProps = useMemo(() => getSparklineTransform(width, height), [width, height]);
+  const paths = data.map((timeseries, index) => {
+    return /*#__PURE__*/_jsx(TimeseriesPath, {
+      areaFn: areaFn,
+      initialPath: initialPath,
+      lineFn: lineFn,
+      onRender: index === 0 ? onRender : undefined,
+      timeseries: timeseries
+    }, timeseries.id);
+  });
+  return /*#__PURE__*/_jsx("svg", {
+    height: height,
+    width: width,
+    children: /*#__PURE__*/_jsx("g", _objectSpread(_objectSpread({}, translateProps), {}, {
+      children: paths
+    }))
+  });
+});

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

@@ -0,0 +1,89 @@
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { SparklineInteractive } from '../SparklineInteractive';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14858&m=dev', {
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  props: {
+    compact: figma.boolean('compact'),
+    disableScrubbing: figma.boolean('scrubbing', {
+      false: true,
+      true: false
+    })
+  },
+  example: props => {
+    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 data = {
+      hour: [],
+      day: [{
+        value: 49259.38,
+        date: new Date('2021-12-05T04:00:00.000Z')
+      }, {
+        value: 49163.79,
+        date: new Date('2021-12-05T04:05:00.000Z')
+      }, {
+        value: 49146.66,
+        date: new Date('2021-12-05T04:10:00.000Z')
+      }, {
+        value: 49083.92,
+        date: new Date('2021-12-05T04:15:00.000Z')
+      }, {
+        value: 49115.3,
+        date: new Date('2021-12-05T04:20:00.000Z')
+      }, {
+        value: 48992.14,
+        date: new Date('2021-12-05T04:25:00.000Z')
+      }, {
+        value: 49075.75,
+        date: new Date('2021-12-05T04:30:00.000Z')
+      }, {
+        value: 49025.78,
+        date: new Date('2021-12-05T04:35:00.000Z')
+      }, {
+        value: 49066.23,
+        date: new Date('2021-12-05T04:40:00.000Z')
+      }, {
+        value: 49247.82,
+        date: new Date('2021-12-05T04:45:00.000Z')
+      }],
+      week: [],
+      month: [],
+      year: [],
+      all: []
+    };
+    return /*#__PURE__*/_jsx(SparklineInteractive, _objectSpread({
+      data: data,
+      defaultPeriod: "day",
+      formatDate: date => date.toLocaleString('en-US', {
+        timeZone: 'America/New_York',
+        hour: 'numeric',
+        minute: 'numeric'
+      }),
+      periods: periods,
+      strokeColor: "#cb51bb"
+    }, props));
+  }
+});

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

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

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

@@ -0,0 +1,14 @@
+import { fadeDuration } from '@coinbase/cds-common/tokens/sparkline';
+import { cubicBezier } from '@coinbase/cds-web/animation/convertMotionConfig';
+// keyframes are global so they should be namespaced
+const fadeInCss = "cds-fadeInCss-f1sjpdr1";
+const fadeOutCss = "cds-fadeOutCss-fsxar9z";
+export function fadeOut(domNode) {
+  domNode === null || domNode === void 0 || domNode.classList.remove(fadeInCss);
+  domNode === null || domNode === void 0 || domNode.classList.add(fadeOutCss);
+}
+export function fadeIn(domNode) {
+  domNode === null || domNode === void 0 || domNode.classList.add(fadeInCss);
+  domNode === null || domNode === void 0 || domNode.classList.remove(fadeOutCss);
+}
+import "./fade.css";

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

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { borderWidth, chartCompactHeight, chartHeight as chartHeightToken } from '@coinbase/cds-common/tokens/sparkline';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+export function useSparklineInteractiveConstants() {
+  const {
+    width: chartWidth,
+    compact
+  } = useSparklineInteractiveContext();
+  return useMemo(() => {
+    const chartHeight = compact ? chartCompactHeight : chartHeightToken;
+    const xRange = [borderWidth, chartWidth - borderWidth];
+    const yRange = [chartHeight - borderWidth, borderWidth];
+    const startX = 0;
+    const endX = xRange[1];
+    return {
+      chartWidth,
+      chartHeight,
+      chartDimensionStyles: {
+        height: chartHeight,
+        width: chartWidth
+      },
+      xRange,
+      yRange,
+      startX,
+      endX
+    };
+  }, [chartWidth, compact]);
+}