Bloco Mapa de calor
Uma grade de linhas × colunas de valores, sombreada em uma rampa de cores sequencial do claro ao escuro — para identificar onde a atividade se concentra em duas dimensões ao mesmo tempo, como dia da semana × hora.
Como funciona
O gráfico é renderizado como um único PNG gerado no servidor (sem biblioteca de gráficos no lado do cliente, sem JavaScript) com uma tabela de dados HTML sempre visível abaixo dele — a mesma combinação inegociável que todo gráfico dessa família assume. Um mapa de calor não tem forma de série ou de participação por categoria como seus irmãos: a magnitude é codificada puramente pela intensidade de cor ao longo de uma única rampa sequencial, nunca por uma segunda cor de identidade. Sua "legenda" acima da tabela é uma barra de gradiente (CSS real, não uma lista de amostras), rotulada com 0 em uma ponta e o valor máximo real da grade na outra, mostrando qual tom corresponde a qual magnitude.
As linhas são autoradas em "formato longo": uma Linha, uma Coluna e um Valor por linha autorada — uma célula da grade, não uma linha ou coluna inteira de uma vez. Esse é o encaixe natural aqui, já que os dados do projeto não podem aninhar arrays dentro de arrays. O bloco agrupa cada célula autorada em uma matriz linha × coluna no momento da renderização. Rótulos distintos de linha e coluna são mantidos na ordem em que apareceram pela primeira vez na autoria, nunca ordenados — um mapa de calor listando dias da semana mantém segunda-feira primeiro porque você a digitou primeiro, não por qualquer inferência alfabética ou cronológica.
Uma combinação verdadeiramente ausente (um par (linha, coluna) para o qual você nunca autorou um valor) é renderizada como uma célula cinza plana e distinta de "sem dados" na imagem. Uma amostra "Sem dados" aparece na legenda sempre que a grade tiver ao menos uma lacuna dessas. Isso é deliberadamente diferente de como um zero seria renderizado.
Um zero é um valor real, apropriado na extremidade escura da rampa — o extremo inferior, mas ainda medido — enquanto uma lacuna significa que ninguém jamais registrou nada para aquela célula. Confundir os dois faria "não temos dados aqui" parecer idêntico a "a atividade aqui é exatamente zero", o que é uma afirmação materialmente diferente. A tabela de dados só lista células para as quais você realmente autorou um valor; uma lacuna genuína não contribui com nenhuma linha para a tabela também, já que não há valor para mostrar.
As células mostram seu valor exato como texto diretamente dentro da imagem da grade apenas enquanto a grade permanecer pequena: até 40 células no total (linhas × colunas). Além disso, apenas a sombra da rampa carrega a magnitude na própria imagem, e a tabela de dados sempre visível se torna o lugar para ler os números exatos. Encaixar texto legível em um número cada vez menor de células cada vez menores para de funcionar bem antes de a grade ficar grande. A grade tem um limite de 12 linhas e 24 colunas distintas. Uma identidade adicional de linha ou coluna além desses limites é descartada em vez de agrupada em uma já existente, já que mesclar duas linhas ou colunas genuinamente diferentes representaria mal o que cada uma media.
A rampa por padrão usa um matiz derivado da cor de marca do projeto; Cor da rampa a sobrepõe com a sua própria.
Este bloco é apenas linhas autoradas — não tem modo de vínculo a fonte de dados ou a respostas de campanha. Veja Vinculando gráficos a dados reais para saber quais quatro tipos de gráfico suportam vínculo.
Campos configuráveis:
- Título do gráfico — mostrado acima da imagem.
- Células (linha, coluna, valor) — a lista de linhas; uma célula da grade por linha autorada.
- Cor da rampa — sobrepõe o matiz padrão da rampa derivado da marca.
- Cor de fundo, espaçamento interno, borda, raio da borda no cartão.
- Pares independentes de cor/tamanho de fonte para o título e o texto da legenda/tabela.
Exemplos
Subject
When your RSVPs are opening
Um resumo de eventos pode mapear a atividade de confirmação de presença por dia da semana × hora do dia (um formato clássico de 7×24, confortavelmente dentro dos limites de linha/coluna) para mostrar aos organizadores quando os convites realmente são abertos e respondidos. Um relatório de operações de suporte pode gradear o volume de tickets por dia da semana × categoria, tornando óbvio qual categoria tem picos em qual dia sem uma dezena de gráficos de barras separados. Um relatório de temporada de uma equipe esportiva poderia mapear a presença por elenco × mês. Lacunas genuínas de "sem dados" — um elenco que ainda não existia em um mês inicial — são renderizadas de forma distintamente cinza, em vez de parecer um mês de presença zero, o que representaria mal o público real da equipe.
Como é o fallback estático
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Activity by day and time</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
alt="Heatmap: 3 rows × 4 columns, values from 0 to 15"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px">
<span style="font-size:12px;color:#6b7280">0</span>
<span aria-hidden="true" style="display:inline-block;width:120px;height:10px;border-radius:5px;background:linear-gradient(to right,#eef2ff,#3730a3)"></span>
<span style="font-size:12px;color:#6b7280">15</span>
</div>
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Row</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Column</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Tue</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Afternoon</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">15</td>
</tr>
</table>
</div>
A legenda de gradiente rotula os extremos 0 e máximo da rampa; a tabela lista Linha/Coluna/Valor para cada célula que realmente tem dados — uma lacuna real não contribui com nenhuma linha aqui.