@coinbase/cds-web-visualization 3.4.0-beta.21 → 3.4.0-beta.23

package/esm/chart/scrubber/Scrubber.js

@@ -50,8 +50,11 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     scrubberPosition
   } = useScrubberContext();
   const {
+    layout,
     getXScale,
+    getYScale,
     getXAxis,
+    getYAxis,
     animate,
     series,
     drawingArea,
@@ -73,30 +76,31 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     return seriesIds;
   }, [series, seriesIds]);
   const {
-    dataX,
+    dataValue,
     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 {
+      dataValue: 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 dataValue;
+    if (indexAxis !== null && indexAxis !== void 0 && indexAxis.data && Array.isArray(indexAxis.data) && indexAxis.data[dataIndex] !== undefined) {
+      const val = indexAxis.data[dataIndex];
+      dataValue = typeof val === 'string' ? dataIndex : val;
     } else {
-      dataX = dataIndex;
+      dataValue = dataIndex;
     }
     return {
-      dataX,
+      dataValue,
       dataIndex
     };
-  }, [getXScale, getXAxis, scrubberPosition, dataLength]);
+  }, [getXScale, getYScale, getXAxis, getYAxis, scrubberPosition, dataLength, layout]);
 
   // Compute resolved accessibility label
   const resolvedAccessibilityLabel = useMemo(() => {
@@ -120,11 +124,12 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     }))) !== null && _series$filter$filter !== void 0 ? _series$filter$filter : [];
   }, [series, filteredSeriesIds]);
   const groupEnterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate]);
-
-  // Check if we have at least the default X scale
-  const defaultXScale = getXScale();
-  if (!defaultXScale) return null;
-  const pixelX = dataX !== undefined && defaultXScale ? getPointOnScale(dataX, defaultXScale) : undefined;
+  const shouldAnimateGroup = animate && groupEnterTransition !== null;
+  const categoryAxisIsX = layout !== 'horizontal';
+  const showBeaconLabels = !hideBeaconLabels && categoryAxisIsX && beaconLabels.length > 0;
+  const indexScale = categoryAxisIsX ? getXScale() : getYScale();
+  if (!indexScale) return null;
+  const pixelPos = dataValue !== undefined && indexScale ? getPointOnScale(dataValue, indexScale) : undefined;
   return /*#__PURE__*/_jsxs(motion.g, _objectSpread(_objectSpread({
     "aria-atomic": "true",
     "aria-label": resolvedAccessibilityLabel,
@@ -132,7 +137,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     "data-component": "scrubber-group",
     "data-testid": testID,
     role: "status"
-  }, animate ? {
+  }, shouldAnimateGroup ? {
     animate: {
       opacity: 1,
       transition: groupEnterTransition
@@ -141,23 +146,22 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       opacity: 0
     }
   } : {}), {}, {
-    children: [!hideOverlay && scrubberPosition !== undefined && pixelX !== undefined && /*#__PURE__*/_jsx("rect", {
+    children: [!hideOverlay && scrubberPosition !== undefined && pixelPos !== undefined && /*#__PURE__*/_jsx("rect", {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.overlay,
       fill: "var(--color-bg)",
-      height: drawingArea.height + overlayOffset * 2,
+      height: categoryAxisIsX ? drawingArea.height + overlayOffset * 2 : drawingArea.y + drawingArea.height - pixelPos + overlayOffset,
       opacity: 0.8,
       style: styles === null || styles === void 0 ? void 0 : styles.overlay,
-      width: drawingArea.x + drawingArea.width - pixelX + overlayOffset,
-      x: pixelX,
-      y: drawingArea.y - overlayOffset
-    }), !hideLine && scrubberPosition !== undefined && dataX !== undefined && /*#__PURE__*/_jsx(ReferenceLine, {
+      width: categoryAxisIsX ? drawingArea.x + drawingArea.width - pixelPos + overlayOffset : drawingArea.width + overlayOffset * 2,
+      x: categoryAxisIsX ? pixelPos : drawingArea.x - overlayOffset,
+      y: categoryAxisIsX ? drawingArea.y - overlayOffset : pixelPos
+    }), !hideLine && scrubberPosition !== undefined && dataValue !== undefined && dataIndex !== undefined && /*#__PURE__*/_jsx(ReferenceLine, _objectSpread({
       LabelComponent: LabelComponent,
       LineComponent: LineComponent,
       classNames: {
         label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
         line: classNames === null || classNames === void 0 ? void 0 : classNames.line
       },
-      dataX: dataX,
       label: typeof label === 'function' ? label(dataIndex) : label,
       labelBoundsInset: labelBoundsInset,
       labelElevated: labelElevated,
@@ -167,7 +171,11 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
         label: styles === null || styles === void 0 ? void 0 : styles.label,
         line: styles === null || styles === void 0 ? void 0 : styles.line
       }
-    }), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
+    }, categoryAxisIsX ? {
+      dataX: dataValue
+    } : {
+      dataY: dataValue
+    })), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
       ref: beaconGroupRef,
       BeaconComponent: BeaconComponent,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.beacon,
@@ -177,7 +185,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       style: styles === null || styles === void 0 ? void 0 : styles.beacon,
       testID: testID,
       transitions: transitions
-    }), !hideBeaconLabels && beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+    }), showBeaconLabels && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.beaconLabel,
       labelFont: beaconLabelFont,

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -9,7 +9,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   let {
     seriesId,
     dataIndex,
-    dataX,
+    dataIndexValue,
     isIdle,
     BeaconComponent,
     idlePulse,
@@ -22,23 +22,26 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     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];
         }
