@coinbase/cds-web-visualization 3.4.0-beta.8 → 3.4.0

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -9,34 +9,39 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   let {
     seriesId,
     dataIndex,
-    dataX,
+    dataIndexValue,
     isIdle,
     BeaconComponent,
     idlePulse,
+    animate,
     transitions,
     className,
     style,
     testID,
-    beaconRef
+    beaconRef,
+    stroke
   } = _ref;
   const {
+    layout,
     getSeries,
     getSeriesData,
     getXScale,
-    getYScale
+    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 dataY from series data
-  const dataY = useMemo(() => {
+  // Get dataValue from series data
+  const dataValue = useMemo(() => {
     if (sourceData && dataIndex >= 0 && dataIndex < sourceData.length) {
-      const dataValue = sourceData[dataIndex];
-      if (typeof dataValue === 'number') {
-        return dataValue;
-      } else if (Array.isArray(dataValue)) {
-        const validValues = dataValue.filter(val => val !== null);
+      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];
         }
@@ -48,18 +53,27 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   // Evaluate gradient color
   const color = useMemo(() => {
     var _series$color, _series$color2;
-    if (dataY === undefined) return (_series$color = series === null || series === void 0 ? void 0 : series.color) !== null && _series$color !== void 0 ? _series$color : 'var(--color-fgPrimary)';
+    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();
+      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 gradientScale = gradient.axis === 'x' ? xScale : yScale;
         const stops = getGradientConfig(gradient, xScale, yScale);
         if (stops) {
           var _gradient$axis;
           const gradientAxis = (_gradient$axis = gradient.axis) !== null && _gradient$axis !== void 0 ? _gradient$axis : 'y';
-          const dataValue = gradientAxis === 'x' ? dataX : dataY;
-          const evaluatedColor = evaluateGradientAtValue(stops, dataValue, gradientScale);
+          // 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;
           }
@@ -67,17 +81,20 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
       }
     }
     return (_series$color2 = series === null || series === void 0 ? void 0 : series.color) !== null && _series$color2 !== void 0 ? _series$color2 : 'var(--color-fgPrimary)';
-  }, [gradient, dataX, dataY, series === null || series === void 0 ? void 0 : series.color, series === null || series === void 0 ? void 0 : series.yAxisId, getXScale, getYScale]);
-  if (dataY === undefined) return null;
+  }, [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: dataX,
-    dataY: dataY,
+    dataX: categoryAxisIsX ? dataIndexValue : dataValue,
+    dataY: categoryAxisIsX ? dataValue : dataIndexValue,
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: seriesId,
+    stroke: stroke,
     style: style,
     testID: testID,
     transitions: transitions
@@ -91,17 +108,22 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     BeaconComponent = DefaultScrubberBeacon,
     className,
     style,
-    testID
+    testID,
+    stroke
   } = _ref2;
   const ScrubberBeaconRefs = useRefMap();
   const {
     scrubberPosition
   } = useScrubberContext();
   const {
+    layout,
     getXScale,
+    getYScale,
     getXAxis,
+    getYAxis,
     dataLength,
-    series
+    series,
+    animate
   } = useCartesianChartContext();
 
   // Expose imperative handle with pulse method
@@ -117,30 +139,31 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     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 {
-    dataX,
+    dataIndexValue,
     dataIndex
   } = useMemo(() => {
-    const xScale = getXScale();
-    const xAxis = getXAxis();
-    if (!xScale) return {
-      dataX: undefined,
+    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 x value if axis has data
-    let dataX;
-    if (xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex] !== undefined) {
-      const dataValue = xAxis.data[dataIndex];
-      dataX = typeof dataValue === 'string' ? dataIndex : dataValue;
+    // 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 {
-      dataX = dataIndex;
+      dataIndexValue = dataIndex;
     }
     return {
-      dataX,
+      dataIndexValue,
       dataIndex
     };
-  }, [getXScale, getXAxis, scrubberPosition, dataLength]);
+  }, [getXScale, getYScale, getXAxis, getYAxis, scrubberPosition, dataLength, layout]);
   const isIdle = scrubberPosition === undefined;
   const createBeaconRef = useCallback(seriesId => {
     return beaconRef => {
@@ -149,16 +172,18 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
       }
     };
   }, [ScrubberBeaconRefs]);
