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

package/esm/chart/scrubber/Scrubber.js

@@ -1,3 +1,4 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
 import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { useTheme } from '@coinbase/cds-mobile';
@@ -45,15 +46,19 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     scrubberPosition
   } = useScrubberContext();
   const {
+    layout,
     getXSerializableScale,
+    getYSerializableScale,
     getXAxis,
+    getYAxis,
     series,
     drawingArea,
     animate,
     dataLength
   } = useCartesianChartContext();
-  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
-  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const categoryAxisIsX = useMemo(() => layout !== 'horizontal', [layout]);
+  const indexAxis = useMemo(() => categoryAxisIsX ? getXAxis() : getYAxis(), [categoryAxisIsX, getXAxis, getYAxis]);
+  const indexScale = useMemo(() => categoryAxisIsX ? getXSerializableScale() : getYSerializableScale(), [categoryAxisIsX, getXSerializableScale, getYSerializableScale]);
 
   // Animation state for delayed scrubber rendering (matches web timing)
   const scrubberOpacity = useSharedValue(animate ? 0 : 1);
@@ -76,27 +81,43 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     var _scrubberPosition$val;
     return (_scrubberPosition$val = scrubberPosition.value) != null ? _scrubberPosition$val : Math.max(0, dataLength - 1);
   }, [scrubberPosition, dataLength]);
-  const dataX = useDerivedValue(() => {
-    if (xAxis != null && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex.value] !== undefined) {
-      const dataValue = xAxis.data[dataIndex.value];
-      return typeof dataValue === 'string' ? dataIndex.value : dataValue;
+  const dataValue = useDerivedValue(() => {
+    if (indexAxis != null && indexAxis.data && Array.isArray(indexAxis.data) && indexAxis.data[dataIndex.value] !== undefined) {
+      const axisValue = indexAxis.data[dataIndex.value];
+      return typeof axisValue === 'string' ? dataIndex.value : axisValue;
     }
     return dataIndex.value;
-  }, [xAxis, dataIndex]);
+  }, [indexAxis, dataIndex]);
   const lineOpacity = useDerivedValue(() => {
     return scrubberPosition.value !== undefined ? 1 : 0;
   }, [scrubberPosition]);
   const overlayOpacity = useDerivedValue(() => {
     return scrubberPosition.value !== undefined ? 0.8 : 0;
   }, [scrubberPosition]);
+  const pixelPosition = useDerivedValue(() => {
+    if (dataValue.value === undefined || !indexScale) return undefined;
+    return getPointOnSerializableScale(dataValue.value, indexScale);
+  }, [dataValue, indexScale]);
   const overlayWidth = useDerivedValue(() => {
-    const pixelX = dataX.value !== undefined && xScale ? getPointOnSerializableScale(dataX.value, xScale) : 0;
-    return drawingArea.x + drawingArea.width - pixelX + overlayOffset;
-  }, [dataX, xScale]);
+    var _pixelPosition$value;
+    const pixel = (_pixelPosition$value = pixelPosition.value) != null ? _pixelPosition$value : 0;
+    return categoryAxisIsX ? drawingArea.x + drawingArea.width - pixel + overlayOffset : drawingArea.width + overlayOffset * 2;
+  }, [pixelPosition, categoryAxisIsX, drawingArea, overlayOffset]);
+  const overlayHeight = useDerivedValue(() => {
+    var _pixelPosition$value2;
+    const pixel = (_pixelPosition$value2 = pixelPosition.value) != null ? _pixelPosition$value2 : 0;
+    return categoryAxisIsX ? drawingArea.height + overlayOffset * 2 : drawingArea.y + drawingArea.height - pixel + overlayOffset;
+  }, [pixelPosition, categoryAxisIsX, drawingArea, overlayOffset]);
   const overlayX = useDerivedValue(() => {
-    const xValue = dataX.value !== undefined && xScale ? getPointOnSerializableScale(dataX.value, xScale) : 0;
-    return xValue;
-  }, [dataX, xScale]);
+    var _pixelPosition$value3;
+    const pixel = (_pixelPosition$value3 = pixelPosition.value) != null ? _pixelPosition$value3 : 0;
+    return categoryAxisIsX ? pixel : drawingArea.x - overlayOffset;
+  }, [pixelPosition, categoryAxisIsX, drawingArea, overlayOffset]);
+  const overlayY = useDerivedValue(() => {
+    var _pixelPosition$value4;
+    const pixel = (_pixelPosition$value4 = pixelPosition.value) != null ? _pixelPosition$value4 : 0;
+    return categoryAxisIsX ? drawingArea.y - overlayOffset : pixel;
+  }, [pixelPosition, categoryAxisIsX, drawingArea, overlayOffset]);
   const resolvedLabelValue = useSharedValue('');
   const updateResolvedLabel = useCallback(index => {
     if (!label) {
@@ -125,7 +146,8 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       color: s.color
     }))) != null ? _series$filter$filter : [];
   }, [series, filteredSeriesIds]);
