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

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

@@ -717,6 +717,36 @@ function StylingScrubber() {
     })
   });
 }
+function HideBeaconLabels() {
+  const theme = useTheme();
+  const pageViews = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
+  const uniqueVisitors = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    legend: true,
+    showArea: true,
+    height: 200,
+    inset: {
+      top: 60
+    },
+    series: [{
+      id: 'pageViews',
+      data: pageViews,
+      color: theme.color.accentBoldGreen,
+      label: 'Page Views'
+    }, {
+      id: 'uniqueVisitors',
+      data: uniqueVisitors,
+      color: theme.color.accentBoldPurple,
+      label: 'Unique Visitors'
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideBeaconLabels: true,
+      labelElevated: true,
+      label: dataIndex => "Day " + (dataIndex + 1)
+    })
+  });
+}
 function Compact() {
   const theme = useTheme();
   const dimensions = {
@@ -992,7 +1022,7 @@ const LegendDot = /*#__PURE__*/memo(props => {
     width: 10
   }, props));
 });
-const LegendItem = /*#__PURE__*/memo(_ref0 => {
+const LegendEntry = /*#__PURE__*/memo(_ref0 => {
   let {
     color = assets.btc.color,
     label,
@@ -1037,15 +1067,15 @@ const PerformanceHeader = /*#__PURE__*/memo(_ref1 => {
   return /*#__PURE__*/_jsxs(HStack, {
     gap: 1,
     paddingX: 1,
-    children: [/*#__PURE__*/_jsx(LegendItem, {
+    children: [/*#__PURE__*/_jsx(LegendEntry, {
       color: theme.color.fgPositive,
       label: "High Price",
       value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition] * 1.2)
-    }), /*#__PURE__*/_jsx(LegendItem, {
+    }), /*#__PURE__*/_jsx(LegendEntry, {
       color: assets.btc.color,
       label: "Actual Price",
       value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition])
-    }), /*#__PURE__*/_jsx(LegendItem, {
+    }), /*#__PURE__*/_jsx(LegendEntry, {
       color: theme.color.fgNegative,
       label: "Low Price",
       value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition] * 0.8)
@@ -2014,6 +2044,122 @@ function HiddenScrubberWhenIdle() {
     })
   });
 }
+function CustomBeaconStroke() {
+  const theme = useTheme();
+  const backgroundColor = "rgb(" + theme.spectrum.red40 + ")";
+  const foregroundColor = "rgb(" + theme.spectrum.gray0 + ")";
+  return /*#__PURE__*/_jsx(Box, {
+    borderRadius: 300,
+    padding: 2,
+    style: {
+      backgroundColor
+    },
+    children: /*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      height: 150,
+      series: [{
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+        color: foregroundColor
+      }],
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        hideOverlay: true,
+        idlePulse: true,
+        beaconStroke: backgroundColor,
+        lineStroke: foregroundColor
+      })
+    })
+  });
+}
+function CustomBeaconSize() {
+  const theme = useTheme();
+  const dataCount = 14;
+  const minDataValue = 0;
+  const maxDataValue = 100;
+  const minStepOffset = 5;
+  const maxStepOffset = 20;
+  const updateInterval = 2000;
+  function generateNextValue(previousValue) {
+    const range = maxStepOffset - minStepOffset;
+    const offset = Math.random() * range + minStepOffset;
+    let direction;
+    if (previousValue >= maxDataValue) {
+      direction = -1;
+    } else if (previousValue <= minDataValue) {
+      direction = 1;
+    } else {
+      direction = Math.random() < 0.5 ? -1 : 1;
+    }
+    const newValue = previousValue + offset * direction;
+    return Math.max(minDataValue, Math.min(maxDataValue, newValue));
+  }
+  function generateInitialData() {
+    const data = [];
+    let previousValue = Math.random() * (maxDataValue - minDataValue) + minDataValue;
+    data.push(previousValue);
+    for (let i = 1; i < dataCount; i++) {
+      const newValue = generateNextValue(previousValue);
+      data.push(newValue);
+      previousValue = newValue;
+    }
+    return data;
+  }
+  const InvertedBeacon = useMemo(() => props => /*#__PURE__*/_jsx(DefaultScrubberBeacon, _extends({}, props, {
+    color: theme.color.bg,
+    radius: 5,
+    stroke: theme.color.fg,
+    strokeWidth: 3
+  })), [theme.color.fg, theme.color.bg]);
+  const CustomBeaconSizeChart = /*#__PURE__*/memo(() => {
+    const [data, setData] = useState(generateInitialData);
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        setData(currentData => {
+          var _currentData2;
+          const lastValue = (_currentData2 = currentData[currentData.length - 1]) != null ? _currentData2 : 50;
+          const newValue = generateNextValue(lastValue);
+          return [...currentData.slice(1), newValue];
+        });
+      }, updateInterval);
+      return () => clearInterval(intervalId);
+    }, []);
+    return /*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      showYAxis: true,
+      height: 150,
+      series: [{
+        id: 'prices',
+        data,
+        color: theme.color.fg
+      }],
+      xAxis: {
+        range: _ref23 => {
+          let {
+            min,
+            max
+          } = _ref23;
+          return {
+            min,
+            max: max - 16
+          };
+        }
+      },
+      yAxis: {
+        showGrid: true,
+        domain: {
+          min: 0,
+          max: 100
+        }
+      },
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        BeaconComponent: InvertedBeacon
+      })
+    });
+  });
+  return /*#__PURE__*/_jsx(CustomBeaconSizeChart, {});
+}
 function TwoLineScrubberLabel() {
   const theme = useTheme();
   const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
@@ -2260,11 +2406,11 @@ function ExampleNavigator() {
       }],
       xAxis: {
         // Give space before the end of the chart for the scrubber
-        range: _ref23 => {
+        range: _ref24 => {
           let {
             min,
             max
-          } = _ref23;
+          } = _ref24;
           return {
             min,
             max: max - 24
@@ -2319,6 +2465,15 @@ function ExampleNavigator() {
   }, {
     title: 'Two-Line Scrubber Label',
     component: /*#__PURE__*/_jsx(TwoLineScrubberLabel, {})
+  }, {
+    title: 'Hide Beacon Labels',
+    component: /*#__PURE__*/_jsx(HideBeaconLabels, {})
+  }, {
+    title: 'Custom Beacon Stroke',
+    component: /*#__PURE__*/_jsx(CustomBeaconStroke, {})
+  }, {
+    title: 'Custom Beacon Size',
+    component: /*#__PURE__*/_jsx(CustomBeaconSize, {})
   }], [theme.color.fg, theme.color.fgPositive, theme.spectrum.gray50]);
   const currentExample = examples[currentIndex];
   const isFirstExample = currentIndex === 0;

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -7,12 +7,12 @@ 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 defaultRadius = 5;
+const defaultStrokeWidth = 2;
 const pulseOpacityStart = 0.5;
 const pulseOpacityEnd = 0;
-const pulseRadiusStart = 10;
-const pulseRadiusEnd = 15;
+const pulseRadiusStartMultiplier = 2;
+const pulseRadiusEndMultiplier = 3;
 const defaultPulseTransition = {
   type: 'timing',
   duration: 1600,
@@ -29,7 +29,10 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     idlePulse,
     animate = true,
     transitions,
-    opacity: opacityProp = 1
+    opacity: opacityProp = 1,
+    radius = defaultRadius,
+    stroke,
+    strokeWidth = defaultStrokeWidth
   } = _ref;
   const theme = useTheme();
   const {
@@ -57,6 +60,8 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     var _transitions$pulseRep;
     return (_transitions$pulseRep = transitions == null ? void 0 : transitions.pulseRepeatDelay) != null ? _transitions$pulseRep : defaultPulseRepeatDelay;
   }, [transitions == null ? void 0 : transitions.pulseRepeatDelay]);
+  const pulseRadiusStart = radius * pulseRadiusStartMultiplier;
+  const pulseRadiusEnd = radius * pulseRadiusEndMultiplier;
   const pulseOpacity = useSharedValue(0);
   const pulseRadius = useSharedValue(pulseRadiusStart);
 
@@ -121,11 +126,10 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
         pulseRadius.value = buildTransition(pulseRadiusEnd, pulseTransition);
       }
     }
-  }), [idlePulseShared, pulseOpacity, pulseRadius, pulseTransition]);
+  }), [idlePulseShared, pulseOpacity, pulseRadius, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
 
   // Watch idlePulse changes and control continuous pulse
-  useAnimatedReaction(() => idlePulseShared.value, (current, previous) => {
-    if (!animate) return;
+  useAnimatedReaction(() => idlePulseShared.value, current => {
     if (current) {
       // Start continuous pulse when idlePulse is enabled
       pulseOpacity.value = pulseOpacityStart;
@@ -147,7 +151,7 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       pulseOpacity.value = pulseOpacityEnd;
       pulseRadius.value = pulseRadiusStart;
     }
-  }, [animate, pulseTransition, pulseRepeatDelay]);
+  }, [pulseTransition, pulseRepeatDelay, pulseRadiusStart, pulseRadiusEnd]);
   const pulseVisibility = useDerivedValue(() => {
     // Never pulse when scrubbing
     if (!unwrapAnimatedValue(isIdle)) return 0;
@@ -168,7 +172,7 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       r: pulseRadius
     }), /*#__PURE__*/_jsx(Circle, {
       c: animatedPoint,
-      color: theme.color.bg,
+      color: stroke != null ? stroke : theme.color.bg,
       r: radius + strokeWidth / 2
     }), /*#__PURE__*/_jsx(Circle, {
       c: animatedPoint,

package/esm/chart/scrubber/Scrubber.js

@@ -16,6 +16,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,
     lineStroke,
@@ -32,7 +33,8 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     labelBoundsInset,
     beaconLabelFont,
     idlePulse,
-    beaconTransitions
+    beaconTransitions,
+    beaconStroke
   } = _ref;
   const theme = useTheme();
   const beaconGroupRef = React.useRef(null);
@@ -154,8 +156,9 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       BeaconComponent: BeaconComponent,
       idlePulse: idlePulse,
       seriesIds: filteredSeriesIds,
+      stroke: beaconStroke,
       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

@@ -18,7 +18,8 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     idlePulse,
     animate,
     transitions,
-    beaconRef
+    beaconRef,
+    stroke
   } = _ref;
   const {
     getSeries,
@@ -91,6 +92,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: seriesId,
+    stroke: stroke,
     transitions: transitions
   });
 });
