@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/statsWidgets.md

@@ -0,0 +1,636 @@
+# StatsWidgets
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/statsWidgets
+*Captured:* 2025-12-12T12:38:46.047Z
+
+## StatsWidgets
+
+**StatsWidget with another body component and additional footer**
+
+**Interactive StatsWidget with filter option**
+
+### Example: Example 1
+
+Fleet
+23
+
+Trucks
+
+14
+
+Trailer
+
+111
+
+Driver
+
+Notifications
+45
+
+Exceptions
+
+144
+
+Warnings
+
+Activity
+15
+30
+
+Availability
+
+12
+
+Driving
+
+12
+
+Working
+
+9
+
+Resting
+
+Full width widget
+
+23
+
+Trucks
+
+14
+
+Trailer
+
+111
+
+Driver
+
+#### Summary
+
+Fleet
+23
+
+Trucks
+
+14
+
+Trailer
+
+111
+
+Driver
+
+Notifications
+45
+
+Exceptions
+
+144
+
+Warnings
+
+Activity
+15
+30
+
+Availability
+
+12
+
+Driving
+
+12
+
+Working
+
+9
+
+Resting
+
+Full width widget
+
+23
+
+Trucks
+
+14
+
+Trailer
+
+111
+
+Driver
+
+#### React (tsx)
+
+```tsx
+import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
+import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
+import StatsWidgetNumber from '@rio-cloud/rio-uikit/StatsWidgetNumber';
+import StatsWidgetSpacer from '@rio-cloud/rio-uikit/StatsWidgetSpacer';
+
+export default () => (
+    <>
+        <StatsWidgets className='margin-bottom-20'>
+            <StatsWidget>
+                <StatsWidget.Header>Fleet</StatsWidget.Header>
+                <StatsWidget.Body>
+                    <StatsWidgetNumber value='23' label='Trucks' />
+                    <StatsWidgetSpacer />
+                    <StatsWidgetNumber value='14' label='Trailer' />
+                    <StatsWidgetSpacer />
+                    <StatsWidgetNumber value='111' label='Driver' />
+                    <StatsWidgetSpacer />
+                </StatsWidget.Body>
+            </StatsWidget>
+
+            <StatsWidget>
+                <StatsWidget.Header>Notifications</StatsWidget.Header>
+                <StatsWidget.Body>
+                    <StatsWidgetNumber className='text-color-danger' value={45} label='Exceptions' />
+                    <StatsWidgetSpacer />
+                    <StatsWidgetNumber className='text-color-warning' value={144} label='Warnings' />
+                </StatsWidget.Body>
+            </StatsWidget>
+
+            <StatsWidget hasFilter onFilterReset={() => {}}>
+                <StatsWidget.Header>Activity</StatsWidget.Header>
+                <StatsWidget.Body>
+                    <StatsWidgetNumber
+                        className='text-color-status-available'
+                        value={15}
+                        total={30}
+                        label='Availability'
+                        clickable
+                    />
+                    <StatsWidgetSpacer />
+                    <StatsWidgetNumber className='text-color-status-driving' value={12} label='Driving' />
+                    <StatsWidgetSpacer />
+                    <StatsWidgetNumber className='text-color-status-working' value={12} label='Working' />
+                    <StatsWidgetSpacer />
+                    <StatsWidgetNumber className='text-color-status-resting' value={9} label='Resting' />
+                </StatsWidget.Body>
+            </StatsWidget>
+        </StatsWidgets>
+
+        <StatsWidgets>
+            <StatsWidget>
+                <StatsWidget.Header>Full width widget</StatsWidget.Header>
+                <StatsWidget.Body fullWidth>
+                    <StatsWidgetNumber value='23' label='Trucks' />
+                    <StatsWidgetSpacer />
+                    <StatsWidgetNumber value='14' label='Trailer' />
+                    <StatsWidgetSpacer />
+                    <StatsWidgetNumber value='111' label='Driver' />
+                </StatsWidget.Body>
+            </StatsWidget>
+        </StatsWidgets>
+    </>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="StatsWidget-wrapper margin-bottom-20">
+    <div class="StatsWidget">
+        <div class="StatsWidget-header">Fleet</div>
+        <div class="StatsWidget-body">
+            <div class="StatsWidgetNumber">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">23</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Trucks</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+            <div class="StatsWidgetNumber">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">14</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Trailer</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+            <div class="StatsWidgetNumber">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">111</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Driver</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+        </div>
+    </div>
+    <div class="StatsWidget">
+        <div class="StatsWidget-header">Notifications</div>
+        <div class="StatsWidget-body">
+            <div class="StatsWidgetNumber text-color-danger">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">45</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Exceptions</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+            <div class="StatsWidgetNumber text-color-warning">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">144</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Warnings</div>
+            </div>
+        </div>
+    </div>
+    <div class="StatsWidget">
+        <span class="bg-light hover-bg-highlight display-flex justify-content-center align-items-center padding-2 rounded-circle position-absolute top-15 right-15 display-block height-20 width-20 cursor-pointer">
+            <span class="rioglyph rioglyph-revert text-color-white text-size-12">
+            </span>
+        </span>
+        <div class="StatsWidget-header">Activity</div>
+        <div class="StatsWidget-body">
+            <div class="StatsWidgetNumber cursor-pointer text-color-status-available">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">15</div>
+                    <div class="StatsWidgetNumber-total">30</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Availability</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+            <div class="StatsWidgetNumber text-color-status-driving">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">12</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Driving</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+            <div class="StatsWidgetNumber text-color-status-working">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">12</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Working</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+            <div class="StatsWidgetNumber text-color-status-resting">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">9</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Resting</div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="StatsWidget-wrapper">
+    <div class="StatsWidget">
+        <div class="StatsWidget-header">Full width widget</div>
+        <div class="StatsWidget-body full-width">
+            <div class="StatsWidget-body-column-spacer invisible">
+            </div>
+            <div class="StatsWidgetNumber">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">23</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Trucks</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+            <div class="StatsWidgetNumber">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">14</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Trailer</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+            <div class="StatsWidgetNumber">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">111</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Driver</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer invisible">
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Addional class names to be added to the element. |
+
+#### Props: StatsWidget
+
+### StatsWidget
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| hasFilter | Boolean | false | Defines whether a filter is active for this stats widget. |
+| onFilterReset | Function | — | Callback to reset the filter. |
+
+#### Props: StatsWidgetBody
+
+### StatsWidgetBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| fullWidth | Boolean | — | Whether to use flex space-between for StatsWidgetNumbers. |
+
+#### Props: StatsWidgetNumber
+
+### StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | String / Number / Node | — | The value to be shown. |
+| total | String / Number / Node | — | The total value to be shown i.e. in combination with an active filter. |
+| label | String / Node | — | The label shown below the number. |
+| clickable | Boolean | false | Defines whether or not the number is clickable i.e. in combination with a filter. |
+| onClick | Function | — | Callback for when the user clicks the number widget. |
+
+### Example: Example 2
+
+Current activity
+
+42 min resting
+
+Last update 2 minutes ago
+
+#### Summary
+
+Current activity
+
+42 min resting
+
+Last update 2 minutes ago
+
+#### React (tsx)
+
+```tsx
+import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
+import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
+import StatusBar from '@rio-cloud/rio-uikit/StatusBar';
+
+export default () => (
+    <StatsWidgets>
+        <StatsWidget className='shadow-default'>
+            <StatsWidget.Header>Current activity</StatsWidget.Header>
+            <StatsWidget.Body className='padding-20'>
+                <StatusBar
+                    icon={{
+                        name: 'rioglyph-status-resting',
+                        color: 'text-color-status-resting',
+                    }}
+                    label={{
+                        value: '42 min resting',
+                        alignment: 'top',
+                        color: 'text-color-status-resting',
+                    }}
+                    progress={[
+                        {
+                            percentage: 30,
+                            color: 'progress-bar-status-resting',
+                            tooltip: <span>30%</span>,
+                        },
+                        {
+                            percentage: 70,
+                            color: 'progress-bar-light',
+                            tooltip: <span>70%</span>,
+                        },
+                    ]}
+                />
+            </StatsWidget.Body>
+            <StatsWidget.Footer className='bg-lightest text-color-gray'>Last update 2 minutes ago</StatsWidget.Footer>
+        </StatsWidget>
+    </StatsWidgets>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="StatsWidget-wrapper">
+    <div class="StatsWidget shadow-default">
+        <div class="StatsWidget-header">Current activity</div>
+        <div class="StatsWidget-body padding-20">
+            <div class="StatusBar width-100pct display-flex align-items-end">
+                <div class="flex-order-1 margin-right-5">
+                    <span class="rioglyph rioglyph-status-resting text-color-status-resting text-size-h3">
+                    </span>
+                </div>
+                <div class="display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10">
+                    <div class="display-flex justify-content-center">
+                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold">42 min resting</span>
+                    </div>
+                    <div class="display-flex flex-1-0">
+                        <div class="progress margin-0 flex-1-0 height-5">
+                            <div class="progress-bar progress-bar-status-resting progress-divider" style="width: 30%;">
+                            </div>
+                            <div class="progress-bar progress-bar-light progress-divider" style="width: 70%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="StatsWidget-footer bg-lightest text-color-gray">Last update 2 minutes ago</div>
+    </div>
+</div>
+```
+
+#### Props: StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Addional class names to be added to the element. |
+
+#### Props: StatsWidget
+
+### StatsWidget
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| hasFilter | Boolean | false | Defines whether a filter is active for this stats widget. |
+| onFilterReset | Function | — | Callback to reset the filter. |
+
+#### Props: StatsWidgetBody
+
+### StatsWidgetBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| fullWidth | Boolean | — | Whether to use flex space-between for StatsWidgetNumbers. |
+
+#### Props: StatsWidgetNumber
+
+### StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | String / Number / Node | — | The value to be shown. |
+| total | String / Number / Node | — | The total value to be shown i.e. in combination with an active filter. |
+| label | String / Node | — | The label shown below the number. |
+| clickable | Boolean | false | Defines whether or not the number is clickable i.e. in combination with a filter. |
+| onClick | Function | — | Callback for when the user clicks the number widget. |
+
+### Example: Example 3
+
+Notifications
+45
+
+Exceptions
+
+144
+
+Warnings
+
+#### Summary
+
+Notifications
+45
+
+Exceptions
+
+144
+
+Warnings
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
+import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
+import StatsWidgetNumber from '@rio-cloud/rio-uikit/StatsWidgetNumber';
+import StatsWidgetSpacer from '@rio-cloud/rio-uikit/StatsWidgetSpacer';
+
+type Stat = {
+    value: number;
+    total?: number;
+};
+
+type Stats = {
+    exceptions: Stat;
+    warnings: Stat;
+};
+
+const defaultStats: Stats = {
+    exceptions: { value: 45 },
+    warnings: { value: 144 },
+};
+
+const mockFilteredStats: Stats = {
+    exceptions: { value: 17, total: 45 },
+    warnings: { value: 22, total: 144 },
+};
+
+export default () => {
+    const [hasFilter, setHasFilter] = useState(false);
+
+    const handleToggleFilter = () => setHasFilter(!hasFilter);
+    const handleResetFilters = () => setHasFilter(false);
+
+    const stats = hasFilter ? mockFilteredStats : defaultStats;
+
+    return (
+        <StatsWidgets>
+            <StatsWidget hasFilter={hasFilter} onFilterReset={handleResetFilters}>
+                <StatsWidget.Header>Notifications</StatsWidget.Header>
+                <StatsWidget.Body>
+                    <StatsWidgetNumber
+                        className='text-color-danger'
+                        value={stats.exceptions.value}
+                        total={stats.exceptions.total}
+                        label='Exceptions'
+                        onClick={handleToggleFilter}
+                        clickable
+                    />
+                    <StatsWidgetSpacer />
+                    <StatsWidgetNumber
+                        className='text-color-warning'
+                        value={stats.warnings.value}
+                        total={stats.warnings.total}
+                        label='Warnings'
+                        onClick={handleToggleFilter}
+                        clickable
+                    />
+                </StatsWidget.Body>
+            </StatsWidget>
+        </StatsWidgets>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="StatsWidget-wrapper">
+    <div class="StatsWidget">
+        <div class="StatsWidget-header">Notifications</div>
+        <div class="StatsWidget-body">
+            <div class="StatsWidgetNumber cursor-pointer text-color-danger">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">45</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Exceptions</div>
+            </div>
+            <div class="StatsWidget-body-column-spacer">
+            </div>
+            <div class="StatsWidgetNumber cursor-pointer text-color-warning">
+                <div class="StatsWidgetNumber-counter">
+                    <div class="StatsWidgetNumber-value">144</div>
+                </div>
+                <div class="StatsWidgetNumber-label">Warnings</div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Addional class names to be added to the element. |
+
+#### Props: StatsWidget
+
+### StatsWidget
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| hasFilter | Boolean | false | Defines whether a filter is active for this stats widget. |
+| onFilterReset | Function | — | Callback to reset the filter. |
+
+#### Props: StatsWidgetBody
+
+### StatsWidgetBody
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| fullWidth | Boolean | — | Whether to use flex space-between for StatsWidgetNumbers. |
+
+#### Props: StatsWidgetNumber
+
+### StatsWidgetNumber
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | String / Number / Node | — | The value to be shown. |
+| total | String / Number / Node | — | The total value to be shown i.e. in combination with an active filter. |
+| label | String / Node | — | The label shown below the number. |
+| clickable | Boolean | false | Defines whether or not the number is clickable i.e. in combination with a filter. |
+| onClick | Function | — | Callback for when the user clicks the number widget. |