@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.10

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

@@ -0,0 +1,132 @@
+const _excluded = ["accentColor", "yellowColor"];
+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, useCallback } from 'react';
+import { useTheme } from '@coinbase/cds-mobile';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { DefaultReferenceLineLabel } from '../DefaultReferenceLineLabel';
+import { DottedLine } from '../DottedLine';
+import { LineChart } from '../LineChart';
+import { ReferenceLine } from '../ReferenceLine';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LiquidationLabelMobile = /*#__PURE__*/memo(_ref => {
+  let {
+      accentColor,
+      yellowColor
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
+    background: accentColor,
+    borderRadius: 100,
+    color: "rgb(" + yellowColor + ")",
+    horizontalAlignment: "left",
+    inset: {
+      top: 4,
+      bottom: 4,
+      left: 8,
+      right: 8
+    }
+  }));
+});
+const ReferenceLineStories = () => {
+  const theme = useTheme();
+  const liquidationLabelComponent = useCallback(props => /*#__PURE__*/_jsx(LiquidationLabelMobile, _extends({}, props, {
+    accentColor: theme.color.accentSubtleYellow,
+    yellowColor: theme.spectrum.yellow70
+  })), [theme.color.accentSubtleYellow, theme.spectrum.yellow70]);
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Simple Reference Line",
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        height: 250,
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+          color: theme.color.fgPositive
+        }],
+        children: /*#__PURE__*/_jsx(ReferenceLine, {
+          LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+            dashIntervals: [0, 16],
+            strokeWidth: 3
+          })),
+          dataY: 10,
+          stroke: theme.color.fg
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Labels",
+      children: /*#__PURE__*/_jsxs(LineChart, {
+        showArea: true,
+        height: 250,
+        inset: 0,
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+        }],
+        children: [/*#__PURE__*/_jsx(ReferenceLine, {
+          dataX: 4,
+          label: "Vertical Reference Line",
+          labelHorizontalAlignment: "left"
+        }), /*#__PURE__*/_jsx(ReferenceLine, {
+          dataY: 70,
+          label: "Horizontal Reference Line",
+          labelHorizontalAlignment: "right",
+          labelVerticalAlignment: "bottom"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Label Customization",
+      children: /*#__PURE__*/_jsxs(LineChart, {
+        showArea: true,
+        height: 250,
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+        }],
+        children: [/*#__PURE__*/_jsx(ReferenceLine, {
+          dataY: 75,
+          label: "Top Right",
+          labelDx: -8,
+          labelDy: -8,
+          labelFont: "label1",
+          labelHorizontalAlignment: "right",
+          labelPosition: "right",
+          labelVerticalAlignment: "bottom"
+        }), /*#__PURE__*/_jsx(ReferenceLine, {
+          dataX: 7,
+          label: "Bottom Left",
+          labelDx: 8,
+          labelDy: 8,
+          labelFont: "label1",
+          labelHorizontalAlignment: "left",
+          labelPosition: "top",
+          labelVerticalAlignment: "top"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Custom Label Component",
+      children: /*#__PURE__*/_jsx(LineChart, {
+        height: 250,
+        inset: {
+          right: 32,
+          top: 0,
+          left: 0,
+          bottom: 0
+        },
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+        }],
+        children: /*#__PURE__*/_jsx(ReferenceLine, {
+          LabelComponent: liquidationLabelComponent,
+          dataY: 25,
+          label: "Liquidation",
+          labelPosition: "left",
+          stroke: theme.color.bgWarning
+        })
+      })
+    })]
+  });
+};
+export default ReferenceLineStories;

package/esm/chart/line/index.js

@@ -0,0 +1,8 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './DefaultReferenceLineLabel';
+export * from './DottedLine';
+export * from './Line';
+export * from './LineChart';
+export * from './ReferenceLine';
+export * from './SolidLine';
+// codegen:end

package/esm/chart/point/DefaultPointLabel.js

@@ -0,0 +1,39 @@
+const _excluded = ["x", "y", "position", "offset", "children"];
+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, useMemo } from 'react';
+import { ChartText } from '../text';
+import { getAlignmentFromPosition, getLabelCoordinates } from '../utils/point';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultPointLabel is the default label component for point labels.
+ * It renders text at the specified position relative to the point.
+ */
+export const DefaultPointLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      x,
+      y,
+      position = 'center',
+      offset,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  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, _extends({}, props, {
+    horizontalAlignment: horizontalAlignment,
+    verticalAlignment: verticalAlignment,
+    x: labelCoordinates.x,
+    y: labelCoordinates.y,
+    children: children
+  }));
+});

package/esm/chart/point/Point.js