@@ -50,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;
           }
@@ -69,15 +81,16 @@ 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,
@@ -103,8 +116,11 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     scrubberPosition
   } = useScrubberContext();
   const {
+    layout,
     getXScale,
+    getYScale,
     getXAxis,
+    getYAxis,
     dataLength,
     series,
     animate
@@ -123,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 => {
@@ -155,14 +172,14 @@ 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,

package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -46,7 +46,7 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     onDimensionsChange: d => onDimensionsChange(seriesId, d),
     seriesId: seriesId,
     style: style,
-    transition: updateTransition,
+    transition: updateTransition !== null && updateTransition !== void 0 ? updateTransition : instantTransition,
     x: x,
     y: y
   });

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/utils/axis.js

@@ -58,23 +58,36 @@ export const toPointAnchor = placement => {
  * For numeric scales, the domain limit controls whether bounds are "nice" (human-friendly)
  * or "strict" (exact min/max). Range can be customized using function-based configuration.
  *
+ * Range inversion is determined by axis role (category vs value) and layout:
+ * - Vertical layout: Y axis (value) is inverted for SVG coordinate system
+ * - Horizontal layout: Y axis (category) is inverted (first category at top)
+ *
  * @param params - Scale parameters
  * @returns The D3 scale function
  * @throws An Error if bounds are invalid
  */
-export const getAxisScale = _ref => {
+export const getCartesianAxisScale = _ref => {
   var _config$scaleType;
   let {
     config,
     type,
     range,
-    dataDomain
+    dataDomain,
+    layout = 'vertical'
   } = _ref;
   const scaleType = (_config$scaleType = config === null || config === void 0 ? void 0 : config.scaleType) !== null && _config$scaleType !== void 0 ? _config$scaleType : 'linear';
   let adjustedRange = range;
 
-  // Invert range for Y axis for SVG coordinate system
-  if (type === 'y') {
+  // Determine if this axis needs range inversion for SVG coordinate system.
+  // SVG Y coordinates increase downward, so we need to invert for value axes
+  // where we want higher values at the top.
+  //
+  // For vertical layout: Y axis is the value axis → invert (higher values at top)
+  // For horizontal layout: Y axis is the category axis → don't invert (first category at top is natural)
+  // X axis never needs inversion (left-to-right is natural for both layouts)
+
+  const shouldInvertRange = type === 'y' && layout !== 'horizontal';
+  if (shouldInvertRange) {
     adjustedRange = {
       min: adjustedRange.max,
       max: adjustedRange.min
@@ -122,6 +135,8 @@ export const getAxisConfig = function (type, axes) {
   let defaultId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultAxisId;
   let defaultScaleType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : defaultAxisScaleType;
   const defaultDomainLimit = type === 'x' ? 'strict' : 'nice';
+  const axisName = type === 'x' ? 'x-axis' : 'y-axis';
+  const axisDocUrl = type === 'x' ? 'https://cds.coinbase.com/components/charts/XAxis' : 'https://cds.coinbase.com/components/charts/YAxis';
   if (!axes) {
     return [{
       id: defaultId,
@@ -138,16 +153,27 @@ export const getAxisConfig = function (type, axes) {
       } = _ref2;
       return id === undefined;
     })) {
-      throw new Error('When defining multiple axes, each must have a unique id. See https://cds.coinbase.com/components/charts/YAxis/#multiple-y-axes.');
+      throw new Error("When defining multiple ".concat(axisName, ", each must have a unique id. See ").concat(axisDocUrl, "."));
+    }
+    if (axesLength > 1) {
+      const ids = axes.map(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id;
+      }).filter(id => id !== undefined);
+      if (new Set(ids).size !== ids.length) {
+        throw new Error("When defining multiple ".concat(axisName, ", each must have a unique id. See ").concat(axisDocUrl, "."));
+      }
     }
-    return axes.map(_ref3 => {
+    return axes.map(_ref4 => {
       let {
           id
-        } = _ref3,
-        axis = _objectWithoutProperties(_ref3, _excluded);
+        } = _ref4,
+        axis = _objectWithoutProperties(_ref4, _excluded);
       return _objectSpread({
         // defaults the axis id if only a single axis is provided
-        id: axesLength > 1 ? id !== null && id !== void 0 ? id : defaultAxisId : id,
+        id: axesLength > 1 ? id !== null && id !== void 0 ? id : defaultAxisId : id !== null && id !== void 0 ? id : defaultId,
         scaleType: defaultScaleType,
         domainLimit: defaultDomainLimit
       }, axis);
@@ -169,10 +195,12 @@ export const getAxisConfig = function (type, axes) {
  * @param axisParam - The axis configuration
  * @param series - Array of series objects (for stacking support)
  * @param axisType - Whether this is an 'x' or 'y' axis
+ * @param layout - Chart layout ('horizontal' or 'vertical')
  * @returns The calculated axis bounds
  */
-export const getAxisDomain = (axisParam, series, axisType) => {
+export const getCartesianAxisDomain = function (axisParam, series, axisType) {
   var _finalDomain$min, _finalDomain$max;
+  let layout = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'vertical';
   let dataDomain = null;
   if (axisParam.data && Array.isArray(axisParam.data) && axisParam.data.length > 0) {
     const firstItem = axisParam.data[0];
@@ -194,7 +222,10 @@ export const getAxisDomain = (axisParam, series, axisType) => {
   }
 
   // Calculate domain from series data
-  const seriesDomain = axisType === 'x' ? getChartDomain(series) : getChartRange(series);
+  // In vertical layout: X is category (index), Y is value (value)
+  // In horizontal layout: Y is category (index), X is value (value)
+  const isCategoryAxis = layout !== 'horizontal' && axisType === 'x' || layout === 'horizontal' && axisType === 'y';
+  const seriesDomain = isCategoryAxis ? getChartDomain(series) : getChartRange(series);
 
   // If data sets the domain, use that instead of the series domain
   const preferredDataDomain = dataDomain !== null && dataDomain !== void 0 ? dataDomain : seriesDomain;
@@ -488,7 +519,7 @@ const generateEvenlyDistributedTicks = (scale, tickInterval, possibleTickValues,
  * });
  * // Returns tick positions centered in each selected band
  */
-export const getAxisTicksData = _ref4 => {
+export const getAxisTicksData = _ref5 => {
   var _options$anchor;
   let {
     ticks,
@@ -498,7 +529,7 @@ export const getAxisTicksData = _ref4 => {
     possibleTickValues,
     tickInterval,
     options
-  } = _ref4;
+  } = _ref5;
   const anchor = (_options$anchor = options === null || options === void 0 ? void 0 : options.anchor) !== null && _options$anchor !== void 0 ? _options$anchor : 'middle';
 
   // Handle band scales