mailinapp
Documentation menu

Blocco Indicatore

Una singola metrica tracciata rispetto a fasce di soglia buono/attenzione/critico che definisci tu — un quadrante a lancetta, non un grafico basato su righe. Esiste per la lettura "questo numero va bene proprio adesso": uptime, tasso di errore, NPS, latenza, qualunque cosa richieda un'inquadratura di stato di salute piuttosto che una tendenza o un confronto.

Come funziona

L'immagine disegna un arco semicircolare diviso in tre fasce colorate (buono, attenzione, critico) da due soglie di rottura, con una lancetta che punta al valore inserito. A differenza di ogni altro grafico "fratello" di questa famiglia, un indicatore non ha alcun elenco righe. L'intero suo "dato" è composto da cinque numeri scalari: un valore, una scala min/max e le due soglie di rottura — più vicino nella forma al singolo valore inserito della scorecard di KPI che a qualunque tabella categoria/serie/punto.

Questo è anche il motivo per cui l'indicatore è l'unico blocco grafico di tutta questa famiglia privo di una tabella dei dati sottostante. Una tabella dei dati esiste per portare i numeri che l'immagine racchiude nei pixel, ma il valore e lo stato di un indicatore non vengono mai racchiusi in primo luogo. Vengono renderizzati come vero testo HTML proprio accanto all'immagine: una riga di valore in grassetto (formattata come numero semplice, valuta o percentuale) seguita da una parola di stato colorata ("Buono", "Attenzione" o "Critico"). Una piccola riga attenuata sotto l'immagine ripete il valore, lo stato e l'intervallo della scala. Quel testo è incondizionato — viene renderizzato indipendentemente dal caricamento dell'immagine, lo stesso contratto di accessibilità non negoziabile che ogni altro grafico della famiglia rispetta con una <table>.

Le fasce di soglia usano sempre la palette di stato riservata (verde/ambra/rosso), mai un campo che puoi sovrascrivere — la stessa regola di fiducia "il rosso significa sempre negativo" che seguono i colori aumento/diminuzione del blocco Cascata. goodMax e warningMax suddividono la scala min–max in tre fasce ascendenti in quest'ordine: buono, poi attenzione, poi tutto ciò che supera warningMax è critico. È la classica lettura "tachimetro" in cui basso è sicuro e alto è rischio, come il carico della CPU o il tasso di errore. Una metrica in cui alto è in realtà positivo (come un punteggio NPS o di uptime) semplicemente inserisce le soglie al contrario, con goodMax impostato vicino a max, invece di richiedere un flag di "direzione" separato.

Campi configurabili:

  • Etichetta — testo di intestazione facoltativo sopra il valore.
  • Valore — la metrica stessa, come testo (così può contenere un tag di personalizzazione).
  • Formato — Numero, Valuta o Percentuale, per controllare come il valore viene renderizzato come testo.
  • Scala minima / Scala massima — i limiti min/max del quadrante.
  • Zona buona fino a — la soglia goodMax.
  • Zona di attenzione fino a (oltre è Critico) — la soglia warningMax; tutto ciò che la supera viene renderizzato come fascia critica.
  • Colore di sfondo, padding, bordo e raggio del bordo della card.
  • Colore/dimensione del valore e colore/dimensione dell'etichetta — stile del testo per la grande riga del valore e per l'etichetta di intestazione.

Se il valore è vuoto o non si risolve in un numero (ad esempio un tag di personalizzazione non risolto), il blocco salta l'arco. Renderizza solo la sua etichetta e il contorno della card, con un semplice avviso "Aggiungi un valore numerico per visualizzare questo indicatore" al suo posto. Un intervallo inserito in cui min >= max, o soglie fuori ordine, vengono limitati automaticamente invece di produrre un quadrante rotto a metà modifica.

Esempi

Uno snapshot di SLA o uptime — "99,94% di uptime questo mese", buono fino al 99,9%, attenzione fino al 99,5%, tutto ciò che è sotto è critico — inserito in un digest della status page dà agli iscritti una lettura di stato a colpo d'occhio senza un link a una dashboard. Un team di supporto può graficare il tempo medio di risposta rispetto agli SLA target (buono sotto le 2 ore, attenzione sotto le 6, critico oltre). Un report di NPS o punteggio di soddisfazione rivolto ai clienti può usare un indicatore come visual principale in un'email trimestrale sulla relazione, con soglie inserite in modo che un punteggio alto si legga come positivo anziché come rischio.

Come appare il fallback statico

<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 riga del valore in grassetto e la riga di riepilogo attenuata sotto l'immagine sono entrambe vero testo HTML. Il valore e lo stato non dipendono mai dal rendering dell'immagine dell'arco — motivo per cui l'indicatore è l'unico blocco della famiglia privo di una tabella dei dati.

Vedi anche