@@ -99,7 +101,8 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     seriesIds,
     idlePulse,
     transitions,
-    BeaconComponent = DefaultScrubberBeacon
+    BeaconComponent = DefaultScrubberBeacon,
+    stroke
   } = _ref2;
   const ScrubberBeaconRefs = useRefMap();
   const {
@@ -156,6 +159,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: s.id,
+    stroke: stroke,
     transitions: transitions
   }, s.id));
 }));

package/esm/chart/utils/chart.js

@@ -1,6 +1,19 @@
 import { isSharedValue } from 'react-native-reanimated';
 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

@@ -4,7 +4,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/%E2%9C%A8-CDS-Components?node-id=320%3A15040', {
-  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization'", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'"],
   example: function Example() {
     const data = [20, 30, 5, 45, 0];
     const path = useSparklinePath({

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

@@ -4,7 +4,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/%E2%9C%A8-CDS-Components?node-id=320-14858&m=dev', {
-  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

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

@@ -5,7 +5,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-mobile-visualization'", "import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.12",
+  "version": "3.4.0-beta.14",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.36.2",
+    "@coinbase/cds-common": "^8.38.6",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.36.2",
+    "@coinbase/cds-mobile": "^8.38.6",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,11 +57,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-mobile": "^8.36.2",
+    "@coinbase/cds-mobile": "^8.38.6",
     "@coinbase/cds-utils": "^2.3.5",
-    "@figma/code-connect": "^1.3.4",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",
     "react-native-gesture-handler": "2.16.2",