@coinbase/cds-web 8.66.1 → 9.0.0-rc.1

package/esm/visualizations/chart/scrubber/ScrubberBeaconGroup.js

@@ -0,0 +1,190 @@
+import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from 'react';
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import { useCartesianChartContext } from '../ChartProvider';
+import { evaluateGradientAtValue, getGradientAxis, getGradientConfig, useScrubberContext } from '../utils';
+import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Helper component to calculate beacon data for a specific series
+const BeaconWithData = /*#__PURE__*/memo(_ref => {
+  let {
+    seriesId,
+    dataIndex,
+    dataIndexValue,
+    isIdle,
+    BeaconComponent,
+    idlePulse,
+    animate,
+    transitions,
+    className,
+    style,
+    testID,
+    beaconRef,
+    stroke
+  } = _ref;
+  const {
+    layout,
+    getSeries,
+    getSeriesData,
+    getXScale,
+    getYScale,
+    getXAxis,
+    getYAxis
+  } = useCartesianChartContext();
+  const series = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
+  const sourceData = useMemo(() => getSeriesData(seriesId), [getSeriesData, seriesId]);
+  const gradient = series === null || series === void 0 ? void 0 : series.gradient;
+
+  // Get dataValue from series data
+  const dataValue = useMemo(() => {
+    if (sourceData && dataIndex >= 0 && dataIndex < sourceData.length) {
+      const value = sourceData[dataIndex];
+      if (typeof value === 'number') {
+        return value;
+      } else if (Array.isArray(value)) {
+        const validValues = value.filter(val => val !== null);
+        if (validValues.length >= 1) {
+          return validValues[validValues.length - 1];
+        }
+      }
+    }
+    return undefined;
+  }, [sourceData, dataIndex]);
+
+  // Evaluate gradient color
+  const color = useMemo(() => {
+    var _series$color, _series$color2;
+    if (dataValue === undefined) return (_series$color = series === null || series === void 0 ? void 0 : series.color) !== null && _series$color !== void 0 ? _series$color : 'var(--color-fgPrimary)';
+    if (gradient) {
+      const xScale = getXScale(series === null || series === void 0 ? void 0 : series.xAxisId);
+      const yScale = getYScale(series === null || series === void 0 ? void 0 : series.yAxisId);
+      if (xScale && yScale) {
+        const categoryAxisIsX = layout !== 'horizontal';
+        const gradientAxis = getGradientAxis(gradient, layout);
+        const gradientScale = gradientAxis === 'x' ? xScale : yScale;
+        const stops = getGradientConfig(gradient, xScale, yScale, layout);
+        if (stops) {
+          // Determine the correct data value to evaluate against based on gradient axis and layout
+          let evalValue;
+          if (gradientAxis === 'x') {
+            // X-axis gradient: In vertical it's the index, in horizontal it's the value.
+            evalValue = categoryAxisIsX ? dataIndexValue : dataValue;
+          } else {
+            // Y-axis gradient: In vertical it's the value, in horizontal it's the index.
+            evalValue = categoryAxisIsX ? dataValue : dataIndexValue;
+          }
+          const evaluatedColor = evaluateGradientAtValue(stops, evalValue, gradientScale);
+          if (evaluatedColor) {
+            return evaluatedColor;
+          }
+        }
+      }
+    }
+    return (_series$color2 = series === null || series === void 0 ? void 0 : series.color) !== null && _series$color2 !== void 0 ? _series$color2 : 'var(--color-fgPrimary)';
+  }, [gradient, dataIndexValue, dataValue, series === null || series === void 0 ? void 0 : series.color, series === null || series === void 0 ? void 0 : series.xAxisId, series === null || series === void 0 ? void 0 : series.yAxisId, getXScale, getYScale, layout]);
+  if (dataValue === undefined) return null;
+  const categoryAxisIsX = layout !== 'horizontal';
+  return /*#__PURE__*/_jsx(BeaconComponent, {
+    ref: beaconRef,
+    animate: animate,
+    className: className,
+    color: color,
+    dataX: categoryAxisIsX ? dataIndexValue : dataValue,
+    dataY: categoryAxisIsX ? dataValue : dataIndexValue,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: seriesId,
+    stroke: stroke,
+    style: style,
+    testID: testID,
+    transitions: transitions
+  });
+});
+export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    seriesIds,
+    idlePulse,
+    transitions,
+    BeaconComponent = DefaultScrubberBeacon,
+    className,
+    style,
+    testID,
+    stroke
+  } = _ref2;
+  const ScrubberBeaconRefs = useRefMap();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    layout,
+    getXScale,
+    getYScale,
+    getXAxis,
+    getYAxis,
+    dataLength,
+    series,
+    animate
+  } = useCartesianChartContext();
+
+  // Expose imperative handle with pulse method
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      Object.values(ScrubberBeaconRefs.refs).forEach(beaconRef => {
+        beaconRef === null || beaconRef === void 0 || beaconRef.pulse();
+      });
+    }
+  }));
+  const filteredSeries = useMemo(() => {
+    var _series$filter;
+    return (_series$filter = series === null || series === void 0 ? void 0 : series.filter(s => seriesIds.includes(s.id))) !== null && _series$filter !== void 0 ? _series$filter : [];
+  }, [series, seriesIds]);
+  const {
+    dataIndexValue,
+    dataIndex
+  } = useMemo(() => {
+    const categoryAxisIsX = layout !== 'horizontal';
+    const indexScale = categoryAxisIsX ? getXScale() : getYScale();
+    const indexAxis = categoryAxisIsX ? getXAxis() : getYAxis();
+    if (!indexScale) return {
+      dataIndexValue: undefined,
+      dataIndex: undefined
+    };
+    const dataIndex = scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, dataLength - 1);
+
+    // Convert index to actual data value if axis has data
+    let dataIndexValue;
+    if (indexAxis !== null && indexAxis !== void 0 && indexAxis.data && Array.isArray(indexAxis.data) && indexAxis.data[dataIndex] !== undefined) {
+      const val = indexAxis.data[dataIndex];
+      dataIndexValue = typeof val === 'string' ? dataIndex : val;
+    } else {
+      dataIndexValue = dataIndex;
+    }
+    return {
+      dataIndexValue,
+      dataIndex
+    };
+  }, [getXScale, getYScale, getXAxis, getYAxis, scrubberPosition, dataLength, layout]);
+  const isIdle = scrubberPosition === undefined;
+  const createBeaconRef = useCallback(seriesId => {
+    return beaconRef => {
+      if (beaconRef) {
+        ScrubberBeaconRefs.registerRef(seriesId, beaconRef);
+      }
+    };
+  }, [ScrubberBeaconRefs]);
+  if (dataIndexValue === undefined || dataIndex === undefined) return null;
+  return filteredSeries.map(s => /*#__PURE__*/_jsx(BeaconWithData, {
+    BeaconComponent: BeaconComponent,
+    animate: animate,
+    beaconRef: createBeaconRef(s.id),
+    className: className,
+    dataIndex: dataIndex,
+    dataIndexValue: dataIndexValue,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: s.id,
+    stroke: stroke,
+    style: style,
+    testID: testID ? "".concat(testID !== null && testID !== void 0 ? testID : 'beacon', "-").concat(s.id) : undefined,
+    transitions: transitions
+  }, s.id));
+}));

