@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

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.
Files changed (388) hide show
  1. package/README.md +75 -40
  2. package/dist/doc-metadata.json +1872 -0
  3. package/dist/docs/components/accentBar.md +582 -0
  4. package/dist/docs/components/activity.md +330 -0
  5. package/dist/docs/components/animatedNumber.md +88 -0
  6. package/dist/docs/components/animatedTextReveal.md +381 -0
  7. package/dist/docs/components/animations.md +459 -0
  8. package/dist/docs/components/appHeader.md +737 -0
  9. package/dist/docs/components/appLayout.md +2016 -0
  10. package/dist/docs/components/appNavigationBar.md +274 -0
  11. package/dist/docs/components/areaCharts.md +828 -0
  12. package/dist/docs/components/aspectRatioPlaceholder.md +106 -0
  13. package/dist/docs/components/assetTree.md +3223 -0
  14. package/dist/docs/components/autosuggests.md +1177 -0
  15. package/dist/docs/components/avatar.md +206 -0
  16. package/dist/docs/components/banner.md +668 -0
  17. package/dist/docs/components/barCharts.md +2785 -0
  18. package/dist/docs/components/barList.md +517 -0
  19. package/dist/docs/components/basicMap.md +167 -0
  20. package/dist/docs/components/bottomSheet.md +721 -0
  21. package/dist/docs/components/button.md +775 -0
  22. package/dist/docs/components/buttonToolbar.md +134 -0
  23. package/dist/docs/components/calendarStripe.md +525 -0
  24. package/dist/docs/components/card.md +86 -0
  25. package/dist/docs/components/carousel.md +128 -0
  26. package/dist/docs/components/chartColors.md +716 -0
  27. package/dist/docs/components/chartsGettingStarted.md +28 -0
  28. package/dist/docs/components/chat.md +932 -0
  29. package/dist/docs/components/checkbox.md +996 -0
  30. package/dist/docs/components/clearableInput.md +806 -0
  31. package/dist/docs/components/collapse.md +189 -0
  32. package/dist/docs/components/composedCharts.md +424 -0
  33. package/dist/docs/components/contentLoader.md +674 -0
  34. package/dist/docs/components/dataTabs.md +1251 -0
  35. package/dist/docs/components/datepickers.md +2543 -0
  36. package/dist/docs/components/dialogs.md +2244 -0
  37. package/dist/docs/components/divider.md +219 -0
  38. package/dist/docs/components/dropdowns.md +17550 -0
  39. package/dist/docs/components/editableContent.md +1127 -0
  40. package/dist/docs/components/expander.md +970 -0
  41. package/dist/docs/components/fade.md +836 -0
  42. package/dist/docs/components/fadeExpander.md +180 -0
  43. package/dist/docs/components/fadeUp.md +396 -0
  44. package/dist/docs/components/feedback.md +758 -0
  45. package/dist/docs/components/filePickers.md +370 -0
  46. package/dist/docs/components/formLabel.md +251 -0
  47. package/dist/docs/components/fullscreenMap.md +10 -0
  48. package/dist/docs/components/groupedItemList.md +1001 -0
  49. package/dist/docs/components/iconList.md +306 -0
  50. package/dist/docs/components/imagePreloader.md +167 -0
  51. package/dist/docs/components/labeledElement.md +115 -0
  52. package/dist/docs/components/licensePlate.md +412 -0
  53. package/dist/docs/components/lineCharts.md +2014 -0
  54. package/dist/docs/components/listMenu.md +392 -0
  55. package/dist/docs/components/loadMore.md +219 -0
  56. package/dist/docs/components/mainNavigation.md +129 -0
  57. package/dist/docs/components/mapCircle.md +93 -0
  58. package/dist/docs/components/mapCluster.md +337 -0
  59. package/dist/docs/components/mapContext.md +284 -0
  60. package/dist/docs/components/mapDraggableMarker.md +150 -0
  61. package/dist/docs/components/mapGettingStarted.md +39 -0
  62. package/dist/docs/components/mapInfoBubble.md +135 -0
  63. package/dist/docs/components/mapLayerGroup.md +94 -0
  64. package/dist/docs/components/mapMarker.md +1814 -0
  65. package/dist/docs/components/mapPolygon.md +959 -0
  66. package/dist/docs/components/mapRoute.md +3816 -0
  67. package/dist/docs/components/mapRouteGenerator.md +6 -0
  68. package/dist/docs/components/mapSettings.md +1040 -0
  69. package/dist/docs/components/mapUtils.md +132 -0
  70. package/dist/docs/components/multiselects.md +1921 -0
  71. package/dist/docs/components/noData.md +210 -0
  72. package/dist/docs/components/notifications.md +314 -0
  73. package/dist/docs/components/numbercontrol.md +706 -0
  74. package/dist/docs/components/onboarding.md +297 -0
  75. package/dist/docs/components/page.md +241 -0
  76. package/dist/docs/components/pager.md +133 -0
  77. package/dist/docs/components/pieCharts.md +1284 -0
  78. package/dist/docs/components/popover.md +222 -0
  79. package/dist/docs/components/position.md +50 -0
  80. package/dist/docs/components/radialBarCharts.md +3663 -0
  81. package/dist/docs/components/radiobutton.md +1271 -0
  82. package/dist/docs/components/releaseNotes.md +135 -0
  83. package/dist/docs/components/resizer.md +162 -0
  84. package/dist/docs/components/responsiveColumnStripe.md +435 -0
  85. package/dist/docs/components/responsiveVideo.md +71 -0
  86. package/dist/docs/components/rioglyph.md +331 -0
  87. package/dist/docs/components/rules.md +965 -0
  88. package/dist/docs/components/saveableInput.md +1721 -0
  89. package/dist/docs/components/selects.md +1993 -0
  90. package/dist/docs/components/sidebar.md +332 -0
  91. package/dist/docs/components/sliders.md +376 -0
  92. package/dist/docs/components/smoothScrollbars.md +1180 -0
  93. package/dist/docs/components/spinners.md +506 -0
  94. package/dist/docs/components/states.md +1176 -0
  95. package/dist/docs/components/statsWidgets.md +636 -0
  96. package/dist/docs/components/statusBar.md +644 -0
  97. package/dist/docs/components/stepButton.md +61 -0
  98. package/dist/docs/components/steppedProgressBars.md +1064 -0
  99. package/dist/docs/components/subNavigation.md +470 -0
  100. package/dist/docs/components/supportMarker.md +115 -0
  101. package/dist/docs/components/svgImage.md +248 -0
  102. package/dist/docs/components/switch.md +554 -0
  103. package/dist/docs/components/tables.md +8 -0
  104. package/dist/docs/components/tagManager.md +476 -0
  105. package/dist/docs/components/tags.md +785 -0
  106. package/dist/docs/components/teaser.md +925 -0
  107. package/dist/docs/components/timeline.md +514 -0
  108. package/dist/docs/components/timepicker.md +262 -0
  109. package/dist/docs/components/toggleButton.md +178 -0
  110. package/dist/docs/components/tooltip.md +454 -0
  111. package/dist/docs/components/virtualList.md +483 -0
  112. package/dist/docs/foundations.md +20901 -0
  113. package/dist/docs/start/changelog.md +439 -0
  114. package/dist/docs/start/goodtoknow.md +14 -0
  115. package/dist/docs/start/guidelines/color-combinations.md +678 -0
  116. package/dist/docs/start/guidelines/custom-css.md +42 -0
  117. package/dist/docs/start/guidelines/custom-rioglyph.md +35 -0
  118. package/dist/docs/start/guidelines/formatting.md +587 -0
  119. package/dist/docs/start/guidelines/iframe.md +323 -0
  120. package/dist/docs/start/guidelines/obfuscate-data.md +30 -0
  121. package/dist/docs/start/guidelines/print-css.md +36 -0
  122. package/dist/docs/start/guidelines/spinner.md +710 -0
  123. package/dist/docs/start/guidelines/supported-browsers.md +10 -0
  124. package/dist/docs/start/guidelines/writing.md +635 -0
  125. package/dist/docs/start/howto.md +187 -0
  126. package/dist/docs/start/intro.md +43 -0
  127. package/dist/docs/start/responsiveness.md +98 -0
  128. package/dist/docs/templates/common-table.md +1111 -0
  129. package/dist/docs/templates/detail-views.md +942 -0
  130. package/dist/docs/templates/expandable-details.md +228 -0
  131. package/dist/docs/templates/feature-cards.md +549 -0
  132. package/dist/docs/templates/form-summary.md +199 -0
  133. package/dist/docs/templates/form-toggle.md +367 -0
  134. package/dist/docs/templates/list-blocks.md +1021 -0
  135. package/dist/docs/templates/loading-progress.md +109 -0
  136. package/dist/docs/templates/options-panel.md +152 -0
  137. package/dist/docs/templates/panel-variants.md +164 -0
  138. package/dist/docs/templates/progress-cards.md +607 -0
  139. package/dist/docs/templates/progress-success.md +142 -0
  140. package/dist/docs/templates/settings-form.md +434 -0
  141. package/dist/docs/templates/stats-blocks.md +1381 -0
  142. package/dist/docs/templates/table-panel.md +184 -0
  143. package/dist/docs/templates/table-row-animation.md +317 -0
  144. package/dist/docs/templates/usage-cards.md +227 -0
  145. package/dist/docs/utilities/deviceUtils.md +123 -0
  146. package/dist/docs/utilities/featureToggles.md +90 -0
  147. package/dist/docs/utilities/fuelTypeUtils.md +186 -0
  148. package/dist/docs/utilities/routeUtils.md +138 -0
  149. package/dist/docs/utilities/useAfterMount.md +66 -0
  150. package/dist/docs/utilities/useAutoAnimate.md +193 -0
  151. package/dist/docs/utilities/useAverage.md +95 -0
  152. package/dist/docs/utilities/useClickOutside.md +61 -0
  153. package/dist/docs/utilities/useClipboard.md +93 -0
  154. package/dist/docs/utilities/useCount.md +178 -0
  155. package/dist/docs/utilities/useDarkMode.md +49 -0
  156. package/dist/docs/utilities/useDebugInfo.md +126 -0
  157. package/dist/docs/utilities/useEffectOnce.md +58 -0
  158. package/dist/docs/utilities/useElapsedTime.md +58 -0
  159. package/dist/docs/utilities/useElementSize.md +71 -0
  160. package/dist/docs/utilities/useEsc.md +58 -0
  161. package/dist/docs/utilities/useEvent.md +64 -0
  162. package/dist/docs/utilities/useFocusTrap.md +85 -0
  163. package/dist/docs/utilities/useFullscreen.md +198 -0
  164. package/dist/docs/utilities/useHover.md +55 -0
  165. package/dist/docs/utilities/useIncomingPostMessages.md +237 -0
  166. package/dist/docs/utilities/useInterval.md +85 -0
  167. package/dist/docs/utilities/useIsFocusWithin.md +114 -0
  168. package/dist/docs/utilities/useKey.md +151 -0
  169. package/dist/docs/utilities/useLocalStorage.md +91 -0
  170. package/dist/docs/utilities/useLocationSuggestions.md +114 -0
  171. package/dist/docs/utilities/useMax.md +62 -0
  172. package/dist/docs/utilities/useMin.md +78 -0
  173. package/dist/docs/utilities/useMutationObserver.md +113 -0
  174. package/dist/docs/utilities/useOnScreen.md +138 -0
  175. package/dist/docs/utilities/useOnlineStatus.md +49 -0
  176. package/dist/docs/utilities/usePostMessage.md +117 -0
  177. package/dist/docs/utilities/usePostMessageSender.md +257 -0
  178. package/dist/docs/utilities/usePrevious.md +101 -0
  179. package/dist/docs/utilities/useResizeObserver.md +151 -0
  180. package/dist/docs/utilities/useScrollPosition.md +252 -0
  181. package/dist/docs/utilities/useSearch.md +228 -0
  182. package/dist/docs/utilities/useSorting.md +389 -0
  183. package/dist/docs/utilities/useStateWithValidation.md +83 -0
  184. package/dist/docs/utilities/useSum.md +155 -0
  185. package/dist/docs/utilities/useTableExport.md +404 -0
  186. package/dist/docs/utilities/useTableSelection.md +1120 -0
  187. package/dist/docs/utilities/useTimeout.md +55 -0
  188. package/dist/docs/utilities/useToggle.md +115 -0
  189. package/dist/docs/utilities/useWindowResize.md +70 -0
  190. package/dist/index.mjs +271 -0
  191. package/dist/search-synonyms.json +134 -0
  192. package/dist/version.json +4 -0
  193. package/package.json +23 -19
  194. package/bin/uikit-mcp.mjs +0 -23
  195. package/data/pages/Components/components/accentbar.json +0 -207
  196. package/data/pages/Components/components/activity.json +0 -87
  197. package/data/pages/Components/components/animatednumber.json +0 -99
  198. package/data/pages/Components/components/animations.json +0 -87
  199. package/data/pages/Components/components/appheader.json +0 -291
  200. package/data/pages/Components/components/applayout.json +0 -1198
  201. package/data/pages/Components/components/appnavigationbar.json +0 -327
  202. package/data/pages/Components/components/areacharts.json +0 -563
  203. package/data/pages/Components/components/aspectratioplaceholder.json +0 -75
  204. package/data/pages/Components/components/assettree.json +0 -3080
  205. package/data/pages/Components/components/autosuggests.json +0 -710
  206. package/data/pages/Components/components/avatar.json +0 -157
  207. package/data/pages/Components/components/banner.json +0 -599
  208. package/data/pages/Components/components/barcharts.json +0 -1507
  209. package/data/pages/Components/components/barlist.json +0 -223
  210. package/data/pages/Components/components/basicmap.json +0 -68
  211. package/data/pages/Components/components/bottomsheet.json +0 -601
  212. package/data/pages/Components/components/button.json +0 -583
  213. package/data/pages/Components/components/buttontoolbar.json +0 -63
  214. package/data/pages/Components/components/calendarstripe.json +0 -235
  215. package/data/pages/Components/components/card.json +0 -69
  216. package/data/pages/Components/components/carousel.json +0 -39
  217. package/data/pages/Components/components/chartcolors.json +0 -34
  218. package/data/pages/Components/components/chartsgettingstarted.json +0 -32
  219. package/data/pages/Components/components/chat.json +0 -39
  220. package/data/pages/Components/components/checkbox.json +0 -847
  221. package/data/pages/Components/components/clearableinput.json +0 -789
  222. package/data/pages/Components/components/collapse.json +0 -175
  223. package/data/pages/Components/components/composedcharts.json +0 -159
  224. package/data/pages/Components/components/contentloader.json +0 -233
  225. package/data/pages/Components/components/datatabs.json +0 -680
  226. package/data/pages/Components/components/datepickers.json +0 -287
  227. package/data/pages/Components/components/dialogs.json +0 -1492
  228. package/data/pages/Components/components/divider.json +0 -93
  229. package/data/pages/Components/components/dropdowns.json +0 -936
  230. package/data/pages/Components/components/editablecontent.json +0 -1117
  231. package/data/pages/Components/components/expander.json +0 -377
  232. package/data/pages/Components/components/fade.json +0 -403
  233. package/data/pages/Components/components/fadeexpander.json +0 -75
  234. package/data/pages/Components/components/fadeup.json +0 -127
  235. package/data/pages/Components/components/feedback.json +0 -269
  236. package/data/pages/Components/components/filepickers.json +0 -269
  237. package/data/pages/Components/components/formlabel.json +0 -115
  238. package/data/pages/Components/components/fullscreenmap.json +0 -22
  239. package/data/pages/Components/components/groupeditemlist.json +0 -323
  240. package/data/pages/Components/components/iconlist.json +0 -45
  241. package/data/pages/Components/components/imagepreloader.json +0 -81
  242. package/data/pages/Components/components/labeledelement.json +0 -75
  243. package/data/pages/Components/components/licenseplate.json +0 -69
  244. package/data/pages/Components/components/linecharts.json +0 -987
  245. package/data/pages/Components/components/listmenu.json +0 -313
  246. package/data/pages/Components/components/loadmore.json +0 -175
  247. package/data/pages/Components/components/mainnavigation.json +0 -39
  248. package/data/pages/Components/components/mapcircle.json +0 -34
  249. package/data/pages/Components/components/mapcluster.json +0 -51
  250. package/data/pages/Components/components/mapcontext.json +0 -105
  251. package/data/pages/Components/components/mapdraggablemarker.json +0 -34
  252. package/data/pages/Components/components/mapgettingstarted.json +0 -27
  253. package/data/pages/Components/components/mapgroup.json +0 -1198
  254. package/data/pages/Components/components/mapinfobubble.json +0 -34
  255. package/data/pages/Components/components/maplayergroup.json +0 -34
  256. package/data/pages/Components/components/mapmarker.json +0 -700
  257. package/data/pages/Components/components/mappolygon.json +0 -45
  258. package/data/pages/Components/components/maproute.json +0 -623
  259. package/data/pages/Components/components/maproutegenerator.json +0 -16
  260. package/data/pages/Components/components/mapsettings.json +0 -51
  261. package/data/pages/Components/components/maputils.json +0 -34
  262. package/data/pages/Components/components/multiselects.json +0 -1451
  263. package/data/pages/Components/components/nodata.json +0 -139
  264. package/data/pages/Components/components/notifications.json +0 -65
  265. package/data/pages/Components/components/numbercontrol.json +0 -301
  266. package/data/pages/Components/components/onboarding.json +0 -302
  267. package/data/pages/Components/components/page.json +0 -197
  268. package/data/pages/Components/components/pager.json +0 -93
  269. package/data/pages/Components/components/piecharts.json +0 -731
  270. package/data/pages/Components/components/popover.json +0 -251
  271. package/data/pages/Components/components/position.json +0 -69
  272. package/data/pages/Components/components/radialbarcharts.json +0 -1304
  273. package/data/pages/Components/components/radiobutton.json +0 -1105
  274. package/data/pages/Components/components/releasenotes.json +0 -44
  275. package/data/pages/Components/components/resizer.json +0 -93
  276. package/data/pages/Components/components/responsivecolumnstripe.json +0 -123
  277. package/data/pages/Components/components/responsivevideo.json +0 -75
  278. package/data/pages/Components/components/rioglyph.json +0 -93
  279. package/data/pages/Components/components/rules.json +0 -410
  280. package/data/pages/Components/components/saveableinput.json +0 -703
  281. package/data/pages/Components/components/selects.json +0 -701
  282. package/data/pages/Components/components/sidebar.json +0 -243
  283. package/data/pages/Components/components/sliders.json +0 -235
  284. package/data/pages/Components/components/smoothscrollbars.json +0 -335
  285. package/data/pages/Components/components/spinners.json +0 -343
  286. package/data/pages/Components/components/states.json +0 -1705
  287. package/data/pages/Components/components/statswidgets.json +0 -314
  288. package/data/pages/Components/components/statusbar.json +0 -177
  289. package/data/pages/Components/components/stepbutton.json +0 -57
  290. package/data/pages/Components/components/steppedprogressbars.json +0 -417
  291. package/data/pages/Components/components/subnavigation.json +0 -107
  292. package/data/pages/Components/components/supportmarker.json +0 -45
  293. package/data/pages/Components/components/svgimage.json +0 -81
  294. package/data/pages/Components/components/switch.json +0 -111
  295. package/data/pages/Components/components/tables.json +0 -144
  296. package/data/pages/Components/components/tagmanager.json +0 -86
  297. package/data/pages/Components/components/tags.json +0 -146
  298. package/data/pages/Components/components/teaser.json +0 -188
  299. package/data/pages/Components/components/timeline.json +0 -45
  300. package/data/pages/Components/components/timepicker.json +0 -163
  301. package/data/pages/Components/components/togglebutton.json +0 -247
  302. package/data/pages/Components/components/tooltip.json +0 -270
  303. package/data/pages/Components/components/virtuallist.json +0 -175
  304. package/data/pages/Foundations/foundations.json +0 -2475
  305. package/data/pages/Getting-started/start/changelog.json +0 -22
  306. package/data/pages/Getting-started/start/goodtoknow.json +0 -32
  307. package/data/pages/Getting-started/start/guidelines/color-combinations.json +0 -58
  308. package/data/pages/Getting-started/start/guidelines/custom-css.json +0 -27
  309. package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json +0 -22
  310. package/data/pages/Getting-started/start/guidelines/formatting.json +0 -97
  311. package/data/pages/Getting-started/start/guidelines/iframe.json +0 -93
  312. package/data/pages/Getting-started/start/guidelines/obfuscate-data.json +0 -22
  313. package/data/pages/Getting-started/start/guidelines/print-css.json +0 -37
  314. package/data/pages/Getting-started/start/guidelines/spinner.json +0 -144
  315. package/data/pages/Getting-started/start/guidelines/supported-browsers.json +0 -22
  316. package/data/pages/Getting-started/start/guidelines/writing.json +0 -242
  317. package/data/pages/Getting-started/start/howto.json +0 -72
  318. package/data/pages/Getting-started/start/intro.json +0 -37
  319. package/data/pages/Getting-started/start/responsiveness.json +0 -52
  320. package/data/pages/Templates/templates/common-table.json +0 -39
  321. package/data/pages/Templates/templates/detail-views.json +0 -71
  322. package/data/pages/Templates/templates/expandable-details.json +0 -39
  323. package/data/pages/Templates/templates/feature-cards.json +0 -103
  324. package/data/pages/Templates/templates/form-summary.json +0 -39
  325. package/data/pages/Templates/templates/form-toggle.json +0 -39
  326. package/data/pages/Templates/templates/list-blocks.json +0 -119
  327. package/data/pages/Templates/templates/loading-progress.json +0 -39
  328. package/data/pages/Templates/templates/options-panel.json +0 -39
  329. package/data/pages/Templates/templates/panel-variants.json +0 -39
  330. package/data/pages/Templates/templates/progress-cards.json +0 -71
  331. package/data/pages/Templates/templates/progress-success.json +0 -39
  332. package/data/pages/Templates/templates/settings-form.json +0 -39
  333. package/data/pages/Templates/templates/stats-blocks.json +0 -135
  334. package/data/pages/Templates/templates/table-panel.json +0 -39
  335. package/data/pages/Templates/templates/table-row-animation.json +0 -39
  336. package/data/pages/Templates/templates/usage-cards.json +0 -39
  337. package/data/pages/Utilities/utilities/deviceutils.json +0 -39
  338. package/data/pages/Utilities/utilities/featuretoggles.json +0 -42
  339. package/data/pages/Utilities/utilities/fueltypeutils.json +0 -118
  340. package/data/pages/Utilities/utilities/routeutils.json +0 -34
  341. package/data/pages/Utilities/utilities/useaftermount.json +0 -63
  342. package/data/pages/Utilities/utilities/useaverage.json +0 -86
  343. package/data/pages/Utilities/utilities/useclickoutside.json +0 -69
  344. package/data/pages/Utilities/utilities/useclipboard.json +0 -57
  345. package/data/pages/Utilities/utilities/usecount.json +0 -92
  346. package/data/pages/Utilities/utilities/usedarkmode.json +0 -50
  347. package/data/pages/Utilities/utilities/usedebuginfo.json +0 -63
  348. package/data/pages/Utilities/utilities/useeffectonce.json +0 -57
  349. package/data/pages/Utilities/utilities/useelapsedtime.json +0 -57
  350. package/data/pages/Utilities/utilities/useelementsize.json +0 -63
  351. package/data/pages/Utilities/utilities/useesc.json +0 -57
  352. package/data/pages/Utilities/utilities/useevent.json +0 -75
  353. package/data/pages/Utilities/utilities/usefocustrap.json +0 -57
  354. package/data/pages/Utilities/utilities/usefullscreen.json +0 -197
  355. package/data/pages/Utilities/utilities/usehover.json +0 -57
  356. package/data/pages/Utilities/utilities/useinterval.json +0 -63
  357. package/data/pages/Utilities/utilities/useisfocuswithin.json +0 -75
  358. package/data/pages/Utilities/utilities/usekey.json +0 -75
  359. package/data/pages/Utilities/utilities/uselocalstorage.json +0 -69
  360. package/data/pages/Utilities/utilities/uselocationsuggestions.json +0 -110
  361. package/data/pages/Utilities/utilities/usemax.json +0 -86
  362. package/data/pages/Utilities/utilities/usemin.json +0 -86
  363. package/data/pages/Utilities/utilities/usemutationobserver.json +0 -69
  364. package/data/pages/Utilities/utilities/useonlinestatus.json +0 -39
  365. package/data/pages/Utilities/utilities/useonscreen.json +0 -63
  366. package/data/pages/Utilities/utilities/usepostmessage.json +0 -80
  367. package/data/pages/Utilities/utilities/useprevious.json +0 -63
  368. package/data/pages/Utilities/utilities/useresizeobserver.json +0 -65
  369. package/data/pages/Utilities/utilities/usescrollposition.json +0 -103
  370. package/data/pages/Utilities/utilities/usesearch.json +0 -197
  371. package/data/pages/Utilities/utilities/usesorting.json +0 -139
  372. package/data/pages/Utilities/utilities/usestatewithvalidation.json +0 -69
  373. package/data/pages/Utilities/utilities/usesum.json +0 -86
  374. package/data/pages/Utilities/utilities/usetableexport.json +0 -87
  375. package/data/pages/Utilities/utilities/usetableselection.json +0 -311
  376. package/data/pages/Utilities/utilities/usetimeout.json +0 -63
  377. package/data/pages/Utilities/utilities/usetoggle.json +0 -75
  378. package/data/pages/Utilities/utilities/usewindowresize.json +0 -63
  379. package/data/version.json +0 -4
  380. package/docs/content-schema.md +0 -147
  381. package/docs/navigation-inventory.json +0 -1310
  382. package/docs/search-synonyms.json +0 -43
  383. package/server/index.mjs +0 -268
  384. package/server/lib/load-docs.mjs +0 -48
  385. package/server/lib/normalise-doc.mjs +0 -220
  386. package/server/lib/render-markdown.mjs +0 -82
  387. package/server/lib/search-index.mjs +0 -49
  388. package/server/lib/types.js +0 -99
