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

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -4,16 +4,18 @@ 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 { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { m as motion, useAnimate } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultTransition, projectPoint } from '../utils';
+import { defaultTransition, getTransition, instantTransition, projectPoint } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const radius = 5;
-const strokeWidth = 2;
+const defaultRadius = 5;
+const defaultStrokeWidth = 2;
+const defaultStroke = 'var(--color-bg)';
 const pulseOpacityStart = 0.5;
 const pulseOpacityEnd = 0;
-const pulseRadiusStart = 10;
-const pulseRadiusEnd = 15;
+const pulseRadiusStartMultiplier = 2;
+const pulseRadiusEndMultiplier = 3;
 const defaultPulseTransition = {
   duration: 1.6,
   ease: [0.0, 0.0, 0.0, 1.0]
@@ -27,30 +29,39 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     dataY,
     isIdle,
     idlePulse,
+    animate: animateProp,
     transitions,
     opacity = 1,
+    radius = defaultRadius,
+    stroke = defaultStroke,
+    strokeWidth = defaultStrokeWidth,
     className,
     style,
-    testID
+    testID = "".concat(seriesId, "-beacon")
   } = _ref;
-  const [scope, animate] = useAnimate();
+  const [scope, animateFn] = useAnimate();
   const {
+    animate: animateContext,
     getSeries,
     getXScale,
     getYScale,
     drawingArea
   } = useCartesianChartContext();
+  const animate = animateProp !== null && animateProp !== void 0 ? animateProp : animateContext;
   const targetSeries = getSeries(seriesId);
-  const xScale = getXScale();
+  const xScale = getXScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.xAxisId);
   const yScale = getYScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.yAxisId);
   const color = useMemo(() => {
     var _ref2;
     return (_ref2 = colorProp !== null && colorProp !== void 0 ? colorProp : targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.color) !== null && _ref2 !== void 0 ? _ref2 : 'var(--color-fgPrimary)';
   }, [colorProp, targetSeries]);
+  const prevIsIdle = usePreviousValue(isIdle);
+  const isIdleTransition = prevIsIdle !== undefined && isIdle !== prevIsIdle;
   const updateTransition = useMemo(() => {
-    var _transitions$update;
-    return (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : defaultTransition;
-  }, [transitions === null || transitions === void 0 ? void 0 : transitions.update]);
+    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 pulseTransition = useMemo(() => {
     var _transitions$pulse;
     return (_transitions$pulse = transitions === null || transitions === void 0 ? void 0 : transitions.pulse) !== null && _transitions$pulse !== void 0 ? _transitions$pulse : defaultPulseTransition;
@@ -68,17 +79,19 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       yScale
     });
   }, [dataX, dataY, xScale, yScale]);