package/esm/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -0,0 +1,209 @@
+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 { memo, useCallback, useMemo, useState } from 'react';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultTransition, getPointOnScale, getTransition, instantTransition, useScrubberContext } from '../utils';
+import { calculateLabelYPositions, getLabelPosition } from '../utils/scrubber';
+import { DefaultScrubberBeaconLabel } from './DefaultScrubberBeaconLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PositionedLabel = /*#__PURE__*/memo(_ref => {
+  let {
+    index,
+    positions,
+    position,
+    label,
+    color,
+    seriesId,
+    onDimensionsChange,
+    BeaconLabelComponent,
+    labelHorizontalOffset,
+    labelFont,
+    updateTransition,
+    className,
+    style
+  } = _ref;
+  const pos = positions[index];
+
+  // Don't render if position is null (invalid data)
+  if (!pos) {
+    return null;
+  }
+  const x = pos.x;
+  const y = pos.y;
+  const dx = position === 'right' ? labelHorizontalOffset : -labelHorizontalOffset;
+  const horizontalAlignment = position === 'right' ? 'left' : 'right';
+  return /*#__PURE__*/_jsx(BeaconLabelComponent, {
+    className: className,
+    color: color,
+    dx: dx,
+    font: labelFont,
+    horizontalAlignment: horizontalAlignment,
+    label: label,
+    onDimensionsChange: d => onDimensionsChange(seriesId, d),
+    seriesId: seriesId,
+    style: style,
+    transition: updateTransition !== null && updateTransition !== void 0 ? updateTransition : instantTransition,
+    x: x,
+    y: y
+  });
+});
+export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
+  let {
+    labels,
+    labelMinGap = 4,
+    labelHorizontalOffset = 16,
+    labelFont,
+    labelPreferredSide = 'right',
+    BeaconLabelComponent = DefaultScrubberBeaconLabel,
+    transitions,
+    className,
+    style
+  } = _ref2;
+  const {
+    getSeries,
+    getSeriesData,
+    getXScale,
+    getYScale,
+    getXAxis,
+    drawingArea,
+    dataLength,
+    animate
+  } = useCartesianChartContext();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const isIdle = scrubberPosition === undefined;
+  const prevIsIdle = usePreviousValue(isIdle);
+  const isIdleTransition = prevIsIdle !== undefined && isIdle !== prevIsIdle;
+  const updateTransition = useMemo(() => {
+    if (isIdleTransition) return instantTransition;
+    if (!isIdle) return instantTransition;
+    return getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.update, animate, defaultTransition);
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.update, isIdle, animate, isIdleTransition]);
+  const [labelDimensions, setLabelDimensions] = useState({});
+  const handleDimensionsChange = useCallback((seriesId, dimensions) => {
+    setLabelDimensions(prev => {
+      const existing = prev[seriesId];
+      if (existing && existing.width === dimensions.width && existing.height === dimensions.height) {
+        return prev;
+      }
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        [seriesId]: dimensions
+      });
+    });
+  }, []);
+  const seriesInfo = useMemo(() => {
+    return labels.map(label => {
+      const series = getSeries(label.seriesId);
+      if (!series) return null;
+      const sourceData = getSeriesData(label.seriesId);
+      const yScale = getYScale(series.yAxisId);
+      return {
+        seriesId: label.seriesId,
+        sourceData,
+        yScale
+      };
+    }).filter(info => info !== null);
+  }, [labels, getSeries, getSeriesData, getYScale]);
+  const xScale = getXScale();
+  const xAxis = getXAxis();
+  const dataIndex = useMemo(() => {
+    return scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, dataLength - 1);
+  }, [scrubberPosition, dataLength]);
+  const dataX = useMemo(() => {
+    if (xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex] !== undefined) {
+      const dataValue = xAxis.data[dataIndex];
+      return typeof dataValue === 'string' ? dataIndex : dataValue;
+    }
+    return dataIndex;
+  }, [xAxis, dataIndex]);
+  const allLabelPositions = useMemo(() => {
+    if (!xScale || dataX === undefined) return [];
+    const sharedPixelX = getPointOnScale(dataX, xScale);
+    const desiredPositions = seriesInfo.map(info => {
+      let dataY;
+      if (info.yScale) {
+        if (info.sourceData && dataIndex !== undefined && dataIndex >= 0 && dataIndex < info.sourceData.length) {
+          const dataValue = info.sourceData[dataIndex];
+          if (Array.isArray(dataValue)) {
+            const validValues = dataValue.filter(val => val !== null);
+            if (validValues.length >= 1) {
+              dataY = validValues[validValues.length - 1];
+            }
+          }
+        }
+      }
+      if (dataY !== undefined && info.yScale) {
+        return {
+          seriesId: info.seriesId,
+          x: sharedPixelX,
+          desiredY: getPointOnScale(dataY, info.yScale)
+        };
+      }
+
+      // Return null for invalid data
+      return null;
+    });
+    const maxLabelHeight = Math.max(...Object.values(labelDimensions).map(dim => dim.height));
+    const maxLabelWidth = Math.max(...Object.values(labelDimensions).map(dim => dim.width));
+
+    // Only apply collision detection to valid positions
+    const validPositions = desiredPositions.filter(pos => pos !== null);
+
+    // Convert to LabelDimension format expected by utility
+    const dimensions = validPositions.map(pos => {
+      var _trackedDimensions$wi, _trackedDimensions$he;
+      const trackedDimensions = labelDimensions[pos.seriesId];
+      return {
+        seriesId: pos.seriesId,
+        width: (_trackedDimensions$wi = trackedDimensions === null || trackedDimensions === void 0 ? void 0 : trackedDimensions.width) !== null && _trackedDimensions$wi !== void 0 ? _trackedDimensions$wi : maxLabelWidth,
+        height: (_trackedDimensions$he = trackedDimensions === null || trackedDimensions === void 0 ? void 0 : trackedDimensions.height) !== null && _trackedDimensions$he !== void 0 ? _trackedDimensions$he : maxLabelHeight,
+        preferredX: pos.x,
+        preferredY: pos.desiredY
+      };
+    });
+
+    // Calculate Y positions with collision resolution for valid positions only
+    const yPositions = calculateLabelYPositions(dimensions, drawingArea, maxLabelHeight, labelMinGap);
+
+    // Return all positions (including null ones)
+    return desiredPositions.map(pos => {
+      var _yPositions$get;
+      if (!pos) return null;
+      return {
+        seriesId: pos.seriesId,
+        x: pos.x,
+        y: (_yPositions$get = yPositions.get(pos.seriesId)) !== null && _yPositions$get !== void 0 ? _yPositions$get : pos.desiredY
+      };
+    });
+  }, [seriesInfo, dataIndex, dataX, xScale, labelDimensions, drawingArea, labelMinGap]);
+  const currentPosition = useMemo(() => {
+    if (!xScale || dataX === undefined) return labelPreferredSide;
+    const pixelX = getPointOnScale(dataX, xScale);
+    const maxWidth = Math.max(...Object.values(labelDimensions).map(dim => dim.width));
+    return getLabelPosition(pixelX, maxWidth, drawingArea, labelHorizontalOffset, labelPreferredSide);
+  }, [dataX, xScale, labelDimensions, drawingArea, labelHorizontalOffset, labelPreferredSide]);
+  return seriesInfo.map((info, index) => {
+    const labelInfo = labels.find(label => label.seriesId === info.seriesId);
+    if (!labelInfo) return;
+    return /*#__PURE__*/_jsx(PositionedLabel, {
+      BeaconLabelComponent: BeaconLabelComponent,
+      className: className,
+      color: labelInfo.color,
+      index: index,
+      label: labelInfo.label,
+      labelFont: labelFont,
+      labelHorizontalOffset: labelHorizontalOffset,
+      onDimensionsChange: handleDimensionsChange,
+      position: currentPosition,
+      positions: allLabelPositions,
+      seriesId: info.seriesId,
+      style: style,
+      updateTransition: updateTransition
+    }, info.seriesId);
+  });
+});

