mailinapp
Documentation menu

Bloque de medidor

Una sola métrica graficada contra bandas de umbral de bien/advertencia/grave que tú defines — un dial estilo aguja, no un gráfico basado en filas. Existe para la lectura de "¿está bien este número ahora mismo?": tiempo de actividad, tasa de errores, NPS, latencia, cualquier cosa con un enfoque de estado de salud en lugar de una tendencia o una comparación.

Cómo funciona

La imagen dibuja un arco semicircular dividido en tres bandas de color (bien, advertencia, grave) por dos puntos de corte de umbral, con una aguja que apunta al valor escrito. A diferencia de todos los gráficos hermanos de esta familia, un medidor no tiene ninguna lista de filas. Todos sus "datos" son cinco números escalares: un valor, una escala mínima/máxima, y los dos puntos de corte de umbral — más cercano en forma al valor único escrito de la tarjeta de indicador clave que a cualquier tabla de categoría/serie/punto.

Esa es también la razón por la que el medidor es el único bloque de gráfico en toda esta familia sin una tabla de datos debajo. Una tabla de datos existe para llevar números que la imagen encierra en píxeles, pero el valor y el estado de un medidor nunca quedan encerrados en primer lugar. Se renderizan como texto HTML real directamente junto a la imagen: una línea de valor en negrita (formateada como número plano, moneda, o porcentaje) seguida de una palabra de estado coloreada ("Bien", "Advertencia", o "Grave"). Una pequeña línea atenuada debajo de la imagen repite el valor, el estado, y el rango de escala. Ese texto es incondicional — se renderiza cargue o no la imagen, el mismo contrato de accesibilidad innegociable que cada otro gráfico de la familia cumple con una <table>.

Las bandas de umbral siempre usan la paleta de estado reservada (verde/ámbar/rojo), nunca un campo que puedas anular — la misma regla de confianza de "el rojo siempre significa malo" que siguen los colores de aumento/disminución del bloque de cascada. goodMax y warningMax dividen la escala min–max en tres bandas ascendentes en ese orden: bien, luego advertencia, y luego todo lo que pase warningMax es grave. Esa es la lectura clásica de "velocímetro" donde bajo es seguro y alto es riesgo, como la carga de CPU o la tasa de errores. Una métrica donde alto es en realidad bueno (como un puntaje NPS o de tiempo de actividad) simplemente escribe sus umbrales al revés, con goodMax fijado cerca de max, en lugar de necesitar un indicador de "dirección" separado.

Campos configurables:

  • Etiqueta — texto de encabezado opcional encima del valor.
  • Valor — la métrica en sí, como texto (así puede llevar una etiqueta de combinación).
  • Formato — Número, Moneda, o Porcentaje, controla cómo se renderiza el valor como texto.
  • Escala mínima / Escala máxima — los límites min/max del dial.
  • Zona buena hasta — el punto de corte goodMax.
  • Zona de advertencia hasta (por encima es Grave) — el punto de corte warningMax; todo lo que lo supere se renderiza como la banda grave.
  • Color de fondo, relleno, borde y radio de borde en la tarjeta.
  • Color/tamaño del valor y color/tamaño de la etiqueta — estilo de texto para la línea grande de valor y la etiqueta de encabezado.

Si el valor está en blanco o no se resuelve en un número (una etiqueta de combinación sin resolver, por ejemplo), el bloque omite el arco. Renderiza solo su etiqueta y el marco de la tarjeta, con un simple aviso de "Agrega un valor numérico para renderizar este medidor" en su lugar. Un rango escrito donde min >= max, o umbrales fuera de orden, se ajusta automáticamente en lugar de producir un dial roto a mitad de la edición.

Ejemplos

Una instantánea de SLA o tiempo de actividad — "99.94% de tiempo de actividad este mes", bien hasta 99.9%, advertencia hasta 99.5%, por debajo de eso grave — colocada en un resumen de página de estado le da a los suscriptores una lectura de salud de un vistazo sin un enlace a un panel de control. Un equipo de soporte puede graficar el tiempo de respuesta promedio contra los SLA objetivo (bien bajo 2 horas, advertencia bajo 6, grave más allá de eso). Un informe de NPS o puntaje de satisfacción orientado al cliente puede usar un medidor como el elemento visual principal en un correo trimestral de relación, con umbrales escritos para que un puntaje alto se lea como bueno en lugar de riesgoso.

Cómo se ve la alternativa estática

<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 línea de valor en negrita y la línea de resumen atenuada debajo de la imagen son ambas texto HTML real. El valor y el estado nunca dependen de que se renderice la imagen del arco — por eso el medidor es el único bloque de la familia sin una tabla de datos.

Relacionado