+  const pulseRadiusStart = radius * pulseRadiusStartMultiplier;
+  const pulseRadiusEnd = radius * pulseRadiusEndMultiplier;
   useImperativeHandle(ref, () => ({
     pulse: () => {
       // Only pulse when idle and idlePulse is not enabled
       if (isIdle && !idlePulse && scope.current) {
-        animate(scope.current, {
+        animateFn(scope.current, {
           opacity: [pulseOpacityStart, pulseOpacityEnd],
           r: [pulseRadiusStart, pulseRadiusEnd]
         }, pulseTransition);
       }
     }
-  }), [isIdle, idlePulse, scope, animate, pulseTransition]);
+  }), [isIdle, idlePulse, scope, animateFn, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
 
   // Create continuous pulse transition by repeating the base pulse transition with delay
   const continuousPulseTransition = useMemo(() => _objectSpread(_objectSpread({}, pulseTransition), {}, {
@@ -91,65 +104,51 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
   }, [pixelCoordinate, drawingArea]);
   if (!pixelCoordinate) return;
-  if (isIdle) {
-    return /*#__PURE__*/_jsxs("g", {
-      "data-testid": testID,
-      opacity: isWithinDrawingArea ? opacity : 0,
-      children: [/*#__PURE__*/_jsx(motion.g, {
-        animate: {
-          x: pixelCoordinate.x,
-          y: pixelCoordinate.y
-        },
-        initial: false,
-        transition: updateTransition,
-        children: /*#__PURE__*/_jsx(motion.circle, {
-          ref: scope,
-          animate: shouldPulse ? {
-            opacity: [pulseOpacityStart, pulseOpacityEnd],
-            r: [pulseRadiusStart, pulseRadiusEnd],
-            transition: continuousPulseTransition
-          } : {
-            opacity: pulseOpacityEnd,
-            r: pulseRadiusStart
-          },
-          cx: 0,
-          cy: 0,
-          fill: color,
-          initial: {
-            opacity: shouldPulse ? pulseOpacityStart : pulseOpacityEnd,
-            r: pulseRadiusStart
-          }
-        })
-      }), /*#__PURE__*/_jsx(motion.circle, {
-        animate: {
-          cx: pixelCoordinate.x,
-          cy: pixelCoordinate.y
-        },
-        className: className,
-        cx: pixelCoordinate.x,
-        cy: pixelCoordinate.y,
-        fill: color,
-        initial: false,
-        r: radius,
-        stroke: "var(--color-bg)",
-        strokeWidth: strokeWidth,
-        style: style,
-        transition: updateTransition
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx("g", {
+  const pulseCircle = /*#__PURE__*/_jsx(motion.circle, {
+    ref: scope,
+    animate: shouldPulse ? {
+      opacity: [pulseOpacityStart, pulseOpacityEnd],
+      r: [pulseRadiusStart, pulseRadiusEnd],
+      transition: continuousPulseTransition
+    } : {
+      opacity: pulseOpacityEnd,
+      r: pulseRadiusStart
+    },
+    cx: 0,
+    cy: 0,
+    "data-testid": "".concat(testID, "-pulse"),
+    fill: color,
+    initial: {
+      opacity: shouldPulse ? pulseOpacityStart : pulseOpacityEnd,
+      r: pulseRadiusStart
+    }
+  });
+  return /*#__PURE__*/_jsxs("g", {
     "data-testid": testID,
     opacity: isWithinDrawingArea ? opacity : 0,
-    children: /*#__PURE__*/_jsx("circle", {
+    children: [isIdle && /*#__PURE__*/_jsx(motion.g, {
+      animate: {
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y
+      },
+      initial: false,
+      transition: updateTransition !== null && updateTransition !== void 0 ? updateTransition : instantTransition,
+      children: pulseCircle
+    }), /*#__PURE__*/_jsx(motion.circle, {
+      animate: {
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y
+      },
       className: className,
       cx: pixelCoordinate.x,
       cy: pixelCoordinate.y,
       fill: color,
+      initial: false,
       r: radius,
-      stroke: "var(--color-bg)",
+      stroke: stroke,
       strokeWidth: strokeWidth,
-      style: style
-    })
+      style: style,
+      transition: updateTransition !== null && updateTransition !== void 0 ? updateTransition : instantTransition
+    })]
   });
 }));

package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -1,4 +1,4 @@
-const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label"];
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label", "transition", "y"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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 { m as motion } from 'framer-motion';
 import { ChartText } from '../text';
 import { jsx as _jsx } from "react/jsx-runtime";
 const labelVerticalInset = 3.5;
@@ -28,19 +29,29 @@ export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
         top: labelVerticalInset,
         bottom: labelVerticalInset
       },
-      label
+      label,
+      transition,
+      y
     } = _ref,
     chartTextProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
-    disableRepositioning: true,
-    background: background,
-    borderRadius: borderRadius,
-    color: color,
-    elevated: elevated,
-    font: font,
-    inset: inset,
-    verticalAlignment: verticalAlignment
-  }, chartTextProps), {}, {
-    children: label
-  }));
+  return /*#__PURE__*/_jsx(motion.g, {
+    animate: {
+      y
+    },
+    initial: false,
+    transition: transition,
+    children: /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
+      disableRepositioning: true,
+      background: background,
+      borderRadius: borderRadius,
+      color: color,
+      elevated: elevated,
+      font: font,
+      inset: inset,
+      verticalAlignment: verticalAlignment,
+      y: transition ? 0 : y
+    }, chartTextProps), {}, {
+      children: label
+    }))
+  });
 });

