mailinapp
Documentation menu

Bloco Medidor

Uma única métrica plotada em relação a faixas de limite bom/atenção/grave que você define — um mostrador estilo ponteiro, não um gráfico baseado em linhas. Ele existe para a leitura de "esse número está bem agora": uptime, taxa de erro, NPS, latência, qualquer coisa com um enquadramento de status de saúde em vez de uma tendência ou comparação.

Como funciona

A imagem desenha um arco semicircular dividido em três faixas coloridas (bom, atenção, grave) por dois pontos de corte de limite, com um ponteiro indicando o valor autorado. Diferente de todo gráfico irmão nessa família, um medidor não tem lista de linhas alguma. Todo o seu "dado" são cinco números escalares: um valor, uma escala mínimo/máximo e os dois pontos de corte de limite — mais próximo em formato do valor único autorado do scorecard de KPI do que de qualquer tabela de categoria/série/ponto.

É também por isso que o medidor é o único bloco de gráfico em toda essa família sem uma tabela de dados abaixo dele. Uma tabela de dados existe para carregar números que a imagem tranca dentro de pixels, mas o valor e o status de um medidor nunca ficam trancados de início. Eles são renderizados como texto HTML real diretamente ao lado da imagem: uma linha de valor em negrito (formatada como número simples, moeda ou porcentagem) seguida por uma palavra de status colorida ("Bom", "Atenção" ou "Grave"). Uma pequena linha discreta abaixo da imagem repete o valor, o status e a faixa da escala. Esse texto é incondicional — ele é renderizado independentemente de a imagem carregar, o mesmo contrato de acessibilidade inegociável que todo outro gráfico da família cumpre com uma <table>.

As faixas de limite sempre usam a paleta de status reservada (verde/âmbar/vermelho), nunca um campo que você pode sobrepor — a mesma regra de confiança "vermelho sempre significa ruim" que as cores de aumento/diminuição do bloco de cascata seguem. goodMax e warningMax dividem a escala min–max em três faixas ascendentes nessa ordem: bom, depois atenção, e depois tudo que passar de warningMax é grave. Essa é a leitura clássica de "velocímetro", em que baixo é seguro e alto é risco, como carga de CPU ou taxa de erro. Uma métrica em que alto é na verdade bom (como uma pontuação de NPS ou uptime) simplesmente autora seus limites ao contrário, com goodMax definido perto de max, em vez de precisar de um sinalizador de "direção" separado.

Campos configuráveis:

  • Rótulo — texto de cabeçalho opcional acima do valor.
  • Valor — a própria métrica, como texto (para poder carregar uma tag de personalização).
  • Formato — Número, Moeda ou Porcentagem, controlando como o valor é renderizado como texto.
  • Mínimo da escala / Máximo da escala — os limites min/max do mostrador.
  • Zona boa até — o ponto de corte goodMax.
  • Zona de atenção até (acima é Grave) — o ponto de corte warningMax; tudo que passar dele é renderizado como a faixa grave.
  • Cor de fundo, espaçamento interno, borda e raio da borda no cartão.
  • Cor/tamanho do valor e cor/tamanho do rótulo — estilo de texto para a linha de valor grande e o rótulo de cabeçalho.

Se o valor estiver em branco ou não resolver para um número (uma tag de personalização não resolvida, por exemplo), o bloco pula o arco. Ele renderiza apenas seu rótulo e o revestimento do cartão, com um aviso simples "Adicione um valor numérico para renderizar este medidor" no lugar. Uma faixa autorada em que min >= max, ou limites fora de ordem, são ajustados automaticamente em vez de produzir um mostrador quebrado no meio da edição.

Exemplos

Um retrato de SLA ou uptime — "99,94% de uptime este mês", bom até 99,9%, atenção até 99,5%, abaixo disso grave — colocado em um resumo de página de status dá aos assinantes uma leitura de saúde num relance, sem link para um painel. Uma equipe de suporte pode traçar o tempo médio de resposta contra metas de SLA (bom abaixo de 2 horas, atenção abaixo de 6, grave além disso). Um relatório de NPS ou satisfação voltado ao cliente pode usar um medidor como o visual principal em um e-mail trimestral de relacionamento, com limites autorados de forma que uma pontuação alta seja lida como boa, e não como risco.

Como é o fallback estático

<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>

A linha de valor em negrito e a linha de resumo discreta abaixo da imagem são ambas texto HTML real. O valor e o status nunca dependem da renderização da imagem do arco — motivo pelo qual o medidor é o único bloco da família sem tabela de dados.

Veja também