Flux

Metric ​

The metric widget is a larger statistics widget that displays a title, label, value, and an optional trend indicator. The default slot can be used to embed additional content such as a chart.

Monthly revenue
Total earned this month
€ 48,290
vs. last month
Active users
Unique visitors
9,841
vs. last month

Props

title: string
The title of the metric widget.

value?: string | number
The primary value displayed in the metric widget.

change?: FluxStatisticsChange
An optional change indicator shown in the footer area.

footer?: string
An optional footer text shown below the change indicator.

icon?: FluxIconName
An icon shown in the header of the widget.

label?: string
A secondary label shown above the value.

Slots

default
Custom content rendered in the body of the widget, below the value.

Examples ​

Simple

A metric widget without any content in the default slot.

Active projects
Across all teams
18
vs. last month

<template>
    <FluxStatisticsMetric
        style="min-width: 100%; max-width: 360px"
        icon="folder"
        title="Active projects"
        label="Across all teams"
        value="18"
        footer="vs. last month"
        :change="{color: 'success', icon: 'arrow-trend-up', value: '+3'}"/>
</template>

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

With a breakdown

A metric widget using the default slot to display a breakdown of values.

Monthly revenue
Total earned this month
€ 48,290
Products€ 31,800Services€ 16,490
vs. last month

<template>
    <FluxStatisticsMetric
        style="min-width: 100%; max-width: 360px"
        icon="chart-line"
        title="Monthly revenue"
        label="Total earned this month"
        value="€ 48,290"
        footer="vs. last month"
        :change="{color: 'success', icon: 'arrow-trend-up', value: '+12.7%'}">
        <small>Products</small>
        <span>€ 31,800</span>
        <small>Services</small>
        <span>€ 16,490</span>
    </FluxStatisticsMetric>
</template>

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

With a meter

A metric widget embedding a blocks meter in the default slot.

Storage
Team workspace
374 GB
74%
of 500 GB

<template>
    <FluxStatisticsMetric
        style="min-width: 100%; max-width: 360px"
        icon="database"
        title="Storage"
        label="Team workspace"
        value="374 GB"
        footer="of 500 GB">
        <FluxStatisticsMeter
            variant="blocks"
            color="warning"
            :value="0.74"/>
    </FluxStatisticsMetric>
</template>

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

Used components ​