package/esm/chart/scrubber/DefaultScrubberLabel.js

@@ -1,4 +1,4 @@
-const _excluded = ["verticalAlignment", "dy"];
+const _excluded = ["dx", "dy"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -6,25 +6,43 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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 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
+      dx: dxProp,
+      dy: dyProp
     } = _ref,
     props = _objectWithoutProperties(_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, _objectSpread({
-    dy: dy !== null && dy !== void 0 ? dy : -0.5 * drawingArea.y,
-    verticalAlignment: verticalAlignment
+    dx: dx,
+    dy: dy
   }, props));
 });

package/esm/chart/scrubber/Scrubber.js

@@ -7,7 +7,7 @@ import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
 import { ReferenceLine } from '../line';
-import { accessoryFadeTransitionDelay, accessoryFadeTransitionDuration, getPointOnScale, useScrubberContext } from '../utils';
+import { defaultAccessoryEnterTransition, getPointOnScale, getTransition, useScrubberContext } from '../utils';
 import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
 import { DefaultScrubberLabel } from './DefaultScrubberLabel';
 import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';
@@ -19,6 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     seriesIds,
+    hideBeaconLabels,
     hideLine,
     label,
     accessibilityLabel,
@@ -32,12 +33,15 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     overlayOffset = 2,
     beaconLabelMinGap,
     beaconLabelHorizontalOffset,
+    beaconLabelPreferredSide,
     labelFont,
     labelBoundsInset,
     beaconLabelFont,
     testID,
     idlePulse,
     beaconTransitions,
+    transitions = beaconTransitions,
+    beaconStroke,
     styles,
     classNames
   } = _ref;
@@ -46,8 +50,11 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     scrubberPosition
   } = useScrubberContext();
   const {
+    layout,
     getXScale,
+    getYScale,
     getXAxis,
+    getYAxis,
     animate,
     series,
     drawingArea,
@@ -69,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(() => {
@@ -115,11 +123,13 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       color: s.color
     }))) !== null && _series$filter$filter !== void 0 ? _series$filter$filter : [];
   }, [series, filteredSeriesIds]);
-
-  // 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 groupEnterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate]);
+  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,
@@ -127,63 +137,64 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     "data-component": "scrubber-group",
     "data-testid": testID,
     role: "status"
-  }, animate ? {
+  }, shouldAnimateGroup ? {
     animate: {
       opacity: 1,
-      transition: {
-        duration: accessoryFadeTransitionDuration,
-        delay: accessoryFadeTransitionDelay
-      }
-    },
-    exit: {
-      opacity: 0,
-      transition: {
-        duration: accessoryFadeTransitionDuration
-      }
+      transition: groupEnterTransition
     },
     initial: {
       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.line
+        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,
       labelFont: labelFont,
       stroke: lineStroke,
       styles: {
-        label: styles === null || styles === void 0 ? void 0 : styles.line
+        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,
       idlePulse: idlePulse,
       seriesIds: filteredSeriesIds,
+      stroke: beaconStroke,
       style: styles === null || styles === void 0 ? void 0 : styles.beacon,
       testID: testID,
-      transitions: beaconTransitions
-    }), beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+      transitions: transitions
+    }), showBeaconLabels && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.beaconLabel,
       labelFont: beaconLabelFont,
       labelHorizontalOffset: beaconLabelHorizontalOffset,
       labelMinGap: beaconLabelMinGap,
-      labels: beaconLabels
+      labelPreferredSide: beaconLabelPreferredSide,
+      labels: beaconLabels,
+      style: styles === null || styles === void 0 ? void 0 : styles.beaconLabel,
+      transitions: transitions
     })]
   }));
 }));