@coinbase/cds-web-visualization 3.4.0-beta.5 → 3.4.0-beta.7

package/esm/chart/{line/GradientLine.js → point/DefaultPointLabel.js}

@@ -1,4 +1,4 @@
-const _excluded = ["fill", "stroke", "startColor", "endColor", "strokeOpacity", "startOpacity", "endOpacity", "strokeLinecap", "strokeLinejoin", "strokeWidth"];
+const _excluded = ["x", "y", "position", "offset", "children"];
 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,53 +6,39 @@ 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, useId } from 'react';
-import { Path } from '../Path';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { ChartText } from '../text';
+import { getAlignmentFromPosition, getLabelCoordinates } from '../utils/point';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A gradient line component which uses path element.
+ * DefaultPointLabel is the default label component for point labels.
+ * It renders text at the specified position relative to the point.
  */
-export const GradientLine = /*#__PURE__*/memo(_ref => {
+export const DefaultPointLabel = /*#__PURE__*/memo(_ref => {
   let {
-      fill = 'none',
-      stroke = 'var(--color-bgLine)',
-      startColor,
-      endColor,
-      strokeOpacity = 1,
-      startOpacity = strokeOpacity,
-      endOpacity = strokeOpacity,
-      strokeLinecap = 'round',
-      strokeLinejoin = 'round',
-      strokeWidth = 2
+      x,
+      y,
+      position = 'center',
+      offset,
+      children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const patternId = useId();
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("defs", {
-      children: /*#__PURE__*/_jsxs("linearGradient", {
-        id: patternId,
-        x1: "0%",
-        x2: "0%",
-        y1: "0%",
-        y2: "100%",
-        children: [/*#__PURE__*/_jsx("stop", {
-          offset: "0%",
-          stopColor: startColor !== null && startColor !== void 0 ? startColor : stroke,
-          stopOpacity: startOpacity
-        }), /*#__PURE__*/_jsx("stop", {
-          offset: "100%",
-          stopColor: endColor !== null && endColor !== void 0 ? endColor : stroke,
-          stopOpacity: endOpacity
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Path, _objectSpread({
-      clipOffset: strokeWidth,
-      fill: fill,
-      stroke: "url(#".concat(patternId, ")"),
-      strokeLinecap: strokeLinecap,
-      strokeLinejoin: strokeLinejoin,
-      strokeOpacity: strokeOpacity,
-      strokeWidth: strokeWidth
-    }, props))]
-  });
+  const {
+    horizontalAlignment,
+    verticalAlignment
+  } = useMemo(() => getAlignmentFromPosition(position), [position]);
+  const labelCoordinates = useMemo(() => {
+    if (offset === undefined) return {
+      x,
+      y
+    };
+    return getLabelCoordinates(x, y, position, offset);
+  }, [x, y, position, offset]);
+  return /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({}, props), {}, {
+    horizontalAlignment: horizontalAlignment,
+    verticalAlignment: verticalAlignment,
+    x: labelCoordinates.x,
+    y: labelCoordinates.y,
+    children: children
+  }));
 });

package/esm/chart/point/Point.css

@@ -0,0 +1,2 @@
+.cds-containerCss-ckemp0e{outline:none;}
+.cds-innerPointCss-ik8duli{border-radius:var(--borderRadius-1000);outline:none;}.cds-innerPointCss-ik8duli:focus{outline:none;}.cds-innerPointCss-ik8duli:focus-visible{outline:2px solid var(--color-fgPrimary);outline-offset:2px;}

package/esm/chart/{Point.js → point/Point.js}

@@ -1,4 +1,4 @@
-const _excluded = ["dataX", "dataY", "yAxisId", "fill", "radius", "opacity", "onClick", "onScrubberEnter", "className", "style", "classNames", "styles", "stroke", "strokeWidth", "accessibilityLabel", "label", "labelProps", "testID", "pixelCoordinates", "animate"];
+const _excluded = ["dataX", "dataY", "yAxisId", "fill", "radius", "opacity", "onClick", "className", "style", "classNames", "styles", "stroke", "strokeWidth", "accessibilityLabel", "label", "LabelComponent", "labelPosition", "labelOffset", "labelFont", "testID", "animate", "transition"];
 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,23 +6,18 @@ 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 React, { memo, useEffect, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { m as motion } from 'framer-motion';
-import { useCartesianChartContext } from './ChartProvider';
-import { ChartText } from './text';
-import { projectPoint, useScrubberContext } from './utils';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const containerCss = "cds-containerCss-c137x6qr";
-const innerPointCss = "cds-innerPointCss-i1qyub1f";
+import { useCartesianChartContext } from '../ChartProvider';
+import { projectPoint } from '../utils';
+import { DefaultPointLabel } from './DefaultPointLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const containerCss = "cds-containerCss-ckemp0e";
+const innerPointCss = "cds-innerPointCss-ik8duli";
 
 /**
- * Parameters passed to renderPoints callback function.
- */
-
-/**
- * Shared configuration for point appearance and behavior.
- * Used by line-associated points rendered via Line/LineChart components.
+ * Props for point label components.
  */
 
 export const Point = /*#__PURE__*/memo(_ref => {
@@ -31,10 +26,9 @@ export const Point = /*#__PURE__*/memo(_ref => {
       dataY,
       yAxisId,
       fill = 'var(--color-fgPrimary)',
-      radius = 4,
+      radius = 5,
       opacity,
       onClick,
-      onScrubberEnter,
       className,
       style,
       classNames,
@@ -43,27 +37,25 @@ export const Point = /*#__PURE__*/memo(_ref => {
       strokeWidth = 2,
       accessibilityLabel,
       label,
-      labelProps,
+      LabelComponent = DefaultPointLabel,
+      labelPosition = 'center',
+      labelOffset = radius * 2,
+      labelFont,
       testID,
-      pixelCoordinates,
-      animate
+      animate: animateProp,
+      transition
     } = _ref,
     svgProps = _objectWithoutProperties(_ref, _excluded);
   const {
     getXScale,
     getYScale,
-    animate: animationEnabled
+    animate: animationEnabled,
+    drawingArea
   } = useCartesianChartContext();
-  const {
-    scrubberPosition
-  } = useScrubberContext();
+  const animate = animateProp !== null && animateProp !== void 0 ? animateProp : animationEnabled;
   const xScale = getXScale();
   const yScale = getYScale(yAxisId);
-  const isScrubberHighlighted = scrubberPosition !== undefined && scrubberPosition === dataX;
   const pixelCoordinate = useMemo(() => {
-    if (pixelCoordinates) {
-      return pixelCoordinates;
-    }
     if (!xScale || !yScale) {
       return {
         x: 0,
@@ -76,15 +68,11 @@ export const Point = /*#__PURE__*/memo(_ref => {
       xScale,
       yScale
     });
-  }, [xScale, yScale, dataX, dataY, pixelCoordinates]);
-  useEffect(() => {
-    if (isScrubberHighlighted && onScrubberEnter) {
-      onScrubberEnter({
-        x: pixelCoordinate.x,
-        y: pixelCoordinate.y
-      });
-    }
-  }, [isScrubberHighlighted, onScrubberEnter, pixelCoordinate.x, pixelCoordinate.y]);
+  }, [xScale, yScale, dataX, dataY]);
+  const isWithinDrawingArea = useMemo(() => {
+    if (!pixelCoordinate) return false;
+    return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
+  }, [pixelCoordinate, drawingArea]);
   const innerPoint = useMemo(() => {
     const mergedStyles = _objectSpread(_objectSpread({
       cursor: onClick !== undefined ? 'pointer' : undefined
@@ -113,15 +101,33 @@ export const Point = /*#__PURE__*/memo(_ref => {
         });
       }
     } : undefined;
-
-    // Use the animate prop if provided, otherwise fall back to chart context
-    const shouldAnimateInteractions = animate !== null && animate !== void 0 ? animate : animationEnabled;
-    const shouldAnimatePosition = animate !== null && animate !== void 0 ? animate : animationEnabled;
+    if (!animate) {
+      return /*#__PURE__*/_jsx("circle", _objectSpread({
+        "aria-label": accessibilityLabel,
+        className: cx(innerPointCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.point),
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y,
+        fill: fill,
+        onClick: onClick ? event => onClick(event, {
+          dataX,
+          dataY,
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        }) : undefined,
+        onKeyDown: handleKeyDown,
+        r: radius,
+        role: onClick ? 'button' : undefined,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        style: mergedStyles,
+        tabIndex: onClick ? 0 : -1
+      }, svgProps));
+    }
     return /*#__PURE__*/_jsx(motion.circle, _objectSpread({
-      animate: shouldAnimatePosition ? {
+      animate: {
         cx: pixelCoordinate.x,
         cy: pixelCoordinate.y
-      } : undefined,
+      },
       "aria-label": accessibilityLabel,
       className: cx(innerPointCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.point),
       cx: pixelCoordinate.x,
@@ -141,31 +147,34 @@ export const Point = /*#__PURE__*/memo(_ref => {
       strokeWidth: strokeWidth,
       style: mergedStyles,
       tabIndex: onClick ? 0 : -1,
-      transition: {
-        duration: 0.3,
-        ease: 'easeInOut'
-      },
+      transition: transition,
       variants: variants,
-      whileHover: shouldAnimateInteractions && onClick ? 'hovered' : 'default',
-      whileTap: shouldAnimateInteractions && onClick ? 'pressed' : 'default'
+      whileHover: onClick ? 'hovered' : 'default',
+      whileTap: onClick ? 'pressed' : 'default'
     }, svgProps));
-  }, [style, styles === null || styles === void 0 ? void 0 : styles.point, classNames === null || classNames === void 0 ? void 0 : classNames.point, fill, animate, animationEnabled, radius, className, onClick, stroke, strokeWidth, svgProps, dataX, dataY, pixelCoordinate.x, pixelCoordinate.y, accessibilityLabel]);
+  }, [style, styles === null || styles === void 0 ? void 0 : styles.point, classNames === null || classNames === void 0 ? void 0 : classNames.point, fill, animate, radius, className, onClick, stroke, strokeWidth, svgProps, dataX, dataY, pixelCoordinate.x, pixelCoordinate.y, accessibilityLabel, transition]);
   if (!xScale || !yScale) {
-    return null;
+    return;
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs("g", {
+    opacity: isWithinDrawingArea ? 1 : 0,
     children: [/*#__PURE__*/_jsx("g", {
-      className: cx(containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.container),
+      className: cx(containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.root),
       "data-testid": testID,
       opacity: opacity,
-      style: styles === null || styles === void 0 ? void 0 : styles.container,
+      style: styles === null || styles === void 0 ? void 0 : styles.root,
       children: innerPoint
-    }), label && /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
+    }), label && /*#__PURE__*/_jsx(LabelComponent, {
+      dataX: dataX,
+      dataY: dataY,
+      fill: fill,
+      font: labelFont,
+      offset: labelOffset,
+      position: labelPosition,
       x: pixelCoordinate.x,
-      y: pixelCoordinate.y
-    }, labelProps), {}, {
+      y: pixelCoordinate.y,
       children: label
-    }))]
+    })]
   });
 });
 import "./Point.css";

package/esm/chart/point/index.js

@@ -0,0 +1,2 @@
+export * from './DefaultPointLabel';
+export * from './Point';

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -0,0 +1,155 @@
+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; }
+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 { m as motion, useAnimate } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultTransition, projectPoint } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const radius = 5;
+const strokeWidth = 2;
+const pulseOpacityStart = 0.5;
+const pulseOpacityEnd = 0;
+const pulseRadiusStart = 10;
+const pulseRadiusEnd = 15;
+const defaultPulseTransition = {
+  duration: 1.6,
+  ease: [0.0, 0.0, 0.0, 1.0]
+};
+const defaultPulseRepeatDelay = 0.4;
+export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesId,
+    color: colorProp,
+    dataX,
+    dataY,
+    isIdle,
+    idlePulse,
+    transitions,
+    opacity = 1,
+    className,
+    style,
+    testID
+  } = _ref;
+  const [scope, animate] = useAnimate();
+  const {
+    getSeries,
+    getXScale,
+    getYScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const targetSeries = getSeries(seriesId);
+  const xScale = getXScale();
+  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 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]);
+  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;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.pulse]);
+  const pulseRepeatDelay = useMemo(() => {
+    var _transitions$pulseRep;
+    return (_transitions$pulseRep = transitions === null || transitions === void 0 ? void 0 : transitions.pulseRepeatDelay) !== null && _transitions$pulseRep !== void 0 ? _transitions$pulseRep : defaultPulseRepeatDelay;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.pulseRepeatDelay]);
+  const pixelCoordinate = useMemo(() => {
+    if (!xScale || !yScale) return;
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [dataX, dataY, xScale, yScale]);
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Only pulse when idle and idlePulse is not enabled
+      if (isIdle && !idlePulse && scope.current) {
+        animate(scope.current, {
+          opacity: [pulseOpacityStart, pulseOpacityEnd],
+          r: [pulseRadiusStart, pulseRadiusEnd]
+        }, pulseTransition);
+      }
+    }
+  }), [isIdle, idlePulse, scope, animate, pulseTransition]);
+
+  // Create continuous pulse transition by repeating the base pulse transition with delay
+  const continuousPulseTransition = useMemo(() => _objectSpread(_objectSpread({}, pulseTransition), {}, {
+    repeat: Infinity,
+    repeatDelay: pulseRepeatDelay
+  }), [pulseTransition, pulseRepeatDelay]);
+  const shouldPulse = isIdle && idlePulse;
+  const isWithinDrawingArea = useMemo(() => {
+    if (!pixelCoordinate) return false;
+    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", {
+    "data-testid": testID,
+    opacity: isWithinDrawingArea ? opacity : 0,
+    children: /*#__PURE__*/_jsx("circle", {
+      className: className,
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: color,
+      r: radius,
+      stroke: "var(--color-bg)",
+      strokeWidth: strokeWidth,
+      style: style
+    })
+  });
+}));

