A measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.

WebBêtaAffichage de données

Web uniquement — React, depuis @krizaka/ui/meter. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

Usage against a limit: storage, GPU minutes, API calls — with thresholds.
A balance where low is bad: credits, a budget (optimum="high").
A split: where a tip goes (90 % to the creator), the shares of a revenue (parts).

Quand ne pas l’utiliser

For the progress of a task toward its end.À la place : Progress
For a figure on its own, with its trend.À la place : Stat

Installation

Installer

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Meter, MeterValue } from "@krizaka/ui/meter";

Exemples

A split

Where a €10 tip goes: 90 % to the creator — a ring and a bar, each with its legend.

90 %creator

To the creator€9.00
Platform€1.00

To the creator€9.00
Platform€1.00

Quotas

Thresholds at 70 % and 90 %: calm, warning, danger, each value in words.

A balance

optimum="high": credits turn to danger as they run low.

12credits

80credits

Props

Meter

A measure within a range — a quota, a balance, a share — toned by thresholds or split into parts.

Prop	Type	Défaut	Description
`label`requis	`string`	—	The accessible name (“Storage”, “Split of a tip”) — passed translated; shown with `showLabel`.
`children`	`ReactNode`	—	A ring's centre: the value, a word.
`max`	`number`	`100`	The top of the range.
`min`	`number`	`0`	The bottom of the range.
`optimum`	`"high" \| "low"`	`low`	Which end is good.
`parts`	`readonly MeterPart[]`	—	Split into parts that add up to `max`: a stacked bar or ring, with its legend.
`showLabel`	`boolean`	—	Shows the label and the value above the bar.
`size`	`"sm" \| "md" \| "lg"`	`md`	sm · md · lg: the bar's thickness, the ring's diameter.
`thresholds`	`{ readonly low: number; readonly high: number; }`	—	Ratios (0–1) where the tone changes: past `high` it is in danger, past `low` in warning — or the reverse with `optimum="high"` (a balance: the lower, the worse). Without thresholds the fill is the brand accent.
`value`	`number`	`0`	The value, between `min` and `max` (ignored with `parts`).
`valueText`	`string`	—	The value in words (“42 GB of 50 GB”) — passed translated; default: the percentage.
`variant`	`"ring" \| "bar"`	`bar`	bar · ring.

MeterValue

For the ring's centre when it shows a figure and a word.

Prop	Type	Défaut	Description
`value`requis	`ReactNode`	—	The figure.
`caption`	`ReactNode`	—	A word under it.

Accessibilité

role="meter" named by label, with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext.
With parts, a named group whose legend lists each part with its value: the drawing is hidden, the list is read.
The tone is never the only signal: the value is in words, and the thresholds should come with a message.

Bonnes pratiques

Say the value in words with its unit (valueText: “18 GB of 50 GB”): the percentage alone hides the stakes.
Choose thresholds that call for an action (top up, upgrade) and say it next to the meter.
Two to four parts at most; name each one, the legend is the text version of the drawing.

Générée depuis le code de @krizaka/ui 2.3.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub