Flux

Tracker card ​

The tracker card summarizes a process in a single glance: what it is, where it stands, and how far along it is. The progress itself is declared as a row of Segments, one per step.

Your Order is on the Way2 shipments · Arriving tomorrow

TIP

The card pairs well with a Tracker below it: the card gives the summary, the tracker gives the detail.

Props

title: string
The title of the card.

subtitle?: string
A secondary line shown under the title.

icon?: FluxIconName
An icon shown in a tinted box on the right of the header.

color?: FluxColor
The tint of the header icon.
Default: primary

labels?: top | bottom
Where the labels of the segments are rendered.
Default: bottom

Slots

start
Shown before the title, for example a FluxAvatar or a logo.

end
Shown on the right of the header. Holds the boxed icon of the `icon` prop unless you fill it yourself.

default
The segments of the card.

Examples ​

Live

The running segment fills up before it hands over to the next one, so the card reads as a process instead of a score.

Your Order is on the WayStep 1 of 5 · Ordered
Ordered
Packed
Shipped
Out for delivery
Delivered

<template>
    <FluxFlex
        direction="vertical"
        :gap="18"
        style="width: 100%; max-width: 450px">
        <FluxStatisticsTrackerCard
            title="Your Order is on the Way"
            :subtitle="subtitle"
            icon="truck">
            <FluxStatisticsTrackerCardSegment
                v-for="(step, index) of STEPS"
                :key="step"
                :label="step"
                :state="stateOf(index)"
                :min="0"
                :max="1"
                :value="valueOf(index)"/>
        </FluxStatisticsTrackerCard>

        <FluxSecondaryButton
            icon-leading="play"
            :label="running ? 'Running' : 'Run again'"
            :is-loading="running"
            :disabled="running"
            @click="run"/>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex, FluxSecondaryButton } from '@flux-ui/components';
    import { FluxStatisticsTrackerCard, FluxStatisticsTrackerCardSegment } from '@flux-ui/statistics';
    import { computed, onBeforeUnmount, onMounted, ref } from 'vue';

    // Every step takes the same amount of time, so elapsed doubles as the index
    // of the running step and as the progress within it.
    const STEPS = ['Ordered', 'Packed', 'Shipped', 'Out for delivery', 'Delivered'];
    const STEP_DURATION = 900;

    const elapsed = ref(0);
    const running = ref(false);

    const subtitle = computed(() => {
        const index = Math.min(Math.floor(elapsed.value), STEPS.length - 1);

        return elapsed.value >= STEPS.length
            ? 'Delivered · Thank you for your order'
            : `Step ${index + 1} of ${STEPS.length} · ${STEPS[index]}`;
    });

    let frame = 0;

    onMounted(() => run());

    onBeforeUnmount(() => cancelAnimationFrame(frame));

    function clamp(value: number): number {
        return Math.min(Math.max(value, 0), 1);
    }

    function stateOf(index: number): 'active' | 'done' | 'todo' {
        if (elapsed.value >= index + 1) {
            return 'done';
        }

        return elapsed.value > index ? 'active' : 'todo';
    }

    function valueOf(index: number): number {
        return clamp(elapsed.value - index);
    }

    function run(): void {
        cancelAnimationFrame(frame);
        running.value = true;
        elapsed.value = 0;

        const start = performance.now();

        const tick = (now: number) => {
            elapsed.value = Math.min((now - start) / STEP_DURATION, STEPS.length);

            if (elapsed.value < STEPS.length) {
                frame = requestAnimationFrame(tick);
            } else {
                running.value = false;
            }
        };

        frame = requestAnimationFrame(tick);
    }
</script>

Labels

Segments can carry a label. Set labels to top to render them above the bar instead of below it.

Onboarding3 of 5 steps completed
Account
Profile
Team
Billing
Done
Onboarding3 of 5 steps completed
Account
Profile
Team
Billing
Done

<template>
    <FluxFlex
        direction="vertical"
        :gap="18"
        style="width: 100%; max-width: 450px">
        <FluxStatisticsTrackerCard
            title="Onboarding"
            subtitle="3 of 5 steps completed"
            icon="user-plus"
            labels="bottom">
            <FluxStatisticsTrackerCardSegment
                label="Account"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                label="Profile"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                label="Team"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                label="Billing"
                state="active"/>

            <FluxStatisticsTrackerCardSegment label="Done"/>
        </FluxStatisticsTrackerCard>

        <FluxStatisticsTrackerCard
            title="Onboarding"
            subtitle="3 of 5 steps completed"
            icon="user-plus"
            labels="top">
            <FluxStatisticsTrackerCardSegment
                label="Account"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                label="Profile"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                label="Team"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                label="Billing"
                state="active"/>

            <FluxStatisticsTrackerCardSegment label="Done"/>
        </FluxStatisticsTrackerCard>
    </FluxFlex>
</template>

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

Colors

The header icon and the segments are tinted separately, so a card can follow the color of the process it tracks.

DeploymentProduction · Build 482
Storage upgradeWaiting for approval

<template>
    <FluxFlex
        direction="vertical"
        :gap="18"
        style="width: 100%; max-width: 450px">
        <FluxStatisticsTrackerCard
            color="success"
            title="Deployment"
            subtitle="Production · Build 482"
            icon="rocket">
            <FluxStatisticsTrackerCardSegment
                color="success"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                color="success"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                color="success"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                color="success"
                state="done"/>
        </FluxStatisticsTrackerCard>

        <FluxStatisticsTrackerCard
            color="warning"
            title="Storage upgrade"
            subtitle="Waiting for approval"
            icon="database">
            <FluxStatisticsTrackerCardSegment
                color="warning"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                color="warning"
                state="active"/>

            <FluxStatisticsTrackerCardSegment/>
            <FluxStatisticsTrackerCardSegment/>
        </FluxStatisticsTrackerCard>
    </FluxFlex>
</template>

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

Used components ​