@coinbase/cds-web-visualization 3.4.0-beta.12 → 3.4.0-beta.14

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -8,12 +8,13 @@ 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 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,19 +28,25 @@ 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 yScale = getYScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.yAxisId);
@@ -68,17 +75,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 +100,64 @@ 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
+    }
+  });
+  const beaconCircle = isIdle && animate ? /*#__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: stroke,
+    strokeWidth: strokeWidth,
+    style: style,
+    transition: updateTransition
+  }) : /*#__PURE__*/_jsx("circle", {
+    className: className,
+    cx: pixelCoordinate.x,
+    cy: pixelCoordinate.y,
+    fill: color,
+    r: radius,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    style: style
+  });
+  return /*#__PURE__*/_jsxs("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
-    })
+    children: [isIdle && (animate ? /*#__PURE__*/_jsx(motion.g, {
+      animate: {
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y
+      },
+      initial: false,
+      transition: updateTransition,
+      children: pulseCircle
+    }) : /*#__PURE__*/_jsx("g", {
+      transform: "translate(".concat(pixelCoordinate.x, ", ").concat(pixelCoordinate.y, ")"),
+      children: pulseCircle
+    })), beaconCircle]
   });
 }));

package/esm/chart/scrubber/Scrubber.js

@@ -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,
@@ -38,6 +39,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     testID,
     idlePulse,
     beaconTransitions,
+    beaconStroke,
     styles,
     classNames
   } = _ref;
@@ -175,10 +177,11 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       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, {
+    }), !hideBeaconLabels && beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,
       labelFont: beaconLabelFont,
       labelHorizontalOffset: beaconLabelHorizontalOffset,

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -13,11 +13,13 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     isIdle,
     BeaconComponent,
     idlePulse,
+    animate,
     transitions,
     className,
     style,
     testID,
-    beaconRef
+    beaconRef,
+    stroke
   } = _ref;
   const {
     getSeries,
@@ -71,6 +73,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   if (dataY === undefined) return null;
   return /*#__PURE__*/_jsx(BeaconComponent, {
     ref: beaconRef,
+    animate: animate,
     className: className,
     color: color,
     dataX: dataX,
@@ -78,6 +81,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: seriesId,
+    stroke: stroke,
     style: style,
     testID: testID,
     transitions: transitions
@@ -91,7 +95,8 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     BeaconComponent = DefaultScrubberBeacon,
     className,
     style,
-    testID
+    testID,
+    stroke
   } = _ref2;
   const ScrubberBeaconRefs = useRefMap();
   const {
@@ -101,7 +106,8 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     getXScale,
     getXAxis,
     dataLength,
-    series
+    series,
+    animate
   } = useCartesianChartContext();
 
   // Expose imperative handle with pulse method
@@ -152,6 +158,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
   if (dataX === undefined || dataIndex === undefined) return null;
   return filteredSeries.map(s => /*#__PURE__*/_jsx(BeaconWithData, {
     BeaconComponent: BeaconComponent,
+    animate: animate,
     beaconRef: createBeaconRef(s.id),
     className: className,
     dataIndex: dataIndex,
@@ -159,6 +166,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: s.id,
+    stroke: stroke,
     style: style,
     testID: testID ? "".concat(testID !== null && testID !== void 0 ? testID : 'beacon', "-").concat(s.id) : undefined,
     transitions: transitions

package/esm/chart/utils/chart.js

@@ -1,5 +1,18 @@
 import { stack as d3Stack, stackOffsetDiverging, stackOrderNone } from 'd3-shape';
 export const defaultStackId = 'DEFAULT_STACK_ID';
+
+/**
+ * Shape variants available for legend items.
+ */
+
+/**
+ * Shape for legend items. Can be a preset variant or a custom ReactNode.
+ */
+
+/**
+ * Position of the legend relative to the chart.
+ */
+
 /**
  * Type guard to check if bounds are complete with both min and max values.
  * @param bounds - The bounds to validate

package/esm/sparkline/__figma__/Sparkline.figma.js

@@ -5,7 +5,7 @@ import { figma } from '@figma/code-connect';
 import { Sparkline } from '../Sparkline';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-15040&m=dev', {
-  imports: ["import { Sparkline } from '@coinbase/cds-web-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  imports: ["import { Sparkline } from '@coinbase/cds-web-visualization'", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'"],
   example: () => {
     const data = [20, 30, 5, 45, 0];
     // @ts-expect-error: useSparklinePath is not typed correctly

package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js

@@ -8,7 +8,7 @@ import { figma } from '@figma/code-connect';
 import { SparklineInteractive } from '../SparklineInteractive';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14858&m=dev', {
-  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js

@@ -9,7 +9,7 @@ import { SparklineInteractive } from '../../sparkline-interactive/SparklineInter
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractiveHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14931&m=dev', {
-  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization';", "import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization'", "import { SparklineInteractive } from '@coinbase/cds-web-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web-visualization",
-  "version": "3.4.0-beta.12",
+  "version": "3.4.0-beta.14",
   "description": "Coinbase Design System - Web Sparkline",
   "repository": {
     "type": "git",
@@ -38,10 +38,10 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.36.2",
+    "@coinbase/cds-common": "^8.38.6",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
-    "@coinbase/cds-web": "^8.36.2",
+    "@coinbase/cds-web": "^8.38.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -58,11 +58,10 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.36.2",
+    "@coinbase/cds-common": "^8.38.6",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
-    "@coinbase/cds-web": "^8.36.2",
-    "@figma/code-connect": "^1.3.4",
+    "@coinbase/cds-web": "^8.38.6",
     "@linaria/core": "^3.0.0-beta.22",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1"