Flux

Appearance

Percentage bar ​

A dynamic percentage bar visually represents the distribution of various items, offering a user-friendly interface to discern the proportional breakdown. Additionally, a legend can be shown for further clarification and enhanced data interpretation.

Expenses at each store
AldiAlbert HeijnJumboPlusOther

Props

is-legend-visible?: boolean
If the legend should be visible.

items: FluxPercentageBarItemObject[]
The items of the percentage bar.

Examples ​

Basic

A basic percentage bar.

Expenses at each store
AldiAlbert HeijnJumboPlusOther

<template>
    <FluxPane>
        <FluxPaneHeader
            icon="store"
            title="Expenses at each store"/>
        <FluxPaneBody>
            <FluxPercentageBar
                is-legend-visible
                :items="items"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxPaneHeader, FluxPercentageBar } from '@flux-ui/components';
    import type { FluxPercentageBarItemObject } from '@flux-ui/types';
    import { ref } from 'vue';

    const items = ref<FluxPercentageBarItemObject[]>([
        { label: 'Aldi', color: '#00529B', icon: "store", value: 0.25 },
        { label: 'Albert Heijn', color: '#00A1E4', icon: "store", value: 0.1 },
        { label: 'Jumbo', color: '#FFD700', icon: "store", value: 0.5 },
        { label: 'Plus', color: '#6BA539', icon: "store", value: 0.1 },
        { label: 'Other', color: '#CBD5E1', icon: "store", value: 0.05 }
    ]);
</script>

Plain

A percentage bar without legend items.

Expenses at each store

<template>
    <FluxPane>
        <FluxPaneHeader
            icon="store"
            title="Expenses at each store"/>
        <FluxPaneBody>
            <FluxPercentageBar
                :items="items"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxPaneHeader, FluxPercentageBar } from '@flux-ui/components';
    import type { FluxPercentageBarItemObject } from '@flux-ui/types';
    import { ref } from 'vue';

    const items = ref<FluxPercentageBarItemObject[]>([
        { label: 'Aldi', color: '#00529B', icon: "store", value: 0.25 },
        { label: 'Albert Heijn', color: '#00A1E4', icon: "store", value: 0.1 },
        { label: 'Jumbo', color: '#FFD700', icon: "store", value: 0.5 },
        { label: 'Plus', color: '#6BA539', icon: "store", value: 0.1 },
        { label: 'Other', color: '#CBD5E1', icon: "store", value: 0.05 }
    ]);
</script>

Used components ​