@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/collapse.md

@@ -0,0 +1,189 @@
+# Collapse
+
+*Category:* Components
+*Section:* Show/Hide
+*Source:* https://uikit.developers.rio.cloud/#components/collapse
+*Captured:* 2025-12-12T12:38:20.873Z
+
+The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.
+
+## Collapse
+
+> Note: In case the content element you pass in as child has margins, wrap it within another div to smoothen the animation.
+
+### Example: Content will stay in the DOM even when it is collapsed
+
+Content will stay in the DOM even when it is collapsed
+Hide content
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+Dropdown
+
+#### Summary
+
+Content will stay in the DOM even when it is collapsed
+Hide content
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+Dropdown
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Collapse from '@rio-cloud/rio-uikit/Collapse';
+import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import { dummyText } from '../../../utils/data';
+
+export default () => {
+    const [show, setShow] = useState(true);
+
+    return (
+        <>
+            <FormLabel>Content will stay in the DOM even when it is collapsed</FormLabel>
+            <div>
+                <ToggleButton className='margin-bottom-10' active={show} onClick={() => setShow(!show)}>
+                    {show ? 'Hide content' : 'Show content'}
+                </ToggleButton>
+                <Collapse
+                    open={show}
+                    onEntered={() => Notification.info('opened')}
+                    onExited={() => Notification.info('closed')}
+                >
+                    <div className='panel-wrapper'>
+                        <div className='panel panel-default'>
+                            <div className='panel-body'>
+                                <div className='margin-bottom-15'>{dummyText}</div>
+                                <ButtonDropdown
+                                    title='Dropdown'
+                                    items={[{ value: 'Item 1' }, { value: 'Item 2' }, { value: 'Item 3' }]}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </Collapse>
+            </div>
+        </>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Content will stay in the DOM even when it is collapsed</div>
+<div>
+    <button type="button" class="btn btn-default btn-toggle active btn-component margin-bottom-10" tabindex="0">Hide content</button>
+    <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+        <div class="panel-wrapper">
+            <div class="panel panel-default">
+                <div class="panel-body">
+                    <div class="margin-bottom-15">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
+                    <div class="dropdown btn-group">
+                        <button type="button" id="1forn9hnveu" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| open | Boolean | false | Show the component and triggers the expand or collapse animation. |
+| timeout | Number | 270 | Duration of the collapse animation in milliseconds. |
+| appear | Boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
+| unmountOnExit | Boolean | false | Unmount the component (remove it from the DOM) when it is collapsed. |
+| onEntered | () => void | — | Callback fired after the component has expanded. |
+| onExited | () => {} | — | Callback fired after the component has collapsed. |
+| onAnimationStart | () => {} | — | Callback fired when the animation starts for either expand or collapse. |
+| children | any | — | Any component given to be expanded or collapsed. |
+
+### Example: Content will be removed from the DOM when it is collapsed and mounted again on show
+
+Content will be removed from the DOM when it is collapsed and mounted again on show
+Hide content
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+#### Summary
+
+Content will be removed from the DOM when it is collapsed and mounted again on show
+Hide content
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Collapse from '@rio-cloud/rio-uikit/Collapse';
+import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import { dummyText } from '../../../utils/data';
+
+export default () => {
+    const [show, setShow] = useState(true);
+
+    return (
+        <>
+            <FormLabel>Content will be removed from the DOM when it is collapsed and mounted again on show</FormLabel>
+            <div>
+                <ToggleButton className='margin-bottom-10' active={show} onClick={() => setShow(prevShow => !prevShow)}>
+                    {show ? 'Hide content' : 'Show content'}
+                </ToggleButton>
+                <Collapse
+                    open={show}
+                    onEntered={() => Notification.info('opened')}
+                    onExited={() => Notification.info('closed')}
+                    unmountOnExit
+                >
+                    <div className='panel-wrapper height-150'>
+                        <div className='panel panel-default'>
+                            <div className='panel-body'>{dummyText}</div>
+                        </div>
+                    </div>
+                </Collapse>
+            </div>
+        </>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Content will be removed from the DOM when it is collapsed and mounted again on show</div>
+<div>
+    <button type="button" class="btn btn-default btn-toggle active btn-component margin-bottom-10" tabindex="0">Hide content</button>
+    <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+        <div class="panel-wrapper height-150">
+            <div class="panel panel-default">
+                <div class="panel-body">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| open | Boolean | false | Show the component and triggers the expand or collapse animation. |
+| timeout | Number | 270 | Duration of the collapse animation in milliseconds. |
+| appear | Boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
+| unmountOnExit | Boolean | false | Unmount the component (remove it from the DOM) when it is collapsed. |
+| onEntered | () => void | — | Callback fired after the component has expanded. |
+| onExited | () => {} | — | Callback fired after the component has collapsed. |
+| onAnimationStart | () => {} | — | Callback fired when the animation starts for either expand or collapse. |
+| children | any | — | Any component given to be expanded or collapsed. |

package/dist/docs/components/composedCharts.md

@@ -0,0 +1,424 @@
+# ComposedChart
+
+*Category:* Components
+*Section:* Charts
+*Source:* https://uikit.developers.rio.cloud/#components/composedCharts
+*Captured:* 2025-12-12T12:39:18.161Z
+
+## ComposedChart
+
+> 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: Simple ComposedChart
+
+Simple ComposedChart
+
+amt
+pv
+uv
+
+Page APage BPage CPage DPage EPage F
+
+#### Summary
+
+Simple ComposedChart
+
+amt
+pv
+uv
+
+Page APage BPage CPage DPage EPage F
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import ComposedChart from '@rio-cloud/rio-uikit/ComposedChart';
+import Line from '@rio-cloud/rio-uikit/Line';
+import Bar from '@rio-cloud/rio-uikit/Bar';
+import Area from '@rio-cloud/rio-uikit/Area';
+import Legend from '@rio-cloud/rio-uikit/Legend';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+type CustomData = {
+    name: string;
+    uv: number;
+    pv: number;
+    amt: number;
+};
+
+export default () => {
+    const [highlightedElement, setHighlightedElement] = useState<string | null>(null);
+
+    const handleLegendMouseEnter = (dataKey: string) => setHighlightedElement(dataKey);
+    const handleLegendMouseLeave = () => setHighlightedElement(null);
+
+    return (
+        <>
+            <FormLabel>Simple ComposedChart</FormLabel>
+            <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
+                <ComposedChart
+                    data={data}
+                    dataKey={(entry: CustomData) => entry.name}
+                    xAxisOptions={{ padding: { left: 30, right: 30 } }}
+                    showGrid
+                    gridOptions={{ vertical: false, strokeDasharray: '0', stroke: 'gray-lighter' }}
+                    legend={
+                        <Legend
+                            content={
+                                <CustomLegend
+                                    highlightedElement={highlightedElement}
+                                    onMouseEnter={handleLegendMouseEnter}
+                                    onMouseLeave={handleLegendMouseLeave}
+                                />
+                            }
+                        />
+                    }
+                    lines={[
+                        <Line
+                            key='line'
+                            dataKey='uv'
+                            strokeColor='brand-primary'
+                            strokeWidth={highlightedElement === 'uv' ? 2 : 1}
+                            dot={{ strokeWidth: highlightedElement === 'uv' ? 2 : 1 }}
+                        />,
+                    ]}
+                    areas={[
+                        <Area
+                            key='area'
+                            dataKey='amt'
+                            strokeColor='color-spectrum-pink'
+                            fill='color-spectrum-pink'
+                            fillOpacity={highlightedElement === 'amt' || !highlightedElement ? 0.5 : 0.1}
+                        />,
+                    ]}
+                    bars={[
+                        <Bar
+                            key='bar'
+                            dataKey='pv'
+                            color='color-spectrum-indigo'
+                            radius={[3, 3, 0, 0]}
+                            fillOpacity={highlightedElement === 'pv' || !highlightedElement ? 1 : 0.3}
+                        />,
+                    ]}
+                />
+            </div>
+        </>
+    );
+};
+
+type CustomLegendProps = {
+    payload?: { dataKey: string; value: string; color: string }[];
+    highlightedElement: string | null;
+    onMouseEnter: (dataKey: string) => void;
+    onMouseLeave: () => void;
+};
+
+const CustomLegend = ({ payload, highlightedElement, 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 ${highlightedElement === 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[] = [
+    {
+        name: 'Page A',
+        uv: 590,
+        pv: 800,
+        amt: 1400,
+    },
+    {
+        name: 'Page B',
+        uv: 868,
+        pv: 967,
+        amt: 1506,
+    },
+    {
+        name: 'Page C',
+        uv: 1397,
+        pv: 1098,
+        amt: 989,
+    },
+    {
+        name: 'Page D',
+        uv: 1480,
+        pv: 1200,
+        amt: 1228,
+    },
+    {
+        name: 'Page E',
+        uv: 1520,
+        pv: 1108,
+        amt: 1100,
+    },
+    {
+        name: 'Page F',
+        uv: 1400,
+        pv: 680,
+        amt: 1700,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Simple ComposedChart</div>
+<div class="panel panel-default panel-body margin-bottom-0 height-200 max-width-500">
+    <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="468" height="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 468px; height: 168px;">
+                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                    <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>
+                    </div>
+                </div>
+                <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 15px; top: 15px;">
+                    <ul class="list-style-none padding-left-20">
+                        <li class="cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ">
+                            <span class="rioglyph rioglyph-sphere" style="color: rgb(232, 120, 182);">
+                            </span>
+                            <span class="text-color-darker text-capitalize-first-word">amt</span>
+                        </li>
+                        <li class="cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ">
+                            <span class="rioglyph rioglyph-sphere" style="color: rgb(142, 150, 235);">
+                            </span>
+                            <span class="text-color-darker text-capitalize-first-word">pv</span>
+                        </li>
+                        <li class="cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ">
+                            <span class="rioglyph rioglyph-sphere" style="color: rgb(48, 180, 192);">
+                            </span>
+                            <span class="text-color-darker text-capitalize-first-word">uv</span>
+                        </li>
+                    </ul>
+                </div>
+                <svg role="application" tabindex="0" class="recharts-surface" width="468" height="168" viewBox="0 0 468 168" style="width: 100%; height: 100%; display: block;">
+                    <title>
+                    </title>
+                    <desc>
+                    </desc>
+                    <g tabindex="-1" id="recharts-zindex--100-:r1:">
+                        <g class="recharts-cartesian-grid">
+                            <g class="recharts-cartesian-grid-horizontal">
+                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="123" x2="380.03125" y2="123">
+                                </line>
+                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="96" x2="380.03125" y2="96">
+                                </line>
+                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="69" x2="380.03125" y2="69">
+                                </line>
+                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="42" x2="380.03125" y2="42">
+                                </line>
+                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="15" x2="380.03125" y2="15">
+                                </line>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex--50-:r2:">
+                    </g>
+                    <defs>
+                        <clipPath id="recharts1-clip">
+                            <rect x="15" y="15" height="108" width="365.03125">
+                            </rect>
+                        </clipPath>
+                    </defs>
+                    <g tabindex="-1" id="recharts-zindex-100-:r6:">
+                        <g class="recharts-layer recharts-area">
+                            <g class="recharts-layer">
+                                <defs>
+                                    <clipPath id="animationClipPath-recharts-area-:r3:">
+                                        <rect x="70.41927083333333" y="0" width="56.09365679331344" height="124">
+                                        </rect>
+                                    </clipPath>
+                                </defs>
+                                <g class="recharts-layer" clip-path="url(#animationClipPath-recharts-area-:r3:)">
+                                    <g class="recharts-layer">
+                                        <path stroke-width="1" fill="#e878b6 " fill-opacity="0.5" height="108" stroke="none" width="365.03125" id="recharts-area-:r3:" class="recharts-curve recharts-area-area" d="M70.419,39C87.365,35.82,104.312,32.64,121.258,32.64C138.204,32.64,155.15,63.66,172.096,63.66C189.043,63.66,205.989,49.32,222.935,49.32C239.881,49.32,256.827,57,273.773,57C290.72,57,307.666,39,324.612,21L324.612,123C307.666,123,290.72,123,273.773,123C256.827,123,239.881,123,222.935,123C205.989,123,189.043,123,172.096,123C155.15,123,138.204,123,121.258,123C104.312,123,87.365,123,70.419,123Z">
+                                        </path>
+                                        <path stroke-width="1" fill="none" fill-opacity="0.5" height="108" stroke="#e878b6 " width="365.03125" class="recharts-curve recharts-area-curve" d="M70.419,39C87.365,35.82,104.312,32.64,121.258,32.64C138.204,32.64,155.15,63.66,172.096,63.66C189.043,63.66,205.989,49.32,222.935,49.32C239.881,49.32,256.827,57,273.773,57C290.72,57,307.666,39,324.612,21">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-200-:r7:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-300-:r8:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r4:">
+                            <g class="recharts-layer recharts-bar-rectangles">
+                                <g class="recharts-layer">
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page A" x="50.08385416666667" y="79.7343465865101" width="40" height="43.2656534134899" class="recharts-rectangle" d="M50.08385416666667,82.7343465865101A 3,3,0,0,1,53.08385416666667,79.7343465865101L 87.08385416666667,79.7343465865101A 3,3,0,0,1,
+        90.08385416666667,82.7343465865101L 90.08385416666667,123L 50.08385416666667,123Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page B" x="100.92239583333333" y="70.70264143644405" width="40" height="52.29735856355594" class="recharts-rectangle" d="M100.92239583333333,73.70264143644405A 3,3,0,0,1,103.92239583333333,70.70264143644405L 137.92239583333333,70.70264143644405A 3,3,0,0,1,
+        140.92239583333333,73.70264143644405L 140.92239583333333,123L 100.92239583333333,123Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page C" x="151.76093749999998" y="63.617890689985096" width="40" height="59.382109310014904" class="recharts-rectangle" d="M151.76093749999998,66.6178906899851A 3,3,0,0,1,154.76093749999998,63.617890689985096L 188.76093749999998,63.617890689985096A 3,3,0,0,1,
+        191.76093749999998,66.6178906899851L 191.76093749999998,123L 151.76093749999998,123Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page D" x="202.59947916666667" y="58.101519879765135" width="40" height="64.89848012023486" class="recharts-rectangle" d="M202.59947916666667,61.101519879765135A 3,3,0,0,1,205.59947916666667,58.101519879765135L 239.59947916666667,58.101519879765135A 3,3,0,0,1,
+        242.59947916666667,61.101519879765135L 242.59947916666667,123L 202.59947916666667,123Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page E" x="253.43802083333333" y="63.07707002231648" width="40" height="59.92292997768352" class="recharts-rectangle" d="M253.43802083333333,66.07707002231648A 3,3,0,0,1,256.4380208333333,63.07707002231648L 290.4380208333333,63.07707002231648A 3,3,0,0,1,
+        293.4380208333333,66.07707002231648L 293.4380208333333,123L 253.43802083333333,123Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill-opacity="1" fill="#8e96eb " name="Page F" x="304.27656249999995" y="86.22419459853359" width="40" height="36.77580540146642" class="recharts-rectangle" d="M304.27656249999995,89.22419459853359A 3,3,0,0,1,307.27656249999995,86.22419459853359L 341.27656249999995,86.22419459853359A 3,3,0,0,1,
+        344.27656249999995,89.22419459853359L 344.27656249999995,123L 304.27656249999995,123Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-400-:r9:">
+                        <g class="recharts-layer recharts-line">
+                            <path stroke-width="1" stroke="#30b4c0 " fill="none" id="recharts-line-:r5:" height="108" width="365.03125" class="recharts-curve recharts-line-curve" stroke-dasharray="59.00612415696692px 208.38465343092372px" d="M70.419,87.6C87.365,83.295,104.312,78.99,121.258,70.92C138.204,62.85,155.15,42.5,172.096,39.18C189.043,35.86,205.989,35.43,222.935,34.2C239.881,32.97,256.827,31.8,273.773,31.8C290.72,31.8,307.666,35.4,324.612,39">
+                            </path>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-500-:ra:">
+                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
+                            <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="123" x2="380.03125" y2="123">
+                            </line>
+                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="70.41927083333333" y1="129" x2="70.41927083333333" y2="123">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="121.25781249999999" y1="129" x2="121.25781249999999" y2="123">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="172.09635416666666" y1="129" x2="172.09635416666666" y2="123">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="222.93489583333334" y1="129" x2="222.93489583333334" y2="123">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="273.7734375" y1="129" x2="273.7734375" y2="123">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="324.61197916666663" y1="129" x2="324.61197916666663" y2="123">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-600-:rb:">
+                        <g class="recharts-layer recharts-line-dots">
+                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="70.41927083333333" cy="87.60000000000001" class="recharts-dot recharts-line-dot">
+                            </circle>
+                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="121.25781249999999" cy="70.92" class="recharts-dot recharts-line-dot">
+                            </circle>
+                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="172.09635416666666" cy="39.18000000000001" class="recharts-dot recharts-line-dot">
+                            </circle>
+                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="222.93489583333334" cy="34.2" class="recharts-dot recharts-line-dot">
+                            </circle>
+                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="273.7734375" cy="31.799999999999997" class="recharts-dot recharts-line-dot">
+                            </circle>
+                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="324.61197916666663" cy="39" class="recharts-dot recharts-line-dot">
+                            </circle>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1000-:rc:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1100-:rd:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1200-:re:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-2000-:rf:">
+                        <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="365.03125" stroke="none" x="70.41927083333333" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="70.41927083333333" dy="0.71em">Page A</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="121.25781249999999" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="121.25781249999999" dy="0.71em">Page B</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="172.09635416666666" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="172.09635416666666" dy="0.71em">Page C</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="222.93489583333334" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="222.93489583333334" dy="0.71em">Page D</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="273.7734375" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="273.7734375" dy="0.71em">Page E</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="324.61197916666663" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="324.61197916666663" dy="0.71em">Page F</tspan>
+                                </text>
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: ComposedChart
+
+### ComposedChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | 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" }] |
+| dataKey | String \| Number \| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |
+| dataUnit | string | — | The unit of data displayed in the chart. |
+| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |
+| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |
+| showYAxis | Boolean | false | Defines whether or not the y-axis shall be rendered. |
+| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |
+| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |
+| additionalAxes | React.ReactElement<XAxisProps \| YAxisProps>[] | — | Render a list of additional axes. This includes YAxis and XAxis. |
+| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |
+| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
+| brush | Boolean | false | Defines whether or not the brush component shall be used. |
+| areas | Array of Area | [] | Renders the provided Area components. |
+| lines | Array of Line | [] | Renders the provided Line components. |
+| bars | Array of Bar | [] | Renders the provided Bar components. |
+| ... |  | — | Additional props are passed to the underlying ComposedChart component. Details can be found here: https://recharts.org/en-US/api/ComposedChart |