package/data/pages/Components/components/piecharts.json DELETED
@@ -1,731 +0,0 @@
1
- {
2
- "metadata": {
3
- "captured_at": "2025-11-21T12:08:22.429Z",
4
- "source": "https://uikit.developers.rio.cloud/#components/pieCharts",
5
- "category": "Components",
6
- "section": "Charts",
7
- "slug": "components/piecharts",
8
- "version": "v1.13.2",
9
- "hash_algorithm": "sha256",
10
- "hash": "7cbe607ecfeb667f094076eab184020338a5097076bddbdd0651dac75c3e0a76"
11
- },
12
- "title": "PieChart",
13
- "lead": null,
14
- "content": [
15
- {
16
- "heading": "PieChart",
17
- "body": "> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.",
18
- "examples": [
19
- {
20
- "caption": "Example 1",
21
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Simple PieChart</label><div class=\"panel panel-default panel-body margin-bottom-0 width-100% height-500\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 468px; max-width: 876px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"876\" height=\"468\" viewBox=\"0 0 876 468\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts1-clip\"><rect x=\"5\" y=\"5\" height=\"438\" width=\"866\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"></g><g class=\"recharts-layer recharts-pie-labels\"><g class=\"recharts-layer\"><path stroke=\"#ef7186 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Basistarif\" class=\"recharts-curve recharts-pie-label-line\" d=\"M410.554,50.963L407.421,31.21\"></path><text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Basistarif\" alignment-baseline=\"middle\" x=\"407.4212788652015\" y=\"31.210005929352718\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#ef7186 \"><tspan x=\"407.4212788652015\" dy=\"0em\">46.8 €</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#e878b6 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Diesel\" class=\"recharts-curve recharts-pie-label-line\" d=\"M362.767,382.225L354.179,400.287\"></path><text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Diesel\" alignment-baseline=\"middle\" x=\"354.17898256935666\" y=\"400.2869168057907\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#e878b6 \"><tspan x=\"354.17898256935666\" dy=\"0em\">22 €</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#dc82e9 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Maut\" class=\"recharts-curve recharts-pie-label-line\" d=\"M566.857,342.705L581.567,356.256\"></path><text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Maut\" alignment-baseline=\"middle\" x=\"581.5670508528539\" y=\"356.2555931120271\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#dc82e9 \"><tspan x=\"581.5670508528539\" dy=\"0em\">12.4 €</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#c08eeb \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Zuschläge\" class=\"recharts-curve recharts-pie-label-line\" d=\"M611.405,249.015L631.2,251.871\"></path><text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Zuschläge\" alignment-baseline=\"middle\" x=\"631.2000687926479\" y=\"251.87065515046413\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#c08eeb \"><tspan x=\"631.2000687926479\" dy=\"0em\">3.88 €</tspan></text></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 866px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#ef7186 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(239, 113, 134);\"><span class=\"text-color-darker\">Basistarif</span></span></li><li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#e878b6 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(232, 120, 182);\"><span class=\"text-color-darker\">Diesel</span></span></li><li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#dc82e9 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(220, 130, 233);\"><span class=\"text-color-darker\">Maut</span></span></li><li class=\"recharts-legend-item legend-item-3\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#c08eeb \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(192, 142, 235);\"><span class=\"text-color-darker\">Zuschläge</span></span></li></ul></div><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\"><div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\"><p class=\"recharts-tooltip-label\" style=\"margin: 0px;\"></p></div></div></div></div></div></div>",
22
- "tabs": [
23
- {
24
- "label": "React",
25
- "language": "tsx",
26
- "code": "import PieChart from '@rio-cloud/rio-uikit/PieChart';\n\ntype CustomData = {\n name: string;\n costs: number;\n};\n\nexport default () => {\n return (\n <>\n <label>Simple PieChart</label>\n <div className='panel panel-default panel-body margin-bottom-0 width-100% height-500'>\n <PieChart data={data} dataKey={(entry: CustomData) => entry.costs} dataUnit='€' filled />\n </div>\n </>\n );\n};\n\nconst data: CustomData[] = [\n {\n name: 'Basistarif',\n costs: 46.8,\n },\n {\n name: 'Diesel',\n costs: 22.0,\n },\n {\n name: 'Maut',\n costs: 12.4,\n },\n {\n name: 'Zuschläge',\n costs: 3.88,\n },\n];"
27
- },
28
- {
29
- "label": "HTML",
30
- "language": "html",
31
- "code": "<label>Simple PieChart</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 width-100% height-500\">\n <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 468px; max-width: 876px;\">\n <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"876\" height=\"468\" viewBox=\"0 0 876 468\" style=\"width: 100%; height: 100%;\">\n <title>\n </title>\n <desc>\n </desc>\n <defs>\n <clipPath id=\"recharts1-clip\">\n <rect x=\"5\" y=\"5\" height=\"438\" width=\"866\">\n </rect>\n </clipPath>\n </defs>\n <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n <g class=\"recharts-layer\">\n </g>\n <g class=\"recharts-layer recharts-pie-labels\">\n <g class=\"recharts-layer\">\n <path stroke=\"#ef7186 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Basistarif\" class=\"recharts-curve recharts-pie-label-line\" d=\"M410.554,50.963L407.421,31.21\">\n </path>\n <text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Basistarif\" alignment-baseline=\"middle\" x=\"407.4212788652015\" y=\"31.210005929352718\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#ef7186 \">\n <tspan x=\"407.4212788652015\" dy=\"0em\">46.8 €</tspan>\n </text>\n </g>\n <g class=\"recharts-layer\">\n <path stroke=\"#e878b6 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Diesel\" class=\"recharts-curve recharts-pie-label-line\" d=\"M362.767,382.225L354.179,400.287\">\n </path>\n <text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Diesel\" alignment-baseline=\"middle\" x=\"354.17898256935666\" y=\"400.2869168057907\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#e878b6 \">\n <tspan x=\"354.17898256935666\" dy=\"0em\">22 €</tspan>\n </text>\n </g>\n <g class=\"recharts-layer\">\n <path stroke=\"#dc82e9 \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Maut\" class=\"recharts-curve recharts-pie-label-line\" d=\"M566.857,342.705L581.567,356.256\">\n </path>\n <text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Maut\" alignment-baseline=\"middle\" x=\"581.5670508528539\" y=\"356.2555931120271\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#dc82e9 \">\n <tspan x=\"581.5670508528539\" dy=\"0em\">12.4 €</tspan>\n </text>\n </g>\n <g class=\"recharts-layer\">\n <path stroke=\"#c08eeb \" fill=\"none\" cx=\"438\" cy=\"224\" name=\"Zuschläge\" class=\"recharts-curve recharts-pie-label-line\" d=\"M611.405,249.015L631.2,251.871\">\n </path>\n <text stroke=\"none\" cx=\"438\" cy=\"224\" name=\"Zuschläge\" alignment-baseline=\"middle\" x=\"631.2000687926479\" y=\"251.87065515046413\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#c08eeb \">\n <tspan x=\"631.2000687926479\" dy=\"0em\">3.88 €</tspan>\n </text>\n </g>\n </g>\n </g>\n </svg>\n <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 866px; height: auto; left: 5px; bottom: 5px;\">\n <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\">\n <li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#ef7186 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(239, 113, 134);\">\n <span class=\"text-color-darker\">Basistarif</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#e878b6 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(232, 120, 182);\">\n <span class=\"text-color-darker\">Diesel</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#dc82e9 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(220, 130, 233);\">\n <span class=\"text-color-darker\">Maut</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-3\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#c08eeb \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(192, 142, 235);\">\n <span class=\"text-color-darker\">Zuschläge</span>\n </span>\n </li>\n </ul>\n </div>\n <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\">\n <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>"
32
- },
33
- {
34
- "label": "Props",
35
- "language": "json",
36
- "code": null,
37
- "props": [
38
- {
39
- "heading": "PieChart",
40
- "rows": [
41
- {
42
- "name": "width",
43
- "type": "Number",
44
- "default": "",
45
- "description": "The width of chart container."
46
- },
47
- {
48
- "name": "height",
49
- "type": "Number",
50
- "default": "",
51
- "description": "The height of chart container."
52
- },
53
- {
54
- "name": "innerRadius",
55
- "type": "String | Number",
56
- "default": "60",
57
- "description": "The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy."
58
- },
59
- {
60
- "name": "outerRadius",
61
- "type": "String | Number",
62
- "default": "80",
63
- "description": "The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy."
64
- },
65
- {
66
- "name": "data",
67
- "type": "Array",
68
- "default": "",
69
- "description": "The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }]"
70
- },
71
- {
72
- "name": "dataKey",
73
- "type": "string | number | ((obj: T) => any)",
74
- "default": "value",
75
- "description": "The key of data used for the PieChart."
76
- },
77
- {
78
- "name": "dataUnit",
79
- "type": "String | Number",
80
- "default": "",
81
- "description": "The unit of data displayed in the PieChart."
82
- },
83
- {
84
- "name": "nameKey",
85
- "type": "String",
86
- "default": "name",
87
- "description": "The key of each sector name."
88
- },
89
- {
90
- "name": "color",
91
- "type": "Function",
92
- "default": "",
93
- "description": "Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page."
94
- },
95
- {
96
- "name": "filled",
97
- "type": "Boolean",
98
- "default": "false",
99
- "description": "Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0."
100
- },
101
- {
102
- "name": "labels",
103
- "type": "Function | Boolean",
104
- "default": "true",
105
- "description": "If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label."
106
- },
107
- {
108
- "name": "innerLabels",
109
- "type": "Boolean",
110
- "default": "false",
111
- "description": "Set to \"true\" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0."
112
- },
113
- {
114
- "name": "paddingAngle",
115
- "type": "Number",
116
- "default": "3",
117
- "description": "The angle between two sectors."
118
- },
119
- {
120
- "name": "pieOptions",
121
- "type": "Object",
122
- "default": "",
123
- "description": "Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie"
124
- },
125
- {
126
- "name": "containerOptions",
127
- "type": "Object",
128
- "default": "",
129
- "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
130
- },
131
- {
132
- "name": "tooltip",
133
- "type": "ChartTooltip | Boolean",
134
- "default": "",
135
- "description": "Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor"
136
- },
137
- {
138
- "name": "legend",
139
- "type": "Legend | Boolean",
140
- "default": "<Legend />",
141
- "description": "Shows the provided Legend component otherwise shows nothing."
142
- },
143
- {
144
- "name": "...",
145
- "type": "",
146
- "default": "",
147
- "description": "Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart"
148
- }
149
- ]
150
- },
151
- {
152
- "heading": "Legend",
153
- "rows": [
154
- {
155
- "name": "iconType",
156
- "type": "String",
157
- "default": "square",
158
- "description": "Defines the type of the leading icon."
159
- },
160
- {
161
- "name": "iconSize",
162
- "type": "String",
163
- "default": "12",
164
- "description": "Defines the size of the leading icon."
165
- },
166
- {
167
- "name": "layout",
168
- "type": "String",
169
- "default": "vertical",
170
- "description": "Defines the layout of the legend."
171
- },
172
- {
173
- "name": "align",
174
- "type": "String",
175
- "default": "right",
176
- "description": "Defines the alignment of the legend relative to the chart."
177
- },
178
- {
179
- "name": "verticalAlign",
180
- "type": "String",
181
- "default": "top",
182
- "description": "Defines the vertical alignment of the legend relative to the chart."
183
- },
184
- {
185
- "name": "...",
186
- "type": "",
187
- "default": "",
188
- "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
189
- }
190
- ]
191
- }
192
- ]
193
- }
194
- ]
195
- },
196
- {
197
- "caption": "Example 2",
198
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column flex-row-lg flex-wrap gap-15\"><div class=\"flex-1-1 max-width-500\"><label>PieChart with custom color</label><div class=\"panel panel-default panel-body margin-bottom-0 height-300\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 403px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"403\" height=\"268\" viewBox=\"0 0 403 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts3-clip\"><rect x=\"5\" y=\"5\" height=\"238\" width=\"393\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g></g><g class=\"recharts-layer recharts-pie-labels\"><g class=\"recharts-layer\"><path stroke=\"#67abc5 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Basistarif\" color=\"color-coldplay-fountain\" class=\"recharts-curve recharts-pie-label-line\" d=\"M192.024,29.273L190.034,9.372\"></path><text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Basistarif\" color=\"color-coldplay-fountain\" alignment-baseline=\"middle\" x=\"190.0338151654503\" y=\"9.372051377772863\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#67abc5 \"><tspan x=\"190.0338151654503\" dy=\"0em\">46.8 %</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#4eccc1 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Diesel\" color=\"color-coldplay-turquoise\" class=\"recharts-curve recharts-pie-label-line\" d=\"M153.064,205.957L142.889,223.175\"></path><text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Diesel\" color=\"color-coldplay-turquoise\" alignment-baseline=\"middle\" x=\"142.888699259342\" y=\"223.17537711291115\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#4eccc1 \"><tspan x=\"142.888699259342\" dy=\"0em\">22 %</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#a1daa3 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Maut\" color=\"color-coldplay-moos\" class=\"recharts-curve recharts-pie-label-line\" d=\"M266.146,193.885L279.728,208.567\"></path><text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Maut\" color=\"color-coldplay-moos\" alignment-baseline=\"middle\" x=\"279.72751570383554\" y=\"208.56651693670588\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#a1daa3 \"><tspan x=\"279.72751570383554\" dy=\"0em\">12.4 %</tspan></text></g><g class=\"recharts-layer\"><path stroke=\"#ff8e3c \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" color=\"brand-warning\" class=\"recharts-curve recharts-pie-label-line\" d=\"M294.971,142.059L314.608,145.853\"></path><text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" color=\"brand-warning\" alignment-baseline=\"middle\" x=\"314.60826990848403\" y=\"145.8531297142886\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#ff8e3c \"><tspan x=\"314.60826990848403\" dy=\"0em\">3.88 %</tspan></text></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 393px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\"><span class=\"text-color-darker\">Basistarif</span></span></li><li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#4eccc1 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(78, 204, 193);\"><span class=\"text-color-darker\">Diesel</span></span></li><li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\"><span class=\"text-color-darker\">Maut</span></span></li><li class=\"recharts-legend-item legend-item-3\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#ff8e3c \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(255, 142, 60);\"><span class=\"text-color-darker\">Zuschläge</span></span></li></ul></div><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\"><div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\"><p class=\"recharts-tooltip-label\" style=\"margin: 0px;\"></p></div></div></div></div></div></div><div class=\"flex-1-1 max-width-500\"><label>Filled PieChart with inner labels</label><div class=\"panel panel-default panel-body margin-bottom-0 height-300\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 426px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"426\" height=\"268\" viewBox=\"0 0 426 268\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts5-clip\"><rect x=\"5\" y=\"5\" height=\"238\" width=\"416\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"></g><g class=\"recharts-layer recharts-pie-labels\"><g class=\"recharts-layer\"><text x=\"201.69112060773637\" y=\"77.76290183314663\" fill=\"white\" text-anchor=\"end\" dominant-baseline=\"central\">46.8 %</text></g><g class=\"recharts-layer\"><text x=\"201.69112060773634\" y=\"170.23709816685337\" fill=\"white\" text-anchor=\"end\" dominant-baseline=\"central\">22 %</text></g><g class=\"recharts-layer\"><text x=\"255.22643894500987\" y=\"145.97015826122683\" fill=\"white\" text-anchor=\"start\" dominant-baseline=\"central\">12.4 %</text></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 416px; height: auto; left: 5px; bottom: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\"><span class=\"text-color-darker\">Basistarif</span></span></li><li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#4eccc1 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(78, 204, 193);\"><span class=\"text-color-darker\">Diesel</span></span></li><li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\"><span class=\"text-color-darker\">Maut</span></span></li></ul></div><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\"><div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\"><p class=\"recharts-tooltip-label\" style=\"margin: 0px;\"></p></div></div></div></div></div></div></div></div>",
199
- "tabs": [
200
- {
201
- "label": "React",
202
- "language": "tsx",
203
- "code": "import PieChart from '@rio-cloud/rio-uikit/PieChart';\n\ntype CustomData = {\n label: string;\n color: string;\n costs: number;\n};\n\nexport default () => {\n return (\n <div className='display-flex flex-column flex-row-lg flex-wrap gap-15'>\n <div className='flex-1-1 max-width-500'>\n <label>PieChart with custom color</label>\n <div className='panel panel-default panel-body margin-bottom-0 height-300'>\n <PieChart\n data={data}\n dataKey={(entry: CustomData) => entry.costs}\n nameKey='label'\n dataUnit='%'\n innerRadius={85}\n />\n </div>\n </div>\n <div className='flex-1-1 max-width-500'>\n <label>Filled PieChart with inner labels</label>\n <div className='panel panel-default panel-body margin-bottom-0 height-300'>\n <PieChart\n data={data.filter(entry => entry.costs > 10)}\n dataKey={(entry: CustomData) => entry.costs}\n dataUnit='%'\n nameKey='label'\n filled\n innerLabels\n color={entry => entry.color}\n />\n </div>\n </div>\n </div>\n );\n};\n\nconst data: CustomData[] = [\n {\n label: 'Basistarif',\n color: 'color-coldplay-fountain',\n costs: 46.8,\n },\n {\n label: 'Diesel',\n color: 'color-coldplay-turquoise',\n costs: 22.0,\n },\n {\n label: 'Maut',\n color: 'color-coldplay-moos',\n costs: 12.4,\n },\n {\n label: 'Zuschläge',\n color: 'brand-warning',\n costs: 3.88,\n },\n];"
204
- },
205
- {
206
- "label": "HTML",
207
- "language": "html",
208
- "code": "<div class=\"display-flex flex-column flex-row-lg flex-wrap gap-15\">\n <div class=\"flex-1-1 max-width-500\">\n <label>PieChart with custom color</label>\n <div class=\"panel panel-default panel-body margin-bottom-0 height-300\">\n <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 403px;\">\n <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"403\" height=\"268\" viewBox=\"0 0 403 268\" style=\"width: 100%; height: 100%;\">\n <title>\n </title>\n <desc>\n </desc>\n <defs>\n <clipPath id=\"recharts3-clip\">\n <rect x=\"5\" y=\"5\" height=\"238\" width=\"393\">\n </rect>\n </clipPath>\n </defs>\n <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n <g class=\"recharts-layer\">\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"201.5\" cy=\"124\" name=\"Basistarif\" stroke=\"#fff\" fill=\"#67abc5 \" color=\"color-coldplay-fountain\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 296.7,124\n A 95.2,95.2,0,\n 0,0,\n 157.47399634157586,39.5917598698538\n L 162.1910681621213,48.63549988379803\n A 85,85,0,\n 0,1,\n 286.5,124 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"201.5\" cy=\"124\" name=\"Diesel\" stroke=\"#fff\" fill=\"#4eccc1 \" color=\"color-coldplay-turquoise\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 153.1167464874895,42.01158143039872\n A 95.2,95.2,0,\n 0,0,\n 106.55536718179299,117.03173629834181\n L 116.72800641231517,117.77833598066233\n A 85,85,0,\n 0,1,\n 158.30066650668704,50.79605484857028 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"201.5\" cy=\"124\" name=\"Maut\" stroke=\"#fff\" fill=\"#a1daa3 \" color=\"color-coldplay-moos\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 106.32079475713081,122.01030421024193\n A 95.2,95.2,0,\n 0,0,\n 119.0104221586301,171.52377875919146\n L 127.84859121306259,166.43194532070666\n A 85,85,0,\n 0,1,\n 116.51856674743823,122.22348590200173 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" stroke=\"#fff\" fill=\"#ff8e3c \" color=\"brand-warning\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 121.61067366381198,175.77582000847553\n A 95.2,95.2,0,\n 0,0,\n 131.52745125232116,188.5513936468742\n L 139.02451004671533,181.63517289899482\n A 85,85,0,\n 0,1,\n 130.17024434268927,170.22841072185315 Z\" role=\"img\">\n </path>\n </g>\n </g>\n <g class=\"recharts-layer recharts-pie-labels\">\n <g class=\"recharts-layer\">\n <path stroke=\"#67abc5 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Basistarif\" color=\"color-coldplay-fountain\" class=\"recharts-curve recharts-pie-label-line\" d=\"M192.024,29.273L190.034,9.372\">\n </path>\n <text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Basistarif\" color=\"color-coldplay-fountain\" alignment-baseline=\"middle\" x=\"190.0338151654503\" y=\"9.372051377772863\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#67abc5 \">\n <tspan x=\"190.0338151654503\" dy=\"0em\">46.8 %</tspan>\n </text>\n </g>\n <g class=\"recharts-layer\">\n <path stroke=\"#4eccc1 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Diesel\" color=\"color-coldplay-turquoise\" class=\"recharts-curve recharts-pie-label-line\" d=\"M153.064,205.957L142.889,223.175\">\n </path>\n <text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Diesel\" color=\"color-coldplay-turquoise\" alignment-baseline=\"middle\" x=\"142.888699259342\" y=\"223.17537711291115\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"end\" fill=\"#4eccc1 \">\n <tspan x=\"142.888699259342\" dy=\"0em\">22 %</tspan>\n </text>\n </g>\n <g class=\"recharts-layer\">\n <path stroke=\"#a1daa3 \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Maut\" color=\"color-coldplay-moos\" class=\"recharts-curve recharts-pie-label-line\" d=\"M266.146,193.885L279.728,208.567\">\n </path>\n <text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Maut\" color=\"color-coldplay-moos\" alignment-baseline=\"middle\" x=\"279.72751570383554\" y=\"208.56651693670588\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#a1daa3 \">\n <tspan x=\"279.72751570383554\" dy=\"0em\">12.4 %</tspan>\n </text>\n </g>\n <g class=\"recharts-layer\">\n <path stroke=\"#ff8e3c \" fill=\"none\" cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" color=\"brand-warning\" class=\"recharts-curve recharts-pie-label-line\" d=\"M294.971,142.059L314.608,145.853\">\n </path>\n <text stroke=\"none\" cx=\"201.5\" cy=\"124\" name=\"Zuschläge\" color=\"brand-warning\" alignment-baseline=\"middle\" x=\"314.60826990848403\" y=\"145.8531297142886\" class=\"recharts-text recharts-pie-label-text\" text-anchor=\"start\" fill=\"#ff8e3c \">\n <tspan x=\"314.60826990848403\" dy=\"0em\">3.88 %</tspan>\n </text>\n </g>\n </g>\n </g>\n </svg>\n <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 393px; height: auto; left: 5px; bottom: 5px;\">\n <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\">\n <li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\">\n <span class=\"text-color-darker\">Basistarif</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#4eccc1 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(78, 204, 193);\">\n <span class=\"text-color-darker\">Diesel</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">\n <span class=\"text-color-darker\">Maut</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-3\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#ff8e3c \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(255, 142, 60);\">\n <span class=\"text-color-darker\">Zuschläge</span>\n </span>\n </li>\n </ul>\n </div>\n <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\">\n <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex-1-1 max-width-500\">\n <label>Filled PieChart with inner labels</label>\n <div class=\"panel panel-default panel-body margin-bottom-0 height-300\">\n <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 268px; max-width: 426px;\">\n <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"426\" height=\"268\" viewBox=\"0 0 426 268\" style=\"width: 100%; height: 100%;\">\n <title>\n </title>\n <desc>\n </desc>\n <defs>\n <clipPath id=\"recharts5-clip\">\n <rect x=\"5\" y=\"5\" height=\"238\" width=\"416\">\n </rect>\n </clipPath>\n </defs>\n <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n <g class=\"recharts-layer\">\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"213\" cy=\"124\" name=\"Basistarif\" stroke=\"#fff\" fill=\"#67abc5 \" color=\"color-coldplay-fountain\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 308.2,124\n A 95.2,95.2,0,\n 0,0,\n 155.16522844374782,48.38135680246488\n L 213,124 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"213\" cy=\"124\" name=\"Diesel\" stroke=\"#fff\" fill=\"#4eccc1 \" color=\"color-coldplay-turquoise\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 155.16522844374782,48.38135680246488\n A 95.2,95.2,0,\n 0,0,\n 118.57226429424794,136.101352382467\n L 213,124 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"213\" cy=\"124\" name=\"Maut\" stroke=\"#fff\" fill=\"#a1daa3 \" color=\"color-coldplay-moos\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 118.57226429424794,136.101352382467\n A 95.2,95.2,0,\n 0,0,\n 141.21817979511525,186.53327344761027\n L 213,124 Z\" role=\"img\">\n </path>\n </g>\n </g>\n <g class=\"recharts-layer recharts-pie-labels\">\n <g class=\"recharts-layer\">\n <text x=\"201.69112060773637\" y=\"77.76290183314663\" fill=\"white\" text-anchor=\"end\" dominant-baseline=\"central\">46.8 %</text>\n </g>\n <g class=\"recharts-layer\">\n <text x=\"201.69112060773634\" y=\"170.23709816685337\" fill=\"white\" text-anchor=\"end\" dominant-baseline=\"central\">22 %</text>\n </g>\n <g class=\"recharts-layer\">\n <text x=\"255.22643894500987\" y=\"145.97015826122683\" fill=\"white\" text-anchor=\"start\" dominant-baseline=\"central\">12.4 %</text>\n </g>\n </g>\n </g>\n </svg>\n <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: 416px; height: auto; left: 5px; bottom: 5px;\">\n <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: center;\">\n <li class=\"recharts-legend-item legend-item-0\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\">\n <span class=\"text-color-darker\">Basistarif</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-1\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#4eccc1 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(78, 204, 193);\">\n <span class=\"text-color-darker\">Diesel</span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-2\" style=\"display: inline-block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"14\" height=\"14\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">\n <span class=\"text-color-darker\">Maut</span>\n </span>\n </li>\n </ul>\n </div>\n <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\">\n <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>"
209
- },
210
- {
211
- "label": "Props",
212
- "language": "json",
213
- "code": null,
214
- "props": [
215
- {
216
- "heading": "PieChart",
217
- "rows": [
218
- {
219
- "name": "width",
220
- "type": "Number",
221
- "default": "",
222
- "description": "The width of chart container."
223
- },
224
- {
225
- "name": "height",
226
- "type": "Number",
227
- "default": "",
228
- "description": "The height of chart container."
229
- },
230
- {
231
- "name": "innerRadius",
232
- "type": "String | Number",
233
- "default": "60",
234
- "description": "The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy."
235
- },
236
- {
237
- "name": "outerRadius",
238
- "type": "String | Number",
239
- "default": "80",
240
- "description": "The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy."
241
- },
242
- {
243
- "name": "data",
244
- "type": "Array",
245
- "default": "",
246
- "description": "The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }]"
247
- },
248
- {
249
- "name": "dataKey",
250
- "type": "string | number | ((obj: T) => any)",
251
- "default": "value",
252
- "description": "The key of data used for the PieChart."
253
- },
254
- {
255
- "name": "dataUnit",
256
- "type": "String | Number",
257
- "default": "",
258
- "description": "The unit of data displayed in the PieChart."
259
- },
260
- {
261
- "name": "nameKey",
262
- "type": "String",
263
- "default": "name",
264
- "description": "The key of each sector name."
265
- },
266
- {
267
- "name": "color",
268
- "type": "Function",
269
- "default": "",
270
- "description": "Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page."
271
- },
272
- {
273
- "name": "filled",
274
- "type": "Boolean",
275
- "default": "false",
276
- "description": "Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0."
277
- },
278
- {
279
- "name": "labels",
280
- "type": "Function | Boolean",
281
- "default": "true",
282
- "description": "If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label."
283
- },
284
- {
285
- "name": "innerLabels",
286
- "type": "Boolean",
287
- "default": "false",
288
- "description": "Set to \"true\" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0."
289
- },
290
- {
291
- "name": "paddingAngle",
292
- "type": "Number",
293
- "default": "3",
294
- "description": "The angle between two sectors."
295
- },
296
- {
297
- "name": "pieOptions",
298
- "type": "Object",
299
- "default": "",
300
- "description": "Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie"
301
- },
302
- {
303
- "name": "containerOptions",
304
- "type": "Object",
305
- "default": "",
306
- "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
307
- },
308
- {
309
- "name": "tooltip",
310
- "type": "ChartTooltip | Boolean",
311
- "default": "",
312
- "description": "Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor"
313
- },
314
- {
315
- "name": "legend",
316
- "type": "Legend | Boolean",
317
- "default": "<Legend />",
318
- "description": "Shows the provided Legend component otherwise shows nothing."
319
- },
320
- {
321
- "name": "...",
322
- "type": "",
323
- "default": "",
324
- "description": "Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart"
325
- }
326
- ]
327
- },
328
- {
329
- "heading": "Legend",
330
- "rows": [
331
- {
332
- "name": "iconType",
333
- "type": "String",
334
- "default": "square",
335
- "description": "Defines the type of the leading icon."
336
- },
337
- {
338
- "name": "iconSize",
339
- "type": "String",
340
- "default": "12",
341
- "description": "Defines the size of the leading icon."
342
- },
343
- {
344
- "name": "layout",
345
- "type": "String",
346
- "default": "vertical",
347
- "description": "Defines the layout of the legend."
348
- },
349
- {
350
- "name": "align",
351
- "type": "String",
352
- "default": "right",
353
- "description": "Defines the alignment of the legend relative to the chart."
354
- },
355
- {
356
- "name": "verticalAlign",
357
- "type": "String",
358
- "default": "top",
359
- "description": "Defines the vertical alignment of the legend relative to the chart."
360
- },
361
- {
362
- "name": "...",
363
- "type": "",
364
- "default": "",
365
- "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
366
- }
367
- ]
368
- }
369
- ]
370
- }
371
- ]
372
- },
373
- {
374
- "caption": "Basistarif",
375
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600\"><label>PieChart with custom legend</label><div class=\"panel panel-default panel-body margin-bottom-0 height-400\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 368px; max-width: 568px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"568\" height=\"368\" viewBox=\"0 0 568 368\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts7-clip\"><rect x=\"5\" y=\"5\" height=\"358\" width=\"455\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g></g></g></svg><div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; right: 5px; top: 5px;\"><ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: left;\"><li class=\"recharts-legend-item legend-item-0\" style=\"display: block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\"><span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\"><span class=\"rounded height-15 width-15\" style=\"background-color: rgb(103, 171, 197);\"></span><span class=\"text-color-dark\">Basistarif</span></span></span></li><li class=\"recharts-legend-item legend-item-1\" style=\"display: block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#4eccc1 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(78, 204, 193);\"><span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\"><span class=\"rounded height-15 width-15\" style=\"background-color: rgb(78, 204, 193);\"></span><span class=\"text-color-dark\">Diesel</span></span></span></li><li class=\"recharts-legend-item legend-item-2\" style=\"display: block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\"><span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\"><span class=\"rounded height-15 width-15\" style=\"background-color: rgb(161, 218, 163);\"></span><span class=\"text-color-dark\">Maut</span></span></span></li><li class=\"recharts-legend-item legend-item-3\" style=\"display: block; margin-right: 10px;\"><svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\"><title></title><desc></desc><path fill=\"#ff8e3c \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\"></path></svg><span class=\"recharts-legend-item-text\" style=\"color: rgb(255, 142, 60);\"><span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\"><span class=\"rounded height-15 width-15\" style=\"background-color: rgb(255, 142, 60);\"></span><span class=\"text-color-dark\">Zuschläge</span></span></span></li></ul></div></div></div></div></div></div>",
376
- "tabs": [
377
- {
378
- "label": "React",
379
- "language": "tsx",
380
- "code": "import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport PieChart from '@rio-cloud/rio-uikit/PieChart';\nimport Sector from '@rio-cloud/rio-uikit/Sector';\nimport Legend, { type LegendPayload } from '@rio-cloud/rio-uikit/Legend';\n\ntype CustomData = {\n label: string;\n color: string;\n costs: number;\n};\n\nexport default () => {\n const [activeItem, setActiveItem] = useState<LegendPayload | null>(null);\n const [activeIndex, setActiveIndex] = useState<number>(0);\n\n const handleMouseEnter = (payload: LegendPayload, index: number) => {\n setActiveItem(payload);\n setActiveIndex(index);\n };\n\n // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n const renderActiveShape = (props: any) => {\n const {\n cx,\n cy,\n midAngle,\n innerRadius,\n outerRadius,\n startAngle,\n endAngle,\n fill,\n payload,\n percent,\n value,\n label,\n } = props;\n\n const RADIAN = Math.PI / 180;\n const sin = Math.sin(-RADIAN * midAngle);\n const cos = Math.cos(-RADIAN * midAngle);\n const sx = cx + (outerRadius + 10) * cos;\n const sy = cy + (outerRadius + 10) * sin;\n const mx = cx + (outerRadius + 30) * cos;\n const my = cy + (outerRadius + 30) * sin;\n const ex = mx + (cos >= 0 ? 1 : -1) * 22;\n const ey = my;\n const textAnchor = cos >= 0 ? 'start' : 'end';\n\n return (\n <g>\n <text x={cx} y={cy} dy={8} textAnchor='middle' fill={fill}>\n {payload.name}\n </text>\n <Sector\n cx={cx}\n cy={cy}\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n startAngle={startAngle}\n endAngle={endAngle}\n fill={fill}\n />\n <Sector\n cx={cx}\n cy={cy}\n startAngle={startAngle}\n endAngle={endAngle}\n innerRadius={outerRadius + 6}\n outerRadius={outerRadius + 10}\n fill={fill}\n />\n <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill='none' />\n <circle cx={ex} cy={ey} r={2} fill={fill} stroke='none' />\n <text\n x={ex + (cos >= 0 ? 1 : -1) * 12}\n y={ey}\n textAnchor={textAnchor}\n fill='#333'\n >{`${label}:${value} €`}</text>\n <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill='#999'>\n {`(Rate ${(percent * 100).toFixed(2)}%)`}\n </text>\n </g>\n );\n };\n\n return (\n <div className='max-width-600'>\n <label>PieChart with custom legend</label>\n <div className='panel panel-default panel-body margin-bottom-0 height-400'>\n <PieChart\n data={data}\n dataKey={(entry: CustomData) => entry.costs}\n nameKey='label'\n dataUnit='%'\n innerRadius={90}\n outerRadius={110}\n tooltip={false}\n pieOptions={{\n label: false,\n labelLine: false,\n activeIndex,\n activeShape: renderActiveShape,\n onMouseEnter: handleMouseEnter,\n }}\n legend={\n <Legend\n iconType='square'\n iconSize={0}\n onMouseEnter={handleMouseEnter}\n formatter={(value: string, entry: CustomData) => {\n const isActive = activeItem?.value === value;\n\n const legendWrapperClasses = classNames(\n 'display-inline-flex',\n 'align-items-center',\n 'gap-5',\n 'cursor-pointer',\n 'padding-y-3 padding-x-5',\n 'rounded',\n isActive && 'bg-lightest'\n );\n\n return (\n <span className={legendWrapperClasses}>\n <span\n className='rounded height-15 width-15'\n style={{ backgroundColor: entry.color }}\n />\n <span className='text-color-dark'>{value}</span>\n </span>\n );\n }}\n />\n }\n />\n </div>\n </div>\n );\n};\n\nconst data: CustomData[] = [\n {\n label: 'Basistarif',\n color: 'color-coldplay-fountain',\n costs: 46.8,\n },\n {\n label: 'Diesel',\n color: 'color-coldplay-turquoise',\n costs: 22.0,\n },\n {\n label: 'Maut',\n color: 'color-coldplay-moos',\n costs: 12.4,\n },\n {\n label: 'Zuschläge',\n color: 'brand-warning',\n costs: 3.88,\n },\n];"
381
- },
382
- {
383
- "label": "HTML",
384
- "language": "html",
385
- "code": "<div class=\"max-width-600\">\n <label>PieChart with custom legend</label>\n <div class=\"panel panel-default panel-body margin-bottom-0 height-400\">\n <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 368px; max-width: 568px;\">\n <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"568\" height=\"368\" viewBox=\"0 0 568 368\" style=\"width: 100%; height: 100%;\">\n <title>\n </title>\n <desc>\n </desc>\n <defs>\n <clipPath id=\"recharts7-clip\">\n <rect x=\"5\" y=\"5\" height=\"358\" width=\"455\">\n </rect>\n </clipPath>\n </defs>\n <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n <g class=\"recharts-layer\">\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <g class=\"recharts-layer recharts-active-shape\">\n <g>\n <text x=\"232.5\" y=\"184\" dy=\"8\" text-anchor=\"middle\" fill=\"#67abc5 \">\n </text>\n <path cx=\"232.5\" cy=\"184\" fill=\"#67abc5 \" class=\"recharts-sector\" d=\"M 342.5,184\n A 110,110,0,\n 1,0,\n 123.51661944363775,198.92054833131556\n L 143.33177954479453,196.20772136198545\n A 90,90,0,\n 1,1,\n 322.5,184 Z\" role=\"img\">\n </path>\n <path cx=\"232.5\" cy=\"184\" fill=\"#67abc5 \" class=\"recharts-sector\" d=\"M 352.5,184\n A 120,120,0,\n 1,0,\n 113.60903939305936,200.2769618159806\n L 117.57207141329071,199.7343964221146\n A 116,116,0,\n 1,1,\n 348.5,184 Z\" role=\"img\">\n </path>\n <path d=\"M220.55605746401073,64.59588685184674L218.5654003746792,44.695201327154535L196.5654003746792,44.695201327154535\" stroke=\"#67abc5 \" fill=\"none\">\n </path>\n <circle cx=\"196.5654003746792\" cy=\"44.695201327154535\" r=\"2\" fill=\"#67abc5 \" stroke=\"none\">\n </circle>\n <text x=\"184.5654003746792\" y=\"44.695201327154535\" text-anchor=\"end\" fill=\"#333\">Basistarif:46.8 €</text>\n <text x=\"184.5654003746792\" y=\"44.695201327154535\" dy=\"18\" text-anchor=\"end\" fill=\"#999\">(Rate 55.01%)</text>\n </g>\n </g>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"232.5\" cy=\"184\" name=\"Diesel\" stroke=\"#fff\" fill=\"#4eccc1 \" color=\"color-coldplay-turquoise\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 124.44685854360776,204.60384967439066\n A 110,110,0,\n 0,0,\n 249.8513982228161,292.622875029679\n L 246.69659854594045,272.8732613879191\n A 90,90,0,\n 0,1,\n 144.0928842629518,200.8576951881378 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"232.5\" cy=\"184\" name=\"Maut\" stroke=\"#fff\" fill=\"#a1daa3 \" color=\"color-coldplay-moos\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 255.51250076912817,291.56590913644936\n A 110,110,0,\n 0,0,\n 329.4738262359847,235.92376166220095\n L 311.84222146580566,226.48307772361898\n A 90,90,0,\n 0,1,\n 251.32840972019576,272.00847111164035 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"232.5\" cy=\"184\" name=\"Zuschläge\" stroke=\"#fff\" fill=\"#ff8e3c \" color=\"brand-warning\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 332.0584066957343,230.77738402483374\n A 110,110,0,\n 0,0,\n 340.96051351603654,202.33894783889343\n L 321.2404201494844,199.00459368636734\n A 90,90,0,\n 0,1,\n 313.9568782056008,222.2724051112276 Z\" role=\"img\">\n </path>\n </g>\n </g>\n </g>\n </svg>\n <div class=\"recharts-legend-wrapper\" style=\"position: absolute; width: auto; height: auto; right: 5px; top: 5px;\">\n <ul class=\"recharts-default-legend\" style=\"padding: 0px; margin: 0px; text-align: left;\">\n <li class=\"recharts-legend-item legend-item-0\" style=\"display: block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#67abc5 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(103, 171, 197);\">\n <span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\">\n <span class=\"rounded height-15 width-15\" style=\"background-color: rgb(103, 171, 197);\">\n </span>\n <span class=\"text-color-dark\">Basistarif</span>\n </span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-1\" style=\"display: block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#4eccc1 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(78, 204, 193);\">\n <span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\">\n <span class=\"rounded height-15 width-15\" style=\"background-color: rgb(78, 204, 193);\">\n </span>\n <span class=\"text-color-dark\">Diesel</span>\n </span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-2\" style=\"display: block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#a1daa3 \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(161, 218, 163);\">\n <span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\">\n <span class=\"rounded height-15 width-15\" style=\"background-color: rgb(161, 218, 163);\">\n </span>\n <span class=\"text-color-dark\">Maut</span>\n </span>\n </span>\n </li>\n <li class=\"recharts-legend-item legend-item-3\" style=\"display: block; margin-right: 10px;\">\n <svg class=\"recharts-surface\" width=\"0\" height=\"0\" viewBox=\"0 0 32 32\" style=\"display: inline-block; vertical-align: middle; margin-right: 4px;\">\n <title>\n </title>\n <desc>\n </desc>\n <path fill=\"#ff8e3c \" cx=\"16\" cy=\"16\" class=\"recharts-symbols\" transform=\"translate(16, 16)\" d=\"M-16,-16h32v32h-32Z\">\n </path>\n </svg>\n <span class=\"recharts-legend-item-text\" style=\"color: rgb(255, 142, 60);\">\n <span class=\"display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded\">\n <span class=\"rounded height-15 width-15\" style=\"background-color: rgb(255, 142, 60);\">\n </span>\n <span class=\"text-color-dark\">Zuschläge</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n</div>"
386
- },
387
- {
388
- "label": "Props",
389
- "language": "json",
390
- "code": null,
391
- "props": [
392
- {
393
- "heading": "PieChart",
394
- "rows": [
395
- {
396
- "name": "width",
397
- "type": "Number",
398
- "default": "",
399
- "description": "The width of chart container."
400
- },
401
- {
402
- "name": "height",
403
- "type": "Number",
404
- "default": "",
405
- "description": "The height of chart container."
406
- },
407
- {
408
- "name": "innerRadius",
409
- "type": "String | Number",
410
- "default": "60",
411
- "description": "The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy."
412
- },
413
- {
414
- "name": "outerRadius",
415
- "type": "String | Number",
416
- "default": "80",
417
- "description": "The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy."
418
- },
419
- {
420
- "name": "data",
421
- "type": "Array",
422
- "default": "",
423
- "description": "The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }]"
424
- },
425
- {
426
- "name": "dataKey",
427
- "type": "string | number | ((obj: T) => any)",
428
- "default": "value",
429
- "description": "The key of data used for the PieChart."
430
- },
431
- {
432
- "name": "dataUnit",
433
- "type": "String | Number",
434
- "default": "",
435
- "description": "The unit of data displayed in the PieChart."
436
- },
437
- {
438
- "name": "nameKey",
439
- "type": "String",
440
- "default": "name",
441
- "description": "The key of each sector name."
442
- },
443
- {
444
- "name": "color",
445
- "type": "Function",
446
- "default": "",
447
- "description": "Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page."
448
- },
449
- {
450
- "name": "filled",
451
- "type": "Boolean",
452
- "default": "false",
453
- "description": "Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0."
454
- },
455
- {
456
- "name": "labels",
457
- "type": "Function | Boolean",
458
- "default": "true",
459
- "description": "If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label."
460
- },
461
- {
462
- "name": "innerLabels",
463
- "type": "Boolean",
464
- "default": "false",
465
- "description": "Set to \"true\" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0."
466
- },
467
- {
468
- "name": "paddingAngle",
469
- "type": "Number",
470
- "default": "3",
471
- "description": "The angle between two sectors."
472
- },
473
- {
474
- "name": "pieOptions",
475
- "type": "Object",
476
- "default": "",
477
- "description": "Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie"
478
- },
479
- {
480
- "name": "containerOptions",
481
- "type": "Object",
482
- "default": "",
483
- "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
484
- },
485
- {
486
- "name": "tooltip",
487
- "type": "ChartTooltip | Boolean",
488
- "default": "",
489
- "description": "Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor"
490
- },
491
- {
492
- "name": "legend",
493
- "type": "Legend | Boolean",
494
- "default": "<Legend />",
495
- "description": "Shows the provided Legend component otherwise shows nothing."
496
- },
497
- {
498
- "name": "...",
499
- "type": "",
500
- "default": "",
501
- "description": "Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart"
502
- }
503
- ]
504
- },
505
- {
506
- "heading": "Legend",
507
- "rows": [
508
- {
509
- "name": "iconType",
510
- "type": "String",
511
- "default": "square",
512
- "description": "Defines the type of the leading icon."
513
- },
514
- {
515
- "name": "iconSize",
516
- "type": "String",
517
- "default": "12",
518
- "description": "Defines the size of the leading icon."
519
- },
520
- {
521
- "name": "layout",
522
- "type": "String",
523
- "default": "vertical",
524
- "description": "Defines the layout of the legend."
525
- },
526
- {
527
- "name": "align",
528
- "type": "String",
529
- "default": "right",
530
- "description": "Defines the alignment of the legend relative to the chart."
531
- },
532
- {
533
- "name": "verticalAlign",
534
- "type": "String",
535
- "default": "top",
536
- "description": "Defines the vertical alignment of the legend relative to the chart."
537
- },
538
- {
539
- "name": "...",
540
- "type": "",
541
- "default": "",
542
- "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
543
- }
544
- ]
545
- }
546
- ]
547
- }
548
- ]
549
- },
550
- {
551
- "caption": "Customer Satisfaction",
552
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>PieChart with a needle</label><div class=\"panel panel-default panel-body margin-bottom-0 \"><div class=\"display-flex flex-column position-relative width-250 height-250 max-width-500\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 50%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 125px; max-width: 250px;\"><svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"250\" height=\"125\" viewBox=\"0 0 250 125\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts9-clip\"><rect x=\"5\" y=\"5\" height=\"115\" width=\"240\"></rect></clipPath></defs><g class=\"recharts-layer recharts-pie\" tabindex=\"0\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g><g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\"></g></g></g></svg></div></div><div class=\"position-absolute top-25pct left-50pct\"><div class=\"position-relative\"><div class=\"position-absolute bg-dark \" style=\"width: 5px; height: 80px; transform-origin: center bottom; transform: translate(-50%, -30%) rotate(67deg); border-radius: 100% 100% 4px 4px; display: inline-block;\"></div></div></div><div class=\"margin-20 text-center\"><div class=\"text-color-dark text-size-16\">Customer Satisfaction</div></div></div></div></div>",
553
- "tabs": [
554
- {
555
- "label": "React",
556
- "language": "tsx",
557
- "code": "import PieChart from '@rio-cloud/rio-uikit/PieChart';\nimport ChartNeedle from '@rio-cloud/rio-uikit/ChartNeedle';\n\nexport default () => {\n return (\n <>\n <label>PieChart with a needle</label>\n <div className='panel panel-default panel-body margin-bottom-0 '>\n <div className='display-flex flex-column position-relative width-250 height-250 max-width-500'>\n <PieChart\n data={data}\n dataKey='value'\n filled={false}\n paddingAngle={1}\n innerRadius={90}\n outerRadius={98}\n labels={false}\n legend={false}\n tooltip={false}\n containerOptions={{ height: '50%' }}\n pieOptions={{\n startAngle: 180,\n endAngle: 0,\n cy: 120,\n }}\n />\n <div className='position-absolute top-25pct left-50pct'>\n <ChartNeedle rotation={67} height='80px' y='-30%' />\n </div>\n <div className='margin-20 text-center'>\n <div className='text-color-dark text-size-16'>Customer Satisfaction</div>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nconst data = [\n {\n color: 'color-rating-1',\n value: 20,\n },\n {\n color: 'color-rating-2',\n value: 20,\n },\n {\n color: 'color-rating-3',\n value: 20,\n },\n {\n color: 'color-rating-4',\n value: 20,\n },\n {\n color: 'color-rating-5',\n value: 20,\n },\n];"
558
- },
559
- {
560
- "label": "HTML",
561
- "language": "html",
562
- "code": "<label>PieChart with a needle</label>\n<div class=\"panel panel-default panel-body margin-bottom-0 \">\n <div class=\"display-flex flex-column position-relative width-250 height-250 max-width-500\">\n <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 50%; min-width: 0px;\">\n <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 125px; max-width: 250px;\">\n <svg cx=\"50%\" cy=\"50%\" class=\"recharts-surface\" width=\"250\" height=\"125\" viewBox=\"0 0 250 125\" style=\"width: 100%; height: 100%;\">\n <title>\n </title>\n <desc>\n </desc>\n <defs>\n <clipPath id=\"recharts9-clip\">\n <rect x=\"5\" y=\"5\" height=\"115\" width=\"240\">\n </rect>\n </clipPath>\n </defs>\n <g class=\"recharts-layer recharts-pie\" tabindex=\"0\">\n <g class=\"recharts-layer\">\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"125\" cy=\"125\" name=\"0\" stroke=\"#fff\" fill=\"#e22837 \" color=\"color-rating-1\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 27,124.99999999999999\n A 98,98,0,\n 0,1,\n 44.91979996315739,68.5096330153603\n L 51.45695914983841,73.12109154471864\n A 90,90,0,\n 0,0,\n 35,124.99999999999999 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"125\" cy=\"125\" name=\"1\" stroke=\"#fff\" fill=\"#ff8e3c \" color=\"color-rating-2\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 45.9178894099074,67.12064457324732\n A 98,98,0,\n 0,1,\n 93.74198768878912,32.118695819060605\n L 96.29366216317369,39.70084309913729\n A 90,90,0,\n 0,0,\n 52.37357190705782,71.84548991420672 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"125\" cy=\"125\" name=\"2\" stroke=\"#fff\" fill=\"#f8c575 \" color=\"color-rating-3\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 95.36775070645643,31.587314556291204\n A 98,98,0,\n 0,1,\n 154.63224929354354,31.58731455629119\n L 152.21329016753998,39.21283989863477\n A 90,90,0,\n 0,0,\n 97.78670983245999,39.21283989863478 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"125\" cy=\"125\" name=\"3\" stroke=\"#fff\" fill=\"#5cb85c \" color=\"color-rating-4\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 156.25801231121085,32.11869581906059\n A 98,98,0,\n 0,1,\n 204.08211059009258,67.12064457324732\n L 197.62642809294218,71.84548991420672\n A 90,90,0,\n 0,0,\n 153.7063378368263,39.70084309913727 Z\" role=\"img\">\n </path>\n </g>\n <g class=\"recharts-layer recharts-pie-sector\" tabindex=\"-1\">\n <path cx=\"125\" cy=\"125\" name=\"4\" stroke=\"#fff\" fill=\"#4b924c \" color=\"color-rating-5\" tabindex=\"-1\" class=\"recharts-sector\" d=\"M 205.0802000368426,68.50963301536027\n A 98,98,0,\n 0,1,\n 223,125\n L 215,125\n A 90,90,0,\n 0,0,\n 198.54304085016156,73.12109154471861 Z\" role=\"img\">\n </path>\n </g>\n </g>\n </g>\n </svg>\n </div>\n </div>\n <div class=\"position-absolute top-25pct left-50pct\">\n <div class=\"position-relative\">\n <div class=\"position-absolute bg-dark \" style=\"width: 5px; height: 80px; transform-origin: center bottom; transform: translate(-50%, -30%) rotate(67deg); border-radius: 100% 100% 4px 4px; display: inline-block;\">\n </div>\n </div>\n </div>\n <div class=\"margin-20 text-center\">\n <div class=\"text-color-dark text-size-16\">Customer Satisfaction</div>\n </div>\n </div>\n</div>"
563
- },
564
- {
565
- "label": "Props",
566
- "language": "json",
567
- "code": null,
568
- "props": [
569
- {
570
- "heading": "PieChart",
571
- "rows": [
572
- {
573
- "name": "width",
574
- "type": "Number",
575
- "default": "",
576
- "description": "The width of chart container."
577
- },
578
- {
579
- "name": "height",
580
- "type": "Number",
581
- "default": "",
582
- "description": "The height of chart container."
583
- },
584
- {
585
- "name": "innerRadius",
586
- "type": "String | Number",
587
- "default": "60",
588
- "description": "The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy."
589
- },
590
- {
591
- "name": "outerRadius",
592
- "type": "String | Number",
593
- "default": "80",
594
- "description": "The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy."
595
- },
596
- {
597
- "name": "data",
598
- "type": "Array",
599
- "default": "",
600
- "description": "The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }]"
601
- },
602
- {
603
- "name": "dataKey",
604
- "type": "string | number | ((obj: T) => any)",
605
- "default": "value",
606
- "description": "The key of data used for the PieChart."
607
- },
608
- {
609
- "name": "dataUnit",
610
- "type": "String | Number",
611
- "default": "",
612
- "description": "The unit of data displayed in the PieChart."
613
- },
614
- {
615
- "name": "nameKey",
616
- "type": "String",
617
- "default": "name",
618
- "description": "The key of each sector name."
619
- },
620
- {
621
- "name": "color",
622
- "type": "Function",
623
- "default": "",
624
- "description": "Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page."
625
- },
626
- {
627
- "name": "filled",
628
- "type": "Boolean",
629
- "default": "false",
630
- "description": "Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0."
631
- },
632
- {
633
- "name": "labels",
634
- "type": "Function | Boolean",
635
- "default": "true",
636
- "description": "If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label."
637
- },
638
- {
639
- "name": "innerLabels",
640
- "type": "Boolean",
641
- "default": "false",
642
- "description": "Set to \"true\" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0."
643
- },
644
- {
645
- "name": "paddingAngle",
646
- "type": "Number",
647
- "default": "3",
648
- "description": "The angle between two sectors."
649
- },
650
- {
651
- "name": "pieOptions",
652
- "type": "Object",
653
- "default": "",
654
- "description": "Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie"
655
- },
656
- {
657
- "name": "containerOptions",
658
- "type": "Object",
659
- "default": "",
660
- "description": "Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer"
661
- },
662
- {
663
- "name": "tooltip",
664
- "type": "ChartTooltip | Boolean",
665
- "default": "",
666
- "description": "Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor"
667
- },
668
- {
669
- "name": "legend",
670
- "type": "Legend | Boolean",
671
- "default": "<Legend />",
672
- "description": "Shows the provided Legend component otherwise shows nothing."
673
- },
674
- {
675
- "name": "...",
676
- "type": "",
677
- "default": "",
678
- "description": "Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart"
679
- }
680
- ]
681
- },
682
- {
683
- "heading": "Legend",
684
- "rows": [
685
- {
686
- "name": "iconType",
687
- "type": "String",
688
- "default": "square",
689
- "description": "Defines the type of the leading icon."
690
- },
691
- {
692
- "name": "iconSize",
693
- "type": "String",
694
- "default": "12",
695
- "description": "Defines the size of the leading icon."
696
- },
697
- {
698
- "name": "layout",
699
- "type": "String",
700
- "default": "vertical",
701
- "description": "Defines the layout of the legend."
702
- },
703
- {
704
- "name": "align",
705
- "type": "String",
706
- "default": "right",
707
- "description": "Defines the alignment of the legend relative to the chart."
708
- },
709
- {
710
- "name": "verticalAlign",
711
- "type": "String",
712
- "default": "top",
713
- "description": "Defines the vertical alignment of the legend relative to the chart."
714
- },
715
- {
716
- "name": "...",
717
- "type": "",
718
- "default": "",
719
- "description": "Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend"
720
- }
721
- ]
722
- }
723
- ]
724
- }
725
- ]
726
- }
727
- ]
728
- }
729
- ],
730
- "see_also": []
731
- }