Meter

The meter widget visualizes a value as a horizontal progress bar. It supports theming with any Flux color or a custom hex color and can display a title, subtitle, tip, and footer alongside the percentage.

System resources

CPU usage4 cores68%of 100%

Load average: 1.2

Disk usageSSD74%of 500 GB

374 GB used

Props

value: number
The current value as a fraction between 0 and 1.

color?: FluxColor | `#${string}`
The color of the meter bar. Accepts a FluxColor or a custom hex color.

footer?: string
A footer text shown below the bar.

icon?: FluxIconName
An icon shown in the header.

is-small?: boolean
Renders the meter in a compact style.

sub-title?: string
A secondary title shown next to the main title.

tip?: string
A tip text shown to the right of the percentage.

title?: string
The title of the meter.

variant?: bar | blocks
The visual style of the meter. `bar` renders a continuous bar, `blocks` renders discrete blocks that fill the available width.
Default: bar

Examples

Blocks

The blocks variant splits the bar into discrete blocks that fill the available width.

Preview

Usage this month

Documents58%of 40

Weekly reports64%of 25

Pitch briefs80%of 20

Code

<template>
    <FluxStatisticsBase
        style="min-width: 100%; max-width: 360px"
        title="Usage this month">
        <FluxFlex
            direction="vertical"
            :gap="18">
            <FluxStatisticsMeter
                variant="blocks"
                color="primary"
                title="Documents"
                tip="of 40"
                :value="0.58"/>

            <FluxStatisticsMeter
                variant="blocks"
                color="success"
                title="Weekly reports"
                tip="of 25"
                :value="0.64"/>

            <FluxStatisticsMeter
                variant="blocks"
                color="warning"
                title="Pitch briefs"
                tip="of 20"
                :value="0.8"/>
        </FluxFlex>
    </FluxStatisticsBase>
</template>

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

Compact

Multiple compact meters grouped inside a statistics base widget.

Preview

System resources

68%CPU

74%Disk

45%Memory

Code

<template>
    <FluxStatisticsBase
        style="min-width: 100%; max-width: 360px"
        title="System resources">
        <FluxFlex
            direction="vertical"
            :gap="18">
            <FluxStatisticsMeter
                is-small
                color="success"
                style="width: 210px"
                tip="CPU"
                :value="0.68"/>

            <FluxStatisticsMeter
                is-small
                color="warning"
                style="width: 210px"
                tip="Disk"
                :value="0.74"/>

            <FluxStatisticsMeter
                is-small
                color="info"
                style="width: 210px"
                tip="Memory"
                :value="0.45"/>
        </FluxFlex>
    </FluxStatisticsBase>
</template>

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