package/esm/chart/scrubber/{ScrubberBeaconLabel.js → DefaultScrubberBeaconLabel.js}

@@ -1,4 +1,4 @@
-const _excluded = ["background", "color", "elevation", "borderRadius", "font", "verticalAlignment"];
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label"];
 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; }
@@ -9,25 +9,38 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { memo } from 'react';
 import { ChartText } from '../text';
 import { jsx as _jsx } from "react/jsx-runtime";
+const labelVerticalInset = 3.5;
+const labelHorizontalInset = 4;
 /**
- * The ScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon (i.e. a point on the series pinned to the scrubber position).
+ * DefaultScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon (i.e. a point on the series pinned to the scrubber position).
  */
-export const ScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
+export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
   let {
-      background = 'white',
+      background = 'var(--color-bg',
       color = 'var(--color-fgPrimary)',
-      elevation = background !== undefined ? 1 : undefined,
-      borderRadius = background !== undefined ? 4 : undefined,
+      elevated = true,
+      borderRadius = 4,
       font = 'label1',
-      verticalAlignment = 'middle'
+      verticalAlignment = 'middle',
+      inset = {
+        left: labelHorizontalInset,
+        right: labelHorizontalInset,
+        top: labelVerticalInset,
+        bottom: labelVerticalInset
+      },
+      label
     } = _ref,
     chartTextProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(ChartText, _objectSpread({
+  return /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
+    disableRepositioning: true,
     background: background,
     borderRadius: borderRadius,
     color: color,
-    elevation: elevation,
+    elevated: elevated,
     font: font,
+    inset: inset,
     verticalAlignment: verticalAlignment
-  }, chartTextProps));
+  }, chartTextProps), {}, {
+    children: label
+  }));
 });

package/esm/chart/scrubber/DefaultScrubberLabel.js

@@ -0,0 +1,30 @@
+const _excluded = ["verticalAlignment", "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; }
+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); }
+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 { 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.
+ */
+export const DefaultScrubberLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      verticalAlignment = 'middle',
+      dy
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    drawingArea
+  } = useCartesianChartContext();
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _objectSpread({
+    dy: dy !== null && dy !== void 0 ? dy : -0.5 * drawingArea.y,
+    verticalAlignment: verticalAlignment
+  }, props));
+});