@coinbase/cds-mobile-visualization 3.4.0-beta.22 → 3.4.0-beta.24

package/esm/chart/line/__stories__/LineChart.stories.js

@@ -34,31 +34,24 @@ import { DottedLine, Line, LineChart, ReferenceLine, SolidLine } from '..';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function MultipleLine() {
   const theme = useTheme();
-  const [scrubberPosition, setScrubberPosition] = useState();
   const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
   const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
   const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
   const chartAccessibilityLabel = "Website visitors across " + pageViews.length + " pages.";
-  const scrubberAccessibilityLabel = useCallback(index => {
-    return pages[index] + " has " + pageViews[index] + " views and " + uniqueVisitors[index] + " unique visitors.";
-  }, [pages, pageViews, uniqueVisitors]);
+  const chartAccessibilityHint = 'Swipe left or right to hear details for each page.';
+  const getScrubberAccessibilityLabel = useCallback(index => pages[index] + " has " + pageViews[index] + " views and " + uniqueVisitors[index] + " unique visitors.", [pages, pageViews, uniqueVisitors]);
   const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 0
   }).format(value), []);
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showXAxis: true,
     showYAxis: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: chartAccessibilityHint,
+    accessibilityLabel: chartAccessibilityLabel + " " + chartAccessibilityHint,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
-    onScrubberPositionChange: setScrubberPosition,
     series: [{
       id: 'pageViews',
       data: pageViews,
@@ -85,27 +78,19 @@ function MultipleLine() {
   });
 }
 function DataFormat() {
-  const [scrubberPosition, setScrubberPosition] = useState();
   const yData = useMemo(() => [2, 5.5, 2, 8.5, 1.5, 5], []);
   const xData = useMemo(() => [1, 2, 3, 5, 8, 10], []);
   const chartAccessibilityLabel = "Chart with custom X and Y data. " + yData.length + " data points";
-  const scrubberAccessibilityLabel = useCallback(index => {
-    return "Point " + (index + 1) + ": X value " + xData[index] + ", Y value " + yData[index];
-  }, [xData, yData]);
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": X value " + xData[index] + ", Y value " + yData[index], [xData, yData]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     points: true,
     showArea: true,
     showXAxis: true,
     showYAxis: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: chartAccessibilityLabel,
     curve: "natural",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 16,
@@ -113,7 +98,6 @@ function DataFormat() {
       bottom: 0,
       left: 0
     },
-    onScrubberPositionChange: setScrubberPosition,
     series: [{
       id: 'line',
       data: yData
@@ -144,6 +128,8 @@ function LiveUpdates() {
     return sparklineInteractiveData.hour.map(d => d.value);
   }, []);
   const [priceData, setPriceData] = useState(initialData);
+  const chartAccessibilityLabel = "Live price chart with " + priceData.length + " data points.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + priceData[index], [priceData]);
   const lastDataPointTimeRef = useRef(Date.now());
   const updateCountRef = useRef(0);
   const intervalSeconds = 3600 / initialData.length;
@@ -182,6 +168,8 @@ function LiveUpdates() {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       right: 64
@@ -198,9 +186,17 @@ function LiveUpdates() {
 }
 function MissingData() {
   const theme = useTheme();
-  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
-  const pageViews = [2400, 1398, null, 3908, 4800, 3800, 4300];
-  const uniqueVisitors = [4000, 3000, null, 2780, 1890, 2390, 3490];
+  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
+  const pageViews = useMemo(() => [2400, 1398, null, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, null, 2780, 1890, 2390, 3490], []);
+  const chartAccessibilityLabel = "Website visitors across " + pages.length + " pages. Some data points are missing.";
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const pv = pageViews[index];
+    const uv = uniqueVisitors[index];
+    const pvStr = pv != null ? pv : 'no data';
+    const uvStr = uv != null ? uv : 'no data';
+    return pages[index] + ": " + pvStr + " views, " + uvStr + " unique visitors.";
+  }, [pages, pageViews, uniqueVisitors]);
   const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 0
   }).format(value), []);
@@ -210,6 +206,8 @@ function MissingData() {
     showArea: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'pageViews',
@@ -239,6 +237,9 @@ function MissingData() {
 }
 function Interaction() {
   const [scrubberPosition, setScrubberPosition] = useState();
+  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
+  const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + data[index], [data]);
   return /*#__PURE__*/_jsxs(VStack, {
     gap: 2,
     children: [/*#__PURE__*/_jsx(Text, {
@@ -247,11 +248,13 @@ function Interaction() {
     }), /*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 200,
       onScrubberPositionChange: setScrubberPosition,
       series: [{
         id: 'prices',
-        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+        data
       }],
       children: /*#__PURE__*/_jsx(Scrubber, {})
     })]
@@ -391,8 +394,12 @@ function Transitions() {
         color: positiveColor
       }]
     };