package/esm/visualizations/chart/scrubber/ScrubberProvider.js

@@ -0,0 +1,233 @@
+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 {
+    layout,
+    getXScale,
+    getYScale,
+    getXAxis,
+    getYAxis,
+    series
+  } = chartContext;
+  const [scrubberPosition, setScrubberPosition] = useState(undefined);
+  const getDataIndexFromPosition = useCallback(mousePosition => {
+    const categoryAxisIsX = layout !== 'horizontal';
+    const categoryScale = categoryAxisIsX ? getXScale() : getYScale();
+    const categoryAxis = categoryAxisIsX ? getXAxis() : getYAxis();
+    if (!categoryScale || !categoryAxis) return 0;
+    if (isCategoricalScale(categoryScale)) {
+      var _ref2, _categoryScale$domain, _categoryScale$domain2, _categoryScale$bandwi, _categoryScale$bandwi2;
+      const categories = (_ref2 = (_categoryScale$domain = (_categoryScale$domain2 = categoryScale.domain) === null || _categoryScale$domain2 === void 0 ? void 0 : _categoryScale$domain2.call(categoryScale)) !== null && _categoryScale$domain !== void 0 ? _categoryScale$domain : categoryAxis.data) !== null && _ref2 !== void 0 ? _ref2 : [];
+      const bandwidth = (_categoryScale$bandwi = (_categoryScale$bandwi2 = categoryScale.bandwidth) === null || _categoryScale$bandwi2 === void 0 ? void 0 : _categoryScale$bandwi2.call(categoryScale)) !== null && _categoryScale$bandwi !== void 0 ? _categoryScale$bandwi : 0;
+      let closestIndex = 0;
+      let closestDistance = Infinity;
+      for (let i = 0; i < categories.length; i++) {
+        const pos = categoryScale(i);
+        if (pos !== undefined) {
+          const distance = Math.abs(mousePosition - (pos + 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 = categoryAxis.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 dataValue = numericData[i];
+          const pos = categoryScale(dataValue);
+          if (pos !== undefined) {
+            const distance = Math.abs(mousePosition - pos);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestIndex = i;
+            }
+          }
+        }
+        return closestIndex;
+      } else {
+        var _domain$min, _domain$max;
+        const dataValue = categoryScale.invert(mousePosition);
+        const dataIndexVal = Math.round(dataValue);
+        const domain = categoryAxis.domain;
+        return Math.max((_domain$min = domain.min) !== null && _domain$min !== void 0 ? _domain$min : 0, Math.min(dataIndexVal, (_domain$max = domain.max) !== null && _domain$max !== void 0 ? _domain$max : 0));
+      }
+    }
+  }, [layout, getXScale, getYScale, getXAxis, getYAxis]);
+  const handlePointerMove = useCallback((clientX, clientY, target) => {
+    if (!enableScrubbing || !series || series.length === 0) return;
+    const rect = target.getBoundingClientRect();
+    const position = layout === 'horizontal' ? clientY - rect.top : clientX - rect.left;
+    const dataIndex = getDataIndexFromPosition(position);
+    if (dataIndex !== scrubberPosition) {
+      setScrubberPosition(dataIndex);
+      onScrubberPositionChange === null || onScrubberPositionChange === void 0 || onScrubberPositionChange(dataIndex);
+    }
+  }, [enableScrubbing, series, layout, getDataIndexFromPosition, scrubberPosition, onScrubberPositionChange]);
+  const handleMouseMove = useCallback(event => {
+    const target = event.currentTarget;
+    handlePointerMove(event.clientX, event.clientY, 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, touch.clientY, 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, touch.clientY, 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 categoryAxisIsX = layout !== 'horizontal';
+    const categoryScale = categoryAxisIsX ? getXScale() : getYScale();
+    const categoryAxis = categoryAxisIsX ? getXAxis() : getYAxis();
+    if (!categoryScale || !categoryAxis) return;
+    const isBand = isCategoricalScale(categoryScale);
+
+    // Determine the actual data indices we can navigate to
+    let minIndex;
+    let maxIndex;
+    let dataPoints;
+    if (isBand) {
+      var _ref3, _categoryScale$domain3, _categoryScale$domain4;
+      // For categorical scales, use the categories
+      const categories = (_ref3 = (_categoryScale$domain3 = (_categoryScale$domain4 = categoryScale.domain) === null || _categoryScale$domain4 === void 0 ? void 0 : _categoryScale$domain4.call(categoryScale)) !== null && _categoryScale$domain3 !== void 0 ? _categoryScale$domain3 : categoryAxis.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 = categoryAxis.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 = categoryAxis.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 categoryAxisIsX ? 'ArrowLeft' : 'ArrowUp':
+        event.preventDefault();
+        newIndex = Math.max(minIndex, currentIndex - stepSize);
+        break;
+      case categoryAxisIsX ? 'ArrowRight' : 'ArrowDown':
+        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, layout, getXScale, getYScale, getXAxis, getYAxis, 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/visualizations/chart/scrubber/index.js

@@ -0,0 +1,4 @@
+export * from './DefaultScrubberBeacon';
+export * from './DefaultScrubberBeaconLabel';
+export * from './DefaultScrubberLabel';
+export * from './Scrubber';