Flux

Grid ​

The statistics grid is a responsive layout component for arranging statistics widgets. Column counts can be defined per breakpoint and cascade from smaller to larger screen sizes when not explicitly set.

Total users
12,430
Orders
3,821
Revenue
€ 48,290

Props

gap?: number
The gap in pixels between grid items.

xs?: number
The number of columns on extra small screens.

sm?: number
The number of columns on small screens. Falls back to xs.

md?: number
The number of columns on medium screens. Falls back to sm.

lg?: number
The number of columns on large screens. Falls back to md.

xl?: number
The number of columns on extra large screens. Falls back to lg.

Slots

default
The statistics widgets to display in the grid.

Examples ​

Responsive

A grid that collapses to one column on small screens and expands to four on large screens.

Total users
12,430
Orders
3,821
Revenue
€ 48,290
Conversion
3.6%

<template>
    <FluxStatisticsGrid
        :xs="1"
        :sm="2"
        :lg="4"
        style="min-width: 100%">
        <FluxStatisticsKpi
            icon="users"
            title="Total users"
            value="12,430"
            :change="{color: 'success', icon: 'arrow-trend-up', value: '+8.2%'}"/>

        <FluxStatisticsKpi
            icon="cart-shopping"
            title="Orders"
            value="3,821"
            :change="{color: 'danger', icon: 'arrow-trend-down', value: '-1.4%'}"/>

        <FluxStatisticsKpi
            icon="money-bill"
            title="Revenue"
            value="€ 48,290"
            :change="{color: 'success', icon: 'arrow-trend-up', value: '+12.7%'}"/>

        <FluxStatisticsKpi
            icon="chart-line"
            title="Conversion"
            value="3.6%"
            :change="{color: 'success', icon: 'arrow-trend-up', value: '+0.4%'}"/>
    </FluxStatisticsGrid>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsGrid, FluxStatisticsKpi } from '@flux-ui/statistics';
</script>

Mixed widgets

A grid combining KPI, metric, and meter widgets in a single row.

Total users
12,430
vs. last month
Revenue
This month
€ 48,290
Capacity
CPU62%of 100%
Memory78%of 64 GB

<template>
    <FluxStatisticsGrid
        :xs="1"
        :md="3"
        style="min-width: 100%">
        <FluxStatisticsKpi
            icon="users"
            title="Total users"
            value="12,430"
            footer="vs. last month"
            :change="{color: 'success', icon: 'arrow-trend-up', value: '+8.2%'}"/>

        <FluxStatisticsMetric
            icon="money-bill"
            title="Revenue"
            label="This month"
            value="€ 48,290"
            :change="{color: 'success', icon: 'arrow-trend-up', value: '+12.7%'}">
            <FluxStatisticsSparkline
                color="success"
                variant="area"
                :series="revenue"/>
        </FluxStatisticsMetric>

        <FluxStatisticsBase
            icon="server"
            title="Capacity">
            <FluxFlex
                direction="vertical"
                :gap="18">
                <FluxStatisticsMeter
                    variant="blocks"
                    color="info"
                    title="CPU"
                    tip="of 100%"
                    :value="0.62"/>

                <FluxStatisticsMeter
                    variant="blocks"
                    color="warning"
                    title="Memory"
                    tip="of 64 GB"
                    :value="0.78"/>
            </FluxFlex>
        </FluxStatisticsBase>
    </FluxStatisticsGrid>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex } from '@flux-ui/components';
    import { FluxStatisticsBase, FluxStatisticsGrid, FluxStatisticsKpi, FluxStatisticsMeter, FluxStatisticsMetric, FluxStatisticsSparkline } from '@flux-ui/statistics';

    const revenue = [{ name: 'Revenue', data: [38, 41, 39, 44, 46, 45, 47, 48] }];
</script>