@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

package/dist/docs/components/areaCharts.md

@@ -3,12 +3,10 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/areaCharts
-*Captured:* 2026-03-06T10:41:25.420Z
+*Captured:* 2026-04-20T12:55:30.671Z
 
 ## AreaChart
 
-> 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.
-
 ### Example: Example 1
 
 Simple AreaChart
@@ -26,21 +24,19 @@ type CustomData = {
     value: number;
 };
 
-export default () => {
-    return (
-        <>
-            <label>Simple AreaChart</label>
-            <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
-                <AreaChart
-                    data={data}
-                    dataKey={(entry: CustomData) => entry.name}
-                    xAxisOptions={{ padding: { left: 30, right: 30 } }}
-                    areas={[<Area key='area' dataKey={(entry: CustomData) => entry.value} />]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <label>Simple AreaChart</label>
+        <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
+            <AreaChart
+                data={data}
+                dataKey={(entry: CustomData) => entry.name}
+                xAxisOptions={{ padding: { left: 30, right: 30 } }}
+                areas={[<Area key='area' dataKey={(entry: CustomData) => entry.value} />]}
+            />
+        </div>
+    </>
+);
 
 const data: CustomData[] = [
     {
@@ -93,9 +89,9 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts1-clip">
@@ -111,12 +107,12 @@ const data: CustomData[] = [
                             </stop>
                         </linearGradient>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                         <g class="recharts-layer recharts-area">
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:r0:">
-                                        <rect x="45" y="0" width="87.97882059780788" height="124">
+                                        <rect x="45" y="0" width="83.4146754519315" height="124">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -131,13 +127,13 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="123" x2="453" y2="123">
                             </line>
@@ -175,15 +171,15 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="438" stroke="none" x="45" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -391,23 +387,21 @@ type CustomLegendProps = {
     onMouseLeave: () => void;
 };
 
-const CustomLegend = ({ payload, highlightedArea, onMouseEnter, onMouseLeave }: CustomLegendProps) => {
-    return (
-        <ul className='list-style-none padding-left-20'>
-            {payload?.map((entry: any, index: number) => (
-                <li
-                    key={`item-${index}`}
-                    onMouseEnter={() => onMouseEnter(entry.dataKey)}
-                    onMouseLeave={onMouseLeave}
-                    className={`cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ${highlightedArea === entry.dataKey ? 'bg-lightest' : ''}`}
-                >
-                    <span className='rioglyph rioglyph-sphere' style={{ color: entry.color }} />
-                    <span className='text-color-darker text-capitalize-first-word'>{entry.value}</span>
-                </li>
-            ))}
-        </ul>
-    );
-};
+const CustomLegend = ({ payload, highlightedArea, onMouseEnter, onMouseLeave }: CustomLegendProps) => (
+    <ul className='list-style-none padding-left-20'>
+        {payload?.map((entry: any, index: number) => (
+            <li
+                key={`item-${index}`}
+                onMouseEnter={() => onMouseEnter(entry.dataKey)}
+                onMouseLeave={onMouseLeave}
+                className={`cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ${highlightedArea === entry.dataKey ? 'bg-lightest' : ''}`}
+            >
+                <span className='rioglyph rioglyph-sphere' style={{ color: entry.color }} />
+                <span className='text-color-darker text-capitalize-first-word'>{entry.value}</span>
+            </li>
+        ))}
+    </ul>
+);
 
 const data: CustomData[] = [
     {
@@ -463,7 +457,7 @@ const data: CustomData[] = [
     <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
         <div style="width: 0px; height: 0px; overflow: visible;">
             <div width="876" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; height: 268px;">
-                <div xmlns="http://www.w3.org/1999/xhtml" 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(440.844px, 186px);">
+                <div xmlns="http://www.w3.org/1999/xhtml" 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(440.844px, 138px);">
                     <div class="recharts-default-tooltip" role="status" aria-live="assertive" 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>
@@ -488,7 +482,7 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="711.6875" height="208" x1="75" y1="223" x2="786.6875" y2="223">
@@ -520,7 +514,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts2-clip">
@@ -542,12 +536,12 @@ const data: CustomData[] = [
                             </stop>
                         </linearGradient>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                         <g class="recharts-layer recharts-area">
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:r1:">
-                                        <rect x="75" y="0" width="676.1772189894161" height="224">
+                                        <rect x="75" y="0" width="656.110213211188" height="224">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -565,7 +559,7 @@ const data: CustomData[] = [
                             <g class="recharts-layer">
                                 <defs>
                                     <clipPath id="animationClipPath-recharts-area-:r2:">
-                                        <rect x="75" y="0" width="676.1772189894161" height="224">
+                                        <rect x="75" y="0" width="656.110213211188" height="224">
                                         </rect>
                                     </clipPath>
                                 </defs>
@@ -580,17 +574,17 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-reference-line">
                             <line y="3500" stroke-dasharray="3 3" stroke="#f19588 " fill="none" fill-opacity="1" stroke-width="1" x1="75" y1="20.777777777777782" x2="786.6875" y2="20.777777777777782" class="recharts-reference-line-line">
                             </line>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
                             <line angle="0" orientation="left" width="60" x="15" y="15" height="208" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="75" y1="15" x2="75" y2="223">
                             </line>
@@ -656,15 +650,15 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-yAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text orientation="left" width="60" height="208" stroke="none" x="67" y="223" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">

package/dist/docs/components/aspectRatioPlaceholder.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/aspectRatioPlaceholder
-*Captured:* 2026-03-06T10:40:54.667Z
+*Captured:* 2026-04-20T12:54:39.835Z
 
 Use the AspectRatioPlaceholder for having responsive elements with an aspect ratio.