+    const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
+    const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + valueAtIndexFormatter(index), [valueAtIndexFormatter]);
     return /*#__PURE__*/_jsxs(CartesianChart, {
       enableScrubbing: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 200,
       inset: {
         top: 32,
@@ -433,7 +440,6 @@ function Transitions() {
   return /*#__PURE__*/_jsx(CustomTransitionsChart, {});
 }
 function BasicAccessible() {
-  const [scrubberPosition, setScrubberPosition] = useState();
   const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
 
   // Chart-level accessibility label provides overview
@@ -441,24 +447,14 @@ function BasicAccessible() {
     const currentPrice = data[data.length - 1];
     return "Price chart showing trend over " + data.length + " data points. Current value: " + currentPrice + ". Use arrow keys to adjust view";
   }, [data]);
-
-  // Scrubber-level accessibility label provides specific position info
-  const scrubberAccessibilityLabel = useCallback(index => {
-    return "Price at position " + (index + 1) + " of " + data.length + ": " + data[index];
-  }, [data]);
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
+  const getScrubberAccessibilityLabel = useCallback(index => "Price at position " + (index + 1) + " of " + data.length + ": " + data[index], [data]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
-    onScrubberPositionChange: setScrubberPosition,
     series: [{
       id: 'prices',
       data: data
@@ -618,8 +614,12 @@ function GainLossChart() {
       }
     }
   })));
+  const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + tickLabelFormatter(data[index]), [data, tickLabelFormatter]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'prices',
@@ -674,9 +674,11 @@ function HighLowPrice() {
 }
 function StylingScrubber() {
   const theme = useTheme();
-  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
-  const pageViews = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
-  const uniqueVisitors = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
+  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
+  const chartAccessibilityLabel = "Website visitors across " + pageViews.length + " pages.";
+  const getScrubberAccessibilityLabel = useCallback(index => pages[index] + ": " + pageViews[index] + " views, " + uniqueVisitors[index] + " unique visitors.", [pages, pageViews, uniqueVisitors]);
   const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 0
   }).format(value), []);
@@ -685,6 +687,8 @@ function StylingScrubber() {
     showArea: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'pageViews',
@@ -905,6 +909,12 @@ function AssetPriceWithDottedArea() {
       });
       return dayOfWeek + ", " + monthDay + ", " + time;
     }, []);
+    const chartAccessibilityLabel = "Bitcoin price chart for " + timePeriod.label + " period. Current price: " + formatPrice(currentPrice) + ".";
+    const getScrubberAccessibilityLabel = useCallback(index => {
+      const price = formatPrice(sparklineTimePeriodDataValues[index]);
+      const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
+      return price + " " + date;
+    }, [formatDate, formatPrice, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
     return /*#__PURE__*/_jsxs(VStack, {
       gap: 2,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
@@ -927,7 +937,9 @@ function AssetPriceWithDottedArea() {
       }), /*#__PURE__*/_jsx(LineChart, {
         enableScrubbing: true,
         showArea: true,
+        accessibilityLabel: chartAccessibilityLabel,
         areaType: "dotted",
+        getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
         height: 200,
         inset: {
           top: 52
@@ -1089,11 +1101,19 @@ const PerformanceChart = /*#__PURE__*/memo(_ref10 => {
     return dayOfWeek + ", " + monthDay + ", " + time;
   }, []);
   const getScrubberLabel = useCallback(d => formatDate(sparklineTimePeriodDataTimestamps[d]), [formatDate, sparklineTimePeriodDataTimestamps]);
+  const chartAccessibilityLabel = "Bitcoin price chart with high, actual, and low series. " + sparklineTimePeriodDataValues.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const price = formatPriceThousands(sparklineTimePeriodDataValues[index]);
+    const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
+    return "Point " + (index + 1) + ": " + price + ", " + date;
+  }, [formatDate, formatPriceThousands, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
     areaType: "dotted",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 300,
     inset: {
       top: 52,
@@ -1250,6 +1270,12 @@ function MonotoneAssetPrice() {
     dy: -12,
     horizontalAlignment: "left"
   })), []);
+  const chartAccessibilityLabel = "Price chart with " + prices.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const price = scrubberPriceFormatter.format(prices[index].value);
+    const date = formatDate(prices[index].date);
+    return price + " USD " + date;
+  }, [formatDate, prices, scrubberPriceFormatter]);
   const CustomScrubberBeacon = /*#__PURE__*/memo(_ref11 => {
     let {
       dataX,
@@ -1323,6 +1349,8 @@ function MonotoneAssetPrice() {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 64
@@ -1397,8 +1425,12 @@ function ServiceAvailability() {
     date: new Date('2022-01-10'),
     availability: 86
   }], []);
+  const chartAccessibilityLabel = "Service availability chart with " + availabilityEvents.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + availabilityEvents[index].availability + "% availability on " + availabilityEvents[index].date.toLocaleDateString(), [availabilityEvents]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'availability',
@@ -1471,7 +1503,7 @@ function ServiceAvailability() {
 }
 function ForecastAssetPrice() {
   const startYear = 2020;
-  const data = [50, 45, 47, 46, 54, 54, 60, 61, 63, 66, 70];
+  const data = useMemo(() => [50, 45, 47, 46, 54, 54, 60, 61, 63, 66, 70], []);
   const currentIndex = 6;
   const strokeWidth = 3;
   // To prevent cutting off the edge of our lines
@@ -1575,8 +1607,12 @@ function ForecastAssetPrice() {
       })]
     });
   });
