@coinbase/cds-mcp-server 8.17.2 → 8.17.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/mcp-docs/mobile/components/Accordion.txt +189 -0
- package/mcp-docs/mobile/components/AccordionItem.txt +30 -0
- package/mcp-docs/mobile/components/Alert.txt +156 -0
- package/mcp-docs/mobile/components/AreaChart.txt +266 -0
- package/mcp-docs/mobile/components/Avatar.txt +196 -0
- package/mcp-docs/mobile/components/AvatarButton.txt +226 -0
- package/mcp-docs/mobile/components/Banner.txt +222 -0
- package/mcp-docs/mobile/components/BarChart.txt +816 -0
- package/mcp-docs/mobile/components/Box.txt +174 -0
- package/mcp-docs/mobile/components/BrowserBar.txt +147 -0
- package/mcp-docs/mobile/components/Button.txt +199 -0
- package/mcp-docs/mobile/components/ButtonGroup.txt +80 -0
- package/mcp-docs/mobile/components/Carousel.txt +1084 -0
- package/mcp-docs/mobile/components/CartesianChart.txt +826 -0
- package/mcp-docs/mobile/components/CellMedia.txt +71 -0
- package/mcp-docs/mobile/components/Checkbox.txt +246 -0
- package/mcp-docs/mobile/components/CheckboxCell.txt +202 -0
- package/mcp-docs/mobile/components/CheckboxGroup.txt +285 -0
- package/mcp-docs/mobile/components/Chip.txt +195 -0
- package/mcp-docs/mobile/components/Coachmark.txt +158 -0
- package/mcp-docs/mobile/components/Collapsible.txt +105 -0
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +135 -0
- package/mcp-docs/mobile/components/ContentCard.txt +366 -0
- package/mcp-docs/mobile/components/ContentCardBody.txt +136 -0
- package/mcp-docs/mobile/components/ContentCardFooter.txt +128 -0
- package/mcp-docs/mobile/components/ContentCardHeader.txt +146 -0
- package/mcp-docs/mobile/components/ContentCell.txt +227 -0
- package/mcp-docs/mobile/components/ControlGroup.txt +444 -0
- package/mcp-docs/mobile/components/DatePicker.txt +497 -0
- package/mcp-docs/mobile/components/Divider.txt +139 -0
- package/mcp-docs/mobile/components/DotCount.txt +146 -0
- package/mcp-docs/mobile/components/DotStatusColor.txt +59 -0
- package/mcp-docs/mobile/components/DotSymbol.txt +135 -0
- package/mcp-docs/mobile/components/Fallback.txt +158 -0
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +156 -0
- package/mcp-docs/mobile/components/HStack.txt +235 -0
- package/mcp-docs/mobile/components/HeroSquare.txt +48 -0
- package/mcp-docs/mobile/components/Icon.txt +52 -0
- package/mcp-docs/mobile/components/IconButton.txt +269 -0
- package/mcp-docs/mobile/components/InputChip.txt +188 -0
- package/mcp-docs/mobile/components/Interactable.txt +187 -0
- package/mcp-docs/mobile/components/LineChart.txt +1325 -0
- package/mcp-docs/mobile/components/Link.txt +292 -0
- package/mcp-docs/mobile/components/ListCell.txt +391 -0
- package/mcp-docs/mobile/components/LogoMark.txt +85 -0
- package/mcp-docs/mobile/components/LogoWordMark.txt +94 -0
- package/mcp-docs/mobile/components/Lottie.txt +139 -0
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +47 -0
- package/mcp-docs/mobile/components/Modal.txt +84 -0
- package/mcp-docs/mobile/components/ModalBody.txt +34 -0
- package/mcp-docs/mobile/components/ModalFooter.txt +25 -0
- package/mcp-docs/mobile/components/ModalHeader.txt +28 -0
- package/mcp-docs/mobile/components/MultiContentModule.txt +380 -0
- package/mcp-docs/mobile/components/NavigationTitle.txt +132 -0
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +142 -0
- package/mcp-docs/mobile/components/NudgeCard.txt +90 -0
- package/mcp-docs/mobile/components/Numpad.txt +341 -0
- package/mcp-docs/mobile/components/Overlay.txt +152 -0
- package/mcp-docs/mobile/components/PageFooter.txt +161 -0
- package/mcp-docs/mobile/components/PageHeader.txt +186 -0
- package/mcp-docs/mobile/components/PeriodSelector.txt +408 -0
- package/mcp-docs/mobile/components/Pictogram.txt +48 -0
- package/mcp-docs/mobile/components/Point.txt +205 -0
- package/mcp-docs/mobile/components/PortalProvider.txt +79 -0
- package/mcp-docs/mobile/components/Pressable.txt +211 -0
- package/mcp-docs/mobile/components/ProgressBar.txt +130 -0
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +161 -0
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +138 -0
- package/mcp-docs/mobile/components/ProgressCircle.txt +237 -0
- package/mcp-docs/mobile/components/Radio.txt +242 -0
- package/mcp-docs/mobile/components/RadioCell.txt +202 -0
- package/mcp-docs/mobile/components/RadioGroup.txt +282 -0
- package/mcp-docs/mobile/components/ReferenceLine.txt +153 -0
- package/mcp-docs/mobile/components/RemoteImage.txt +106 -0
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +61 -0
- package/mcp-docs/mobile/components/RollingNumber.txt +789 -0
- package/mcp-docs/mobile/components/Scrubber.txt +204 -0
- package/mcp-docs/mobile/components/SearchInput.txt +192 -0
- package/mcp-docs/mobile/components/SectionHeader.txt +205 -0
- package/mcp-docs/mobile/components/SegmentedTabs.txt +316 -0
- package/mcp-docs/mobile/components/Select.txt +212 -0
- package/mcp-docs/mobile/components/SelectChip.txt +324 -0
- package/mcp-docs/mobile/components/SelectOption.txt +85 -0
- package/mcp-docs/mobile/components/SlideButton.txt +331 -0
- package/mcp-docs/mobile/components/Spacer.txt +84 -0
- package/mcp-docs/mobile/components/Sparkline.txt +123 -0
- package/mcp-docs/mobile/components/SparklineGradient.txt +107 -0
- package/mcp-docs/mobile/components/SparklineInteractive.txt +157 -0
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +73 -0
- package/mcp-docs/mobile/components/Spinner.txt +49 -0
- package/mcp-docs/mobile/components/SpotIcon.txt +48 -0
- package/mcp-docs/mobile/components/SpotRectangle.txt +48 -0
- package/mcp-docs/mobile/components/SpotSquare.txt +48 -0
- package/mcp-docs/mobile/components/Stepper.txt +528 -0
- package/mcp-docs/mobile/components/SubBrandLogoMark.txt +126 -0
- package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +126 -0
- package/mcp-docs/mobile/components/Switch.txt +98 -0
- package/mcp-docs/mobile/components/TabIndicator.txt +49 -0
- package/mcp-docs/mobile/components/TabLabel.txt +154 -0
- package/mcp-docs/mobile/components/TabNavigation.txt +147 -0
- package/mcp-docs/mobile/components/TabbedChips.txt +143 -0
- package/mcp-docs/mobile/components/Tabs.txt +191 -0
- package/mcp-docs/mobile/components/Tag.txt +301 -0
- package/mcp-docs/mobile/components/Text.txt +212 -0
- package/mcp-docs/mobile/components/TextInput.txt +718 -0
- package/mcp-docs/mobile/components/ThemeProvider.txt +133 -0
- package/mcp-docs/mobile/components/Toast.txt +197 -0
- package/mcp-docs/mobile/components/Tooltip.txt +60 -0
- package/mcp-docs/mobile/components/TopNavBar.txt +162 -0
- package/mcp-docs/mobile/components/Tour.txt +159 -0
- package/mcp-docs/mobile/components/Tray.txt +253 -0
- package/mcp-docs/mobile/components/UpsellCard.txt +322 -0
- package/mcp-docs/mobile/components/VStack.txt +223 -0
- package/mcp-docs/mobile/components/XAxis.txt +622 -0
- package/mcp-docs/mobile/components/YAxis.txt +568 -0
- package/mcp-docs/mobile/getting-started/introduction.txt +99 -0
- package/mcp-docs/mobile/getting-started/mcp-server.txt +94 -0
- package/mcp-docs/mobile/getting-started/playground.txt +25 -0
- package/mcp-docs/mobile/hooks/useDimensions.txt +47 -0
- package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +215 -0
- package/mcp-docs/mobile/hooks/useTheme.txt +110 -0
- package/mcp-docs/mobile/routes.txt +132 -0
- package/mcp-docs/web/components/Accordion.txt +190 -0
- package/mcp-docs/web/components/AccordionItem.txt +32 -0
- package/mcp-docs/web/components/Alert.txt +165 -0
- package/mcp-docs/web/components/AreaChart.txt +511 -0
- package/mcp-docs/web/components/Avatar.txt +212 -0
- package/mcp-docs/web/components/AvatarButton.txt +241 -0
- package/mcp-docs/web/components/Banner.txt +227 -0
- package/mcp-docs/web/components/BarChart.txt +1268 -0
- package/mcp-docs/web/components/Box.txt +176 -0
- package/mcp-docs/web/components/Button.txt +213 -0
- package/mcp-docs/web/components/ButtonGroup.txt +80 -0
- package/mcp-docs/web/components/Calendar.txt +182 -0
- package/mcp-docs/web/components/Carousel.txt +1576 -0
- package/mcp-docs/web/components/CartesianChart.txt +1045 -0
- package/mcp-docs/web/components/CellMedia.txt +57 -0
- package/mcp-docs/web/components/Checkbox.txt +189 -0
- package/mcp-docs/web/components/CheckboxCell.txt +203 -0
- package/mcp-docs/web/components/CheckboxGroup.txt +220 -0
- package/mcp-docs/web/components/Chip.txt +197 -0
- package/mcp-docs/web/components/Coachmark.txt +189 -0
- package/mcp-docs/web/components/Collapsible.txt +120 -0
- package/mcp-docs/web/components/ContainedAssetCard.txt +233 -0
- package/mcp-docs/web/components/ContentCard.txt +368 -0
- package/mcp-docs/web/components/ContentCardBody.txt +138 -0
- package/mcp-docs/web/components/ContentCardFooter.txt +130 -0
- package/mcp-docs/web/components/ContentCardHeader.txt +148 -0
- package/mcp-docs/web/components/ContentCell.txt +220 -0
- package/mcp-docs/web/components/ControlGroup.txt +437 -0
- package/mcp-docs/web/components/DatePicker.txt +506 -0
- package/mcp-docs/web/components/Divider.txt +144 -0
- package/mcp-docs/web/components/DotCount.txt +150 -0
- package/mcp-docs/web/components/DotStatusColor.txt +59 -0
- package/mcp-docs/web/components/DotSymbol.txt +138 -0
- package/mcp-docs/web/components/Dropdown.txt +120 -0
- package/mcp-docs/web/components/Fallback.txt +164 -0
- package/mcp-docs/web/components/FloatingAssetCard.txt +251 -0
- package/mcp-docs/web/components/FullscreenAlert.txt +70 -0
- package/mcp-docs/web/components/FullscreenModal.txt +146 -0
- package/mcp-docs/web/components/FullscreenModalLayout.txt +188 -0
- package/mcp-docs/web/components/Grid.txt +237 -0
- package/mcp-docs/web/components/GridColumn.txt +210 -0
- package/mcp-docs/web/components/HStack.txt +237 -0
- package/mcp-docs/web/components/HeroSquare.txt +49 -0
- package/mcp-docs/web/components/Icon.txt +146 -0
- package/mcp-docs/web/components/IconButton.txt +391 -0
- package/mcp-docs/web/components/InputChip.txt +188 -0
- package/mcp-docs/web/components/Interactable.txt +194 -0
- package/mcp-docs/web/components/LineChart.txt +1577 -0
- package/mcp-docs/web/components/Link.txt +244 -0
- package/mcp-docs/web/components/ListCell.txt +397 -0
- package/mcp-docs/web/components/LogoMark.txt +85 -0
- package/mcp-docs/web/components/LogoWordMark.txt +94 -0
- package/mcp-docs/web/components/Lottie.txt +158 -0
- package/mcp-docs/web/components/LottieStatusAnimation.txt +58 -0
- package/mcp-docs/web/components/MediaQueryProvider.txt +109 -0
- package/mcp-docs/web/components/Modal.txt +193 -0
- package/mcp-docs/web/components/ModalBody.txt +118 -0
- package/mcp-docs/web/components/ModalFooter.txt +120 -0
- package/mcp-docs/web/components/ModalHeader.txt +124 -0
- package/mcp-docs/web/components/MultiContentModule.txt +382 -0
- package/mcp-docs/web/components/NavigationBar.txt +103 -0
- package/mcp-docs/web/components/NavigationTitle.txt +26 -0
- package/mcp-docs/web/components/NavigationTitleSelect.txt +46 -0
- package/mcp-docs/web/components/NudgeCard.txt +182 -0
- package/mcp-docs/web/components/Overlay.txt +172 -0
- package/mcp-docs/web/components/PageFooter.txt +185 -0
- package/mcp-docs/web/components/PageHeader.txt +244 -0
- package/mcp-docs/web/components/Pagination.txt +500 -0
- package/mcp-docs/web/components/PeriodSelector.txt +704 -0
- package/mcp-docs/web/components/Pictogram.txt +49 -0
- package/mcp-docs/web/components/Point.txt +461 -0
- package/mcp-docs/web/components/PortalProvider.txt +77 -0
- package/mcp-docs/web/components/Pressable.txt +194 -0
- package/mcp-docs/web/components/ProgressBar.txt +164 -0
- package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +213 -0
- package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +182 -0
- package/mcp-docs/web/components/ProgressCircle.txt +444 -0
- package/mcp-docs/web/components/Radio.txt +220 -0
- package/mcp-docs/web/components/RadioCell.txt +216 -0
- package/mcp-docs/web/components/RadioGroup.txt +289 -0
- package/mcp-docs/web/components/ReferenceLine.txt +452 -0
- package/mcp-docs/web/components/RemoteImage.txt +166 -0
- package/mcp-docs/web/components/RemoteImageGroup.txt +87 -0
- package/mcp-docs/web/components/RollingNumber.txt +1022 -0
- package/mcp-docs/web/components/Scrubber.txt +232 -0
- package/mcp-docs/web/components/SearchInput.txt +118 -0
- package/mcp-docs/web/components/SectionHeader.txt +218 -0
- package/mcp-docs/web/components/SegmentedTabs.txt +325 -0
- package/mcp-docs/web/components/Select.txt +225 -0
- package/mcp-docs/web/components/SelectChip.txt +315 -0
- package/mcp-docs/web/components/SelectOption.txt +166 -0
- package/mcp-docs/web/components/Sidebar.txt +350 -0
- package/mcp-docs/web/components/SidebarItem.txt +132 -0
- package/mcp-docs/web/components/SidebarMoreMenu.txt +31 -0
- package/mcp-docs/web/components/Spacer.txt +174 -0
- package/mcp-docs/web/components/Sparkline.txt +123 -0
- package/mcp-docs/web/components/SparklineGradient.txt +107 -0
- package/mcp-docs/web/components/SparklineInteractive.txt +154 -0
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +77 -0
- package/mcp-docs/web/components/Spinner.txt +129 -0
- package/mcp-docs/web/components/SpotIcon.txt +49 -0
- package/mcp-docs/web/components/SpotRectangle.txt +49 -0
- package/mcp-docs/web/components/SpotSquare.txt +49 -0
- package/mcp-docs/web/components/Stepper.txt +683 -0
- package/mcp-docs/web/components/SubBrandLogoMark.txt +126 -0
- package/mcp-docs/web/components/SubBrandLogoWordMark.txt +126 -0
- package/mcp-docs/web/components/Switch.txt +86 -0
- package/mcp-docs/web/components/TabIndicator.txt +49 -0
- package/mcp-docs/web/components/TabLabel.txt +159 -0
- package/mcp-docs/web/components/TabNavigation.txt +160 -0
- package/mcp-docs/web/components/TabbedChips.txt +156 -0
- package/mcp-docs/web/components/Table.txt +368 -0
- package/mcp-docs/web/components/TableBody.txt +84 -0
- package/mcp-docs/web/components/TableCaption.txt +103 -0
- package/mcp-docs/web/components/TableCell.txt +166 -0
- package/mcp-docs/web/components/TableCellFallback.txt +98 -0
- package/mcp-docs/web/components/TableFooter.txt +84 -0
- package/mcp-docs/web/components/TableHeader.txt +101 -0
- package/mcp-docs/web/components/TableRow.txt +141 -0
- package/mcp-docs/web/components/Tabs.txt +213 -0
- package/mcp-docs/web/components/Tag.txt +305 -0
- package/mcp-docs/web/components/Text.txt +233 -0
- package/mcp-docs/web/components/TextInput.txt +653 -0
- package/mcp-docs/web/components/ThemeProvider.txt +200 -0
- package/mcp-docs/web/components/TileButton.txt +159 -0
- package/mcp-docs/web/components/Toast.txt +204 -0
- package/mcp-docs/web/components/Tooltip.txt +90 -0
- package/mcp-docs/web/components/Tour.txt +180 -0
- package/mcp-docs/web/components/Tray.txt +289 -0
- package/mcp-docs/web/components/UpsellCard.txt +320 -0
- package/mcp-docs/web/components/VStack.txt +225 -0
- package/mcp-docs/web/components/XAxis.txt +620 -0
- package/mcp-docs/web/components/YAxis.txt +549 -0
- package/mcp-docs/web/getting-started/introduction.txt +99 -0
- package/mcp-docs/web/getting-started/mcp-server.txt +94 -0
- package/mcp-docs/web/getting-started/playground.txt +25 -0
- package/mcp-docs/web/hooks/useBreakpoints.txt +33 -0
- package/mcp-docs/web/hooks/useDimensions.txt +55 -0
- package/mcp-docs/web/hooks/useHasMounted.txt +55 -0
- package/mcp-docs/web/hooks/useIsoEffect.txt +42 -0
- package/mcp-docs/web/hooks/useMediaQuery.txt +94 -0
- package/mcp-docs/web/hooks/useOverlayContentContext.txt +217 -0
- package/mcp-docs/web/hooks/useScrollBlocker.txt +63 -0
- package/mcp-docs/web/hooks/useTheme.txt +105 -0
- package/mcp-docs/web/routes.txt +155 -0
- package/package.json +1 -1
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# Pictogram
|
|
2
|
+
|
|
3
|
+
Displays elevated product icons.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import { Pictogram } from '@coinbase/cds-web/illustratations/Pictogram'
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Props
|
|
12
|
+
|
|
13
|
+
| Prop | Type | Required | Default | Description |
|
|
14
|
+
| --- | --- | --- | --- | --- |
|
|
15
|
+
| `name` | `key \| done \| cardSuccess \| warning \| error \| add \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| derivativesProduct \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| planet \| safe \| securityKey \| settings \| shield \| support \| taxes \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseChartSmall \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseConnectApps \| baseConnectSmall \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseTargetSmall \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| bundle \| businessProduct \| calendarCaution \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pizza \| pluginBrowser \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| tokenSales \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | Yes | `-` | Name of illustration as defined in Figma |
|
|
16
|
+
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
|
|
17
|
+
| `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
18
|
+
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
19
|
+
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
20
|
+
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## Examples
|
|
24
|
+
|
|
25
|
+
### Basic example
|
|
26
|
+
|
|
27
|
+
```jsx live
|
|
28
|
+
<Pictogram name="shield" dimension="64x64" />
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### `scaleMultiplier` prop
|
|
32
|
+
|
|
33
|
+
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
34
|
+
|
|
35
|
+
Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly.
|
|
36
|
+
|
|
37
|
+
```jsx live
|
|
38
|
+
<Pictogram name="shield" scaleMultiplier={1.5} />
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Scaling with dimension
|
|
42
|
+
|
|
43
|
+
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
44
|
+
|
|
45
|
+
```jsx live
|
|
46
|
+
<Pictogram name="shield" dimension="48x48" scaleMultiplier={2.5} />
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
|
|
@@ -0,0 +1,461 @@
|
|
|
1
|
+
# Point
|
|
2
|
+
|
|
3
|
+
Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import { Point } from '@coinbase/cds-web-visualization'
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Props
|
|
12
|
+
|
|
13
|
+
| Prop | Type | Required | Default | Description |
|
|
14
|
+
| --- | --- | --- | --- | --- |
|
|
15
|
+
| `dataX` | `number` | Yes | `-` | X coordinate in data space (not pixel coordinates). |
|
|
16
|
+
| `dataY` | `number` | Yes | `-` | Y coordinate in data space (not pixel coordinates). |
|
|
17
|
+
| `accentHeight` | `string \| number` | No | `-` | - |
|
|
18
|
+
| `accessibilityLabel` | `string` | No | `-` | Accessibility label for screen readers to describe the point. If not provided, a default label will be generated using the data coordinates. |
|
|
19
|
+
| `accumulate` | `none \| sum` | No | `-` | - |
|
|
20
|
+
| `additive` | `sum \| replace` | No | `-` | - |
|
|
21
|
+
| `alignmentBaseline` | `alphabetic \| hanging \| ideographic \| mathematical \| inherit \| auto \| baseline \| before-edge \| text-before-edge \| middle \| central \| after-edge \| text-after-edge` | No | `-` | - |
|
|
22
|
+
| `allowReorder` | `no \| yes` | No | `-` | - |
|
|
23
|
+
| `alphabetic` | `string \| number` | No | `-` | - |
|
|
24
|
+
| `amplitude` | `string \| number` | No | `-` | - |
|
|
25
|
+
| `animate` | `boolean` | No | `-` | Override the charts animation setting for this specific point. When undefined, uses the chart contexts animation setting. |
|
|
26
|
+
| `arabicForm` | `initial \| medial \| terminal \| isolated` | No | `-` | - |
|
|
27
|
+
| `ascent` | `string \| number` | No | `-` | - |
|
|
28
|
+
| `attributeName` | `string` | No | `-` | - |
|
|
29
|
+
| `attributeType` | `string` | No | `-` | - |
|
|
30
|
+
| `autoReverse` | `false \| true \| true \| false` | No | `-` | - |
|
|
31
|
+
| `azimuth` | `string \| number` | No | `-` | - |
|
|
32
|
+
| `baseFrequency` | `string \| number` | No | `-` | - |
|
|
33
|
+
| `baseProfile` | `string \| number` | No | `-` | - |
|
|
34
|
+
| `baselineShift` | `string \| number` | No | `-` | - |
|
|
35
|
+
| `bbox` | `string \| number` | No | `-` | - |
|
|
36
|
+
| `begin` | `string \| number` | No | `-` | - |
|
|
37
|
+
| `bias` | `string \| number` | No | `-` | - |
|
|
38
|
+
| `by` | `string \| number` | No | `-` | - |
|
|
39
|
+
| `calcMode` | `string \| number` | No | `-` | - |
|
|
40
|
+
| `capHeight` | `string \| number` | No | `-` | - |
|
|
41
|
+
| `className` | `string` | No | `-` | Custom class name for the point. |
|
|
42
|
+
| `classNames` | `{ container?: string; point?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
|
|
43
|
+
| `clip` | `string \| number` | No | `-` | - |
|
|
44
|
+
| `clipPath` | `string` | No | `-` | - |
|
|
45
|
+
| `clipPathUnits` | `string \| number` | No | `-` | - |
|
|
46
|
+
| `clipRule` | `string \| number` | No | `-` | - |
|
|
47
|
+
| `color` | `string` | No | `-` | - |
|
|
48
|
+
| `colorInterpolation` | `string \| number` | No | `-` | - |
|
|
49
|
+
| `colorInterpolationFilters` | `inherit \| auto \| sRGB \| linearRGB` | No | `-` | - |
|
|
50
|
+
| `colorProfile` | `string \| number` | No | `-` | - |
|
|
51
|
+
| `colorRendering` | `string \| number` | No | `-` | - |
|
|
52
|
+
| `contentScriptType` | `string \| number` | No | `-` | - |
|
|
53
|
+
| `contentStyleType` | `string \| number` | No | `-` | - |
|
|
54
|
+
| `crossOrigin` | ` \| anonymous \| use-credentials` | No | `-` | - |
|
|
55
|
+
| `cursor` | `string \| number` | No | `-` | - |
|
|
56
|
+
| `cx` | `string \| number` | No | `-` | - |
|
|
57
|
+
| `cy` | `string \| number` | No | `-` | - |
|
|
58
|
+
| `d` | `string` | No | `-` | - |
|
|
59
|
+
| `decelerate` | `string \| number` | No | `-` | - |
|
|
60
|
+
| `descent` | `string \| number` | No | `-` | - |
|
|
61
|
+
| `diffuseConstant` | `string \| number` | No | `-` | - |
|
|
62
|
+
| `direction` | `string \| number` | No | `-` | - |
|
|
63
|
+
| `display` | `string \| number` | No | `-` | - |
|
|
64
|
+
| `divisor` | `string \| number` | No | `-` | - |
|
|
65
|
+
| `dominantBaseline` | `string \| number` | No | `-` | - |
|
|
66
|
+
| `dur` | `string \| number` | No | `-` | - |
|
|
67
|
+
| `dx` | `string \| number` | No | `-` | - |
|
|
68
|
+
| `dy` | `string \| number` | No | `-` | - |
|
|
69
|
+
| `edgeMode` | `string \| number` | No | `-` | - |
|
|
70
|
+
| `elevation` | `string \| number` | No | `-` | - |
|
|
71
|
+
| `enableBackground` | `string \| number` | No | `-` | - |
|
|
72
|
+
| `end` | `string \| number` | No | `-` | - |
|
|
73
|
+
| `exponent` | `string \| number` | No | `-` | - |
|
|
74
|
+
| `externalResourcesRequired` | `false \| true \| true \| false` | No | `-` | - |
|
|
75
|
+
| `fill` | `string` | No | `-` | The fill color of the point. |
|
|
76
|
+
| `fillOpacity` | `string \| number` | No | `-` | - |
|
|
77
|
+
| `fillRule` | `inherit \| nonzero \| evenodd` | No | `-` | - |
|
|
78
|
+
| `filter` | `string` | No | `-` | - |
|
|
79
|
+
| `filterRes` | `string \| number` | No | `-` | - |
|
|
80
|
+
| `filterUnits` | `string \| number` | No | `-` | - |
|
|
81
|
+
| `floodColor` | `string \| number` | No | `-` | - |
|
|
82
|
+
| `floodOpacity` | `string \| number` | No | `-` | - |
|
|
83
|
+
| `focusable` | `auto \| Booleanish` | No | `-` | - |
|
|
84
|
+
| `fontFamily` | `string` | No | `-` | - |
|
|
85
|
+
| `fontSize` | `string \| number` | No | `-` | - |
|
|
86
|
+
| `fontSizeAdjust` | `string \| number` | No | `-` | - |
|
|
87
|
+
| `fontStretch` | `string \| number` | No | `-` | - |
|
|
88
|
+
| `fontStyle` | `string \| number` | No | `-` | - |
|
|
89
|
+
| `fontVariant` | `string \| number` | No | `-` | - |
|
|
90
|
+
| `fontWeight` | `string \| number` | No | `-` | - |
|
|
91
|
+
| `format` | `string \| number` | No | `-` | - |
|
|
92
|
+
| `fr` | `string \| number` | No | `-` | - |
|
|
93
|
+
| `from` | `string \| number` | No | `-` | - |
|
|
94
|
+
| `fx` | `string \| number` | No | `-` | - |
|
|
95
|
+
| `fy` | `string \| number` | No | `-` | - |
|
|
96
|
+
| `g1` | `string \| number` | No | `-` | - |
|
|
97
|
+
| `g2` | `string \| number` | No | `-` | - |
|
|
98
|
+
| `glyphName` | `string \| number` | No | `-` | - |
|
|
99
|
+
| `glyphOrientationHorizontal` | `string \| number` | No | `-` | - |
|
|
100
|
+
| `glyphOrientationVertical` | `string \| number` | No | `-` | - |
|
|
101
|
+
| `glyphRef` | `string \| number` | No | `-` | - |
|
|
102
|
+
| `gradientTransform` | `string` | No | `-` | - |
|
|
103
|
+
| `gradientUnits` | `string` | No | `-` | - |
|
|
104
|
+
| `hanging` | `string \| number` | No | `-` | - |
|
|
105
|
+
| `height` | `string \| number` | No | `-` | - |
|
|
106
|
+
| `horizAdvX` | `string \| number` | No | `-` | - |
|
|
107
|
+
| `horizOriginX` | `string \| number` | No | `-` | - |
|
|
108
|
+
| `href` | `string` | No | `-` | - |
|
|
109
|
+
| `id` | `string` | No | `-` | - |
|
|
110
|
+
| `ideographic` | `string \| number` | No | `-` | - |
|
|
111
|
+
| `imageRendering` | `string \| number` | No | `-` | - |
|
|
112
|
+
| `in` | `string` | No | `-` | - |
|
|
113
|
+
| `in2` | `string \| number` | No | `-` | - |
|
|
114
|
+
| `intercept` | `string \| number` | No | `-` | - |
|
|
115
|
+
| `k` | `string \| number` | No | `-` | - |
|
|
116
|
+
| `k1` | `string \| number` | No | `-` | - |
|
|
117
|
+
| `k2` | `string \| number` | No | `-` | - |
|
|
118
|
+
| `k3` | `string \| number` | No | `-` | - |
|
|
119
|
+
| `k4` | `string \| number` | No | `-` | - |
|
|
120
|
+
| `kernelMatrix` | `string \| number` | No | `-` | - |
|
|
121
|
+
| `kernelUnitLength` | `string \| number` | No | `-` | - |
|
|
122
|
+
| `kerning` | `string \| number` | No | `-` | - |
|
|
123
|
+
| `key` | `Key \| null` | No | `-` | - |
|
|
124
|
+
| `keyPoints` | `string \| number` | No | `-` | - |
|
|
125
|
+
| `keySplines` | `string \| number` | No | `-` | - |
|
|
126
|
+
| `keyTimes` | `string \| number` | No | `-` | - |
|
|
127
|
+
| `label` | `null \| string \| number \| ReactElement<TSpanProps, TSpan> \| ReactElement<TextPathProps, TextPath> \| ValidChartTextChildElements[]` | No | `-` | Simple text label to display at the point position. If provided, a ChartText will be automatically rendered. |
|
|
128
|
+
| `labelProps` | `Omit<ChartTextProps, x \| y \| children>` | No | `-` | Configuration for the automatically rendered label. Only used when label prop is provided. |
|
|
129
|
+
| `lang` | `string` | No | `-` | - |
|
|
130
|
+
| `lengthAdjust` | `string \| number` | No | `-` | - |
|
|
131
|
+
| `letterSpacing` | `string \| number` | No | `-` | - |
|
|
132
|
+
| `lightingColor` | `string \| number` | No | `-` | - |
|
|
133
|
+
| `limitingConeAngle` | `string \| number` | No | `-` | - |
|
|
134
|
+
| `local` | `string \| number` | No | `-` | - |
|
|
135
|
+
| `markerEnd` | `string` | No | `-` | - |
|
|
136
|
+
| `markerHeight` | `string \| number` | No | `-` | - |
|
|
137
|
+
| `markerMid` | `string` | No | `-` | - |
|
|
138
|
+
| `markerStart` | `string` | No | `-` | - |
|
|
139
|
+
| `markerUnits` | `string \| number` | No | `-` | - |
|
|
140
|
+
| `markerWidth` | `string \| number` | No | `-` | - |
|
|
141
|
+
| `mask` | `string` | No | `-` | - |
|
|
142
|
+
| `maskContentUnits` | `string \| number` | No | `-` | - |
|
|
143
|
+
| `maskUnits` | `string \| number` | No | `-` | - |
|
|
144
|
+
| `mathematical` | `string \| number` | No | `-` | - |
|
|
145
|
+
| `max` | `string \| number` | No | `-` | - |
|
|
146
|
+
| `media` | `string` | No | `-` | - |
|
|
147
|
+
| `method` | `string` | No | `-` | - |
|
|
148
|
+
| `min` | `string \| number` | No | `-` | - |
|
|
149
|
+
| `mode` | `string \| number` | No | `-` | - |
|
|
150
|
+
| `name` | `string` | No | `-` | - |
|
|
151
|
+
| `numOctaves` | `string \| number` | No | `-` | - |
|
|
152
|
+
| `offset` | `string \| number` | No | `-` | - |
|
|
153
|
+
| `onChange` | `FormEventHandler<SVGCircleElement>` | No | `-` | - |
|
|
154
|
+
| `onClick` | `((event: MouseEvent<Element, MouseEvent>, point: { x: number; y: number; dataX: number; dataY: number; }) => void)` | No | `-` | Handler for when the point is clicked. |
|
|
155
|
+
| `onScrubberEnter` | `((point: { x: number; y: number; }) => void)` | No | `-` | Handler for when the scrubber enters this point. |
|
|
156
|
+
| `opacity` | `number` | No | `-` | Opacity of the point. |
|
|
157
|
+
| `operator` | `string \| number` | No | `-` | - |
|
|
158
|
+
| `order` | `string \| number` | No | `-` | - |
|
|
159
|
+
| `orient` | `string \| number` | No | `-` | - |
|
|
160
|
+
| `orientation` | `string \| number` | No | `-` | - |
|
|
161
|
+
| `origin` | `string \| number` | No | `-` | - |
|
|
162
|
+
| `overflow` | `string \| number` | No | `-` | - |
|
|
163
|
+
| `overlinePosition` | `string \| number` | No | `-` | - |
|
|
164
|
+
| `overlineThickness` | `string \| number` | No | `-` | - |
|
|
165
|
+
| `paintOrder` | `string \| number` | No | `-` | - |
|
|
166
|
+
| `panose1` | `string \| number` | No | `-` | - |
|
|
167
|
+
| `path` | `string` | No | `-` | - |
|
|
168
|
+
| `pathLength` | `string \| number` | No | `-` | - |
|
|
169
|
+
| `patternContentUnits` | `string` | No | `-` | - |
|
|
170
|
+
| `patternTransform` | `string \| number` | No | `-` | - |
|
|
171
|
+
| `patternUnits` | `string` | No | `-` | - |
|
|
172
|
+
| `pixelCoordinates` | `{ x: number; y: number; }` | No | `-` | Coordinates in SVG pixel space. Overrides dataX and dataY for pixel coordinate calculation. |
|
|
173
|
+
| `pointerEvents` | `string \| number` | No | `-` | - |
|
|
174
|
+
| `points` | `string` | No | `-` | - |
|
|
175
|
+
| `pointsAtX` | `string \| number` | No | `-` | - |
|
|
176
|
+
| `pointsAtY` | `string \| number` | No | `-` | - |
|
|
177
|
+
| `pointsAtZ` | `string \| number` | No | `-` | - |
|
|
178
|
+
| `preserveAlpha` | `false \| true \| true \| false` | No | `-` | - |
|
|
179
|
+
| `preserveAspectRatio` | `string` | No | `-` | - |
|
|
180
|
+
| `primitiveUnits` | `string \| number` | No | `-` | - |
|
|
181
|
+
| `r` | `string \| number` | No | `-` | - |
|
|
182
|
+
| `radius` | `number` | No | `4` | Radius of the point. |
|
|
183
|
+
| `ref` | `null \| string \| (instance: SVGCircleElement \| null) => void \| RefObject<SVGCircleElement>` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
184
|
+
| `refX` | `string \| number` | No | `-` | - |
|
|
185
|
+
| `refY` | `string \| number` | No | `-` | - |
|
|
186
|
+
| `renderingIntent` | `string \| number` | No | `-` | - |
|
|
187
|
+
| `repeatCount` | `string \| number` | No | `-` | - |
|
|
188
|
+
| `repeatDur` | `string \| number` | No | `-` | - |
|
|
189
|
+
| `requiredExtensions` | `string \| number` | No | `-` | - |
|
|
190
|
+
| `requiredFeatures` | `string \| number` | No | `-` | - |
|
|
191
|
+
| `restart` | `string \| number` | No | `-` | - |
|
|
192
|
+
| `result` | `string` | No | `-` | - |
|
|
193
|
+
| `role` | `grid \| article \| button \| dialog \| figure \| form \| img \| link \| main \| menu \| menuitem \| option \| search \| table \| switch \| string & {} \| none \| row \| alert \| alertdialog \| application \| banner \| cell \| checkbox \| columnheader \| combobox \| complementary \| contentinfo \| definition \| directory \| document \| feed \| gridcell \| group \| heading \| list \| listbox \| listitem \| log \| marquee \| math \| menubar \| menuitemcheckbox \| menuitemradio \| navigation \| note \| presentation \| progressbar \| radio \| radiogroup \| region \| rowgroup \| rowheader \| scrollbar \| searchbox \| separator \| slider \| spinbutton \| status \| tab \| tablist \| tabpanel \| term \| textbox \| timer \| toolbar \| tooltip \| tree \| treegrid \| treeitem` | No | `-` | - |
|
|
194
|
+
| `rotate` | `string \| number` | No | `-` | - |
|
|
195
|
+
| `rx` | `string \| number` | No | `-` | - |
|
|
196
|
+
| `ry` | `string \| number` | No | `-` | - |
|
|
197
|
+
| `scale` | `string \| number` | No | `-` | - |
|
|
198
|
+
| `seed` | `string \| number` | No | `-` | - |
|
|
199
|
+
| `shapeRendering` | `string \| number` | No | `-` | - |
|
|
200
|
+
| `slope` | `string \| number` | No | `-` | - |
|
|
201
|
+
| `spacing` | `string \| number` | No | `-` | - |
|
|
202
|
+
| `specularConstant` | `string \| number` | No | `-` | - |
|
|
203
|
+
| `specularExponent` | `string \| number` | No | `-` | - |
|
|
204
|
+
| `speed` | `string \| number` | No | `-` | - |
|
|
205
|
+
| `spreadMethod` | `string` | No | `-` | - |
|
|
206
|
+
| `startOffset` | `string \| number` | No | `-` | - |
|
|
207
|
+
| `stdDeviation` | `string \| number` | No | `-` | - |
|
|
208
|
+
| `stemh` | `string \| number` | No | `-` | - |
|
|
209
|
+
| `stemv` | `string \| number` | No | `-` | - |
|
|
210
|
+
| `stitchTiles` | `string \| number` | No | `-` | - |
|
|
211
|
+
| `stopColor` | `string` | No | `-` | - |
|
|
212
|
+
| `stopOpacity` | `string \| number` | No | `-` | - |
|
|
213
|
+
| `strikethroughPosition` | `string \| number` | No | `-` | - |
|
|
214
|
+
| `strikethroughThickness` | `string \| number` | No | `-` | - |
|
|
215
|
+
| `string` | `string \| number` | No | `-` | - |
|
|
216
|
+
| `stroke` | `string` | No | `'var(--color-bg)'` | Color of the outer stroke around the point. |
|
|
217
|
+
| `strokeDasharray` | `string \| number` | No | `-` | - |
|
|
218
|
+
| `strokeDashoffset` | `string \| number` | No | `-` | - |
|
|
219
|
+
| `strokeLinecap` | `inherit \| butt \| round \| square` | No | `-` | - |
|
|
220
|
+
| `strokeLinejoin` | `inherit \| round \| miter \| bevel` | No | `-` | - |
|
|
221
|
+
| `strokeMiterlimit` | `string \| number` | No | `-` | - |
|
|
222
|
+
| `strokeOpacity` | `string \| number` | No | `-` | - |
|
|
223
|
+
| `strokeWidth` | `number` | No | `2` | Outer stroke width of the point. Set to 0 to remove the stroke. |
|
|
224
|
+
| `style` | `CSSProperties` | No | `-` | Custom styles for the point. |
|
|
225
|
+
| `styles` | `{ container?: CSSProperties; point?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
|
|
226
|
+
| `suppressHydrationWarning` | `boolean` | No | `-` | - |
|
|
227
|
+
| `surfaceScale` | `string \| number` | No | `-` | - |
|
|
228
|
+
| `systemLanguage` | `string \| number` | No | `-` | - |
|
|
229
|
+
| `tabIndex` | `number` | No | `-` | - |
|
|
230
|
+
| `tableValues` | `string \| number` | No | `-` | - |
|
|
231
|
+
| `target` | `string` | No | `-` | - |
|
|
232
|
+
| `targetX` | `string \| number` | No | `-` | - |
|
|
233
|
+
| `targetY` | `string \| number` | No | `-` | - |
|
|
234
|
+
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
235
|
+
| `textAnchor` | `string` | No | `-` | - |
|
|
236
|
+
| `textDecoration` | `string \| number` | No | `-` | - |
|
|
237
|
+
| `textLength` | `string \| number` | No | `-` | - |
|
|
238
|
+
| `textRendering` | `string \| number` | No | `-` | - |
|
|
239
|
+
| `to` | `string \| number` | No | `-` | - |
|
|
240
|
+
| `transform` | `string` | No | `-` | - |
|
|
241
|
+
| `type` | `string` | No | `-` | - |
|
|
242
|
+
| `u1` | `string \| number` | No | `-` | - |
|
|
243
|
+
| `u2` | `string \| number` | No | `-` | - |
|
|
244
|
+
| `underlinePosition` | `string \| number` | No | `-` | - |
|
|
245
|
+
| `underlineThickness` | `string \| number` | No | `-` | - |
|
|
246
|
+
| `unicode` | `string \| number` | No | `-` | - |
|
|
247
|
+
| `unicodeBidi` | `string \| number` | No | `-` | - |
|
|
248
|
+
| `unicodeRange` | `string \| number` | No | `-` | - |
|
|
249
|
+
| `unitsPerEm` | `string \| number` | No | `-` | - |
|
|
250
|
+
| `vAlphabetic` | `string \| number` | No | `-` | - |
|
|
251
|
+
| `vHanging` | `string \| number` | No | `-` | - |
|
|
252
|
+
| `vIdeographic` | `string \| number` | No | `-` | - |
|
|
253
|
+
| `vMathematical` | `string \| number` | No | `-` | - |
|
|
254
|
+
| `values` | `string` | No | `-` | - |
|
|
255
|
+
| `vectorEffect` | `string \| number` | No | `-` | - |
|
|
256
|
+
| `version` | `string` | No | `-` | - |
|
|
257
|
+
| `vertAdvY` | `string \| number` | No | `-` | - |
|
|
258
|
+
| `vertOriginX` | `string \| number` | No | `-` | - |
|
|
259
|
+
| `vertOriginY` | `string \| number` | No | `-` | - |
|
|
260
|
+
| `viewBox` | `string` | No | `-` | - |
|
|
261
|
+
| `viewTarget` | `string \| number` | No | `-` | - |
|
|
262
|
+
| `visibility` | `string \| number` | No | `-` | - |
|
|
263
|
+
| `width` | `string \| number` | No | `-` | - |
|
|
264
|
+
| `widths` | `string \| number` | No | `-` | - |
|
|
265
|
+
| `wordSpacing` | `string \| number` | No | `-` | - |
|
|
266
|
+
| `writingMode` | `string \| number` | No | `-` | - |
|
|
267
|
+
| `x` | `string \| number` | No | `-` | - |
|
|
268
|
+
| `x1` | `string \| number` | No | `-` | - |
|
|
269
|
+
| `x2` | `string \| number` | No | `-` | - |
|
|
270
|
+
| `xChannelSelector` | `string` | No | `-` | - |
|
|
271
|
+
| `xHeight` | `string \| number` | No | `-` | - |
|
|
272
|
+
| `xlinkActuate` | `string` | No | `-` | - |
|
|
273
|
+
| `xlinkArcrole` | `string` | No | `-` | - |
|
|
274
|
+
| `xlinkHref` | `string` | No | `-` | - |
|
|
275
|
+
| `xlinkRole` | `string` | No | `-` | - |
|
|
276
|
+
| `xlinkShow` | `string` | No | `-` | - |
|
|
277
|
+
| `xlinkTitle` | `string` | No | `-` | - |
|
|
278
|
+
| `xlinkType` | `string` | No | `-` | - |
|
|
279
|
+
| `xmlBase` | `string` | No | `-` | - |
|
|
280
|
+
| `xmlLang` | `string` | No | `-` | - |
|
|
281
|
+
| `xmlSpace` | `string` | No | `-` | - |
|
|
282
|
+
| `xmlns` | `string` | No | `-` | - |
|
|
283
|
+
| `xmlnsXlink` | `string` | No | `-` | - |
|
|
284
|
+
| `y` | `string \| number` | No | `-` | - |
|
|
285
|
+
| `y1` | `string \| number` | No | `-` | - |
|
|
286
|
+
| `y2` | `string \| number` | No | `-` | - |
|
|
287
|
+
| `yAxisId` | `string` | No | `-` | Optional Y-axis id to specify which axis to plot along. Defaults to the first y-axis |
|
|
288
|
+
| `yChannelSelector` | `string` | No | `-` | - |
|
|
289
|
+
| `z` | `string \| number` | No | `-` | - |
|
|
290
|
+
| `zoomAndPan` | `string` | No | `-` | - |
|
|
291
|
+
|
|
292
|
+
|
|
293
|
+
## Examples
|
|
294
|
+
|
|
295
|
+
### Basic Example
|
|
296
|
+
|
|
297
|
+
Points are visual markers that highlight specific data values on a chart. They can be used to emphasize important data points, show discrete values, or provide interactive elements.
|
|
298
|
+
|
|
299
|
+
```jsx live
|
|
300
|
+
<LineChart
|
|
301
|
+
enableScrubbing
|
|
302
|
+
height={{ base: 150, tablet: 200, desktop: 250 }}
|
|
303
|
+
series={[
|
|
304
|
+
{
|
|
305
|
+
id: 'prices',
|
|
306
|
+
data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
|
|
307
|
+
},
|
|
308
|
+
]}
|
|
309
|
+
curve="monotone"
|
|
310
|
+
showYAxis
|
|
311
|
+
showArea
|
|
312
|
+
yAxis={{
|
|
313
|
+
showGrid: true,
|
|
314
|
+
}}
|
|
315
|
+
renderPoints={() => true}
|
|
316
|
+
>
|
|
317
|
+
<Scrubber />
|
|
318
|
+
</LineChart>
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
### Conditional Points
|
|
322
|
+
|
|
323
|
+
You can conditionally render points to highlight specific values in your data, such as maximum/minimum values or outliers.
|
|
324
|
+
|
|
325
|
+
```jsx live
|
|
326
|
+
function AssetPriceWithMinMax() {
|
|
327
|
+
const data = sparklineInteractiveData.hour.map((d) => d.value);
|
|
328
|
+
|
|
329
|
+
const minPrice = Math.min(...data);
|
|
330
|
+
const maxPrice = Math.max(...data);
|
|
331
|
+
|
|
332
|
+
const formatPrice = useCallback((price: number) => {
|
|
333
|
+
return new Intl.NumberFormat('en-US', {
|
|
334
|
+
style: 'currency',
|
|
335
|
+
currency: 'USD',
|
|
336
|
+
}).format(price);
|
|
337
|
+
}, []);
|
|
338
|
+
|
|
339
|
+
return (
|
|
340
|
+
<LineChart
|
|
341
|
+
series={[
|
|
342
|
+
{
|
|
343
|
+
id: 'btc',
|
|
344
|
+
data: data,
|
|
345
|
+
color: assets.btc.color,
|
|
346
|
+
},
|
|
347
|
+
]}
|
|
348
|
+
showArea
|
|
349
|
+
areaType="dotted"
|
|
350
|
+
height={{ base: 150, tablet: 200, desktop: 250 }}
|
|
351
|
+
style={{ outlineColor: assets.btc.color }}
|
|
352
|
+
renderPoints={({ dataX, dataY }) => {
|
|
353
|
+
const isMin = dataY === minPrice;
|
|
354
|
+
const isMax = dataY === maxPrice;
|
|
355
|
+
|
|
356
|
+
if (isMin) {
|
|
357
|
+
return { label: formatPrice(dataY), labelProps: { dy: 6, verticalAlignment: 'top' } };
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
if (isMax) {
|
|
361
|
+
return { label: formatPrice(dataY), labelProps: { dy: -6, verticalAlignment: 'bottom' } };
|
|
362
|
+
}
|
|
363
|
+
}}
|
|
364
|
+
/>
|
|
365
|
+
);
|
|
366
|
+
};
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### Interactive Points
|
|
370
|
+
|
|
371
|
+
Points can be made interactive by adding click handlers, allowing users to explore data in more detail.
|
|
372
|
+
|
|
373
|
+
```jsx live
|
|
374
|
+
<LineChart
|
|
375
|
+
height={{ base: 150, tablet: 200, desktop: 250 }}
|
|
376
|
+
series={[
|
|
377
|
+
{
|
|
378
|
+
id: 'sales',
|
|
379
|
+
data: [120, 132, 101, 134, 90, 230, 210, 120, 180, 190, 210, 176],
|
|
380
|
+
},
|
|
381
|
+
]}
|
|
382
|
+
curve="monotone"
|
|
383
|
+
showYAxis
|
|
384
|
+
showArea
|
|
385
|
+
yAxis={{
|
|
386
|
+
showGrid: true,
|
|
387
|
+
label: 'Sales (units)',
|
|
388
|
+
}}
|
|
389
|
+
renderPoints={({ dataX, dataY }) => {
|
|
390
|
+
const months = [
|
|
391
|
+
'Jan',
|
|
392
|
+
'Feb',
|
|
393
|
+
'Mar',
|
|
394
|
+
'Apr',
|
|
395
|
+
'May',
|
|
396
|
+
'Jun',
|
|
397
|
+
'Jul',
|
|
398
|
+
'Aug',
|
|
399
|
+
'Sep',
|
|
400
|
+
'Oct',
|
|
401
|
+
'Nov',
|
|
402
|
+
'Dec',
|
|
403
|
+
];
|
|
404
|
+
return {
|
|
405
|
+
radius: 4,
|
|
406
|
+
onClick: () => alert(`${months[dataX]}: ${dataY} units sold`),
|
|
407
|
+
accessibilityLabel: `${months[dataX]} sales: ${dataY} units`,
|
|
408
|
+
};
|
|
409
|
+
}}
|
|
410
|
+
/>
|
|
411
|
+
```
|
|
412
|
+
|
|
413
|
+
### Customization
|
|
414
|
+
|
|
415
|
+
Points support extensive customization through various properties including colors, sizes, animations, and labels.
|
|
416
|
+
|
|
417
|
+
```jsx live
|
|
418
|
+
<LineChart
|
|
419
|
+
height={{ base: 150, tablet: 200, desktop: 250 }}
|
|
420
|
+
series={[
|
|
421
|
+
{
|
|
422
|
+
id: 'performance',
|
|
423
|
+
data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
|
|
424
|
+
},
|
|
425
|
+
]}
|
|
426
|
+
curve="monotone"
|
|
427
|
+
showYAxis
|
|
428
|
+
showArea
|
|
429
|
+
yAxis={{
|
|
430
|
+
showGrid: true,
|
|
431
|
+
label: 'Performance Score',
|
|
432
|
+
}}
|
|
433
|
+
renderPoints={({ dataX, dataY }) => {
|
|
434
|
+
const isHighPerformance = dataY >= 90;
|
|
435
|
+
const isLowPerformance = dataY < 75;
|
|
436
|
+
|
|
437
|
+
return {
|
|
438
|
+
fill: isHighPerformance
|
|
439
|
+
? 'var(--color-bgPositive)'
|
|
440
|
+
: isLowPerformance
|
|
441
|
+
? 'var(--color-bgNegative)'
|
|
442
|
+
: 'var(--color-fgPrimary)',
|
|
443
|
+
radius: isHighPerformance ? 6 : 4,
|
|
444
|
+
strokeWidth: 2,
|
|
445
|
+
stroke: 'var(--color-bg)',
|
|
446
|
+
label: isHighPerformance || isLowPerformance ? `${dataY}%` : undefined,
|
|
447
|
+
labelProps: {
|
|
448
|
+
verticalAlignment: isHighPerformance ? 'bottom' : 'top',
|
|
449
|
+
dy: isHighPerformance ? -10 : 10,
|
|
450
|
+
color: isHighPerformance
|
|
451
|
+
? 'var(--color-fgPositive)'
|
|
452
|
+
: isLowPerformance
|
|
453
|
+
? 'var(--color-fgNegative)'
|
|
454
|
+
: undefined,
|
|
455
|
+
},
|
|
456
|
+
};
|
|
457
|
+
}}
|
|
458
|
+
/>
|
|
459
|
+
```
|
|
460
|
+
|
|
461
|
+
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# PortalProvider
|
|
2
|
+
|
|
3
|
+
A component that manages the rendering of portals for overlay components.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import { PortalProvider } from '@coinbase/cds-web/overlays/PortalProvider'
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Props
|
|
12
|
+
|
|
13
|
+
| Prop | Type | Required | Default | Description |
|
|
14
|
+
| --- | --- | --- | --- | --- |
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## Examples
|
|
18
|
+
|
|
19
|
+
### Basic usage
|
|
20
|
+
|
|
21
|
+
The PortalProvider component is typically used at the root of your application to manage overlay components:
|
|
22
|
+
|
|
23
|
+
```tsx live
|
|
24
|
+
function Example() {
|
|
25
|
+
return (
|
|
26
|
+
<PortalProvider>
|
|
27
|
+
<Box padding={4} bordered borderRadius={200}>
|
|
28
|
+
Your app content
|
|
29
|
+
</Box>
|
|
30
|
+
</PortalProvider>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Custom Portal Nodes
|
|
36
|
+
|
|
37
|
+
You can disable the default portal rendering and use the PortalNodes component separately:
|
|
38
|
+
|
|
39
|
+
```tsx live
|
|
40
|
+
function Example() {
|
|
41
|
+
return (
|
|
42
|
+
<PortalProvider renderPortals={false}>
|
|
43
|
+
<Box padding={4} bordered borderRadius={200}>
|
|
44
|
+
Your app content
|
|
45
|
+
</Box>
|
|
46
|
+
<PortalNodes />
|
|
47
|
+
</PortalProvider>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Toast Example
|
|
53
|
+
|
|
54
|
+
The PortalProvider's `toastBottomOffset` prop sets the default bottom offset for all toasts:
|
|
55
|
+
|
|
56
|
+
```tsx live
|
|
57
|
+
function Example() {
|
|
58
|
+
function ToastDemo() {
|
|
59
|
+
const toast = useToast();
|
|
60
|
+
return (
|
|
61
|
+
<Box padding={4} bordered borderRadius={200}>
|
|
62
|
+
<Button onClick={() => toast.show('This toast appears with a custom bottom offset (80px)')}>
|
|
63
|
+
Show Toast
|
|
64
|
+
</Button>
|
|
65
|
+
</Box>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<PortalProvider toastBottomOffset={80}>
|
|
71
|
+
<ToastDemo />
|
|
72
|
+
</PortalProvider>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
|