# Stats blocks

*Category:* Templates
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/templates/stats-blocks
*Captured:* 2026-04-27T14:59:26.924Z

## Stats blocks

### Example: Total inventory

Stats page
Overview of your supply chain operations

Total inventory
1574 units

12% from last month

Open orders
48

5% from last month

In transit
19

-3% from last month

Issues
3

#### React (tsx)

```tsx
import { faker } from '@faker-js/faker';
import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';

export default () => {
    const data = {
        inventory: faker.number.int({ min: 800, max: 1600 }),
        inventoryChange: 12,
        orders: faker.number.int({ min: 20, max: 80 }),
        ordersChange: 5,
        inTransit: faker.number.int({ min: 5, max: 25 }),
        inTransitChange: -3,
        issues: faker.number.int({ min: 0, max: 10 }),
    };

    return (
        <div className='margin-25-md'>
            <div className='text-size-h2 text-bold text-color-darkest'>Stats page</div>
            <p className='text-color-darker margin-top-0'>Overview of your supply chain operations</p>

            <StatsWidgets className='display-grid grid-auto-fit-250'>
                <StatsWidget className='shadow-default display-flex flex-column'>
                    <div className='flex-1-1 display-flex gap-15 padding-20'>
                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
                            <span className='rioglyph rioglyph-parcel text-size-200pct text-color-darker' />
                        </div>
                        <div>
                            <div className='text-color-dark'>Total inventory</div>
                            <div className='text-size-h3 text-color-darkest line-height-125rel'>
                                {data.inventory} units
                            </div>
                        </div>
                    </div>
                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>
                        <span className='text-medium text-color-success display-flex gap-2 align-items-center'>
                            <span className='rioglyph rioglyph-arrow-up' />
                            {data.inventoryChange}%
                        </span>
                        <span className='text-color-dark'>from last month</span>
                    </div>
                </StatsWidget>

                <StatsWidget className='shadow-default display-flex flex-column'>
                    <div className='flex-1-1 display-flex gap-15 padding-20'>
                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
                            <span className='rioglyph rioglyph-order text-size-200pct text-color-darker' />
                        </div>
                        <div>
                            <div className='text-color-dark'>Open orders</div>
                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.orders}</div>
                        </div>
                    </div>
                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>
                        <span className='text-medium text-color-success display-flex gap-2 align-items-center'>
                            <span className='rioglyph rioglyph-arrow-up' />
                            {data.ordersChange}%
                        </span>
                        <span className='text-color-dark'>from last month</span>
                    </div>
                </StatsWidget>

                <StatsWidget className='shadow-default display-flex flex-column'>
                    <div className='flex-1-1 display-flex gap-15 padding-20'>
                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
                            <span className='rioglyph rioglyph-delivery text-size-200pct text-color-darker' />
                        </div>
                        <div>
                            <div className='text-color-dark'>In transit</div>
                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.inTransit}</div>
                        </div>
                    </div>
                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>
                        <span className='text-medium text-color-danger display-flex gap-2 align-items-center'>
                            <span className='rioglyph rioglyph-arrow-down' />
                            {data.inTransitChange}%
                        </span>
                        <span className='text-color-dark'>from last month</span>
                    </div>
                </StatsWidget>

                <StatsWidget className='shadow-default display-flex flex-column'>
                    <div className='flex-1-1 display-flex gap-15 padding-20'>
                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
                            <span className='rioglyph rioglyph-warning-sign text-size-200pct text-color-warning' />
                        </div>
                        <div>
                            <div className='text-color-dark'>Issues</div>
                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.issues}</div>
                        </div>
                    </div>
                </StatsWidget>
            </StatsWidgets>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="margin-25-md">
    <div class="text-size-h2 text-bold text-color-darkest">Stats page</div>
    <p class="text-color-darker margin-top-0">Overview of your supply chain operations</p>
    <div class="StatsWidget-wrapper display-grid grid-auto-fit-250">
        <div class="StatsWidget shadow-default display-flex flex-column">
            <div class="flex-1-1 display-flex gap-15 padding-20">
                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
                    <span class="rioglyph rioglyph-parcel text-size-200pct text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-color-dark">Total inventory</div>
                    <div class="text-size-h3 text-color-darkest line-height-125rel">1574 units</div>
                </div>
            </div>
            <div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
                <span class="text-medium text-color-success display-flex gap-2 align-items-center">
                    <span class="rioglyph rioglyph-arrow-up">
                    </span>12%</span>
                <span class="text-color-dark">from last month</span>
            </div>
        </div>
        <div class="StatsWidget shadow-default display-flex flex-column">
            <div class="flex-1-1 display-flex gap-15 padding-20">
                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
                    <span class="rioglyph rioglyph-order text-size-200pct text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-color-dark">Open orders</div>
                    <div class="text-size-h3 text-color-darkest line-height-125rel">48</div>
                </div>
            </div>
            <div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
                <span class="text-medium text-color-success display-flex gap-2 align-items-center">
                    <span class="rioglyph rioglyph-arrow-up">
                    </span>5%</span>
                <span class="text-color-dark">from last month</span>
            </div>
        </div>
        <div class="StatsWidget shadow-default display-flex flex-column">
            <div class="flex-1-1 display-flex gap-15 padding-20">
                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
                    <span class="rioglyph rioglyph-delivery text-size-200pct text-color-darker">
                    </span>
                </div>
                <div>
                    <div class="text-color-dark">In transit</div>
                    <div class="text-size-h3 text-color-darkest line-height-125rel">19</div>
                </div>
            </div>
            <div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
                <span class="text-medium text-color-danger display-flex gap-2 align-items-center">
                    <span class="rioglyph rioglyph-arrow-down">
                    </span>-3%</span>
                <span class="text-color-dark">from last month</span>
            </div>
        </div>
        <div class="StatsWidget shadow-default display-flex flex-column">
            <div class="flex-1-1 display-flex gap-15 padding-20">
                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
                    <span class="rioglyph rioglyph-warning-sign text-size-200pct text-color-warning">
                    </span>
                </div>
                <div>
                    <div class="text-color-dark">Issues</div>
                    <div class="text-size-h3 text-color-darkest line-height-125rel">3</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

### Example: Orders delivered

25M +
Orders delivered

99.99%
Total uptime

4.8
Customer score

#### React (tsx)

```tsx
import { FormattedNumber } from 'react-intl';

