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

package/esm/chart/scrubber/ScrubberBeaconLabel.js

@@ -0,0 +1,33 @@
+const _excluded = ["background", "color", "elevation", "borderRadius", "font", "verticalAlignment"];
+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); }
+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; }
+import { memo } from 'react';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The ScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon (i.e. a point on the series pinned to the scrubber position).
+ */
+export const ScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      background = 'white',
+      color = 'var(--color-fgPrimary)',
+      elevation = background !== undefined ? 1 : undefined,
+      borderRadius = background !== undefined ? 4 : undefined,
+      font = 'label1',
+      verticalAlignment = 'middle'
+    } = _ref,
+    chartTextProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(ChartText, _objectSpread({
+    background: background,
+    borderRadius: borderRadius,
+    color: color,
+    elevation: elevation,
+    font: font,
+    verticalAlignment: verticalAlignment
+  }, chartTextProps));
+});

package/esm/chart/scrubber/ScrubberProvider.js

@@ -0,0 +1,228 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { isCategoricalScale, ScrubberContext } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A component which encapsulates the ScrubberContext.
+ * It depends on a ChartContext in order to provide accurate mouse tracking.
+ */
+export const ScrubberProvider = _ref => {
+  let {
+    children,
+    svgRef,
+    enableScrubbing,
+    onScrubberPositionChange
+  } = _ref;
+  const chartContext = useCartesianChartContext();
+  if (!chartContext) {
+    throw new Error('ScrubberProvider must be used within a ChartContext');
+  }
+  const {
+    getXScale,
+    getXAxis,
+    series
+  } = chartContext;
+  const [scrubberPosition, setScrubberPosition] = useState(undefined);
+  const getDataIndexFromX = useCallback(mouseX => {
+    const xScale = getXScale();
+    const xAxis = getXAxis();
+    if (!xScale || !xAxis) return 0;
+    if (isCategoricalScale(xScale)) {
+      var _ref2, _xScale$domain, _xScale$domain2, _xScale$bandwidth, _xScale$bandwidth2;
+      const categories = (_ref2 = (_xScale$domain = (_xScale$domain2 = xScale.domain) === null || _xScale$domain2 === void 0 ? void 0 : _xScale$domain2.call(xScale)) !== null && _xScale$domain !== void 0 ? _xScale$domain : xAxis.data) !== null && _ref2 !== void 0 ? _ref2 : [];
+      const bandwidth = (_xScale$bandwidth = (_xScale$bandwidth2 = xScale.bandwidth) === null || _xScale$bandwidth2 === void 0 ? void 0 : _xScale$bandwidth2.call(xScale)) !== null && _xScale$bandwidth !== void 0 ? _xScale$bandwidth : 0;
+      let closestIndex = 0;
+      let closestDistance = Infinity;
+      for (let i = 0; i < categories.length; i++) {
+        const xPos = xScale(i);
+        if (xPos !== undefined) {
+          const distance = Math.abs(mouseX - (xPos + bandwidth / 2));
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = i;
+          }
+        }
+      }
+      return closestIndex;
+    } else {
+      // For numeric scales with axis data, find the nearest data point
+      const axisData = xAxis.data;
+      if (axisData && Array.isArray(axisData) && typeof axisData[0] === 'number') {
+        // We have numeric axis data - find the closest data point
+        const numericData = axisData;
+        let closestIndex = 0;
+        let closestDistance = Infinity;
+        for (let i = 0; i < numericData.length; i++) {
+          const xValue = numericData[i];
+          const xPos = xScale(xValue);
+          if (xPos !== undefined) {
+            const distance = Math.abs(mouseX - xPos);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestIndex = i;
+            }
+          }
+        }
+        return closestIndex;
+      } else {
+        var _domain$min, _domain$max;
+        const xValue = xScale.invert(mouseX);
+        const dataIndex = Math.round(xValue);
+        const domain = xAxis.domain;
+        return Math.max((_domain$min = domain.min) !== null && _domain$min !== void 0 ? _domain$min : 0, Math.min(dataIndex, (_domain$max = domain.max) !== null && _domain$max !== void 0 ? _domain$max : 0));
+      }
+    }
+  }, [getXScale, getXAxis]);
+  const handlePointerMove = useCallback((clientX, target) => {
+    if (!enableScrubbing || !series || series.length === 0) return;
+    const rect = target.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const dataIndex = getDataIndexFromX(x);
+    if (dataIndex !== scrubberPosition) {
+      setScrubberPosition(dataIndex);
+      onScrubberPositionChange === null || onScrubberPositionChange === void 0 || onScrubberPositionChange(dataIndex);
+    }
+  }, [enableScrubbing, series, getDataIndexFromX, scrubberPosition, onScrubberPositionChange]);
+  const handleMouseMove = useCallback(event => {
+    const target = event.currentTarget;
+    handlePointerMove(event.clientX, target);
+  }, [handlePointerMove]);
+  const handleTouchMove = useCallback(event => {
+    if (!event.touches.length) return;
+    // Prevent scrolling while scrubbing
+    event.preventDefault();
+    const touch = event.touches[0];
+    const target = event.currentTarget;
+    handlePointerMove(touch.clientX, target);
+  }, [handlePointerMove]);
+  const handleTouchStart = useCallback(event => {
+    if (!enableScrubbing || !event.touches.length) return;
+    // Handle initial touch
+    const touch = event.touches[0];
+    const target = event.currentTarget;
+    handlePointerMove(touch.clientX, target);
+  }, [enableScrubbing, handlePointerMove]);
+  const handlePointerLeave = useCallback(() => {
+    if (!enableScrubbing) return;
+    setScrubberPosition(undefined);
+    onScrubberPositionChange === null || onScrubberPositionChange === void 0 || onScrubberPositionChange(undefined);
+  }, [enableScrubbing, onScrubberPositionChange]);
+  const handleMouseLeave = handlePointerLeave;
+  const handleTouchEnd = handlePointerLeave;
+  const handleKeyDown = useCallback(event => {
+    if (!enableScrubbing) return;
+    const xScale = getXScale();
+    const xAxis = getXAxis();
+    if (!xScale || !xAxis) return;
+    const isBand = isCategoricalScale(xScale);
+
+    // Determine the actual data indices we can navigate to
+    let minIndex;
+    let maxIndex;
+    let dataPoints;
+    if (isBand) {
+      var _ref3, _xScale$domain3, _xScale$domain4;
+      // For categorical scales, use the categories
+      const categories = (_ref3 = (_xScale$domain3 = (_xScale$domain4 = xScale.domain) === null || _xScale$domain4 === void 0 ? void 0 : _xScale$domain4.call(xScale)) !== null && _xScale$domain3 !== void 0 ? _xScale$domain3 : xAxis.data) !== null && _ref3 !== void 0 ? _ref3 : [];
+      minIndex = 0;
+      maxIndex = Math.max(0, categories.length - 1);
+      dataPoints = categories.length;
+    } else {
+      // For numeric scales, check if we have specific data points
+      const axisData = xAxis.data;
+      if (axisData && Array.isArray(axisData)) {
+        // We have specific data points - use their indices
+        minIndex = 0;
+        maxIndex = Math.max(0, axisData.length - 1);
+        dataPoints = axisData.length;
+      } else {
+        var _domain$min2, _domain$max2;
+        // Fall back to domain-based navigation for continuous scales without specific data
+        const domain = xAxis.domain;
+        minIndex = (_domain$min2 = domain.min) !== null && _domain$min2 !== void 0 ? _domain$min2 : 0;
+        maxIndex = (_domain$max2 = domain.max) !== null && _domain$max2 !== void 0 ? _domain$max2 : 0;
+        dataPoints = maxIndex - minIndex + 1;
+      }
+    }
+    const currentIndex = scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : minIndex;
+    const dataRange = maxIndex - minIndex;
+
+    // Multi-step jump when shift is held (10% of data range, minimum 1, maximum 10)
+    const multiSkip = event.shiftKey;
+    const stepSize = multiSkip ? Math.min(10, Math.max(1, Math.floor(dataRange * 0.1))) : 1;
+    let newIndex;
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        newIndex = Math.max(minIndex, currentIndex - stepSize);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        newIndex = Math.min(maxIndex, currentIndex + stepSize);
+        break;
+      case 'Home':
+        event.preventDefault();
+        newIndex = minIndex;
+        break;
+      case 'End':
+        event.preventDefault();
+        newIndex = maxIndex;
+        break;
+      case 'Escape':
+        event.preventDefault();
+        newIndex = undefined; // Clear highlighting
+        break;
+      default:
+        return;
+      // Don't handle other keys
+    }
+    if (newIndex !== scrubberPosition) {
+      setScrubberPosition(newIndex);
+      onScrubberPositionChange === null || onScrubberPositionChange === void 0 || onScrubberPositionChange(newIndex);
+    }
+  }, [enableScrubbing, getXScale, getXAxis, scrubberPosition, onScrubberPositionChange]);
+  const handleBlur = useCallback(() => {
+    if (!enableScrubbing || scrubberPosition === undefined) return;
+    setScrubberPosition(undefined);
+    onScrubberPositionChange === null || onScrubberPositionChange === void 0 || onScrubberPositionChange(undefined);
+  }, [enableScrubbing, onScrubberPositionChange, scrubberPosition]);
+
+  // Attach event listeners to SVG element
+  useEffect(() => {
+    if (!(svgRef !== null && svgRef !== void 0 && svgRef.current) || !enableScrubbing) return;
+    const svg = svgRef.current;
+
+    // Add event listeners
+    svg.addEventListener('mousemove', handleMouseMove);
+    svg.addEventListener('mouseleave', handleMouseLeave);
+    svg.addEventListener('touchstart', handleTouchStart, {
+      passive: false
+    });
+    svg.addEventListener('touchmove', handleTouchMove, {
+      passive: false
+    });
+    svg.addEventListener('touchend', handleTouchEnd);
+    svg.addEventListener('touchcancel', handleTouchEnd);
+    svg.addEventListener('keydown', handleKeyDown);
+    svg.addEventListener('blur', handleBlur);
+    return () => {
+      svg.removeEventListener('mousemove', handleMouseMove);
+      svg.removeEventListener('mouseleave', handleMouseLeave);
+      svg.removeEventListener('touchstart', handleTouchStart);
+      svg.removeEventListener('touchmove', handleTouchMove);
+      svg.removeEventListener('touchend', handleTouchEnd);
+      svg.removeEventListener('touchcancel', handleTouchEnd);
+      svg.removeEventListener('keydown', handleKeyDown);
+      svg.removeEventListener('blur', handleBlur);
+    };
+  }, [svgRef, enableScrubbing, handleMouseMove, handleMouseLeave, handleTouchStart, handleTouchMove, handleTouchEnd, handleKeyDown, handleBlur]);
+  const contextValue = useMemo(() => ({
+    enableScrubbing: !!enableScrubbing,
+    scrubberPosition,
+    onScrubberPositionChange: setScrubberPosition
+  }), [enableScrubbing, scrubberPosition]);
+  return /*#__PURE__*/_jsx(ScrubberContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};

