@rio-cloud/uikit-mcp 1.1.6 → 1.1.8
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/README.md +13 -17
- package/dist/doc-metadata.json +125 -295
- package/dist/docs/components/accentBar.md +16 -69
- package/dist/docs/components/activity.md +7 -44
- package/dist/docs/components/animatedNumber.md +3 -11
- package/dist/docs/components/animatedTextReveal.md +3 -31
- package/dist/docs/components/animations.md +21 -54
- package/dist/docs/components/appHeader.md +11 -30
- package/dist/docs/components/appLayout.md +36 -172
- package/dist/docs/components/appNavigationBar.md +1 -24
- package/dist/docs/components/areaCharts.md +7 -22
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -9
- package/dist/docs/components/assetTree.md +141 -374
- package/dist/docs/components/autosuggests.md +3 -102
- package/dist/docs/components/avatar.md +1 -16
- package/dist/docs/components/banner.md +4 -37
- package/dist/docs/components/barCharts.md +20 -75
- package/dist/docs/components/barList.md +9 -77
- package/dist/docs/components/basicMap.md +1 -67
- package/dist/docs/components/bottomSheet.md +2 -28
- package/dist/docs/components/button.md +12 -65
- package/dist/docs/components/buttonToolbar.md +5 -19
- package/dist/docs/components/calendarStripe.md +48 -106
- package/dist/docs/components/card.md +1 -9
- package/dist/docs/components/carousel.md +1 -14
- package/dist/docs/components/chartColors.md +1 -156
- package/dist/docs/components/chartsGettingStarted.md +1 -1
- package/dist/docs/components/chat.md +2 -81
- package/dist/docs/components/checkbox.md +11 -72
- package/dist/docs/components/circularProgress.md +8 -49
- package/dist/docs/components/clearableInput.md +3 -62
- package/dist/docs/components/collapse.md +2 -15
- package/dist/docs/components/composedCharts.md +16 -26
- package/dist/docs/components/contentLoader.md +7 -25
- package/dist/docs/components/dataTabs.md +16 -104
- package/dist/docs/components/datepickers.md +710 -962
- package/dist/docs/components/dialogs.md +5 -67
- package/dist/docs/components/divider.md +1 -33
- package/dist/docs/components/dropdowns.md +3412 -5600
- package/dist/docs/components/editableContent.md +4 -82
- package/dist/docs/components/expander.md +15 -88
- package/dist/docs/components/fade.md +4 -61
- package/dist/docs/components/fadeExpander.md +1 -7
- package/dist/docs/components/fadeUp.md +2 -76
- package/dist/docs/components/feedback.md +9 -68
- package/dist/docs/components/filePickers.md +4 -18
- package/dist/docs/components/formLabel.md +7 -27
- package/dist/docs/components/groupedItemList.md +2 -158
- package/dist/docs/components/iconList.md +8 -65
- package/dist/docs/components/imagePreloader.md +1 -9
- package/dist/docs/components/labeledElement.md +3 -18
- package/dist/docs/components/licensePlate.md +1 -43
- package/dist/docs/components/lineCharts.md +7 -38
- package/dist/docs/components/listMenu.md +2 -34
- package/dist/docs/components/loadMore.md +5 -24
- package/dist/docs/components/mainNavigation.md +1 -9
- package/dist/docs/components/mapCircle.md +1 -23
- package/dist/docs/components/mapCluster.md +2 -54
- package/dist/docs/components/mapContext.md +1 -23
- package/dist/docs/components/mapDraggableMarker.md +2 -28
- package/dist/docs/components/mapGettingStarted.md +2 -2
- package/dist/docs/components/mapInfoBubble.md +1 -27
- package/dist/docs/components/mapLayerGroup.md +1 -23
- package/dist/docs/components/mapMarker.md +1 -99
- package/dist/docs/components/mapPolygon.md +2 -116
- package/dist/docs/components/mapRoute.md +6 -1465
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +11 -128
- package/dist/docs/components/mapUtils.md +10 -113
- package/dist/docs/components/multiselects.md +14 -163
- package/dist/docs/components/noData.md +8 -22
- package/dist/docs/components/notifications.md +3 -19
- package/dist/docs/components/numbercontrol.md +3 -47
- package/dist/docs/components/onboarding.md +3 -15
- package/dist/docs/components/page.md +1 -33
- package/dist/docs/components/pager.md +1 -17
- package/dist/docs/components/pieCharts.md +40 -71
- package/dist/docs/components/popover.md +1 -12
- package/dist/docs/components/position.md +2 -6
- package/dist/docs/components/radialBarCharts.md +32 -116
- package/dist/docs/components/radioCardGroup.md +6 -48
- package/dist/docs/components/radiobutton.md +6 -75
- package/dist/docs/components/releaseNotes.md +3 -21
- package/dist/docs/components/resizer.md +1 -7
- package/dist/docs/components/responsiveColumnStripe.md +9 -49
- package/dist/docs/components/responsiveVideo.md +1 -7
- package/dist/docs/components/rioglyph.md +1 -17
- package/dist/docs/components/rules.md +7 -70
- package/dist/docs/components/saveableInput.md +267 -401
- package/dist/docs/components/selects.md +27 -1164
- package/dist/docs/components/sidebar.md +6 -17
- package/dist/docs/components/sliders.md +1 -27
- package/dist/docs/components/smoothScrollbars.md +1 -73
- package/dist/docs/components/spinners.md +6 -51
- package/dist/docs/components/states.md +6 -92
- package/dist/docs/components/statsWidgets.md +1 -76
- package/dist/docs/components/statusBar.md +1 -57
- package/dist/docs/components/stepButton.md +2 -7
- package/dist/docs/components/steppedProgressBars.md +5 -62
- package/dist/docs/components/subNavigation.md +1 -31
- package/dist/docs/components/supportMarker.md +2 -14
- package/dist/docs/components/svgImage.md +1 -5
- package/dist/docs/components/switch.md +2 -33
- package/dist/docs/components/tables.md +1 -1
- package/dist/docs/components/tagManager.md +1 -41
- package/dist/docs/components/tags.md +1 -138
- package/dist/docs/components/teaser.md +2 -122
- package/dist/docs/components/textTruncateMiddle.md +2 -9
- package/dist/docs/components/timeline.md +1 -99
- package/dist/docs/components/timepicker.md +4 -79
- package/dist/docs/components/toggleButton.md +2 -15
- package/dist/docs/components/tooltip.md +9 -30
- package/dist/docs/components/tracker.md +2 -19
- package/dist/docs/components/virtualList.md +57 -123
- package/dist/docs/foundations.md +753 -4073
- package/dist/docs/start/changelog.md +793 -1
- package/dist/docs/start/goodtoknow.md +1 -1
- package/dist/docs/start/guidelines/color-combinations.md +149 -483
- package/dist/docs/start/guidelines/custom-css.md +1 -1
- package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
- package/dist/docs/start/guidelines/formatting.md +1 -1
- package/dist/docs/start/guidelines/iframe.md +4 -16
- package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
- package/dist/docs/start/guidelines/print-css.md +1 -1
- package/dist/docs/start/guidelines/spinner.md +13 -67
- package/dist/docs/start/guidelines/state-in-url.md +1 -1
- package/dist/docs/start/guidelines/supported-browsers.md +1 -1
- package/dist/docs/start/guidelines/writing.md +1 -1
- package/dist/docs/start/howto.md +11 -11
- package/dist/docs/start/intro.md +1 -1
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/utilities/classNames.md +3 -18
- package/dist/docs/utilities/deviceUtils.md +7 -13
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +2 -12
- package/dist/docs/utilities/routeUtils.md +25 -343
- package/dist/docs/utilities/useAfterMount.md +1 -6
- package/dist/docs/utilities/useAutoAnimate.md +2 -15
- package/dist/docs/utilities/useAverage.md +1 -6
- package/dist/docs/utilities/useClickOutside.md +1 -5
- package/dist/docs/utilities/useClipboard.md +2 -6
- package/dist/docs/utilities/useCookies.md +2 -10
- package/dist/docs/utilities/useCount.md +7 -16
- package/dist/docs/utilities/useDarkMode.md +2 -6
- package/dist/docs/utilities/useDebugInfo.md +6 -20
- package/dist/docs/utilities/useEffectOnce.md +1 -6
- package/dist/docs/utilities/useElapsedTime.md +2 -6
- package/dist/docs/utilities/useElementSize.md +1 -7
- package/dist/docs/utilities/useEsc.md +1 -5
- package/dist/docs/utilities/useEvent.md +1 -5
- package/dist/docs/utilities/useFocusTrap.md +1 -5
- package/dist/docs/utilities/useFullscreen.md +2 -15
- package/dist/docs/utilities/useHover.md +1 -5
- package/dist/docs/utilities/useIncomingPostMessages.md +2 -18
- package/dist/docs/utilities/useInterval.md +2 -8
- package/dist/docs/utilities/useIsFocusWithin.md +1 -10
- package/dist/docs/utilities/useKey.md +1 -15
- package/dist/docs/utilities/useLocalStorage.md +2 -11
- package/dist/docs/utilities/useLocationSuggestions.md +1 -5
- package/dist/docs/utilities/useMax.md +1 -5
- package/dist/docs/utilities/useMin.md +1 -5
- package/dist/docs/utilities/useMutationObserver.md +3 -11
- package/dist/docs/utilities/useOnScreen.md +1 -8
- package/dist/docs/utilities/useOnlineStatus.md +1 -5
- package/dist/docs/utilities/usePostMessage.md +3 -9
- package/dist/docs/utilities/usePostMessageSender.md +3 -13
- package/dist/docs/utilities/usePrevious.md +1 -5
- package/dist/docs/utilities/useResizeObserver.md +3 -11
- package/dist/docs/utilities/useRioCookieConsent.md +1 -5
- package/dist/docs/utilities/useScrollPosition.md +3 -59
- package/dist/docs/utilities/useSearch.md +2 -16
- package/dist/docs/utilities/useSearchHighlight.md +13 -78
- package/dist/docs/utilities/useSorting.md +18 -43
- package/dist/docs/utilities/useStateWithValidation.md +1 -5
- package/dist/docs/utilities/useSum.md +1 -9
- package/dist/docs/utilities/useTableExport.md +42 -59
- package/dist/docs/utilities/useTableSelection.md +75 -120
- package/dist/docs/utilities/useTimeout.md +2 -6
- package/dist/docs/utilities/useToggle.md +4 -14
- package/dist/docs/utilities/useUrlState.md +2 -27
- package/dist/docs/utilities/useWindowResize.md +1 -5
- package/dist/index.mjs +46 -10
- package/dist/version.json +2 -2
- package/package.json +2 -2
- package/dist/docs/templates/common-table.md +0 -1112
- package/dist/docs/templates/detail-views.md +0 -942
- package/dist/docs/templates/expandable-details.md +0 -228
- package/dist/docs/templates/feature-cards.md +0 -549
- package/dist/docs/templates/form-summary.md +0 -199
- package/dist/docs/templates/form-toggle.md +0 -367
- package/dist/docs/templates/list-blocks.md +0 -1021
- package/dist/docs/templates/loading-progress.md +0 -109
- package/dist/docs/templates/options-panel.md +0 -152
- package/dist/docs/templates/panel-variants.md +0 -164
- package/dist/docs/templates/progress-cards.md +0 -607
- package/dist/docs/templates/progress-success.md +0 -142
- package/dist/docs/templates/settings-form.md +0 -434
- package/dist/docs/templates/stats-blocks.md +0 -1381
- package/dist/docs/templates/table-panel.md +0 -184
- package/dist/docs/templates/table-row-animation.md +0 -317
- package/dist/docs/templates/usage-cards.md +0 -227
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Selection
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/autosuggests
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:22.561Z
|
|
7
7
|
|
|
8
8
|
For a more flexible and smart search we highly recommend using fuse.js as searching algorithm.For more information on how to configure it, see: https://fusejs.io
|
|
9
9
|
|
|
@@ -11,7 +11,7 @@ For a more flexible and smart search we highly recommend using fuse.js as search
|
|
|
11
11
|
|
|
12
12
|
### Example: Example 1
|
|
13
13
|
|
|
14
|
-
Simple examples without searching
|
|
14
|
+
Simple examples without searching algorithm Basic use
|
|
15
15
|
|
|
16
16
|
Suggestion 1
|
|
17
17
|
Suggestion 2
|
|
@@ -65,81 +65,7 @@ Suggestion 6
|
|
|
65
65
|
Suggestion 7
|
|
66
66
|
Suggestion 8
|
|
67
67
|
Suggestion 9
|
|
68
|
-
Suggestion 10
|
|
69
|
-
|
|
70
|
-
There is something wrong here
|
|
71
|
-
|
|
72
|
-
Autosuggest with drop up and right aligned
|
|
73
|
-
Suggestion 1
|
|
74
|
-
Suggestion 2
|
|
75
|
-
Suggestion 3
|
|
76
|
-
Suggestion 4
|
|
77
|
-
Suggestion 5
|
|
78
|
-
Suggestion 6
|
|
79
|
-
Suggestion 7
|
|
80
|
-
Suggestion 8
|
|
81
|
-
Suggestion 9
|
|
82
|
-
Suggestion 10
|
|
83
|
-
|
|
84
|
-
#### Summary
|
|
85
|
-
|
|
86
|
-
Simple examples without searching algorithmBasic use
|
|
87
|
-
|
|
88
|
-
Suggestion 1
|
|
89
|
-
Suggestion 2
|
|
90
|
-
Suggestion 3
|
|
91
|
-
Suggestion 4
|
|
92
|
-
Suggestion 5
|
|
93
|
-
Suggestion 6
|
|
94
|
-
Suggestion 7
|
|
95
|
-
Suggestion 8
|
|
96
|
-
Suggestion 9
|
|
97
|
-
Suggestion 10
|
|
98
|
-
|
|
99
|
-
with loading indicator
|
|
100
|
-
|
|
101
|
-
with input-group-addon and no closeOnSelect
|
|
102
|
-
.00
|
|
103
|
-
|
|
104
|
-
Suggestion 1
|
|
105
|
-
Suggestion 2
|
|
106
|
-
Suggestion 3
|
|
107
|
-
Suggestion 4
|
|
108
|
-
Suggestion 5
|
|
109
|
-
Suggestion 6
|
|
110
|
-
Suggestion 7
|
|
111
|
-
Suggestion 8
|
|
112
|
-
Suggestion 9
|
|
113
|
-
Suggestion 10
|
|
114
|
-
|
|
115
|
-
Disabled Autosuggest
|
|
116
|
-
|
|
117
|
-
Autosuggest with error
|
|
118
|
-
Suggestion 1
|
|
119
|
-
Suggestion 2
|
|
120
|
-
Suggestion 3
|
|
121
|
-
Suggestion 4
|
|
122
|
-
Suggestion 5
|
|
123
|
-
Suggestion 6
|
|
124
|
-
Suggestion 7
|
|
125
|
-
Suggestion 8
|
|
126
|
-
Suggestion 9
|
|
127
|
-
Suggestion 10
|
|
128
|
-
|
|
129
|
-
Autosuggest with warning and addons
|
|
130
|
-
|
|
131
|
-
Suggestion 1
|
|
132
|
-
Suggestion 2
|
|
133
|
-
Suggestion 3
|
|
134
|
-
Suggestion 4
|
|
135
|
-
Suggestion 5
|
|
136
|
-
Suggestion 6
|
|
137
|
-
Suggestion 7
|
|
138
|
-
Suggestion 8
|
|
139
|
-
Suggestion 9
|
|
140
|
-
Suggestion 10
|
|
141
|
-
|
|
142
|
-
There is something wrong here
|
|
68
|
+
Suggestion 10 There is something wrong here
|
|
143
69
|
|
|
144
70
|
Autosuggest with drop up and right aligned
|
|
145
71
|
Suggestion 1
|
|
@@ -690,19 +616,6 @@ suggestion 7
|
|
|
690
616
|
suggestion 8
|
|
691
617
|
suggestion 9
|
|
692
618
|
|
|
693
|
-
#### Summary
|
|
694
|
-
|
|
695
|
-
Example for selecting multiple items
|
|
696
|
-
suggestion 1
|
|
697
|
-
suggestion 2
|
|
698
|
-
suggestion 3
|
|
699
|
-
suggestion 4
|
|
700
|
-
suggestion 5
|
|
701
|
-
suggestion 6
|
|
702
|
-
suggestion 7
|
|
703
|
-
suggestion 8
|
|
704
|
-
suggestion 9
|
|
705
|
-
|
|
706
619
|
#### React (tsx)
|
|
707
620
|
|
|
708
621
|
```tsx
|
|
@@ -910,18 +823,6 @@ Truck Y-ME
|
|
|
910
823
|
Truck Z-FG
|
|
911
824
|
Truck R-BM
|
|
912
825
|
|
|
913
|
-
#### Summary
|
|
914
|
-
|
|
915
|
-
Full example, with fusejs suggestion rendering
|
|
916
|
-
|
|
917
|
-
Driver A-47
|
|
918
|
-
Driver B-52
|
|
919
|
-
Driver T-800
|
|
920
|
-
Truck D-800
|
|
921
|
-
Truck Y-ME
|
|
922
|
-
Truck Z-FG
|
|
923
|
-
Truck R-BM
|
|
924
|
-
|
|
925
826
|
#### React (tsx)
|
|
926
827
|
|
|
927
828
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/avatar
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:56.337Z
|
|
7
7
|
|
|
8
8
|
The Avatar is a small component designed to render a users image, the initials of the users name or an icon.
|
|
9
9
|
|
|
@@ -15,12 +15,6 @@ JD
|
|
|
15
15
|
AAK
|
|
16
16
|
AK
|
|
17
17
|
|
|
18
|
-
#### Summary
|
|
19
|
-
|
|
20
|
-
JD
|
|
21
|
-
AAK
|
|
22
|
-
AK
|
|
23
|
-
|
|
24
18
|
#### React (tsx)
|
|
25
19
|
|
|
26
20
|
```tsx
|
|
@@ -109,15 +103,6 @@ AK
|
|
|
109
103
|
|
|
110
104
|
+2
|
|
111
105
|
|
|
112
|
-
#### Summary
|
|
113
|
-
|
|
114
|
-
JD
|
|
115
|
-
AAK
|
|
116
|
-
AK
|
|
117
|
-
+2
|
|
118
|
-
|
|
119
|
-
+2
|
|
120
|
-
|
|
121
106
|
#### React (tsx)
|
|
122
107
|
|
|
123
108
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/banner
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:40.258Z
|
|
7
7
|
|
|
8
8
|
Convey information or prompt action through in-line banners, ideal for educational content, updates, or announcements.
|
|
9
9
|
|
|
@@ -15,15 +15,7 @@ Convey information or prompt action through in-line banners, ideal for education
|
|
|
15
15
|
|
|
16
16
|
Banner title
|
|
17
17
|
Content highlighting a specific feature or action that users should be aware of or engage with
|
|
18
|
-
Button
|
|
19
|
-
|
|
20
|
-
Reset
|
|
21
|
-
|
|
22
|
-
#### Summary
|
|
23
|
-
|
|
24
|
-
Banner title
|
|
25
|
-
Content highlighting a specific feature or action that users should be aware of or engage with
|
|
26
|
-
Button CTAButton CTA
|
|
18
|
+
Button CTA Button CTA
|
|
27
19
|
|
|
28
20
|
Reset
|
|
29
21
|
|
|
@@ -76,7 +68,7 @@ export default () => {
|
|
|
76
68
|
<div style="position: relative;">
|
|
77
69
|
<div class="bg-white rounded border shadow-default padding-20 Banner display-flex text-color-darker overflow-hidden position-relative">
|
|
78
70
|
<div class="flex-1-1 overflow-hidden">
|
|
79
|
-
<div style="opacity: 0; transform: translateX(21.
|
|
71
|
+
<div style="opacity: 0; transform: translateX(21.6898px);">
|
|
80
72
|
<div class="display-flex align-items-start align-items-center-ls width-100pct gap-15 ">
|
|
81
73
|
<div class="BannerIcon flex-0 margin-x-5 min-width-25 ">
|
|
82
74
|
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="60" viewBox="0 0 773 612" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/">
|
|
@@ -234,17 +226,7 @@ export default () => {
|
|
|
234
226
|
|
|
235
227
|
Customize your experience
|
|
236
228
|
Update your preferences in settings for a tailored experience
|
|
237
|
-
Got it
|
|
238
|
-
|
|
239
|
-
Reset
|
|
240
|
-
|
|
241
|
-
#### Summary
|
|
242
|
-
|
|
243
|
-
Customize your experience
|
|
244
|
-
Update your preferences in settings for a tailored experience
|
|
245
|
-
Got it
|
|
246
|
-
|
|
247
|
-
Reset
|
|
229
|
+
Got it Reset
|
|
248
230
|
|
|
249
231
|
#### React (tsx)
|
|
250
232
|
|
|
@@ -377,13 +359,6 @@ On white background, disable the border prop so the component is more pleasing f
|
|
|
377
359
|
|
|
378
360
|
Reset
|
|
379
361
|
|
|
380
|
-
#### Summary
|
|
381
|
-
|
|
382
|
-
Pay attention to borders
|
|
383
|
-
On white background, disable the border prop so the component is more pleasing for the eye
|
|
384
|
-
|
|
385
|
-
Reset
|
|
386
|
-
|
|
387
362
|
#### React (tsx)
|
|
388
363
|
|
|
389
364
|
```tsx
|
|
@@ -508,14 +483,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
|
|
|
508
483
|
|
|
509
484
|
Reset
|
|
510
485
|
|
|
511
|
-
#### Summary
|
|
512
|
-
|
|
513
|
-
Tip 1
|
|
514
|
-
|
|
515
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
|
|
516
|
-
|
|
517
|
-
Reset
|
|
518
|
-
|
|
519
486
|
#### React (tsx)
|
|
520
487
|
|
|
521
488
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Charts
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/barCharts
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:31.930Z
|
|
7
7
|
|
|
8
8
|
## BarChart
|
|
9
9
|
|
|
@@ -13,13 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
Simple horizontal BarChart
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
#### Summary
|
|
19
|
-
|
|
20
|
-
Simple horizontal BarChart
|
|
21
|
-
|
|
22
|
-
JanuaryFebruaryMarchAprilMayJune
|
|
16
|
+
January February March April May June
|
|
23
17
|
|
|
24
18
|
#### React (tsx)
|
|
25
19
|
|
|
@@ -124,33 +118,33 @@ const data = [
|
|
|
124
118
|
<g class="recharts-layer recharts-bar-rectangles">
|
|
125
119
|
<g class="recharts-layer">
|
|
126
120
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
127
|
-
<path fill="#30b4c0 " name="undefined" x="7.8" y="
|
|
128
|
-
69.8,
|
|
121
|
+
<path fill="#30b4c0 " name="undefined" x="7.8" y="55.9378" width="62" height="167.0622" class="recharts-rectangle" d="M7.8,58.9378A 3,3,0,0,1,10.8,55.9378L 66.8,55.9378A 3,3,0,0,1,
|
|
122
|
+
69.8,58.9378L 69.8,223L 7.8,223Z">
|
|
129
123
|
</path>
|
|
130
124
|
</g>
|
|
131
125
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
132
|
-
<path fill="#30b4c0 " name="undefined" x="85.8" y="
|
|
133
|
-
147.8,
|
|
126
|
+
<path fill="#30b4c0 " name="undefined" x="85.8" y="144.4665" width="62" height="78.5335" class="recharts-rectangle" d="M85.8,147.4665A 3,3,0,0,1,88.8,144.4665L 144.8,144.4665A 3,3,0,0,1,
|
|
127
|
+
147.8,147.4665L 147.8,223L 85.8,223Z">
|
|
134
128
|
</path>
|
|
135
129
|
</g>
|
|
136
130
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
137
|
-
<path fill="#30b4c0 " name="undefined" x="163.8" y="
|
|
138
|
-
225.8,
|
|
131
|
+
<path fill="#30b4c0 " name="undefined" x="163.8" y="178.7356" width="62" height="44.2644" class="recharts-rectangle" d="M163.8,181.7356A 3,3,0,0,1,166.8,178.7356L 222.8,178.7356A 3,3,0,0,1,
|
|
132
|
+
225.8,181.7356L 225.8,223L 163.8,223Z">
|
|
139
133
|
</path>
|
|
140
134
|
</g>
|
|
141
135
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
142
|
-
<path fill="#30b4c0 " name="undefined" x="241.8" y="
|
|
143
|
-
303.8,
|
|
136
|
+
<path fill="#30b4c0 " name="undefined" x="241.8" y="209.1495" width="62" height="13.8505" class="recharts-rectangle" d="M241.8,212.1495A 3,3,0,0,1,244.8,209.1495L 300.8,209.1495A 3,3,0,0,1,
|
|
137
|
+
303.8,212.1495L 303.8,223L 241.8,223Z">
|
|
144
138
|
</path>
|
|
145
139
|
</g>
|
|
146
140
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
147
|
-
<path fill="#30b4c0 " name="undefined" x="319.8" y="211.
|
|
148
|
-
381.8,214.
|
|
141
|
+
<path fill="#30b4c0 " name="undefined" x="319.8" y="211.4699" width="62" height="11.5301" class="recharts-rectangle" d="M319.8,214.4699A 3,3,0,0,1,322.8,211.4699L 378.8,211.4699A 3,3,0,0,1,
|
|
142
|
+
381.8,214.4699L 381.8,223L 319.8,223Z">
|
|
149
143
|
</path>
|
|
150
144
|
</g>
|
|
151
145
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
152
|
-
<path fill="#30b4c0 " name="undefined" x="397.8" y="
|
|
153
|
-
459.8,
|
|
146
|
+
<path fill="#30b4c0 " name="undefined" x="397.8" y="206.3295" width="62" height="16.6705" class="recharts-rectangle" d="M397.8,209.3295A 3,3,0,0,1,400.8,206.3295L 456.8,206.3295A 3,3,0,0,1,
|
|
147
|
+
459.8,209.3295L 459.8,223L 397.8,223Z">
|
|
154
148
|
</path>
|
|
155
149
|
</g>
|
|
156
150
|
</g>
|
|
@@ -296,13 +290,7 @@ const data = [
|
|
|
296
290
|
|
|
297
291
|
Horizontal BarChart
|
|
298
292
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
#### Summary
|
|
302
|
-
|
|
303
|
-
Horizontal BarChart
|
|
304
|
-
|
|
305
|
-
JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €Costs
|
|
293
|
+
January February March April May June Timerange 0 € 15 € 30 € 45 € 60 € Costs
|
|
306
294
|
|
|
307
295
|
#### React (tsx)
|
|
308
296
|
|
|
@@ -670,16 +658,7 @@ Multiple Bars BarChart
|
|
|
670
658
|
pv
|
|
671
659
|
uv
|
|
672
660
|
|
|
673
|
-
Page
|
|
674
|
-
|
|
675
|
-
#### Summary
|
|
676
|
-
|
|
677
|
-
Multiple Bars BarChart
|
|
678
|
-
|
|
679
|
-
pv
|
|
680
|
-
uv
|
|
681
|
-
|
|
682
|
-
Page APage BPage CPage DPage EPage FPage G025005000750010000
|
|
661
|
+
Page A Page B Page C Page D Page E Page F Page G 0 2500 5000 7500 10000
|
|
683
662
|
|
|
684
663
|
#### React (tsx)
|
|
685
664
|
|
|
@@ -1090,16 +1069,7 @@ Stacked BarChart
|
|
|
1090
1069
|
pv
|
|
1091
1070
|
uv
|
|
1092
1071
|
|
|
1093
|
-
Page
|
|
1094
|
-
|
|
1095
|
-
#### Summary
|
|
1096
|
-
|
|
1097
|
-
Stacked BarChart
|
|
1098
|
-
|
|
1099
|
-
pv
|
|
1100
|
-
uv
|
|
1101
|
-
|
|
1102
|
-
Page APage BPage CPage DPage EPage FPage G030006000900012000
|
|
1072
|
+
Page A Page B Page C Page D Page E Page F Page G 0 3000 6000 9000 12000
|
|
1103
1073
|
|
|
1104
1074
|
#### React (tsx)
|
|
1105
1075
|
|
|
@@ -1521,18 +1491,7 @@ Diesel
|
|
|
1521
1491
|
Maut
|
|
1522
1492
|
Zuschläge
|
|
1523
1493
|
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
#### Summary
|
|
1527
|
-
|
|
1528
|
-
Vertical BarChart
|
|
1529
|
-
|
|
1530
|
-
Basistarif
|
|
1531
|
-
Diesel
|
|
1532
|
-
Maut
|
|
1533
|
-
Zuschläge
|
|
1534
|
-
|
|
1535
|
-
015304560BasistarifDieselMautZuschläge
|
|
1494
|
+
0 15 30 45 60 Basistarif Diesel Maut Zuschläge
|
|
1536
1495
|
|
|
1537
1496
|
#### React (tsx)
|
|
1538
1497
|
|
|
@@ -1895,15 +1854,7 @@ BarChart with custom Tooltips
|
|
|
1895
1854
|
pv
|
|
1896
1855
|
uv
|
|
1897
1856
|
|
|
1898
|
-
Truck
|
|
1899
|
-
|
|
1900
|
-
#### Summary
|
|
1901
|
-
|
|
1902
|
-
BarChart with custom Tooltips
|
|
1903
|
-
pv
|
|
1904
|
-
uv
|
|
1905
|
-
|
|
1906
|
-
Truck ATruck BTruck CTruck DTruck ETruck FTruck G030006000900012000
|
|
1857
|
+
Truck A Truck B Truck C Truck D Truck E Truck F Truck G 0 3000 6000 9000 12000
|
|
1907
1858
|
|
|
1908
1859
|
#### React (tsx)
|
|
1909
1860
|
|
|
@@ -2354,13 +2305,7 @@ const data = [
|
|
|
2354
2305
|
|
|
2355
2306
|
Multiple axis BarChart
|
|
2356
2307
|
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
#### Summary
|
|
2360
|
-
|
|
2361
|
-
Multiple axis BarChart
|
|
2362
|
-
|
|
2363
|
-
JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €CostsQ1Q1Q1Q2Q2Q2
|
|
2308
|
+
January February March April May June Timerange 0 € 15 € 30 € 45 € 60 € Costs Q1 Q1 Q1 Q2 Q2 Q2
|
|
2364
2309
|
|
|
2365
2310
|
#### React (tsx)
|
|
2366
2311
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Progress
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/barList
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:31.259Z
|
|
7
7
|
|
|
8
8
|
## BarList
|
|
9
9
|
|
|
@@ -53,52 +53,6 @@ Fuel consumption index
|
|
|
53
53
|
|
|
54
54
|
15%
|
|
55
55
|
|
|
56
|
-
#### Summary
|
|
57
|
-
|
|
58
|
-
BarList
|
|
59
|
-
|
|
60
|
-
On-time delivery
|
|
61
|
-
|
|
62
|
-
Warehouse efficiency
|
|
63
|
-
|
|
64
|
-
Truck utilization
|
|
65
|
-
|
|
66
|
-
Freight cost/km
|
|
67
|
-
|
|
68
|
-
Fuel consumption index
|
|
69
|
-
|
|
70
|
-
92%
|
|
71
|
-
|
|
72
|
-
84%
|
|
73
|
-
|
|
74
|
-
78%
|
|
75
|
-
|
|
76
|
-
65%
|
|
77
|
-
|
|
78
|
-
15%
|
|
79
|
-
|
|
80
|
-
BarList reversed
|
|
81
|
-
|
|
82
|
-
On-time delivery
|
|
83
|
-
|
|
84
|
-
Warehouse efficiency
|
|
85
|
-
|
|
86
|
-
Truck utilization
|
|
87
|
-
|
|
88
|
-
Freight cost/km
|
|
89
|
-
|
|
90
|
-
Fuel consumption index
|
|
91
|
-
|
|
92
|
-
92%
|
|
93
|
-
|
|
94
|
-
84%
|
|
95
|
-
|
|
96
|
-
78%
|
|
97
|
-
|
|
98
|
-
65%
|
|
99
|
-
|
|
100
|
-
15%
|
|
101
|
-
|
|
102
56
|
#### React (tsx)
|
|
103
57
|
|
|
104
58
|
```tsx
|
|
@@ -180,21 +134,21 @@ const transportData = [
|
|
|
180
134
|
<div class="display-flex justify-content-between gap-15">
|
|
181
135
|
<div class="width-100pct space-y-5">
|
|
182
136
|
<div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
|
|
183
|
-
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.
|
|
137
|
+
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.0444%;">
|
|
184
138
|
</div>
|
|
185
139
|
<div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
|
|
186
140
|
<a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
|
|
187
141
|
</div>
|
|
188
142
|
</div>
|
|
189
143
|
<div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
|
|
190
|
-
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width:
|
|
144
|
+
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 28.9962%;">
|
|
191
145
|
</div>
|
|
192
146
|
<div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
|
|
193
147
|
<div class="text-color-darker">Warehouse efficiency</div>
|
|
194
148
|
</div>
|
|
195
149
|
</div>
|
|
196
150
|
<div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
|
|
197
|
-
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.
|
|
151
|
+
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.6839%;">
|
|
198
152
|
</div>
|
|
199
153
|
<div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
|
|
200
154
|
<a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
|
|
@@ -239,21 +193,21 @@ const transportData = [
|
|
|
239
193
|
<div class="display-flex justify-content-between gap-15 flex-row-reverse gap-10">
|
|
240
194
|
<div class="width-100pct space-y-5">
|
|
241
195
|
<div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
|
|
242
|
-
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.
|
|
196
|
+
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.0444%;">
|
|
243
197
|
</div>
|
|
244
198
|
<div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
|
|
245
199
|
<a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
|
|
246
200
|
</div>
|
|
247
201
|
</div>
|
|
248
202
|
<div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
|
|
249
|
-
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width:
|
|
203
|
+
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 28.9962%;">
|
|
250
204
|
</div>
|
|
251
205
|
<div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
|
|
252
206
|
<div class="text-color-darker">Warehouse efficiency</div>
|
|
253
207
|
</div>
|
|
254
208
|
</div>
|
|
255
209
|
<div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
|
|
256
|
-
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.
|
|
210
|
+
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.6839%;">
|
|
257
211
|
</div>
|
|
258
212
|
<div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
|
|
259
213
|
<a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
|
|
@@ -335,28 +289,6 @@ Shipped packages
|
|
|
335
289
|
|
|
336
290
|
8500
|
|
337
291
|
|
|
338
|
-
#### Summary
|
|
339
|
-
|
|
340
|
-
Damaged packages
|
|
341
|
-
|
|
342
|
-
Returned packages
|
|
343
|
-
|
|
344
|
-
In transit
|
|
345
|
-
|
|
346
|
-
Stored in warehouse
|
|
347
|
-
|
|
348
|
-
Shipped packages
|
|
349
|
-
|
|
350
|
-
95
|
|
351
|
-
|
|
352
|
-
320
|
|
353
|
-
|
|
354
|
-
1200
|
|
355
|
-
|
|
356
|
-
4200
|
|
357
|
-
|
|
358
|
-
8500
|
|
359
|
-
|
|
360
292
|
#### React (tsx)
|
|
361
293
|
|
|
362
294
|
```tsx
|
|
@@ -443,14 +375,14 @@ const transportData = [
|
|
|
443
375
|
</div>
|
|
444
376
|
</div>
|
|
445
377
|
<div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
|
|
446
|
-
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 48.
|
|
378
|
+
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 48.7735%;">
|
|
447
379
|
</div>
|
|
448
380
|
<div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
|
|
449
381
|
<div class="text-color-darker">Stored in warehouse</div>
|
|
450
382
|
</div>
|
|
451
383
|
</div>
|
|
452
384
|
<div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
|
|
453
|
-
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width:
|
|
385
|
+
<div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 93.1069%;">
|
|
454
386
|
</div>
|
|
455
387
|
<div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
|
|
456
388
|
<div class="text-color-darker">Shipped packages</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/basicMap
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:15.195Z
|
|
7
7
|
|
|
8
8
|
The following map shows labels for locale de
|
|
9
9
|
|
|
@@ -11,29 +11,7 @@ The following map shows labels for locale de
|
|
|
11
11
|
|
|
12
12
|
### Example: Example 1
|
|
13
13
|
|
|
14
|
-
Terms of use© 1987–2026 HERE
|
|
15
14
|
|
|
16
|
-
10 km
|
|
17
|
-
|
|
18
|
-
Choose view
|
|
19
|
-
Map view
|
|
20
|
-
Satellite
|
|
21
|
-
|
|
22
|
-
Traffic conditions
|
|
23
|
-
Show traffic incidents
|
|
24
|
-
|
|
25
|
-
#### Summary
|
|
26
|
-
|
|
27
|
-
Terms of use© 1987–2026 HERE
|
|
28
|
-
|
|
29
|
-
10 km
|
|
30
|
-
|
|
31
|
-
Choose view
|
|
32
|
-
Map view
|
|
33
|
-
Satellite
|
|
34
|
-
|
|
35
|
-
Traffic conditions
|
|
36
|
-
Show traffic incidents
|
|
37
15
|
|
|
38
16
|
#### React (tsx)
|
|
39
17
|
|
|
@@ -64,29 +42,7 @@ export default MapExample;
|
|
|
64
42
|
|
|
65
43
|
### Example: Example 2
|
|
66
44
|
|
|
67
|
-
Terms of use© 1987–2026 HERE
|
|
68
|
-
|
|
69
|
-
10 km
|
|
70
|
-
|
|
71
|
-
Choose view
|
|
72
|
-
Map view
|
|
73
|
-
Satellite
|
|
74
|
-
|
|
75
|
-
Traffic conditions
|
|
76
|
-
Show traffic incidents
|
|
77
|
-
|
|
78
|
-
#### Summary
|
|
79
45
|
|
|
80
|
-
Terms of use© 1987–2026 HERE
|
|
81
|
-
|
|
82
|
-
10 km
|
|
83
|
-
|
|
84
|
-
Choose view
|
|
85
|
-
Map view
|
|
86
|
-
Satellite
|
|
87
|
-
|
|
88
|
-
Traffic conditions
|
|
89
|
-
Show traffic incidents
|
|
90
46
|
|
|
91
47
|
#### React (tsx)
|
|
92
48
|
|
|
@@ -117,29 +73,7 @@ export default MapWithScaleBarExample;
|
|
|
117
73
|
|
|
118
74
|
### Example: Example 3
|
|
119
75
|
|
|
120
|
-
Terms of use© 1987–2026 HERE
|
|
121
|
-
|
|
122
|
-
10 km
|
|
123
|
-
|
|
124
|
-
Ansicht auswählen
|
|
125
|
-
Kartenansicht
|
|
126
|
-
Satellit
|
|
127
|
-
|
|
128
|
-
Verkehrslage
|
|
129
|
-
Verkehrsstörungen anzeigen
|
|
130
|
-
|
|
131
|
-
#### Summary
|
|
132
|
-
|
|
133
|
-
Terms of use© 1987–2026 HERE
|
|
134
|
-
|
|
135
|
-
10 km
|
|
136
|
-
|
|
137
|
-
Ansicht auswählen
|
|
138
|
-
Kartenansicht
|
|
139
|
-
Satellit
|
|
140
76
|
|
|
141
|
-
Verkehrslage
|
|
142
|
-
Verkehrsstörungen anzeigen
|
|
143
77
|
|
|
144
78
|
#### React (tsx)
|
|
145
79
|
|