@coinbase/cds-mcp-server 8.41.0 → 8.42.0

package/mcp-docs/mobile/components/Scrubber.txt

@@ -714,6 +714,145 @@ By default, Scrubber will show an overlay to de-emphasize future data. You can h
 </LineChart>
 ```
 
+### Composed Examples
+
+#### Percentage Beacon Labels
+
+You can use `BeaconLabelComponent` to display a label with the percentage value of the data at the scrubber position.
+
+```jsx
+function PercentageBeaconLabels() {
+  const theme = useTheme();
+
+  const PercentageScrubberBeaconLabel = memo(
+    ({ seriesId, color, label, ...props }: ScrubberBeaconLabelProps) => {
+      const { getSeriesData, series, fontProvider } = useCartesianChartContext();
+      const { scrubberPosition } = useScrubberContext();
+
+      const seriesData = useMemo(
+        () => getLineData(getSeriesData(seriesId)),
+        [getSeriesData, seriesId],
+      );
+
+      const dataLength = useMemo(
+        () =>
+          series?.reduce((max, s) => {
+            const data = getSeriesData(s.id);
+            return Math.max(max, data?.length ?? 0);
+          }, 0) ?? 0,
+        [series, getSeriesData],
+      );
+
+      const dataIndex = useDerivedValue(() => {
+        return scrubberPosition.value ?? Math.max(0, dataLength - 1);
+      }, [scrubberPosition, dataLength]);
+
+      const labelColor = `rgb(${theme.spectrum.gray0})`;
+
+      const regularStyle: SkTextStyle = useMemo(
+        () => ({
+          fontFamilies: ['Inter'],
+          fontSize: 14,
+          fontStyle: {
+            weight: FontWeight.Normal,
+          },
+          color: Skia.Color(labelColor),
+        }),
+        [labelColor],
+      );
+
+      const boldStyle: SkTextStyle = useMemo(
+        () => ({
+          ...regularStyle,
+          fontStyle: {
+            weight: FontWeight.Bold,
+          },
+        }),
+        [regularStyle],
+      );
+
+      const percentageLabel = useDerivedValue(() => {
+        const labelValue = unwrapAnimatedValue(label);
+
+        if (seriesData !== undefined) {
+          const dataAtPosition = seriesData[dataIndex.value];
+
+          const builder = Skia.ParagraphBuilder.Make(
+            { textAlign: TextAlign.Left },
+            fontProvider,
+          );
+
+          builder.pushStyle(boldStyle);
+          builder.addText(`${dataAtPosition}%`);
+          builder.pushStyle(regularStyle);
+          builder.addText(` ${labelValue}`);
+
+          const para = builder.build();
+          para.layout(512);
+          return para;
+        }
+
+        return labelValue;
+      }, [label, seriesData, dataIndex, fontProvider, boldStyle, regularStyle]);
+
+      return (
+        <DefaultScrubberBeaconLabel
+          {...props}
+          background={color}
+          label={percentageLabel}
+          seriesId={seriesId}
+        />
+      );
+    },
+  );
+
+  const isLightTheme = theme.activeColorScheme === 'light';
+  const background = isLightTheme
+    ? `rgb(${theme.spectrum.gray90})`
+    : `rgb(${theme.spectrum.gray0})`;
+  const scrubberLineStroke = isLightTheme
+    ? `rgb(${theme.spectrum.gray0})`
+    : `rgb(${theme.spectrum.gray90})`;
+
+  return (
+    <Box borderRadius={300} padding={2} style={{ backgroundColor: background }}>
+      <LineChart
+        enableScrubbing
+        showArea
+        areaType="dotted"
+        height={200}
+        inset={{ bottom: 8, left: 8, top: 8, right: 0 }}
+        series={[
+          {
+            id: 'prices2',
+            data: [90, 78, 71, 55, 2, 55, 78, 48, 79, 96, 32, 80, 79, 42],
+            color: `rgb(${theme.spectrum.blue40})`,
+            label: 'ATL',
+          },
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+            color: `rgb(${theme.spectrum.chartreuse40})`,
+            label: 'NYC',
+          },
+        ]}
+        xAxis={{
+          range: ({ min, max }) => ({ min, max: max - 92 }),
+        }}
+      >
+        <Scrubber
+          hideOverlay
+          idlePulse
+          BeaconLabelComponent={PercentageScrubberBeaconLabel}
+          beaconStroke={background}
+          lineStroke={scrubberLineStroke}
+        />
+      </LineChart>
+    </Box>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -725,6 +864,7 @@ By default, Scrubber will show an overlay to de-emphasize future data. You can h
 | `beaconLabelFont` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `-` | Font style for the beacon labels. |
 | `beaconLabelHorizontalOffset` | `number` | No | `-` | Horizontal offset for beacon labels from their beacon position. Measured in pixels. |
 | `beaconLabelMinGap` | `number` | No | `-` | Minimum gap between beacon labels to prevent overlap. Measured in pixels. |
+| `beaconLabelPreferredSide` | `left \| right` | No | `'right'` | Preferred side for beacon labels. |
 | `beaconStroke` | `string` | No | `theme.color.bg` | Stroke color of the scrubber beacon circle. |
 | `beaconTransitions` | `{ update?: Transition; pulse?: Transition \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber beacon. |
 | `hideBeaconLabels` | `boolean` | No | `-` | Hides the beacon labels while keeping the line label visible (if provided). |

package/mcp-docs/mobile/routes.txt

@@ -126,12 +126,15 @@
 - [ContentCell](mobile/components/ContentCell.txt): A versatile cell component for displaying content with optional metadata.
 - [UpsellCard](mobile/components/UpsellCard.txt): Upsell Cards are used to promote new features, products, or actions within the app. They are part of the upsell framework and aim to drive user engagement and revenue.
 - [NudgeCard](mobile/components/NudgeCard.txt): A card component designed to encourage users to take essential actions.
-- [FloatingAssetCard](mobile/components/FloatingAssetCard.txt): Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings. They provide a clear visual and informative overview, simplifying asset management and investment considerations.
+- [MessagingCard](mobile/components/MessagingCard.txt): MessagingCard displays promotional or informational content with two variants: 'upsell' for promoting features with a primary background, and 'nudge' for encouraging actions with an alternate background. It replaces the deprecated NudgeCard and UpsellCard components.
+- [MediaCard](mobile/components/MediaCard.txt): MediaCard displays content with optional media in a contained card layout. Use it to showcase assets, products, or content with a thumbnail, title, subtitle, description, and optional media placement. MediaCard replaces the deprecated FloatingAssetCard and ContainedAssetCard components.
+- [FloatingAssetCard](mobile/components/FloatingAssetCard.txt): Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings.
+- [DataCard](mobile/components/DataCard.txt): A flexible card component for displaying data with visualizations like progress bars and circles. It supports horizontal and vertical layouts with customizable thumbnails and title accessories.
 - [ContentCardHeader](mobile/components/ContentCardHeader.txt): ContentCardHeader is a subcomponent of ContentCard that provides the header section of the card, typically used for the title and subtitle.
 - [ContentCardFooter](mobile/components/ContentCardFooter.txt): ContentCardFooter is a subcomponent of ContentCard that provides the footer section of the card, typically used for actions or additional information.
 - [ContentCardBody](mobile/components/ContentCardBody.txt): ContentCardBody is a subcomponent of ContentCard that provides the main content area of the card.
-- [ContentCard](mobile/components/ContentCard.txt): A flexible card component for displaying content with header, body, and footer sections.
-- [ContainedAssetCard](mobile/components/ContainedAssetCard.txt): Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings. They provide a clear visual and informative overview, simplifying asset management and investment considerations.
+- [ContentCard](mobile/components/ContentCard.txt): A flexible, composable card component for displaying rich content with customizable header, body, and footer sections. Use with ContentCardHeader, ContentCardBody, and ContentCardFooter sub-components.
+- [ContainedAssetCard](mobile/components/ContainedAssetCard.txt): Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings.
 - [LottieStatusAnimation](mobile/components/LottieStatusAnimation.txt): A specialized component for displaying trade status animations.
 - [Lottie](mobile/components/Lottie.txt): Renders After Effects animations as vectors.