package/esm/chart/scrubber/index.js

@@ -0,0 +1,2 @@
+// Only export Scrubber component
+export * from './Scrubber';

package/esm/chart/text/ChartText.js

@@ -0,0 +1,236 @@
+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, useEffect, useMemo, useRef, useState } from 'react';
+import { cx } from '@coinbase/cds-web';
+import { Box } from '@coinbase/cds-web/layout';
+import { Text } from '@coinbase/cds-web/typography';
+import { m as motion } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getChartInset } from '../utils';
+
+/**
+ * The supported content types for ChartText.
+ */
+
+/**
+ * Horizontal alignment options for chart text.
+ */
+
+/**
+ * Vertical alignment options for chart text.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Get text anchor based on horizontal alignment.
+ */
+const getTextAnchor = alignment => {
+  switch (alignment) {
+    case 'left':
+      return 'start';
+    case 'center':
+      return 'middle';
+    case 'right':
+      return 'end';
+  }
+};
+
+/**
+ * Get dominant baseline based on vertical alignment.
+ */
+const getDominantBaseline = alignment => {
+  switch (alignment) {
+    case 'top':
+      return 'hanging';
+    case 'middle':
+      return 'central';
+    case 'bottom':
+      return 'ideographic';
+  }
+};
+export const ChartText = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    x,
+    y,
+    horizontalAlignment = 'center',
+    verticalAlignment = 'middle',
+    dx,
+    dy,
+    disableRepositioning,
+    bounds,
+    opacity,
+    testID,
+    font = 'label2',
+    fontFamily,
+    fontSize,
+    fontWeight,
+    elevation,
+    color = 'var(--color-fgMuted)',
+    background = elevation && elevation > 0 ? 'var(--color-bg)' : 'transparent',
+    borderRadius,
+    inset: insetInput,
+    onDimensionsChange,
+    style,
+    styles,
+    className,
+    classNames
+  } = _ref;
+  const {
+    animate,
+    width: chartWidth,
+    height: chartHeight
+  } = useCartesianChartContext();
+  const fullChartBounds = useMemo(() => ({
+    x: 0,
+    y: 0,
+    width: chartWidth,
+    height: chartHeight
+  }), [chartWidth, chartHeight]);
+  const textRef = useRef(null);
+  const [textBBox, setTextBBox] = useState(null);
+  const isDimensionsReady = disableRepositioning || textRef.current !== null;
+  const backgroundRectDimensions = useMemo(() => {
+    if (!textBBox) {
+      return null;
+    }
+    const inset = getChartInset(insetInput);
+    return {
+      x: textBBox.x - inset.left,
+      y: textBBox.y - inset.top,
+      width: textBBox.width + inset.left + inset.right,
+      height: textBBox.height + inset.top + inset.bottom
+    };
+  }, [textBBox, insetInput]);
+  const overflowAmount = useMemo(() => {
+    if (disableRepositioning) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    const parentBounds = bounds !== null && bounds !== void 0 ? bounds : fullChartBounds;
+    if (!textBBox || !parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    let x = 0;
+    let y = 0;
+
+    // X-axis overflow
+    if (textBBox.x < parentBounds.x) {
+      x = parentBounds.x - textBBox.x; // positive = shift right
+    } else if (textBBox.x + textBBox.width > parentBounds.x + parentBounds.width) {
+      x = parentBounds.x + parentBounds.width - (textBBox.x + textBBox.width); // negative = shift left
+    }
+
+    // Y-axis overflow
+    if (textBBox.y < parentBounds.y) {
+      y = parentBounds.y - textBBox.y; // positive = shift down
+    } else if (textBBox.y + textBBox.height > parentBounds.y + parentBounds.height) {
+      y = parentBounds.y + parentBounds.height - (textBBox.y + textBBox.height); // negative = shift up
+    }
+    return {
+      x,
+      y
+    };
+  }, [textBBox, fullChartBounds, bounds, disableRepositioning]);
+
+  // Compose the final reported rect including any overflow translation applied
+  const reportedRect = useMemo(() => {
+    if (!backgroundRectDimensions) return null;
+    return {
+      x: backgroundRectDimensions.x + overflowAmount.x,
+      y: backgroundRectDimensions.y + overflowAmount.y,
+      width: backgroundRectDimensions.width,
+      height: backgroundRectDimensions.height
+    };
+  }, [backgroundRectDimensions, overflowAmount.x, overflowAmount.y]);
+
+  // send latest calculated dimensions (adjusted for translation) to parent
+  useEffect(() => {
+    if (onDimensionsChange && reportedRect !== null) {
+      onDimensionsChange(reportedRect);
+    }
+  }, [reportedRect, onDimensionsChange]);
+  useEffect(() => {
+    if (textRef.current) {
+      const observer = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          setTextBBox(entry.target.getBBox());
+        }
+      });
+      observer.observe(textRef.current);
+
+      // Cleanup function
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, []);
+  const textAnchor = useMemo(() => getTextAnchor(horizontalAlignment), [horizontalAlignment]);
+  const dominantBaseline = useMemo(() => getDominantBaseline(verticalAlignment), [verticalAlignment]);
+
+  // forces state update the bounding box when any properties that can affect the bounding box change
+  useEffect(() => {
+    if (textRef.current) {
+      setTextBBox(textRef.current.getBBox());
+    }
+  }, [textAnchor, dominantBaseline, dx, dy, x, y]);
+  const containerStyle = useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), {}, {
+    transform: "translate(".concat(overflowAmount.x, "px, ").concat(overflowAmount.y, "px)")
+  }), [overflowAmount.x, overflowAmount.y, style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  return /*#__PURE__*/_jsx(Box, {
+    "aria-hidden": "true",
+    as: "g",
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    opacity: opacity,
+    style: containerStyle,
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(motion.g, {
+      animate: {
+        opacity: isDimensionsReady ? 1 : 0
+      },
+      transition: animate ? {
+        duration: 0.2,
+        ease: 'easeOut'
+      } : undefined,
+      children: [/*#__PURE__*/_jsx(Box, {
+        as: "rect",
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.backgroundRect,
+        fill: background,
+        filter: elevation && elevation > 0 ? "drop-shadow(var(--shadow-elevation".concat(elevation, "))") : undefined,
+        height: backgroundRectDimensions === null || backgroundRectDimensions === void 0 ? void 0 : backgroundRectDimensions.height,
+        rx: borderRadius,
+        ry: borderRadius,
+        style: styles === null || styles === void 0 ? void 0 : styles.backgroundRect,
+        width: backgroundRectDimensions === null || backgroundRectDimensions === void 0 ? void 0 : backgroundRectDimensions.width,
+        x: backgroundRectDimensions === null || backgroundRectDimensions === void 0 ? void 0 : backgroundRectDimensions.x,
+        y: backgroundRectDimensions === null || backgroundRectDimensions === void 0 ? void 0 : backgroundRectDimensions.y
+      }), /*#__PURE__*/_jsx(Text, {
+        ref: textRef,
+        as: "text",
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.text,
+        dominantBaseline: dominantBaseline,
+        dx: dx,
+        dy: dy,
+        fill: color,
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        style: styles === null || styles === void 0 ? void 0 : styles.text,
+        textAnchor: textAnchor,
+        x: x,
+        y: y,
+        children: /*#__PURE__*/_jsx("tspan", {
+          children: children
+        })
+      })]
+    })
+  });
+});