import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';

export default () => (
    <div className='margin-25-md'>
        <StatsWidgets className='display-grid grid-auto-fit-150'>
            <StatsWidget className='padding-20'>
                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>
                <div className='text-color-dark padding-top-5'>Orders delivered</div>
            </StatsWidget>
            <StatsWidget className='padding-20'>
                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
                    <FormattedNumber value={99.99} style='unit' unit='percent' />
                </div>
                <div className='text-color-dark padding-top-5'>Total uptime</div>
            </StatsWidget>
            <StatsWidget className='padding-20'>
                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
                    <FormattedNumber value={4.8} />
                </div>
                <div className='text-color-dark padding-top-5'>Customer score</div>
            </StatsWidget>
        </StatsWidgets>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md">
    <div class="StatsWidget-wrapper display-grid grid-auto-fit-150">
        <div class="StatsWidget padding-20">
            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">25M +</div>
            <div class="text-color-dark padding-top-5">Orders delivered</div>
        </div>
        <div class="StatsWidget padding-20">
            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">99.99%</div>
            <div class="text-color-dark padding-top-5">Total uptime</div>
        </div>
        <div class="StatsWidget padding-20">
            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">4.8</div>
            <div class="text-color-dark padding-top-5">Customer score</div>
        </div>
    </div>
</div>
```

### Example: Total uptime

25M +
Orders delivered

99.99%
Total uptime

4.8
Customer score

#### React (tsx)

```tsx
import { FormattedNumber } from 'react-intl';

import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
import Divider from '@rio-cloud/rio-uikit/Divider';

export default () => (
    <div className='margin-25-md margin-auto'>
        <StatsWidgets>
            <div className='padding-20'>
                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>
                <div className='text-color-dar padding-y-5'>Orders delivered</div>
            </div>
            <Divider vertical className='hidden-xs' />
            <div className='padding-20'>
                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
                    <FormattedNumber value={99.99} style='unit' unit='percent' />
                </div>
                <div className='text-color-dark padding-y-5'>Total uptime</div>
            </div>
            <Divider vertical className='hidden-xs' />
            <div className='padding-20'>
                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
                    <FormattedNumber value={4.8} />
                </div>
                <div className='text-color-dark padding-y-5'>Customer score</div>
            </div>
        </StatsWidgets>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md margin-auto">
    <div class="StatsWidget-wrapper">
        <div class="padding-20">
            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">25M +</div>
            <div class="text-color-dar padding-y-5">Orders delivered</div>
        </div>
        <div class="Divider position-relative hidden-xs" style="padding-left: 15px; padding-right: 15px;">
            <div class="divider-line bg-light" style="width: 1px; height: 100%;">
            </div>
        </div>
        <div class="padding-20">
            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">99.99%</div>
            <div class="text-color-dark padding-y-5">Total uptime</div>
        </div>
        <div class="Divider position-relative hidden-xs" style="padding-left: 15px; padding-right: 15px;">
            <div class="divider-line bg-light" style="width: 1px; height: 100%;">
            </div>
        </div>
        <div class="padding-20">
            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">4.8</div>
            <div class="text-color-dark padding-y-5">Customer score</div>
        </div>
    </div>
</div>
```

### Example: Orders delivered

Orders delivered
25M +

Total uptime
99.99%

Customer score
4.8

#### React (tsx)

```tsx
import { FormattedNumber } from 'react-intl';

import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';

export default () => (
    <div className='margin-25-md'>
        <StatsWidgets className='border rounded bg-white flex-nowrap gap-5 gap-10-ls gap-20-sm'>
            <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only'>
                <div className='text-color-dark padding-bottom-5'>Orders delivered</div>
                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>
            </StatsWidget>
            <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only'>
                <div className='text-color-dark padding-bottom-5'>Total uptime</div>
                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
                    <FormattedNumber value={99.99} style='unit' unit='percent' />
                </div>
            </StatsWidget>
            <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-none'>
                <div className='text-color-dark padding-bottom-5'>Customer score</div>
                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
                    <FormattedNumber value={4.8} />
                </div>
            </StatsWidget>
        </StatsWidgets>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md">
    <div class="StatsWidget-wrapper border rounded bg-white flex-nowrap gap-5 gap-10-ls gap-20-sm">
        <div class="StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only">
            <div class="text-color-dark padding-bottom-5">Orders delivered</div>
            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">25M +</div>
        </div>
        <div class="StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only">
            <div class="text-color-dark padding-bottom-5">Total uptime</div>
            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">99.99%</div>
        </div>
        <div class="StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-none">
            <div class="text-color-dark padding-bottom-5">Customer score</div>
            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">4.8</div>
        </div>
    </div>
</div>
```

### Example: from 68,345

Orders processed
72,678
from 68,345

11.5%

Open rate
43.6
from 41.6

3.1%

Error rate
3.6
from 2.4

2.01%

#### React (tsx)

```tsx
import { FormattedNumber } from 'react-intl';

import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';

export default () => {
    // Workaround to create a inner border that is also visible when items wrap onto the next line
    const widgetBorderStyle = {
        boxShadow: '1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light)',
    };

    return (
        <div className='margin-25-md'>
            <div className='bg-white border rounded overflow-hidden'>
                <StatsWidgets className='display-grid grid-auto-fit-250 gap-1'>
                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>
                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Orders processed</div>
                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>
                            <div className='display-flex align-items-end gap-10'>
                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>
                                    <FormattedNumber value={72_678} />
                                </div>
                                <div className='text-size-16 text-color-dark'>
                                    from <FormattedNumber value={68_345} />
                                </div>
                            </div>
                            <div className='label label-success padding-x-5'>
                                <span className='rioglyph rioglyph-arrow-up' />
                                <FormattedNumber value={11.5} style='unit' unit='percent' />
                            </div>
                        </div>
                    </StatsWidget>
                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>
                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Open rate</div>
                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>
                            <div className='display-flex align-items-end gap-10'>
                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>
                                    <FormattedNumber value={43.6} />
                                </div>
                                <div className='text-size-16 text-color-dark'>
                                    from <FormattedNumber value={41.6} />
                                </div>
                            </div>
                            <div className='label label-success padding-x-5'>
                                <span className='rioglyph rioglyph-arrow-up' />
                                <FormattedNumber value={3.1} style='unit' unit='percent' />
                            </div>
                        </div>
                    </StatsWidget>
                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>
                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Error rate</div>
                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>
                            <div className='display-flex align-items-end gap-10'>
                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>
                                    <FormattedNumber value={3.6} />
                                </div>
                                <div className='text-size-16 text-color-dark'>
                                    from <FormattedNumber value={2.4} />
                                </div>
                            </div>
                            <div className='label label-danger padding-x-5'>
                                <span className='rioglyph rioglyph-arrow-up' />
                                <FormattedNumber value={2.01} style='unit' unit='percent' />
                            </div>
                        </div>
                    </StatsWidget>
                </StatsWidgets>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="margin-25-md">
    <div class="bg-white border rounded overflow-hidden">
        <div class="StatsWidget-wrapper display-grid grid-auto-fit-250 gap-1">
            <div class="StatsWidget padding-20 bg-white rounded-none border-none" style="box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);">
                <div class="text-size-16 text-color-darkest padding-bottom-5">Orders processed</div>
                <div class="display-flex align-items-end justify-content-between gap-10 flex-wrap">
                    <div class="display-flex align-items-end gap-10">
                        <div class="text-size-h2 line-height-h2 text-medium text-color-primary">72,678</div>
                        <div class="text-size-16 text-color-dark">from 68,345</div>
                    </div>
                    <div class="label label-success padding-x-5">
                        <span class="rioglyph rioglyph-arrow-up">
                        </span>11.5%
                    </div>
                </div>
            </div>
            <div class="StatsWidget padding-20 bg-white rounded-none border-none" style="box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);">
                <div class="text-size-16 text-color-darkest padding-bottom-5">Open rate</div>
                <div class="display-flex align-items-end justify-content-between gap-10 flex-wrap">
                    <div class="display-flex align-items-end gap-10">
                        <div class="text-size-h2 line-height-h2 text-medium text-color-primary">43.6</div>
                        <div class="text-size-16 text-color-dark">from 41.6</div>
                    </div>
                    <div class="label label-success padding-x-5">
                        <span class="rioglyph rioglyph-arrow-up">
                        </span>3.1%
                    </div>
                </div>
            </div>
            <div class="StatsWidget padding-20 bg-white rounded-none border-none" style="box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);">
                <div class="text-size-16 text-color-darkest padding-bottom-5">Error rate</div>
                <div class="display-flex align-items-end justify-content-between gap-10 flex-wrap">
                    <div class="display-flex align-items-end gap-10">
                        <div class="text-size-h2 line-height-h2 text-medium text-color-primary">3.6</div>
                        <div class="text-size-16 text-color-dark">from 2.4</div>
                    </div>
                    <div class="label label-danger padding-x-5">
                        <span class="rioglyph rioglyph-arrow-up">
                        </span>2.01%
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

### Example: Number of data brokers removal requests have been sent to.

September, 2025
Requests sent
185

Number of data brokers removal requests have been sent to.

Requests in progress
185

Number of data brokers that have started processing our removal requests.

Requests completed
0

Number of data brokers that checked and confirmed that they are now not holding your data.

#### React (tsx)

```tsx
import Divider from '@rio-cloud/rio-uikit/Divider';
import Card from '@rio-cloud/rio-uikit/Card';

export default () => (
    <div className='margin-25-md'>
        <div className='padding-20 cq-container'>
            <h2 className='margin-top-0 margin-bottom-25'>September, 2025</h2>
            <div className='display-grid grid-cols-1 cq-400:grid-cols-2 cq-700:grid-cols-3 gap-25'>
                <Card className='padding-20'>
                    <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>Requests sent</div>
                    <div className='text-size-h1 text-bold text-color-darkest'>185</div>
                    <Divider dividerColor='lighter' />
                    <div className='text-color-dark text-size-12'>
                        Number of data brokers removal requests have been sent to.
                    </div>
                </Card>

                <Card className='padding-20'>
                    <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>
                        Requests in progress
                    </div>
                    <div className='text-size-h1 text-bold text-color-darkest'>185</div>
                    <Divider dividerColor='lighter' />
                    <div className='text-color-dark text-size-12'>
                        Number of data brokers that have started processing our removal requests.
                    </div>
                </Card>

                <Card className='padding-20'>
                    <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>Requests completed</div>
                    <div className='text-size-h1 text-bold text-color-darkest'>0</div>
                    <Divider dividerColor='lighter' />
                    <div className='text-color-dark text-size-12'>
                        Number of data brokers that checked and confirmed that they are now not holding your data.
                    </div>
                </Card>
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md">
    <div class="padding-20 cq-container">
        <h2 class="margin-top-0 margin-bottom-25">September, 2025</h2>
        <div class="display-grid grid-cols-1 cq-400:grid-cols-2 cq-700:grid-cols-3 gap-25">
            <div class="bg-white rounded border shadow-default padding-15 padding-20">
                <div class="text-color-darker text-size-18 text-medium margin-bottom-5">Requests sent</div>
                <div class="text-size-h1 text-bold text-color-darkest">185</div>
                <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
                    <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
                    </div>
                </div>
                <div class="text-color-dark text-size-12">Number of data brokers removal requests have been sent to.</div>
            </div>
            <div class="bg-white rounded border shadow-default padding-15 padding-20">
                <div class="text-color-darker text-size-18 text-medium margin-bottom-5">Requests in progress</div>
                <div class="text-size-h1 text-bold text-color-darkest">185</div>
                <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
                    <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
                    </div>
                </div>
                <div class="text-color-dark text-size-12">Number of data brokers that have started processing our removal requests.</div>
            </div>
            <div class="bg-white rounded border shadow-default padding-15 padding-20">
                <div class="text-color-darker text-size-18 text-medium margin-bottom-5">Requests completed</div>
                <div class="text-size-h1 text-bold text-color-darkest">0</div>
                <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
                    <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
                    </div>
                </div>
                <div class="text-color-dark text-size-12">Number of data brokers that checked and confirmed that they are now not holding your data.</div>
            </div>
        </div>
    </div>
</div>
```

### Example:

Lorem ipsum dolor

January February March April May June

Lorem ipsum dolor

Status Location ETA

In transit
Hamburg, DE 2024-02-02

Delivered
Rotterdam, NL 2024-01-29

Awaiting pickup
Warsaw, PL 2024-02-05

Customs clearance
Antwerp, BE 2024-02-03

Transport ipsum dolor

On-time delivery

Warehouse efficiency

Truck utilization

Freight cost/km

Fuel consumption index

92%

84%

78%

65%

15%

#### React (tsx)

```tsx
import Bar from '@rio-cloud/rio-uikit/Bar';
import BarChart from '@rio-cloud/rio-uikit/BarChart';
import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
import AccentBar from '@rio-cloud/rio-uikit/AccentBar';
import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
import BarList from '@rio-cloud/rio-uikit/BarList';

export default () => {
    const optionsButton = (
        <ButtonDropdown
            bsStyle='muted'
            title={<span className='rioglyph rioglyph-option-horizontal' aria-hidden='true' />}
            items={[
                {
                    value: 'Edit',
                },
                {
                    value: 'Share',
                },
                {
                    value: 'Report issue',
                },
            ]}
            iconOnly
            pullRight
        />
    );

    return (
        <div className='margin-25-md'>
            <div className='display-grid grid-cols-1 grid-cols-2-sm gap-25'>
                <div className='panel panel-default shadow-default min-width-200'>
                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>
                        <div className='text-medium text-size-16'>Lorem ipsum dolor</div>
                        <div>{optionsButton}</div>
                    </div>
                    <div className='panel-body padding-15 padding-25-sm height-300 overflow-auto'>
                        <BarChart
                            data={data}
                            dataKey='label'
                            xAxisOptions={{ dataKey: 'label' }}
                            showYAxis={false}
                            margin={{ bottom: 15 }}
                            bars={[
                                <Bar
                                    key='myBar'
                                    dataKey='costs'
                                    unit='€'
                                    color='brand-primary'
                                    radius={[3, 3, 0, 0]}
                                    label={{
                                        position: 'top',
                                        formatter: (value: number) => `${value} €`,
                                    }}
                                />,
                            ]}
                        />
                    </div>
                </div>

                <div className='panel panel-default shadow-default min-width-200'>
                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>
                        <div className='text-medium text-size-16 display-flex gap-5 align-items-center'>
                            <span>Lorem ipsum dolor</span>
                            <SimpleTooltip content='Some helper text' placement='top'>
                                <span className='rioglyph rioglyph-question-sign text-color-dark cursor-pointer' />
                            </SimpleTooltip>
                        </div>
                        <div>{optionsButton}</div>
                    </div>
                    <div className='panel-body padding-15 padding-25-sm overflow-auto'>
                        <table className='table'>
                            <thead>
                                <tr>
                                    <th>Status</th>
                                    <th>Location</th>
                                    <th>ETA</th>
                                </tr>
                            </thead>
                            <tbody>
                                {tableData.map(row => (
                                    <tr key={row.id}>
                                        <td>
                                            <AccentBar color={getStatusColor(row.status)}>{row.status}</AccentBar>
                                        </td>
                                        <td>{row.location}</td>
                                        <td>{row.eta}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div className='panel panel-default shadow-default min-width-200'>
                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>
                        <div className='text-medium text-size-16 display-flex gap-5 align-items-center'>
                            <span>Transport ipsum dolor</span>
                        </div>
                        <div>{optionsButton}</div>
                    </div>
                    <div className='panel-body padding-15 padding-25-sm overflow-auto'>
                        <BarList
                            data={barListData}
                            valueFormatter={value => `${value}%`}
                            referenceValue={100}
                            showAnimation
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};

const data = [
    {
        label: 'January',
        costs: 46.8,
    },
    {
        label: 'February',
        costs: 22.0,
    },
    {
        label: 'March',
        costs: 12.4,
    },
    {
        label: 'April',
        costs: 3.88,
    },
    {
        label: 'May',
        costs: 3.23,
    },
    {
        label: 'June',
        costs: 4.67,
    },
];

const tableData = [
    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },
    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },
    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },
    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },
];

const barListData = [
    {
        key: 'truck_utilization',
        name: 'Truck utilization',
        value: 78,
    },
    {
        key: 'on_time_delivery',
        name: 'On-time delivery',
        value: 92,
    },
    {
        key: 'freight_cost_per_km',
        name: 'Freight cost/km',
        value: 65,
    },
    {
        key: 'warehouse_efficiency',
        name: 'Warehouse efficiency',
        value: 84,
    },
    {
        key: 'fuel_consumption',
        name: 'Fuel consumption index',
        value: 15,
    },
];

const getStatusColor = (status: string) => {
    switch (status) {
        case 'In transit':
            return 'bg-warning';
        case 'Delivered':
            return 'bg-success';
        case 'Awaiting pickup':
            return 'bg-info';
        case 'Customs clearance':
            return 'bg-danger';
        default:
            return 'bg-primary';
    }
};
```

#### HTML (html)

```html
<div class="margin-25-md">
    <div class="display-grid grid-cols-1 grid-cols-2-sm gap-25">
        <div class="panel panel-default shadow-default min-width-200">
            <div class="panel-heading display-flex align-items-center justify-content-between padding-left-20">
                <div class="text-medium text-size-16">Lorem ipsum dolor</div>
                <div>
                    <div class="dropdown btn-group">
                        <button type="button" id="ablnjzhk1z" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                            <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-body padding-15 padding-25-sm height-300 overflow-auto">
                <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="365" height="250" class="recharts-wrapper" style="position: relative; cursor: default; width: 365px; height: 250px;">
                            <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>
                            <svg role="application" tabindex="0" class="recharts-surface" width="365" height="250" viewBox="0 0 365 250" style="width: 100%; height: 100%; display: block;">
                                <title>
                                </title>
                                <desc>
                                </desc>
                                <g tabindex="-1" class="recharts-zIndex-layer_-100">
                                </g>
                                <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                </g>
                                <defs>
                                    <clipPath id="recharts1-clip">
                                        <rect x="0" y="0" height="205" width="365">
                                        </rect>
                                    </clipPath>
                                </defs>
                                <g tabindex="-1" class="recharts-zIndex-layer_100">
                                </g>
                                <g tabindex="-1" class="recharts-zIndex-layer_200">
                                </g>
                                <g tabindex="-1" class="recharts-zIndex-layer_300">
                                    <g class="recharts-layer recharts-bar" id="recharts-bar-:r0:">
                                        <g class="recharts-layer recharts-bar-rectangles">
                                            <g class="recharts-layer">
                                                <g class="recharts-layer recharts-bar-rectangle">
                                                    <g class="recharts-layer recharts-inactive-bar">
                                                        <path fill="#30b4c0 " name="undefined" x="6.0833" y="45.1" width="48" height="159.9" class="recharts-rectangle" d="M6.0833,48.1A 3,3,0,0,1,9.0833,45.1L 51.0833,45.1A 3,3,0,0,1,
        54.0833,48.1L 54.0833,205L 6.0833,205Z">
                                                        </path>
                                                    </g>
                                                </g>
                                                <g class="recharts-layer recharts-bar-rectangle">
                                                    <g class="recharts-layer recharts-inactive-bar">
                                                        <path fill="#30b4c0 " name="undefined" x="66.9167" y="129.8333" width="48" height="75.1667" class="recharts-rectangle" d="M66.9167,132.8333A 3,3,0,0,1,69.9167,129.8333L 111.9167,129.8333A 3,3,0,0,1,
        114.9167,132.8333L 114.9167,205L 66.9167,205Z">
                                                        </path>
                                                    </g>
                                                </g>
                                                <g class="recharts-layer recharts-bar-rectangle">
                                                    <g class="recharts-layer recharts-inactive-bar">
                                                        <path fill="#30b4c0 " name="undefined" x="127.75" y="162.6333" width="48" height="42.3667" class="recharts-rectangle" d="M127.75,165.6333A 3,3,0,0,1,130.75,162.6333L 172.75,162.6333A 3,3,0,0,1,
        175.75,165.6333L 175.75,205L 127.75,205Z">
                                                        </path>
                                                    </g>
                                                </g>
                                                <g class="recharts-layer recharts-bar-rectangle">
                                                    <g class="recharts-layer recharts-inactive-bar">
                                                        <path fill="#30b4c0 " name="undefined" x="188.5833" y="191.7433" width="48" height="13.2567" class="recharts-rectangle" d="M188.5833,194.7433A 3,3,0,0,1,191.5833,191.7433L 233.5833,191.7433A 3,3,0,0,1,
        236.5833,194.7433L 236.5833,205L 188.5833,205Z">
                                                        </path>
                                                    </g>
                                                </g>
                                                <g class="recharts-layer recharts-bar-rectangle">
                                                    <g class="recharts-layer recharts-inactive-bar">
                                                        <path fill="#30b4c0 " name="undefined" x="249.4167" y="193.9642" width="48" height="11.0358" class="recharts-rectangle" d="M249.4167,196.9642A 3,3,0,0,1,252.4167,193.9642L 294.4167,193.9642A 3,3,0,0,1,
        297.4167,196.9642L 297.4167,205L 249.4167,205Z">
                                                        </path>
                                                    </g>
                                                </g>
                                                <g class="recharts-layer recharts-bar-rectangle">
                                                    <g class="recharts-layer recharts-inactive-bar">
                                                        <path fill="#30b4c0 " name="undefined" x="310.25" y="189.0442" width="48" height="15.9558" class="recharts-rectangle" d="M310.25,192.0442A 3,3,0,0,1,313.25,189.0442L 355.25,189.0442A 3,3,0,0,1,
        358.25,192.0442L 358.25,205L 310.25,205Z">
                                                        </path>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                                <g tabindex="-1" class="recharts-zIndex-layer_400">
                                </g>
                                <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="0" y="205" width="365" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="0" y1="205" x2="365" y2="205">
                                        </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="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="30.416666666666668" y1="211" x2="30.416666666666668" y2="205">
                                                    </line>
                                                </g>
                                                <g class="recharts-layer recharts-cartesian-axis-tick">
                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="91.25" y1="211" x2="91.25" y2="205">
                                                    </line>
                                                </g>
                                                <g class="recharts-layer recharts-cartesian-axis-tick">
                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="152.08333333333334" y1="211" x2="152.08333333333334" y2="205">
                                                    </line>
                                                </g>
                                                <g class="recharts-layer recharts-cartesian-axis-tick">
                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="212.91666666666666" y1="211" x2="212.91666666666666" y2="205">
                                                    </line>
                                                </g>
                                                <g class="recharts-layer recharts-cartesian-axis-tick">
                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="273.75" y1="211" x2="273.75" y2="205">
                                                    </line>
                                                </g>
                                                <g class="recharts-layer recharts-cartesian-axis-tick">
                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="334.58333333333337" y1="211" x2="334.58333333333337" y2="205">
                                                    </line>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                                <g tabindex="-1" class="recharts-zIndex-layer_600">
                                </g>
                                <g tabindex="-1" class="recharts-zIndex-layer_1000">
                                </g>
                                <g tabindex="-1" class="recharts-zIndex-layer_1100">
                                </g>
                                <g tabindex="-1" class="recharts-zIndex-layer_1200">
                                </g>
                                <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="365" stroke="none" x="30.416666666666668" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                <tspan x="30.416666666666668" dy="0.71em">January</tspan>
                                            </text>
                                        </g>
                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                            <text height="30" orientation="bottom" width="365" stroke="none" x="91.25" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                <tspan x="91.25" dy="0.71em">February</tspan>
                                            </text>
                                        </g>
                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                            <text height="30" orientation="bottom" width="365" stroke="none" x="152.08333333333334" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                <tspan x="152.08333333333334" dy="0.71em">March</tspan>
                                            </text>
                                        </g>
                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                            <text height="30" orientation="bottom" width="365" stroke="none" x="212.91666666666666" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                <tspan x="212.91666666666666" dy="0.71em">April</tspan>
                                            </text>
                                        </g>
                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                            <text height="30" orientation="bottom" width="365" stroke="none" x="273.75" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                <tspan x="273.75" dy="0.71em">May</tspan>
                                            </text>
                                        </g>
                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                            <text height="30" orientation="bottom" width="365" stroke="none" x="334.58333333333337" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                <tspan x="334.58333333333337" dy="0.71em">June</tspan>
                                            </text>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-label-list">
                                        <text width="48" height="45.100000000000016" offset="5" x="30.083333333333336" y="40.100000000000016" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
                                            <tspan x="30.083333333333336" dy="0em">46.8 €</tspan>
                                        </text>
                                        <text width="48" height="129.83333333333331" offset="5" x="90.91666666666667" y="124.83333333333331" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
                                            <tspan x="90.91666666666667" dy="0em">22 €</tspan>
                                        </text>
                                        <text width="48" height="162.63333333333333" offset="5" x="151.75" y="157.63333333333333" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
                                            <tspan x="151.75" dy="0em">12.4 €</tspan>
                                        </text>
                                        <text width="48" height="191.74333333333334" offset="5" x="212.58333333333334" y="186.74333333333334" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
                                            <tspan x="212.58333333333334" dy="0em">3.88 €</tspan>
                                        </text>
                                        <text width="48" height="193.96416666666667" offset="5" x="273.4166666666667" y="188.96416666666667" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
                                            <tspan x="273.4166666666667" dy="0em">3.23 €</tspan>
                                        </text>
                                        <text width="48" height="189.04416666666668" offset="5" x="334.25" y="184.04416666666668" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
                                            <tspan x="334.25" dy="0em">4.67 €</tspan>
                                        </text>
                                    </g>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default shadow-default min-width-200">
            <div class="panel-heading display-flex align-items-center justify-content-between padding-left-20">
                <div class="text-medium text-size-16 display-flex gap-5 align-items-center">
                    <span>Lorem ipsum dolor</span>
                    <span class="rioglyph rioglyph-question-sign text-color-dark cursor-pointer">
                    </span>
                </div>
                <div>
                    <div class="dropdown btn-group">
                        <button type="button" id="6mmn1pdjo9s" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                            <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-body padding-15 padding-25-sm overflow-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Status</th>
                            <th>Location</th>
                            <th>ETA</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="display-flex align-items-stretch">
                                    <div class="AccentBar bg-warning">
                                    </div>In transit
                                </div>
                            </td>
                            <td>Hamburg, DE</td>
                            <td>2024-02-02</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="display-flex align-items-stretch">
                                    <div class="AccentBar bg-success">
                                    </div>Delivered
                                </div>
                            </td>
                            <td>Rotterdam, NL</td>
                            <td>2024-01-29</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="display-flex align-items-stretch">
                                    <div class="AccentBar bg-info">
                                    </div>Awaiting pickup
                                </div>
                            </td>
                            <td>Warsaw, PL</td>
                            <td>2024-02-05</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="display-flex align-items-stretch">
                                    <div class="AccentBar bg-danger">
                                    </div>Customs clearance
                                </div>
                            </td>
                            <td>Antwerp, BE</td>
                            <td>2024-02-03</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="panel panel-default shadow-default min-width-200">
            <div class="panel-heading display-flex align-items-center justify-content-between padding-left-20">
                <div class="text-medium text-size-16 display-flex gap-5 align-items-center">
                    <span>Transport ipsum dolor</span>
                </div>
                <div>
                    <div class="dropdown btn-group">
                        <button type="button" id="z74oenueisl" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                            <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-body padding-15 padding-25-sm overflow-auto">
                <div class="display-flex justify-content-between gap-15">
                    <div class="width-100pct space-y-5">
                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 92%;">
                            </div>
                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                                <div class="text-color-darker">On-time delivery</div>
                            </div>
                        </div>
                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 84%;">
                            </div>
                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                                <div class="text-color-darker">Warehouse efficiency</div>
                            </div>
                        </div>
                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 78%;">
                            </div>
                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                                <div class="text-color-darker">Truck utilization</div>
                            </div>
                        </div>
                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 65%;">
                            </div>
                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                                <div class="text-color-darker">Freight cost/km</div>
                            </div>
                        </div>
                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15%;">
                            </div>
                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                                <div class="text-color-darker">Fuel consumption index</div>
                            </div>
                        </div>
                    </div>
                    <div class="space-y-5">
                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                            <div class="text-color-darkest">92%</div>
                        </div>
                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                            <div class="text-color-darkest">84%</div>
                        </div>
                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                            <div class="text-color-darkest">78%</div>
                        </div>
                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                            <div class="text-color-darkest">65%</div>
                        </div>
                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                            <div class="text-color-darkest">15%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```