Jauge - gauge
- Lisa KLEIN
- Raphaël Sinclair
La jauge radiale utilise un arc de cercle pour afficher l’avancement d'une seule valeur qui progresse vers un objectif. Elle est personnalisable en fonction des besoins, avec des options pour définir les valeurs minimales et maximales, les seuils et les couleurs.
Exemples :
Afficher le pourcentage d’avancement de la facturation d’une affaire à l’instant T
Métrique VS Jauge
Le métrique indique une donnée précise à un instant T avec lien d’accès direct à l’information au clic sur le métrique
La jauge présente visuellement un contexte global et ne prévoit pas de navigation
La jauge peut être utilisée dans différents contextes :
CRUD
Widget (une documentation spécifique aux widgets est consultable ici : https://divalto.atlassian.net/wiki/x/N4BdkwI)
Types de jauge
Il y a différents types de jauge :
jauge radiale
Avec affichage de seuils (range) | Sans affichage de seuils (range) |
|---|---|
 | 
|
jauge radiale light avec
capacité de paramétrer des seuils (range) avec différentes couleurs
ne pas afficher de seuils et donc une couleur de jauge toujours identique peu importe l’avancement
jauge verticale
jauge horizontale
Anatomie
ℹ️ Visuel à refaire une fois qu’on aura un exemple finalisé
Titre
Arc de cercle et échelle
Aiguille
Usage
Arc de cercle et échelle
Valeurs minimales et maximales
Toutes les valeurs possibles sont réparties uniformément le long de l’arc, de la valeur minimale (la plus à gauche) à la valeur maximale (la plus à droite). Ces valeurs peuvent être personnalisées.
Seuils et couleurs
A l’intérieur de l’arc de cercle, des seuils peuvent être personnalisés. Pour permettre un bon affichage des seuils, ils doivent être appliqués de manière continue.
Exemple :
Je veux mettre en place 3 seuils :
de 0 à 40%, mon seuil doit être paramétré de 0 à 40.
de 40 à 80%, mon seuil doit être paramétré de 40 à 80 (et pas de 41 à 80).
de 80 à 100%, mon seuil doit être paramétré de 80 à 100 (et pas de 81 à 100).
Les seuils peuvent être associés à des couleurs spécifiques. On privilégiera les couleurs de la palette divalto. Les couleurs définies doivent suivre les bonnes pratiques UX précisées dans cette page.
Echelle
L'échelle est obligatoire. Elle indique la graduation utilisée.
Aiguille
L’aiguille représente la progression vers l’objectif à un instant T.
Cas spécifique de la jauge radiale light : donnée centrale
Dans le cas de la jauge radiale light, il est possible d’ajouter une donnée centrale qui donne l’avancement exact. La donnée centrale doit préciser à l’utilisateur l’unité utilisée.