@@ -0,0 +1,188 @@
+import { memo, useEffect, useMemo } from 'react';
+import { cancelAnimation, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Circle, Group, interpolateColors } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../ChartProvider';
+import { projectPoint } from '../utils';
+import { buildTransition, defaultTransition } from '../utils/transition';
+import { DefaultPointLabel } from './DefaultPointLabel';
+
+/**
+ * Props for point label components.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const Point = /*#__PURE__*/memo(_ref => {
+  let {
+    dataX,
+    dataY,
+    yAxisId,
+    fill: fillProp,
+    radius = 5,
+    opacity,
+    stroke: strokeProp,
+    strokeWidth = 2,
+    label,
+    LabelComponent = DefaultPointLabel,
+    labelPosition = 'center',
+    labelOffset,
+    labelFont,
+    transition = defaultTransition,
+    animate: animateProp
+  } = _ref;
+  const theme = useTheme();
+  const stroke = strokeProp != null ? strokeProp : theme.color.bg;
+  const fill = fillProp != null ? fillProp : theme.color.fgPrimary;
+  const {
+    getXScale,
+    getYScale,
+    animate: animationEnabled,
+    drawingArea
+  } = useCartesianChartContext();
+  const animate = animateProp != null ? animateProp : animationEnabled;
+  const xScale = getXScale();
+  const yScale = getYScale(yAxisId);
+  const shouldAnimate = animate != null ? animate : false;
+
+  // Calculate pixel coordinates from data coordinates
+  const pixelCoordinate = useMemo(() => {
+    if (!xScale || !yScale) {
+      return undefined;
+    }
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [xScale, yScale, dataX, dataY]);
+  const previousPixelCoordinate = usePreviousValue(pixelCoordinate);
+  const previousFill = usePreviousValue(fill);
+
+  // Animated values for position
+  const animatedX = useSharedValue(0);
+  const animatedY = useSharedValue(0);
+
+  // Animated value for color interpolation (0 = old color, 1 = new color)
+  const colorProgress = useSharedValue(1);
+
+  // Update position when coordinates change
+  useEffect(() => {
+    if (!pixelCoordinate) {
+      return;
+    }
+    if (shouldAnimate && previousPixelCoordinate) {
+      animatedX.value = buildTransition(pixelCoordinate.x, transition);
+      animatedY.value = buildTransition(pixelCoordinate.y, transition);
+    } else {
+      cancelAnimation(animatedX);
+      cancelAnimation(animatedY);
+      animatedX.value = pixelCoordinate.x;
+      animatedY.value = pixelCoordinate.y;
+    }
+  }, [pixelCoordinate, shouldAnimate, previousPixelCoordinate, animatedX, animatedY, transition]);
+
+  // Update color when fill changes
+  useEffect(() => {
+    if (shouldAnimate && previousFill && previousFill !== fill) {
+      colorProgress.value = 0;
+      colorProgress.value = buildTransition(1, transition);
+    } else {
+      cancelAnimation(colorProgress);
+      colorProgress.value = 1;
+    }
+  }, [fill, shouldAnimate, previousFill, colorProgress, transition]);
+
+  // Create animated point for circles
+  const animatedPoint = useDerivedValue(() => {
+    return {
+      x: animatedX.value,
+      y: animatedY.value
+    };
+  }, [animatedX, animatedY]);
+
+  // Interpolate between previous and current fill color
+  const animatedFillColor = useDerivedValue(() => {
+    if (!previousFill || previousFill === fill) {
+      return fill;
+    }
+    return interpolateColors(colorProgress.value, [0, 1], [previousFill, fill]);
+  }, [colorProgress, previousFill, fill]);
+
+  // Check if point is within drawing area
+  const isWithinDrawingArea = useDerivedValue(() => {
+    return animatedX.value >= drawingArea.x && animatedX.value <= drawingArea.x + drawingArea.width && animatedY.value >= drawingArea.y && animatedY.value <= drawingArea.y + drawingArea.height;
+  }, [animatedX, animatedY, drawingArea]);
+
+  // Compute effective opacity based on drawing area bounds
+  const effectiveOpacity = useDerivedValue(() => {
+    const baseOpacity = opacity != null ? opacity : 1;
+    return isWithinDrawingArea.value ? baseOpacity : 0;
+  }, [isWithinDrawingArea, opacity]);
+  const offset = useMemo(() => labelOffset != null ? labelOffset : radius * 2, [labelOffset, radius]);
+  if (!pixelCoordinate) {
+    return null;
+  }
+
+  // If animation is disabled or on first render, use static rendering
+  if (!shouldAnimate || !previousPixelCoordinate) {
+    const isWithinBounds = pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
+    const staticOpacity = isWithinBounds ? opacity != null ? opacity : 1 : 0;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Group, {
+        opacity: staticOpacity,
+        children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
+          c: {
+            x: pixelCoordinate.x,
+            y: pixelCoordinate.y
+          },
+          color: stroke,
+          r: radius + strokeWidth / 2
+        }), /*#__PURE__*/_jsx(Circle, {
+          c: {
+            x: pixelCoordinate.x,
+            y: pixelCoordinate.y
+          },
+          color: fill,
+          r: radius - strokeWidth / 2
+        })]
+      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        dataX: dataX,
+        dataY: dataY,
+        fill: fill,
+        font: labelFont,
+        offset: offset,
+        position: labelPosition,
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y,
+        children: label
+      })]
+    });
+  }
+
+  // Animated rendering
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Group, {
+      opacity: effectiveOpacity,
+      children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
+        c: animatedPoint,
+        color: stroke,
+        r: radius + strokeWidth / 2
+      }), /*#__PURE__*/_jsx(Circle, {
+        c: animatedPoint,
+        color: animatedFillColor,
+        r: radius - strokeWidth / 2
+      })]
+    }), label && /*#__PURE__*/_jsx(LabelComponent, {
+      dataX: dataX,
+      dataY: dataY,
+      fill: fill,
+      font: labelFont,
+      offset: offset,
+      position: labelPosition,
+      x: pixelCoordinate.x,
+      y: pixelCoordinate.y,
+      children: label
+    })]
+  });
+});

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,179 @@
+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 { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
+import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withRepeat, withSequence } from 'react-native-reanimated';
+import { useTheme } from '@coinbase/cds-mobile';
+import { Circle, Group } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../ChartProvider';
+import { unwrapAnimatedValue } from '../utils';
+import { projectPointWithSerializableScale } from '../utils/point';
+import { buildTransition, defaultTransition } from '../utils/transition';
+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 = {
+  type: 'timing',
+  duration: 1600,
+  easing: Easing.bezier(0.0, 0.0, 0.0, 1.0)
+};
+const defaultPulseRepeatDelay = 400;
+export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesId,
+    color: colorProp,
+    dataX,
+    dataY,
+    isIdle,
+    idlePulse,
+    animate = true,
+    transitions,
+    opacity: opacityProp = 1
+  } = _ref;
+  const theme = useTheme();
+  const {
+    getSeries,
+    getXSerializableScale,
+    getYSerializableScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const targetSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const yScale = useMemo(() => getYSerializableScale(targetSeries == null ? void 0 : targetSeries.yAxisId), [getYSerializableScale, targetSeries == null ? void 0 : targetSeries.yAxisId]);
+  const color = useMemo(() => {
+    var _ref2;
+    return (_ref2 = colorProp != null ? colorProp : targetSeries == null ? void 0 : targetSeries.color) != null ? _ref2 : theme.color.fgPrimary;
+  }, [colorProp, targetSeries == null ? void 0 : targetSeries.color, theme.color.fgPrimary]);
+  const updateTransition = useMemo(() => {
+    var _transitions$update;
+    return (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : defaultTransition;
+  }, [transitions == null ? void 0 : transitions.update]);
+  const pulseTransition = useMemo(() => {
+    var _transitions$pulse;
+    return (_transitions$pulse = transitions == null ? void 0 : transitions.pulse) != null ? _transitions$pulse : defaultPulseTransition;
+  }, [transitions == null ? void 0 : transitions.pulse]);
+  const pulseRepeatDelay = useMemo(() => {
+    var _transitions$pulseRep;
+    return (_transitions$pulseRep = transitions == null ? void 0 : transitions.pulseRepeatDelay) != null ? _transitions$pulseRep : defaultPulseRepeatDelay;
+  }, [transitions == null ? void 0 : transitions.pulseRepeatDelay]);
+  const pulseOpacity = useSharedValue(0);
+  const pulseRadius = useSharedValue(pulseRadiusStart);
+  const animatedX = useSharedValue(0);
+  const animatedY = useSharedValue(0);
+
+  // Calculate the target point position - project data to pixels
+  const targetPoint = useDerivedValue(() => {
+    if (!xScale || !yScale) return {
+      x: 0,
+      y: 0
+    };
+    return projectPointWithSerializableScale({
+      x: unwrapAnimatedValue(dataX),
+      y: unwrapAnimatedValue(dataY),
+      xScale,
+      yScale
+    });
+  }, [dataX, dataY, xScale, yScale]);
+  useAnimatedReaction(() => {
+    return {
+      point: targetPoint.value,
+      isIdle: unwrapAnimatedValue(isIdle)
+    };
+  }, (current, previous) => {
+    // When animation is disabled, on initial render, or when we are starting,
+    // continuing, or finishing scrubbing we should immediately transition
+    if (!animate || previous === null || !previous.isIdle || !current.isIdle) {
+      animatedX.value = current.point.x;
+      animatedY.value = current.point.y;
+      return;
+    }
+    animatedX.value = buildTransition(current.point.x, updateTransition);
+    animatedY.value = buildTransition(current.point.y, updateTransition);
+  }, [animate, updateTransition]);
+
+  // Create animated point using the animated values
+  const animatedPoint = useDerivedValue(() => {
+    return {
+      x: animatedX.value,
+      y: animatedY.value
+    };
+  }, [animatedX, animatedY]);
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Only trigger manual pulse when idlePulse is not enabled
+      if (!idlePulse) {
+        cancelAnimation(pulseOpacity);
+        cancelAnimation(pulseRadius);
+
+        // Manual pulse without delay
+        const immediatePulseTransition = _extends({}, pulseTransition, {
+          delay: 0
+        });
+        pulseOpacity.value = pulseOpacityStart;
+        pulseRadius.value = pulseRadiusStart;
+        pulseOpacity.value = buildTransition(pulseOpacityEnd, immediatePulseTransition);
+        pulseRadius.value = buildTransition(pulseRadiusEnd, immediatePulseTransition);
+      }
+    }
+  }), [idlePulse, pulseOpacity, pulseRadius, pulseTransition]);
+
+  // Watch idlePulse changes and control continuous pulse
+  useAnimatedReaction(() => idlePulse, (current, previous) => {
+    if (!animate) return;
+    if (current) {
+      // Start continuous pulse when idlePulse is enabled
+      // Create instant transition to reset pulse after delay
+      const instantTransition = {
+        type: 'timing',
+        duration: 0
+      };
+      const resetWithDelay = _extends({}, instantTransition, {
+        delay: pulseRepeatDelay
+      });
+      pulseOpacity.value = pulseOpacityStart;
+      pulseRadius.value = pulseRadiusStart;
+      pulseOpacity.value = withRepeat(withSequence(buildTransition(pulseOpacityEnd, pulseTransition), buildTransition(pulseOpacityStart, resetWithDelay)), -1,
+      // infinite loop
+      false);
+      pulseRadius.value = withRepeat(withSequence(buildTransition(pulseRadiusEnd, pulseTransition), buildTransition(pulseRadiusStart, resetWithDelay)), -1,
+      // infinite loop
+      false);
+    } else {
+      // Stop pulse when idlePulse is disabled
+      cancelAnimation(pulseOpacity);
+      cancelAnimation(pulseRadius);
+      pulseOpacity.value = pulseOpacityEnd;
+      pulseRadius.value = pulseRadiusStart;
+    }
+  }, [animate, pulseTransition, pulseRepeatDelay]);
+  const pulseVisibility = useDerivedValue(() => {
+    // Never pulse when scrubbing
+    if (!unwrapAnimatedValue(isIdle)) return 0;
+    return pulseOpacity.value;
+  }, [isIdle, pulseOpacity]);
+  const beaconOpacity = useDerivedValue(() => {
+    const point = targetPoint.value;
+    const isWithinDrawingArea = point.x >= drawingArea.x && point.x <= drawingArea.x + drawingArea.width && point.y >= drawingArea.y && point.y <= drawingArea.y + drawingArea.height;
+    const userOpacity = unwrapAnimatedValue(opacityProp);
+    return isWithinDrawingArea ? userOpacity : 0;
+  }, [targetPoint, drawingArea, opacityProp]);
+  return /*#__PURE__*/_jsxs(Group, {
+    opacity: beaconOpacity,
+    children: [/*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: color,
+      opacity: pulseVisibility,
+      r: pulseRadius
+    }), /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: theme.color.bg,
+      r: radius + strokeWidth / 2
+    }), /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: color,
+      r: radius - strokeWidth / 2
+    })]
+  });
+}));

package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -0,0 +1,43 @@
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label"];
+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 { useTheme } from '@coinbase/cds-mobile';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+const labelVerticalInset = 3.5;
+const labelHorizontalInset = 4;
+/**
+ * DefaultScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon.
+ */
+export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      background,
+      color,
+      elevated = true,
+      borderRadius = 4,
+      font = 'label1',
+      verticalAlignment = 'middle',
+      inset = {
+        left: labelHorizontalInset,
+        right: labelHorizontalInset,
+        top: labelVerticalInset,
+        bottom: labelVerticalInset
+      },
+      label
+    } = _ref,
+    chartTextProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(ChartText, _extends({
+    disableRepositioning: true,
+    background: background != null ? background : theme.color.bg,
+    borderRadius: borderRadius,
+    color: color != null ? color : theme.color.fgPrimary,
+    elevated: elevated,
+    font: font,
+    inset: inset,
+    verticalAlignment: verticalAlignment
+  }, chartTextProps, {
+    children: label
+  }));
+});

package/esm/chart/scrubber/DefaultScrubberLabel.js

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