Flux

Appearance

Comparison ​

The comparison widget renders two values side by side, typically a current period and a previous period. It automatically calculates and displays the percentage delta between them with a colored trend indicator.

Monthly active users
Current
12480
Previous
11203
vs. last month

Props

title: string
The title of the comparison widget.

current: number
The numeric value for the current period.

previous: number
The numeric value for the previous period.

current-label?: string
The label shown above the current value. Defaults to `Current`.

previous-label?: string
The label shown above the previous value. Defaults to `Previous`.

footer?: string
A footer text shown below the delta indicator.

format?: (value: number) => string
An optional formatter applied to both values.

icon?: FluxIconName
An icon shown in the header.

show-delta?: boolean
Whether to show the calculated percentage delta. Defaults to `true`.

Examples ​

Basic

A basic comparison with whole-number values.

New customers
Current
284
Previous
232
this quarter

<template>
    <FluxFlex
        direction="vertical"
        :gap="18"
        style="width: 100%; max-width: 380px">
        <FluxStatisticsComparison
            style="min-width: 100%"
            icon="user-plus"
            title="New customers"
            :current="284"
            :previous="232"
            footer="this quarter"/>
    </FluxFlex>
</template>

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

Formatted currency

A comparison with a formatter for currency values.

Revenue
Current
€48,230
Previous
€42,118
vs. last quarter

<template>
    <FluxFlex
        direction="vertical"
        :gap="18"
        style="width: 100%; max-width: 380px">
        <FluxStatisticsComparison
            style="min-width: 100%"
            icon="money-bill"
            title="Revenue"
            :current="48230"
            :previous="42118"
            :format="format"
            footer="vs. last quarter"/>
    </FluxFlex>
</template>

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

    const formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'EUR',
        maximumFractionDigits: 0
    });

    function format(value: number): string {
        return formatter.format(value);
    }
</script>

Negative trend

A comparison where the current period is worse than the previous one.

Bounce rate
This week
38%
Last week
32%
lower is better

<template>
    <FluxFlex
        direction="vertical"
        :gap="18"
        style="width: 100%; max-width: 380px">
        <FluxStatisticsComparison
            style="min-width: 100%"
            icon="arrow-trend-down"
            title="Bounce rate"
            current-label="This week"
            previous-label="Last week"
            :current="38"
            :previous="32"
            :format="format"
            footer="lower is better"/>
    </FluxFlex>
</template>

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

    function format(value: number): string {
        return `${value}%`;
    }
</script>

Used components ​