The MeterBar component is used to display progress or capacity as a horizontal meter, where the meter can be broken into multiple segments of different colors representing distinct values. Each segment fills a proportional amount of space based on the value provided, and it supports accessibility features.
Usage
Import
import { MeterBar } from '@passfort/castle'
Example
<Stack gap={5} w="50%">
<MeterBar
label="Meter Bar 1"
data={[
{ name: 'First', color: 'G100', value: 50 },
{ name: 'Second', color: 'O100', value: 25 },
{ name: 'Third', color: 'R100', value: 25 },
]}
value={43}
/>
<MeterBar
label="Meter Bar 2"
data={[
{ name: 'First', color: 'G100', value: 20 },
{ name: 'Second', color: 'O100', value: 50 },
{ name: 'Third', color: 'R100', value: 30 },
]}
value={66}
showProgress
/>
<MeterBar
label="Meter Bar 3"
data={[
{ color: 'G100', value: 40 },
{ color: 'O100', value: 50 },
{ color: 'R100', value: 30 },
{ color: 'B100', value: 30 },
]}
value={100}
showProgress
/>
<MeterBar
data={[
{ color: 'G100', value: 10 },
{ color: 'O100', value: 10 },
{ color: 'R100', value: 10 },
{ color: 'B100', value: 10 },
{ color: 'P100', value: 10 },
{ color: 'Y100', value: 10 },
]}
value={44}
showProgress
/>
</Stack>
live example
