mailinapp
Documentation menu

Bloc Jauge

Une seule métrique tracée par rapport à des bandes de seuil bon/avertissement/grave que vous définissez — un cadran de type aiguille, pas un graphique à lignes. Il existe pour la lecture « est-ce que ce chiffre va bien en ce moment » : disponibilité, taux d'erreur, NPS, latence, tout ce qui appelle un cadrage de statut de santé plutôt qu'une tendance ou une comparaison.

Comment ça fonctionne

L'image dessine un arc semi-circulaire divisé en trois bandes colorées (bon, avertissement, grave) par deux points de seuil, avec une aiguille pointant vers la valeur saisie. Contrairement à tout autre graphique de cette famille, une jauge n'a aucune liste de lignes du tout. Toute sa « donnée » se résume à cinq chiffres scalaires : une valeur, une échelle min/max, et les deux points de seuil — plus proche par sa forme de la valeur unique saisie de la carte de score KPI que de tout tableau catégorie/série/point.

C'est aussi pourquoi la jauge est le seul bloc de graphique de toute cette famille sans tableau de données en dessous. Un tableau de données existe pour porter des chiffres que l'image enferme dans des pixels, mais la valeur et le statut d'une jauge ne sont jamais enfermés en premier lieu. Ils se rendent comme du vrai texte HTML directement à côté de l'image : une ligne de valeur en gras (formatée comme un simple nombre, une devise, ou un pourcentage) suivie d'un mot de statut coloré (« Bon », « Avertissement », ou « Grave »). Une petite ligne discrète sous l'image répète la valeur, le statut, et la plage d'échelle. Ce texte est inconditionnel — il se rend que l'image se charge ou non, le même contrat d'accessibilité non négociable que chaque autre graphique de la famille remplit avec un <table>.

Les bandes de seuil utilisent toujours la palette de statut réservée (vert/ambre/rouge), jamais un champ que vous pouvez personnaliser — la même règle de confiance « le rouge signifie toujours mauvais » que suivent les couleurs d'augmentation/diminution du bloc cascade. goodMax et warningMax divisent l'échelle min–max en trois bandes ascendantes dans cet ordre : bon, puis avertissement, puis tout ce qui dépasse warningMax est grave. C'est la lecture classique « compteur de vitesse » où bas est sûr et élevé est risqué, comme la charge CPU ou le taux d'erreur. Une métrique où élevé est en fait bon (comme un score NPS ou de disponibilité) saisit simplement ses seuils dans l'autre sens, avec goodMax réglé près de max, plutôt que d'avoir besoin d'un indicateur de « direction » séparé.

Champs configurables :

  • Libellé — texte d'en-tête facultatif au-dessus de la valeur.
  • Valeur — la métrique elle-même, comme texte (afin qu'elle puisse porter une balise de fusion).
  • Format — Nombre, Devise, ou Pourcentage, contrôlant comment la valeur se rend en texte.
  • Minimum de l'échelle / Maximum de l'échelle — les bornes min/max du cadran.
  • Zone bonne jusqu'à — le point de seuil goodMax.
  • Zone d'avertissement jusqu'à (au-delà est Grave) — le point de seuil warningMax ; tout ce qui le dépasse se rend comme la bande grave.
  • Couleur de fond, remplissage, bordure et rayon de bordure sur la carte.
  • Couleur/taille de la valeur et couleur/taille du libellé — style de texte pour la grande ligne de valeur et le libellé d'en-tête.

Si la valeur est vide ou ne se résout pas en un nombre (une balise de fusion non résolue, par exemple), le bloc saute l'arc. Il rend seulement son libellé et le cadre de la carte, avec un simple avis « Ajoutez une valeur numérique pour afficher cette jauge » à la place. Une plage saisie où min >= max, ou des seuils dans le désordre, est automatiquement bornée plutôt que de produire un cadran cassé en cours d'édition.

Exemples

Un instantané de SLA ou de disponibilité — « 99,94 % de disponibilité ce mois-ci », bon jusqu'à 99,9 %, avertissement jusqu'à 99,5 %, tout en dessous grave — déposé dans un digest de page de statut donne aux abonnés une lecture de santé en un coup d'œil sans lien vers un tableau de bord. Une équipe de support peut représenter le temps de réponse moyen par rapport aux SLA cibles (bon sous 2 heures, avertissement sous 6, grave au-delà). Un rapport de score NPS ou de satisfaction client destiné au client peut utiliser une jauge comme visuel principal dans un email trimestriel de relation, avec des seuils saisis pour qu'un score élevé se lise comme bon plutôt que risqué.

À quoi ressemble l'alternative statique

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Uptime this month</p>
  <p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
    99.94%  <span style="font-size:14px;font-weight:600;color:#16a34a">Good</span>
  </p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="320" height="200"
       alt="Gauge: 99.94 of 0–100 (Good)" />
  <p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Uptime this month — 99.94% (Good) — scale 0–100</p>
</div>

La ligne de valeur en gras et la ligne de résumé discrète sous l'image sont toutes deux du vrai texte HTML. La valeur et le statut ne dépendent jamais du rendu de l'image de l'arc — c'est pourquoi la jauge est le seul bloc de la famille sans tableau de données.

Voir aussi