Gauge

Candidate

Gauge represente une valeur mesuree dans une plage connue : quota restant, capacite utilisee, consommation ou niveau de completion. Il donne une lecture immediate tout en conservant la valeur exacte.

Preview

Volume disponible

2,4M profils activables

Resets 7:17 PM

Anatomy

1. Label : nomme la limite ou la mesure.
2. Value : affiche la valeur exacte avec une forte priorite visuelle.
3. Description : precise le sens de la valeur, par exemple remaining.
4. Track : represente la plage complete.
5. Fill : represente la position courante entre min et max.
6. Footer optionnel : indique une echeance, une remise a zero ou un contexte court.

Tones

Available capacity

72% available

Monthly usage

58% used

Storage remaining

24% remaining

API quota remaining

8% remaining

Tone	Usage
success	Niveau confortable ou disponibilite positive
info	Mesure informative sans evaluation
warning	Seuil necessitant une attention prochaine
danger	Limite proche ou situation critique
neutral	Mesure sans statut fonctionnel

Le ton est explicite et n’est pas calcule automatiquement. Une valeur basse peut etre positive pour un taux d’erreur, mais critique pour un quota restant.

Astro

---
import Card from '../components/ui/Card.astro';
import Gauge from '../components/ui/Gauge.astro';
---

<Card>
  <Gauge
    label="5 hour usage limit"
    value={35}
    min={0}
    max={100}
    valueText="35%"
    description="remaining"
    footer="Resets 7:17 PM"
    tone="success"
    ariaLabel="Quota de cinq heures restant"
  />
</Card>

value est limite visuellement entre min et max. valueText permet d’afficher une valeur metier differente du nombre brut, sans modifier la semantique de la jauge.

Tokens

Gauge utilise --gauge-label, --gauge-value, --gauge-description, --gauge-footer, --gauge-track, --gauge-fill-*, --gauge-content-gap, --gauge-track-height et --gauge-track-radius.

La surface, la bordure, le radius et le padding visibles dans l’exemple appartiennent a Card. Gauge ne recree pas son propre conteneur.

Do / Don’t

Do	Don’t
Afficher une valeur exacte avec la jauge.	Demander d’estimer une valeur uniquement par la longueur.
Preciser si la valeur est utilisee ou restante.	Utiliser un pourcentage ambigu sans description.
Choisir le ton selon le sens metier.	Appliquer danger automatiquement a toute valeur basse.
Utiliser une plage stable et documentee.	Changer implicitement le maximum entre deux affichages.
Composer Gauge dans Card lorsque la mesure forme une unite.	Imbriquer une Card directement dans Gauge.

Accessibility

Le track utilise role="meter" avec aria-valuemin, aria-valuemax, aria-valuenow et aria-valuetext. La valeur et sa description restent visibles en texte. Le ton ne doit jamais etre le seul moyen de communiquer un seuil critique.

Status

Candidate. Les plages personnalisees, valeurs metier, descriptions, footers et tons fonctionnels sont disponibles. Les jauges radiales et multi-segments restent hors V1.