-  if (dataX === undefined || dataIndex === undefined) return null;
+  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,
-    dataX: dataX,
+    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

package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -4,8 +4,9 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 { getPointOnScale, useScrubberContext } from '../utils';
+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";
@@ -20,7 +21,10 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     onDimensionsChange,
     BeaconLabelComponent,
     labelHorizontalOffset,
-    labelFont
+    labelFont,
+    updateTransition,
+    className,
+    style
   } = _ref;
   const pos = positions[index];
 
@@ -33,6 +37,7 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
   const dx = position === 'right' ? labelHorizontalOffset : -labelHorizontalOffset;
   const horizontalAlignment = position === 'right' ? 'left' : 'right';
   return /*#__PURE__*/_jsx(BeaconLabelComponent, {
+    className: className,
     color: color,
     dx: dx,
     font: labelFont,
@@ -40,6 +45,8 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     label: label,
     onDimensionsChange: d => onDimensionsChange(seriesId, d),
     seriesId: seriesId,
+    style: style,
+    transition: updateTransition !== null && updateTransition !== void 0 ? updateTransition : instantTransition,
     x: x,
     y: y
   });
@@ -50,7 +57,11 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     labelMinGap = 4,
     labelHorizontalOffset = 16,
     labelFont,
-    BeaconLabelComponent = DefaultScrubberBeaconLabel
+    labelPreferredSide = 'right',
+    BeaconLabelComponent = DefaultScrubberBeaconLabel,
+    transitions,
+    className,
+    style
   } = _ref2;
   const {
     getSeries,
@@ -59,11 +70,20 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     getYScale,
     getXAxis,
     drawingArea,
-    dataLength
+    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 => {
@@ -162,16 +182,17 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     });
   }, [seriesInfo, dataIndex, dataX, xScale, labelDimensions, drawingArea, labelMinGap]);
   const currentPosition = useMemo(() => {
-    if (!xScale || dataX === undefined) return 'right';
+    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);
-  }, [dataX, xScale, labelDimensions, drawingArea, labelHorizontalOffset]);
+    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,
@@ -180,7 +201,9 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
       onDimensionsChange: handleDimensionsChange,
       position: currentPosition,
       positions: allLabelPositions,
-      seriesId: info.seriesId
+      seriesId: info.seriesId,
+      style: style,
+      updateTransition: updateTransition
     }, info.seriesId);
   });
 });

package/esm/chart/scrubber/ScrubberProvider.js