+  const chartAccessibilityLabel = "Forecast chart with " + data.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + axisFormatter(index) + ", value " + data[index], [axisFormatter, data]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'price',
@@ -1703,6 +1739,34 @@ function DataCardWithLineChart() {
     })]
   });
 }
+function HorizontalLayoutLineChart() {
+  const symbols = ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'];
+  const allocations = [72, 46, 33, 21, 14];
+  return /*#__PURE__*/_jsx(LineChart, {
+    points: true,
+    showArea: true,
+    showXAxis: true,
+    showYAxis: true,
+    height: 240,
+    layout: "horizontal",
+    series: [{
+      id: 'allocations',
+      data: allocations,
+      color: assets.btc.color
+    }],
+    xAxis: {
+      domain: {
+        min: 0,
+        max: 80
+      },
+      tickLabelFormatter: value => value + "%"
+    },
+    yAxis: {
+      data: symbols,
+      scaleType: 'band'
+    }
+  });
+}
 function ExampleNavigator() {
   const theme = useTheme();
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -1716,6 +1780,9 @@ function ExampleNavigator() {
         data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
       }]
     })
+  }, {
+    title: 'Horizontal Layout',
+    component: /*#__PURE__*/_jsx(HorizontalLayoutLineChart, {})
   }, {
     title: 'Multiple Lines',
     component: /*#__PURE__*/_jsx(MultipleLine, {})
@@ -1844,6 +1911,8 @@ function ExampleNavigator() {
     component: /*#__PURE__*/_jsxs(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: "Price chart with reference line. 14 data points. Swipe to navigate.",
+      getScrubberAccessibilityLabel: index => "Point " + (index + 1),
       height: 200,
       series: [{
         id: 'prices',

package/esm/chart/point/Point.js

@@ -16,6 +16,7 @@ export const Point = /*#__PURE__*/memo(_ref => {
   let {
     dataX,
     dataY,
+    xAxisId,
     yAxisId,
     fill: fillProp,
     radius = 5,
@@ -41,7 +42,7 @@ export const Point = /*#__PURE__*/memo(_ref => {
     drawingArea
   } = useCartesianChartContext();
   const animate = animateProp != null ? animateProp : animationEnabled;
-  const xScale = getXScale();
+  const xScale = getXScale(xAxisId);
   const yScale = getYScale(yAxisId);
   const shouldAnimate = animate != null ? animate : false;
   const updateTransition = useMemo(() => getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions == null ? void 0 : transitions.update, transition]);

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -42,7 +42,7 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     drawingArea
   } = useCartesianChartContext();
   const targetSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
-  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const xScale = useMemo(() => getXSerializableScale(targetSeries == null ? void 0 : targetSeries.xAxisId), [getXSerializableScale, targetSeries == null ? void 0 : targetSeries.xAxisId]);
   const yScale = useMemo(() => getYSerializableScale(targetSeries == null ? void 0 : targetSeries.yAxisId), [getYSerializableScale, targetSeries == null ? void 0 : targetSeries.yAxisId]);
   const color = useMemo(() => {
     var _ref2;

package/esm/chart/scrubber/DefaultScrubberLabel.js

@@ -1,28 +1,44 @@
-const _excluded = ["verticalAlignment", "dy", "boundsInset"];
+const _excluded = ["dx", "dy"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DefaultReferenceLineLabel } from '../line';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * DefaultScrubberLabel is the default label component for the scrubber line.
  * It will automatically add padding around the label when elevated to fit within chart bounds to prevent shadow from being cutoff.
- * It will also center the label vertically with the top available area.
+ * In vertical layout, it positions the label above the scrubber line.
+ * In horizontal layout, it centers the label in the chart's right inset.
  */
 export const DefaultScrubberLabel = /*#__PURE__*/memo(_ref => {
   let {
-      verticalAlignment = 'middle',
-      dy,
-      boundsInset
+      dx: dxProp,
+      dy: dyProp
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
-    drawingArea
+    drawingArea,
+    layout,
+    width: chartWidth
   } = useCartesianChartContext();
+  const isHorizontalLayout = layout === 'horizontal';
+  const dx = useMemo(() => {
+    if (dxProp !== undefined) return dxProp;
+    if (isHorizontalLayout) {
+      const drawingAreaEnd = drawingArea.x + drawingArea.width;
+      const rightOffset = chartWidth - drawingAreaEnd;
+      return rightOffset / 2;
+    }
+    return 0;
+  }, [drawingArea.width, drawingArea.x, dxProp, isHorizontalLayout, chartWidth]);
+  const dy = useMemo(() => {
+    if (dyProp !== undefined) return dyProp;
+    if (isHorizontalLayout) return 0;
+    return -0.5 * drawingArea.y;
+  }, [dyProp, isHorizontalLayout, drawingArea.y]);
   return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({
-    boundsInset: boundsInset,
-    dy: dy != null ? dy : -0.5 * drawingArea.y,
-    verticalAlignment: verticalAlignment
+    dx: dx,
+    dy: dy
   }, props));
 });

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,