Bloco Scorecard de KPI
Um grande número de destaque para a métrica que um e-mail está reportando — receita, cadastros, NPS, seja o que for que o destinatário deva ver primeiro. É o bloco com que a maioria dos e-mails de resumo e dashboard começa, geralmente três deles lado a lado acima de um gráfico.
Como funciona
Um scorecard é um rótulo, um valor grande, um indicador de tendência opcional e um sparkline opcional — nessa ordem visual, de cima para baixo. O valor e o rótulo são sempre renderizados como texto HTML real, no tamanho de fonte e cor que você definiu; nada na leitura do número de destaque depende do carregamento de uma imagem. Somente o sparkline é um PNG renderizado, e mesmo assim é decoração sobre um número que já é legível sem ele.
O indicador de tendência (o "Δ") só aparece quando um valor anterior e uma direção de tendência são definidos, ambos. O bloco os trata como uma única unidade autorada, não dois campos opcionais independentes, então nunca há um estado ambíguo em que uma porcentagem de Δ apareça sem uma seta para explicar qual direção é boa. A própria porcentagem é sempre calculada a partir de value vs. previousValue; a direção (para cima/para baixo/estável) não é inferida a partir de o número ter subido — você mesmo a define.
Isso importa porque "subiu" nem sempre é boa notícia. Uma contagem de tickets de suporte ou uma taxa de churn subindo é ruim, e um scorecard reportando qualquer um dos dois precisa dizer isso com uma seta na cor de "para baixo" mesmo que o número bruto tenha aumentado. A cor da seta segue a direção que você escolheu (verde para cima, vermelho para baixo, âmbar para estável) usando as próprias cores de status do projeto, não uma paleta fixa.
O sparkline é uma pequena imagem de linha de tendência plotando os valores que você digita no campo Sparkline values — ou, no modo vinculado, os valores por linha do campo vinculado, limitados a 60 pontos. Ele só é renderizado quando há pelo menos dois pontos para desenhar uma linha entre eles. Sua cor de linha segue a cor do Δ quando há um, então uma tendência descendente e de aparência séria literalmente lê vermelho à primeira vista; sem um Δ configurado, ele volta à cor de marca do projeto.
Campos configuráveis:
- Label — o nome da métrica, além de sua própria cor e tamanho de fonte.
- Value — o número de destaque, como uma string literal (para que também possa conter uma merge tag).
- Format — Number, Currency (USD, sem casas decimais) ou Percent — controla como
valueepreviousValuesão formatados para exibição, não como são armazenados. - Previous value — o ponto de comparação para o Δ. Obrigatório junto com Trend direction para que qualquer Δ apareça.
- Trend direction — None / Up / Down / Flat. Controla tanto o glifo da seta quanto sua cor.
- Sparkline values — uma lista de números digitada manualmente, plotada da esquerda para a direita.
- Background color, padding, border, border radius no cartão.
- Pares independentes de cor/tamanho de fonte para o texto do valor e o texto do rótulo.
Além dos valores autorados, um scorecard de KPI pode vincular seu valor a uma fonte de dados conectada ou aos próprios resultados de resposta de uma campanha passada. Uma vinculação a fonte de dados emparelha um campo Value com um agregado (Soma, Média, Contagem ou Última linha) que colapsa toda linha vinculada no único número de destaque. A vinculação substitui apenas value e os dados de origem do sparkline; previousValue e trendDirection sempre permanecem digitados pelo autor, já que um número "anterior" vinculado precisaria de instantâneos históricos que esse esquema não guarda. Veja Vinculando gráficos a dados reais para a mecânica completa de ambos os modos.
Exemplos
Subject
Your July performance summary
A forma mais rápida de ver esse bloco em contexto é começar um projeto com o propósito Dashboard. Ele semeia um heading "Weekly performance" e três scorecards de KPI lado a lado em colunas: Revenue como moeda com um Δ ascendente, New signups como um número simples com um Δ ascendente, Conversion rate como porcentagem com um Δ estável. Um gráfico de barras vem em seguida (o preset de grade do Dashboard). É um ponto de partida com números de exemplo plausíveis, não vinculado a nada até você conectá-lo.
Um resumo semanal de operações pode começar com três scorecards (tickets abertos, tempo médio de resposta, CSAT), cada um com um Δ contra a semana passada, dando ao leitor o destaque antes mesmo de rolar até qualquer gráfico. Um relatório pós-campanha pode usar um único scorecard grande para "Total revenue" vinculado aos pedidos do bloco de produto daquela campanha via um agregado de fonte de dados, com um sparkline mostrando a evolução dia a dia até o envio. O resumo mensal de um negócio de assinatura pode transformar em scorecard MRR, contas com churn e contas líquidas novas juntas: três cartões, três direções de Δ diferentes, cada um colorido corretamente porque a direção é autorada por cartão em vez de adivinhada a partir do sinal da mudança.
Como é o fallback estático
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Revenue</p>
<p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
$24,800
<span style="font-size:14px;font-weight:600;color:#16a34a">▲ +18.1%</span>
</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="160" height="40"
alt="Trend sparkline, upward: 18000, 19500, 21000, 24800"
style="display:block;max-width:100%;height:auto;margin:4px 0" />
<p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Revenue — $24,800 — ▲ +18.1% vs previous</p>
</div>
O valor, o rótulo e o Δ já são todos texto real antes mesmo do <img> do sparkline aparecer; a linha cinza pequena logo abaixo repete os mesmos três fatos como texto simples, de modo que o cartão fica totalmente legível com as imagens desligadas.