@@ -18,25 +18,29 @@ export const ScrubberProvider = _ref => {
     throw new Error('ScrubberProvider must be used within a ChartContext');
   }
   const {
+    layout,
     getXScale,
+    getYScale,
     getXAxis,
+    getYAxis,
     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;
+  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 xPos = xScale(i);
-        if (xPos !== undefined) {
-          const distance = Math.abs(mouseX - (xPos + bandwidth / 2));
+        const pos = categoryScale(i);
+        if (pos !== undefined) {
+          const distance = Math.abs(mousePosition - (pos + bandwidth / 2));
           if (distance < closestDistance) {
             closestDistance = distance;
             closestIndex = i;
@@ -46,17 +50,17 @@ export const ScrubberProvider = _ref => {
       return closestIndex;
     } else {
       // For numeric scales with axis data, find the nearest data point
-      const axisData = xAxis.data;
+      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 xValue = numericData[i];
-          const xPos = xScale(xValue);
-          if (xPos !== undefined) {
-            const distance = Math.abs(mouseX - xPos);
+          const dataValue = numericData[i];
+          const pos = categoryScale(dataValue);
+          if (pos !== undefined) {
+            const distance = Math.abs(mousePosition - pos);
             if (distance < closestDistance) {
               closestDistance = distance;
               closestIndex = i;
@@ -66,26 +70,26 @@ export const ScrubberProvider = _ref => {
         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));
+        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));
       }
     }
-  }, [getXScale, getXAxis]);
-  const handlePointerMove = useCallback((clientX, target) => {
+  }, [layout, getXScale, getYScale, getXAxis, getYAxis]);
+  const handlePointerMove = useCallback((clientX, clientY, target) => {
     if (!enableScrubbing || !series || series.length === 0) return;
     const rect = target.getBoundingClientRect();
-    const x = clientX - rect.left;
-    const dataIndex = getDataIndexFromX(x);
+    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, getDataIndexFromX, scrubberPosition, onScrubberPositionChange]);
+  }, [enableScrubbing, series, layout, getDataIndexFromPosition, scrubberPosition, onScrubberPositionChange]);
   const handleMouseMove = useCallback(event => {
     const target = event.currentTarget;
-    handlePointerMove(event.clientX, target);
+    handlePointerMove(event.clientX, event.clientY, target);
   }, [handlePointerMove]);
   const handleTouchMove = useCallback(event => {
     if (!event.touches.length) return;
@@ -93,14 +97,14 @@ export const ScrubberProvider = _ref => {
     event.preventDefault();
     const touch = event.touches[0];
     const target = event.currentTarget;
-    handlePointerMove(touch.clientX, target);
+    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, target);
+    handlePointerMove(touch.clientX, touch.clientY, target);
   }, [enableScrubbing, handlePointerMove]);
   const handlePointerLeave = useCallback(() => {
     if (!enableScrubbing) return;
@@ -111,25 +115,26 @@ export const ScrubberProvider = _ref => {
   const handleTouchEnd = handlePointerLeave;
   const handleKeyDown = useCallback(event => {
     if (!enableScrubbing) return;
-    const xScale = getXScale();
-    const xAxis = getXAxis();
-    if (!xScale || !xAxis) return;
-    const isBand = isCategoricalScale(xScale);
+    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, _xScale$domain3, _xScale$domain4;
+      var _ref3, _categoryScale$domain3, _categoryScale$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 : [];
+      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 = xAxis.data;
+      const axisData = categoryAxis.data;
       if (axisData && Array.isArray(axisData)) {
         // We have specific data points - use their indices
         minIndex = 0;
@@ -138,7 +143,7 @@ export const ScrubberProvider = _ref => {
       } else {
         var _domain$min2, _domain$max2;
         // Fall back to domain-based navigation for continuous scales without specific data
-        const domain = xAxis.domain;
+        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;
@@ -152,11 +157,11 @@ export const ScrubberProvider = _ref => {
     const stepSize = multiSkip ? Math.min(10, Math.max(1, Math.floor(dataRange * 0.1))) : 1;
     let newIndex;
     switch (event.key) {
-      case 'ArrowLeft':
+      case categoryAxisIsX ? 'ArrowLeft' : 'ArrowUp':
         event.preventDefault();
         newIndex = Math.max(minIndex, currentIndex - stepSize);
         break;
-      case 'ArrowRight':
+      case categoryAxisIsX ? 'ArrowRight' : 'ArrowDown':
         event.preventDefault();
         newIndex = Math.min(maxIndex, currentIndex + stepSize);
         break;
@@ -180,7 +185,7 @@ export const ScrubberProvider = _ref => {
       setScrubberPosition(newIndex);
       onScrubberPositionChange === null || onScrubberPositionChange === void 0 || onScrubberPositionChange(newIndex);
     }
-  }, [enableScrubbing, getXScale, getXAxis, scrubberPosition, onScrubberPositionChange]);
+  }, [enableScrubbing, layout, getXScale, getYScale, getXAxis, getYAxis, scrubberPosition, onScrubberPositionChange]);
   const handleBlur = useCallback(() => {
     if (!enableScrubbing || scrubberPosition === undefined) return;
     setScrubberPosition(undefined);

package/esm/chart/text/ChartText.js

@@ -10,6 +10,7 @@ import { Text } from '@coinbase/cds-web/typography';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
 import { getChartInset } from '../utils';
+import { accessoryFadeTransitionDuration } from '../utils/transition';
 
 /**
  * The supported content types for ChartText.
@@ -69,7 +70,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     fontWeight,
     elevated,
     color = 'var(--color-fgMuted)',
-    background = elevated ? 'var(--color-bg)' : 'transparent',
+    background = elevated ? 'var(--color-bgElevation1)' : 'transparent',
     borderRadius,
     inset: insetInput,
     onDimensionsChange,
@@ -190,7 +191,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
         opacity: isDimensionsReady ? 1 : 0
       },
       transition: animate ? {
-        duration: 0.2,
+        duration: accessoryFadeTransitionDuration,
         ease: 'easeOut'
       } : undefined,
       children: [/*#__PURE__*/_jsx(Box, {