-  const isReady = !!xScale;
+  const showBeaconLabels = !hideBeaconLabels && categoryAxisIsX && beaconLabels.length > 0;
+  const isReady = !!indexScale;
   const groupEnterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
   useEffect(() => {
     if (animate && isReady) {
@@ -137,29 +159,33 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     opacity: scrubberOpacity,
     children: [!hideOverlay && /*#__PURE__*/_jsx(Rect, {
       color: theme.color.bg,
-      height: drawingArea.height + overlayOffset * 2,
+      height: overlayHeight,
       opacity: overlayOpacity,
       width: overlayWidth,
       x: overlayX,
-      y: drawingArea.y - overlayOffset
-    }), !hideLine && /*#__PURE__*/_jsx(ReferenceLine, {
+      y: overlayY
+    }), !hideLine && /*#__PURE__*/_jsx(ReferenceLine, _extends({
       LabelComponent: LabelComponent,
-      LineComponent: LineComponent,
-      dataX: dataX,
+      LineComponent: LineComponent
+    }, categoryAxisIsX ? {
+      dataX: dataValue
+    } : {
+      dataY: dataValue
+    }, {
       label: resolvedLabelValue,
       labelBoundsInset: labelBoundsInset,
       labelElevated: labelElevated,
       labelFont: labelFont,
       opacity: lineOpacity,
       stroke: lineStroke
-    }), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
+    })), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
       ref: beaconGroupRef,
       BeaconComponent: BeaconComponent,
       idlePulse: idlePulse,
       seriesIds: filteredSeriesIds,
       stroke: beaconStroke,
       transitions: transitions
-    }), !hideBeaconLabels && beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+    }), showBeaconLabels && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,
       labelFont: beaconLabelFont,
       labelHorizontalOffset: beaconLabelHorizontalOffset,

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -12,7 +12,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   let {
     seriesId,
     dataIndex,
-    dataX,
+    dataIndexValue,
     isIdle,
     BeaconComponent,
     idlePulse,
@@ -22,6 +22,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     stroke
   } = _ref;
   const {
+    layout,
     getSeries,
     getSeriesData,
     getXScale,
@@ -49,10 +50,10 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   // Get scales for gradient evaluation
   const gradientScale = useMemo(() => {
     if (!gradient) return undefined;
-    const scale = gradient.axis === 'x' ? getXScale() : getYScale(series == null ? void 0 : series.yAxisId);
+    const scale = gradient.axis === 'x' ? getXScale(series == null ? void 0 : series.xAxisId) : getYScale(series == null ? void 0 : series.yAxisId);
     if (!scale) return undefined;
     return convertToSerializableScale(scale);
-  }, [gradient, getXScale, getYScale, series == null ? void 0 : series.yAxisId]);
+  }, [gradient, getXScale, getYScale, series == null ? void 0 : series.xAxisId, series == null ? void 0 : series.yAxisId]);
   const gradientStops = useMemo(() => {
     if (!gradient || !gradientScale) return undefined;
     const domain = {
@@ -70,25 +71,25 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     var _series$color;
     if (gradient && gradientScale && gradientStops) {
       var _gradient$axis;
-      const axis = (_gradient$axis = gradient.axis) != null ? _gradient$axis : 'y';
-      const dataValue = axis === 'x' ? dataX.value : dataY.value;
-      if (dataValue !== undefined) {
-        const evaluatedColor = evaluateGradientAtValue(gradientStops, dataValue, gradientScale);
-        if (evaluatedColor) {
-          return evaluatedColor;
-        }
+      const categoryAxisIsX = layout !== 'horizontal';
+      const gradientAxis = (_gradient$axis = gradient.axis) != null ? _gradient$axis : 'y';
+      const valueForAxis = gradientAxis === 'x' ? categoryAxisIsX ? dataIndexValue.value : dataY.value : categoryAxisIsX ? dataY.value : dataIndexValue.value;
+      const evaluatedColor = evaluateGradientAtValue(gradientStops, valueForAxis, gradientScale);
+      if (evaluatedColor) {
+        return evaluatedColor;
       }
     }
 
     // Fallback to series color
     return (_series$color = series == null ? void 0 : series.color) != null ? _series$color : theme.color.fgPrimary;
-  }, [gradient, gradientScale, gradientStops, dataX, dataY, series == null ? void 0 : series.color, theme.color.fgPrimary]);
+  }, [gradient, gradientScale, gradientStops, dataIndexValue, dataY, series == null ? void 0 : series.color, theme.color.fgPrimary, layout]);
+  const categoryAxisIsX = layout !== 'horizontal';
   return /*#__PURE__*/_jsx(BeaconComponent, {
     ref: beaconRef,
     animate: animate,
     color: color,
-    dataX: dataX,
-    dataY: dataY,
+    dataX: categoryAxisIsX ? dataIndexValue : dataY,
+    dataY: categoryAxisIsX ? dataY : dataIndexValue,
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: seriesId,
@@ -109,12 +110,15 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     scrubberPosition
   } = useScrubberContext();
   const {
+    layout,
     getXAxis,
+    getYAxis,
     series,
     dataLength,
     animate
   } = useCartesianChartContext();
-  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
+  const categoryAxisIsX = useMemo(() => layout !== 'horizontal', [layout]);
+  const indexAxis = useMemo(() => categoryAxisIsX ? getXAxis() : getYAxis(), [categoryAxisIsX, getXAxis, getYAxis]);
 
   // Expose imperative handle with pulse method
   useImperativeHandle(ref, () => ({
@@ -132,14 +136,14 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     var _scrubberPosition$val;
     return (_scrubberPosition$val = scrubberPosition.value) != null ? _scrubberPosition$val : Math.max(0, dataLength - 1);
   }, [scrubberPosition, dataLength]);
-  const dataX = useDerivedValue(() => {
-    // Convert index to actual x value if axis has data
-    if (xAxis != null && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex.value] !== undefined) {
-      const dataValue = xAxis.data[dataIndex.value];
+  const dataIndexValue = useDerivedValue(() => {
+    // Convert index to actual category-axis value if axis has data.
+    if (indexAxis != null && indexAxis.data && Array.isArray(indexAxis.data) && indexAxis.data[dataIndex.value] !== undefined) {
+      const dataValue = indexAxis.data[dataIndex.value];
       return typeof dataValue === 'string' ? dataIndex.value : dataValue;
     }
     return dataIndex.value;
-  }, [xAxis, dataIndex]);
+  }, [indexAxis, dataIndex]);
   const isIdle = useDerivedValue(() => {
     return scrubberPosition.value === undefined;
   }, [scrubberPosition]);
@@ -155,7 +159,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     animate: animate,
     beaconRef: createBeaconRef(s.id),
     dataIndex: dataIndex,
-    dataX: dataX,
+    dataIndexValue: dataIndexValue,
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: s.id,

package/esm/chart/scrubber/ScrubberProvider.js

@@ -23,25 +23,29 @@ export const ScrubberProvider = _ref => {
     throw new Error('ScrubberProvider must be used within a ChartContext');
   }
   const {
+    layout,
     getXSerializableScale,
-    getXAxis
+    getYSerializableScale,
+    getXAxis,
+    getYAxis
   } = chartContext;
   const scrubberPosition = useSharedValue(undefined);
-  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
-  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
-  const getDataIndexFromX = useCallback(touchX => {
+  const categoryAxisIsX = useMemo(() => layout !== 'horizontal', [layout]);
+  const categoryAxis = useMemo(() => categoryAxisIsX ? getXAxis() : getYAxis(), [categoryAxisIsX, getXAxis, getYAxis]);
+  const categoryScale = useMemo(() => categoryAxisIsX ? getXSerializableScale() : getYSerializableScale(), [categoryAxisIsX, getXSerializableScale, getYSerializableScale]);
+  const getDataIndexFromPosition = useCallback(touchPosition => {
     'worklet';
 
-    if (!xScale || !xAxis) return 0;
-    if (xScale.type === 'band') {
-      const [domainMin, domainMax] = xScale.domain;
+    if (!categoryScale || !categoryAxis) return 0;
+    if (categoryScale.type === 'band') {
+      const [domainMin, domainMax] = categoryScale.domain;
       const categoryCount = domainMax - domainMin + 1;
       let closestIndex = 0;
       let closestDistance = Infinity;
       for (let i = 0; i < categoryCount; i++) {
-        const xPos = getPointOnSerializableScale(i, xScale);
-        if (xPos !== undefined) {
-          const distance = Math.abs(touchX - xPos);
+        const categoryPos = getPointOnSerializableScale(i, categoryScale);
+        if (categoryPos !== undefined) {
+          const distance = Math.abs(touchPosition - categoryPos);
           if (distance < closestDistance) {
             closestDistance = distance;
             closestIndex = i;
@@ -50,18 +54,17 @@ export const ScrubberProvider = _ref => {
       }
       return closestIndex;
     } else {
-      // For numeric scales with axis data, find the nearest data point
-      const axisData = xAxis.data;
+      // 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 xValue = numericData[i];
-          const xPos = getPointOnSerializableScale(xValue, xScale);
-          if (xPos !== undefined) {
-            const distance = Math.abs(touchX - xPos);
+          const dataValue = numericData[i];
+          const categoryPos = getPointOnSerializableScale(dataValue, categoryScale);
+          if (categoryPos !== undefined) {
+            const distance = Math.abs(touchPosition - categoryPos);
             if (distance < closestDistance) {
               closestDistance = distance;
               closestIndex = i;
@@ -71,13 +74,13 @@ export const ScrubberProvider = _ref => {
         return closestIndex;
       } else {
         var _domain$min, _domain$max;
-        const xValue = invertSerializableScale(touchX, xScale);
-        const dataIndex = Math.round(xValue);
-        const domain = xAxis.domain;
+        const dataValue = invertSerializableScale(touchPosition, categoryScale);
+        const dataIndex = Math.round(dataValue);
+        const domain = categoryAxis.domain;
         return Math.max((_domain$min = domain.min) != null ? _domain$min : 0, Math.min(dataIndex, (_domain$max = domain.max) != null ? _domain$max : 0));
       }
     }
-  }, [xAxis, xScale]);
+  }, [categoryAxis, categoryScale]);
   const handleStartEndHaptics = useCallback(() => {
     void Haptics.lightImpact();
   }, []);
@@ -95,13 +98,15 @@ export const ScrubberProvider = _ref => {
 
     // Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
     if (Platform.OS === 'android') {
-      const newScrubberPosition = getDataIndexFromX(event.x);
+      const pointerPosition = categoryAxisIsX ? event.x : event.y;
+      const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
       if (newScrubberPosition !== scrubberPosition.value) {
         scrubberPosition.value = newScrubberPosition;
       }
     }
   }).onUpdate(function onUpdate(event) {
-    const newScrubberPosition = getDataIndexFromX(event.x);
+    const pointerPosition = categoryAxisIsX ? event.x : event.y;
+    const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
     if (newScrubberPosition !== scrubberPosition.value) {
       scrubberPosition.value = newScrubberPosition;
     }
@@ -114,7 +119,7 @@ export const ScrubberProvider = _ref => {
     if (enableScrubbing) {
       scrubberPosition.value = undefined;
     }
-  }), [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromX, scrubberPosition, enableScrubbing]);
+  }), [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition, enableScrubbing]);
   const contextValue = useMemo(() => ({
     enableScrubbing: !!enableScrubbing,
     scrubberPosition

package/esm/chart/scrubber/__stories__/Scrubber.stories.js

@@ -1,5 +1,6 @@
 const _excluded = ["seriesId", "color", "label"],
-  _excluded2 = ["seriesId", "color", "label"];
+  _excluded2 = ["seriesId", "color", "label"],
+  _excluded3 = ["seriesId", "color"];
 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; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -654,6 +655,136 @@ const HideOverlay = () => {
     })
   });
 };
+const matchupBlueData = [47, 50, 51, 52, 53, 53, 53, 53, 52, 51, 51, 52, 53, 55, 57, 58, 59, 61, 63, 65, 64, 64, 64, 64, 64, 63, 63, 63, 64, 66, 68, 70, 71, 72, 74, 76, 76, 75, 74, 73, 74, 75, 75, 78];
+const matchupRedData = matchupBlueData.map(value => 100 - value);
+const matchupTeamLabels = {
+  blue: 'BLUE',
+  red: 'RED'
+};
+const MatchupBeaconLabels = () => {
+  const theme = useTheme();
+  const MatchupScrubberBeaconLabel = /*#__PURE__*/memo(_ref7 => {
+    var _matchupTeamLabels$se;
+    let {
+        seriesId,
+        color
+      } = _ref7,
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded3);
+    const {
+      getSeriesData,
+      series,
+      fontProvider
+    } = useCartesianChartContext();
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const seriesData = useMemo(() => getLineData(getSeriesData(seriesId)), [getSeriesData, seriesId]);
+    const dataLength = useMemo(() => {
+      var _series$reduce3;
+      return (_series$reduce3 = series == null ? void 0 : series.reduce((max, currentSeries) => {
+        var _data$length3;
+        const data = getSeriesData(currentSeries.id);
+        return Math.max(max, (_data$length3 = data == null ? void 0 : data.length) != null ? _data$length3 : 0);
+      }, 0)) != null ? _series$reduce3 : 0;
+    }, [series, getSeriesData]);
+    const dataIndex = useDerivedValue(() => {
+      var _scrubberPosition$val3;
+      return (_scrubberPosition$val3 = scrubberPosition.value) != null ? _scrubberPosition$val3 : Math.max(0, dataLength - 1);
+    }, [scrubberPosition, dataLength]);
+    const teamLabel = (_matchupTeamLabels$se = matchupTeamLabels[seriesId]) != null ? _matchupTeamLabels$se : String(seriesId).toUpperCase();
+    const labelColor = color != null ? color : theme.color.fgPrimary;
+    const legalFontSize = theme.fontSize.legal;
+    const title3FontSize = theme.fontSize.title3;
+    const teamStyle = useMemo(() => ({
+      fontFamilies: ['Inter'],
+      fontSize: legalFontSize,
+      fontStyle: {
+        weight: FontWeight.Normal
+      },
+      color: Skia.Color(labelColor)
+    }), [labelColor, legalFontSize]);
+    const percentageStyle = useMemo(() => ({
+      fontFamilies: ['Inter'],
+      fontSize: title3FontSize,
+      fontStyle: {
+        weight: FontWeight.Bold
+      },
+      color: Skia.Color(labelColor)
+    }), [title3FontSize, labelColor]);
+    const matchupLabel = useDerivedValue(() => {
+      if (seriesData === undefined) {
+        return teamLabel;
+      }
+      const value = seriesData[dataIndex.value];
+      const builder = Skia.ParagraphBuilder.Make({
+        textAlign: TextAlign.Left
+      }, fontProvider);
+      builder.pushStyle(teamStyle);
+      builder.addText(teamLabel);
+      builder.addText('\n');
+      builder.pushStyle(percentageStyle);
+      builder.addText(value + "%");
+      const paragraph = builder.build();
+      paragraph.layout(240);
+      return paragraph;
+    }, [dataIndex, fontProvider, percentageStyle, seriesData, teamLabel, teamStyle]);
+    return /*#__PURE__*/_jsx(DefaultScrubberBeaconLabel, _extends({}, props, {
+      background: "transparent",
+      color: labelColor,
+      elevated: false,
+      inset: 0,
+      label: matchupLabel,
+      seriesId: seriesId
+    }));
+  });
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    areaType: "dotted",
+    height: 300,
+    inset: {
+      bottom: 8,
+      left: 8,
+      top: 8,
+      right: 0
+    },
+    series: [{
+      id: 'blue',
+      data: matchupBlueData,
+      color: "rgb(" + theme.spectrum.blue50 + ")",
+      label: 'BLUE'
+    }, {
+      id: 'red',
+      data: matchupRedData,
+      color: "rgb(" + theme.spectrum.red50 + ")",
+      label: 'RED'
+    }],
+    xAxis: {
+      range: _ref8 => {
+        let {
+          min,
+          max
+        } = _ref8;
+        return {
+          min,
+          max: max - 64
+        };
+      }
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      idlePulse: true,
+      BeaconLabelComponent: MatchupScrubberBeaconLabel,
+      beaconLabelHorizontalOffset: 16,
+      beaconLabelPreferredSide: "right"
+    })
+  });
+};
 const ExampleNavigator = () => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const examples = useMemo(() => [{
@@ -707,6 +838,9 @@ const ExampleNavigator = () => {
   }, {
     title: 'Hide Overlay',
     component: /*#__PURE__*/_jsx(HideOverlay, {})
+  }, {
+    title: 'Matchup Beacon Labels',
+    component: /*#__PURE__*/_jsx(MatchupBeaconLabels, {})
   }], []);
   const currentExample = examples[currentIndex];
   const isFirstExample = currentIndex === 0;

package/esm/chart/utils/axis.js

@@ -47,7 +47,7 @@ export const toPointAnchor = placement => {
  */
 
 /**
- * Gets a D3 scale based on the axis configuration.
+ * Gets a D3 scale based on the cartesian axis configuration.
  * Handles both numeric (linear/log) and categorical (band) scales.
  *
  * For numeric scales, the domain limit controls whether bounds are "nice" (human-friendly)
@@ -57,19 +57,27 @@ export const toPointAnchor = placement => {
  * @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 ? void 0 : config.scaleType) != null ? _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
@@ -121,6 +129,8 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
     defaultScaleType = 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,
@@ -137,16 +147,27 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
       } = _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 " + axisName + ", each must have a unique id. See " + axisDocUrl + ".");
     }
-    return axes.map(_ref3 => {
+    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 " + axisName + ", each must have a unique id. See " + axisDocUrl + ".");
+      }
+    }
+    return axes.map(_ref4 => {
       let {
           id
-        } = _ref3,
-        axis = _objectWithoutPropertiesLoose(_ref3, _excluded);
+        } = _ref4,
+        axis = _objectWithoutPropertiesLoose(_ref4, _excluded);
       return _extends({
         // defaults the axis id if only a single axis is provided
-        id: axesLength > 1 ? id != null ? id : defaultAxisId : id,
+        id: axesLength > 1 ? id != null ? id : defaultAxisId : id != null ? id : defaultId,
         scaleType: defaultScaleType,
         domainLimit: defaultDomainLimit
       }, axis);
@@ -168,10 +189,14 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
  * @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 - The chart layout orientation
  * @returns The calculated axis bounds
  */
-export const getAxisDomain = (axisParam, series, axisType) => {
+export const getCartesianAxisDomain = function (axisParam, series, axisType, layout) {
   var _finalDomain$min, _finalDomain$max;
+  if (layout === void 0) {
+    layout = 'vertical';
+  }
   let dataDomain = null;
   if (axisParam.data && Array.isArray(axisParam.data) && axisParam.data.length > 0) {
     const firstItem = axisParam.data[0];
@@ -193,7 +218,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 : seriesDomain;
@@ -487,7 +515,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,
@@ -497,7 +525,7 @@ export const getAxisTicksData = _ref4 => {
     possibleTickValues,
     tickInterval,
     options
-  } = _ref4;
+  } = _ref5;
   const anchor = (_options$anchor = options == null ? void 0 : options.anchor) != null ? _options$anchor : 'middle';
 
   // Handle band scales