# StatsWidgets

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/statsWidgets
*Captured:* 2026-04-27T14:58:06.576Z

## 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

#### 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 | — | Additional class names to be added to the element. |

#### Props: StatsWidget

### StatsWidget

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| onFilterReset | MouseEventHandler | — | Callback to reset the filter. |
| hasFilter | boolean | false | Defines whether a filter is active for this widget. |
| className | string | — | Additional class names to be added to the element. |

#### Props: StatsWidgetBody

### StatsWidgetBody

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| fullWidth | boolean | false | Whether to use flex space-between for StatsWidgetNumbers. |
| className | string | — | Additional class names to be added to the element. |

#### Props: StatsWidgetNumber

### StatsWidgetNumber

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | string \| number \| ReactNode | 0 | The value to be shown. |
| total | string \| number \| ReactNode | — | The total value to be shown i.e. in combination with an active filter. |
| label | string \| ReactNode | — | The label shown below the number. |
| clickable | boolean | false | Defines whether the number is clickable i.e. in combination with a filter. |
| onClick | MouseEventHandler | — | Callback for when the user clicks the number widget. |
| className | string | — | Additional class names to be added to the element. |

### Example: Example 2

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 | — | Additional class names to be added to the element. |

#### Props: StatsWidget

### StatsWidget

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| onFilterReset | MouseEventHandler | — | Callback to reset the filter. |
| hasFilter | boolean | false | Defines whether a filter is active for this widget. |
| className | string | — | Additional class names to be added to the element. |

#### Props: StatsWidgetBody

### StatsWidgetBody

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| fullWidth | boolean | false | Whether to use flex space-between for StatsWidgetNumbers. |
| className | string | — | Additional class names to be added to the element. |

#### Props: StatsWidgetNumber

### StatsWidgetNumber

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | string \| number \| ReactNode | 0 | The value to be shown. |
| total | string \| number \| ReactNode | — | The total value to be shown i.e. in combination with an active filter. |
| label | string \| ReactNode | — | The label shown below the number. |
| clickable | boolean | false | Defines whether the number is clickable i.e. in combination with a filter. |
| onClick | MouseEventHandler | — | Callback for when the user clicks the number widget. |
| className | string | — | Additional class names to be added to the element. |

### Example: Example 3

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 | — | Additional class names to be added to the element. |

#### Props: StatsWidget

### StatsWidget

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| onFilterReset | MouseEventHandler | — | Callback to reset the filter. |
| hasFilter | boolean | false | Defines whether a filter is active for this widget. |
| className | string | — | Additional class names to be added to the element. |

#### Props: StatsWidgetBody

### StatsWidgetBody

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| fullWidth | boolean | false | Whether to use flex space-between for StatsWidgetNumbers. |
| className | string | — | Additional class names to be added to the element. |

#### Props: StatsWidgetNumber

### StatsWidgetNumber

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | string \| number \| ReactNode | 0 | The value to be shown. |
| total | string \| number \| ReactNode | — | The total value to be shown i.e. in combination with an active filter. |
| label | string \| ReactNode | — | The label shown below the number. |
| clickable | boolean | false | Defines whether the number is clickable i.e. in combination with a filter. |
| onClick | MouseEventHandler | — | Callback for when the user clicks the number widget. |
| className | string | — | Additional class names to be added to the element. |