Meter

Progress towards a maximum, with an optional target.

Import

import { Meter } from '@oztix/roadie-components/meter'

Examples

Default

<div className='w-48'>
  <Meter label='Tickets sold' value={1842} max={2400} />
</div>

Target

<div className='w-48'>
  <Meter label='Tickets sold' value={1842} max={2400} target={2040} />
</div>

Segments

<div className='w-48'>
  <Meter
    label='Capacity used'
    max={2400}
    segments={[
      { value: 1842, label: 'Sold', tone: 'highlight' },
      { value: 200, label: 'Held', tone: 'context' }
    ]}
  />
</div>

Guidelines

• Use Meter for progress against a fixed limit, such as capacity or a sales target. Use Sparkline for a trend over time.
• Set a target for a line marker on the track, such as a sell-through goal.
• Give each segment a tone: highlight for the lead value, context for a supporting one, other for a segment that doesn't fit either.

Accessibility

• Meter renders role='meter' with aria-valuemin, aria-valuemax and aria-valuenow set from max and the segment total.
• Pass valueText for a spoken value that isn't just the raw number, such as "1,842 of 2,400 sold".
• Non-finite values become 0, so a meter never breaks on missing data.
• Segments carry a texture under forced colours and in print, so tone never depends on colour alone.