GaugeChart situe une valeur unique dans un intervalle et dans des zones nommées, en demi-cercle ou en cercle complet, en SVG statique.
Quand l’utiliser
Situer une valeur unique par rapport à un seuil ou à des zones : taux de remplissage, charge, délai.
Afficher la valeur en grand, écrite au centre, avec son unité et le nom de la zone atteinte.
Dire explicitement une valeur hors intervalle : l’aiguille est bornée et le texte l’indique.
Quand ne pas l’utiliser
Pour comparer plusieurs valeurs ou suivre une évolution : utiliser BarChart ou LineChart.
Sans seuil ni zone : une valeur seule s’écrit plus clairement en Stat.
Avec une couleur pour seule information : le sens vient du libellé écrit de la zone et de son motif, la teinte (tone) n’est qu’un renfort.
Avec un intervalle nul ou des seuils non croissants : le build échoue avec gauge.bad-range ou gauge.bad-thresholds.
Exemples
Taux de remplissage de la salle
Critique : de 0 % à 40 %
Vigilance : de 40 % à 80 %
Nominal : de 80 % à 100 %
Données du graphique
Taux de remplissage de la salle : Données du graphique
Zone
De
À
Valeur actuelle
Critique
0 %
40 %
Vigilance
40 %
80 %
72 %
Nominal
80 %
100 %
Stock de pièces en entrepôt
Critique : de 0 % à 40 %
Vigilance : de 40 % à 80 %
Nominal : de 80 % à 100 %
Données du graphique
Stock de pièces en entrepôt : Données du graphique
Zone
De
À
Valeur actuelle
Critique
0 %
40 %
Vigilance
40 %
80 %
58 %
Nominal
80 %
100 %
Charge du serveur, valeur hors intervalle
Normale : de 0 % à 70 %
Élevée : de 70 % à 90 %
Saturée : de 90 % à 100 %
Données du graphique
Charge du serveur, valeur hors intervalle : Données du graphique
Zone
De
À
Valeur actuelle
Normale
0 %
70 %
Élevée
70 %
90 %
Saturée
90 %
100 %
112 %
Temps de traitement d’une demande
Rapide : de 0 min à 15 min
Acceptable : de 15 min à 30 min
Lent : de 30 min à 45 min
Trop lent : de 45 min à 60 min
Données du graphique
Temps de traitement d’une demande : Données du graphique
Zone
De
À
Valeur actuelle
Rapide
0 min
15 min
Acceptable
15 min
30 min
Lent
30 min
45 min
34 min
Trop lent
45 min
60 min
---
import GaugeChart from '@paulperigault/astro/GaugeChart.astro';
---
<GaugeChart
id="remplissage"
title="Taux de remplissage de la salle"
value={72}
unit="%"
label="Taux de remplissage"
zones={[
{ label: 'Critique', to: 40, tone: 'bad' },
{ label: 'Vigilance', to: 80, tone: 'warning' },
{ label: 'Nominal', tone: 'good' },
]}
/>
Variantes
Recommandation d’usage
Une jauge porte une valeur unique et un seuil ou des zones. Ne l’employer que si la position dans l’intervalle compte autant que la valeur ; sinon, écrire la valeur.
Budgets de poids
Demi-cercle et cercle complet : sous 10 ko et 400 nœuds, zones et textes compris.
Limites connues
Les couleurs --pp-chart-1..6 restent figées sur l’accent par défaut tant que l’issue #121 n’est pas faite.
Le libellé central est tronqué à l’affichage ; le texte complet reste dans le desc.
Teinte d’accent
--pp-accent-hue règle la teinte OKLCH en degrés ; clarté et chroma restent ceux du système. Le branchement dans le build de tokens n’est pas fait (#121) : les graphiques ci-dessus utilisent les jetons figés sur la teinte 270.7. Le tableau montre ce que la dérivation donnerait pour la teinte 150, calculée à la construction de la page.
Jetons catégoriels figés et dérivation à une autre teinte
Rang
Figé, teinte 270.7, clair
Dérivé, teinte 150, clair
Dérivé, teinte 150, sombre
--pp-chart-1
oklch(47% 0.19 270.7)
oklch(47% 0.1294 150)
oklch(78% 0.1 150)
--pp-chart-2
oklch(64% 0.1491 60.7)
oklch(68% 0.31 330)
oklch(56% 0.24 315)
--pp-chart-3
oklch(20% 0.0787 30.7)
oklch(20% 0.0986 315)
oklch(88% 0.086 315)
--pp-chart-4
oklch(64% 0.1091 195.7)
oklch(48% 0.095 345)
oklch(52% 0.1235 120)
--pp-chart-5
oklch(44% 0.1781 0.7)
oklch(24% 0.0661 150)
oklch(56% 0.1 180)
--pp-chart-6
oklch(64% 0.2026 285.7)
oklch(64% 0.1346 165)
oklch(92% 0.2184 120)
Accessibilité
Clavier
Le SVG n’est pas interactif et ne reçoit pas le focus.
Le tableau des zones se déplie au clavier (élément details natif).
Lecteur d’écran
Le SVG porte role="img", nommé par un title et décrit par un desc.
Le desc donne la valeur, l’intervalle, la zone atteinte et la liste des zones avec leurs bornes.
Le tableau des zones est lié sous le graphique ; la ligne de la zone actuelle porte la valeur.
Garanti par le composant
Le sens ne repose jamais sur la couleur seule : chaque zone a un libellé écrit, un motif et son rang (WCAG 1.4.1).
La valeur, l’unité et la zone sont écrites au centre en texte, pas seulement dessinées.
Une valeur hors intervalle est bornée et le dit dans le desc.
Zéro JavaScript et aucune animation ; aucun attribut style ; jetons --pp-chart-* en clair et en sombre.
À la charge de l’intégrateur
Donner un id unique par page (lettres, chiffres, tirets).
Nommer chaque zone par un libellé qui dit l’état (Critique, Nominal), pas seulement une couleur.
Toute zone sauf la dernière porte sa borne to ; la dernière s’arrête au maximum.
Propriétés
Propriétés de GaugeChart
Propriété
Type
Défaut
Description
value (obligatoire)
number | null
—
Valeur mesurée ; `null` : état vide. Hors intervalle, l'aiguille est bornée et le dit.
min
number
0
Borne basse de l'intervalle (défaut 0).
max
number
DEFAULT_MAX
Borne haute de l'intervalle ; strictement supérieure à min.
unit
string
''
Unité écrite avec la valeur et les bornes (`%`, `ms`…).
label
string
''
Libellé central, tronqué à l'affichage ; le texte complet reste dans `<desc>`.
zones
ZoneSpec[]
[]
Zones dans l'ordre : `{ label, to, tone? }`, la dernière s'arrête au maximum (`to` omis).
shape
"half" | "full"
'half'
`half` (défaut) : demi-cercle ; `full` : cercle complet depuis midi.
labels
Partial<GaugeLabels>
{}
Textes de l'interface (défaut : français).
id (obligatoire)
string
—
Préfixe unique des ids du titre et de la description : lettres, chiffres et tirets.
title (obligatoire)
string
—
Titre du graphique, premier élément de son nom accessible.
locale
string
'fr'
Locale des nombres et des dates. Défaut : `fr`.
tableLabel
string
—
Libellé du tableau de données lié.
emptyLabel
string
—
Message de l'état vide (aucune valeur présente).
errorLabel
string
—
Début du message d'erreur de rendu ; le code d'erreur le suit.
class
string
—
Réservé au placement du composant dans son parent.