Bloco Gráfico de pizza/rosca
Um valor por categoria, mostrado como fatia de um todo — uma pizza, ou no modo rosca um anel com espaço para um número de destaque no meio.
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 legenda sempre visível e uma tabela de dados HTML abaixo dela — o mesmo emparelhamento inegociável a que todo gráfico dessa família se compromete. Diferente da legenda do gráfico de barras/linha, a legenda de uma pizza sempre é renderizada independentemente da contagem de fatias. O próprio título de uma pizza não consegue nomear uma fatia individual da forma como uma série solitária de barra/linha pode tomar emprestado o título do bloco, então até uma pizza de fatia única precisa de sua legenda para dizer o que aquela fatia é.
Cada entrada de legenda mostra o rótulo da fatia junto com sua porcentagem do total. A tabela de dados adiciona uma terceira coluna (valor exato, além de categoria e porcentagem), para que tanto a fatia arredondada de leitura rápida quanto o número preciso estejam sempre disponíveis como texto.
O formato de autoria difere dos slots de série fixos de barra/linha: uma linha por categoria, cada uma com um único Value e uma sobreposição opcional de Color por fatia. Não há segunda ou terceira série, já que uma pizza tem exatamente uma medida por categoria por definição. Linhas com categoria em branco ou valor zero/negativo são ignoradas por completo em vez de serem desenhadas como uma fatia vazia.
Passando de 8 fatias, as menores se agrupam em uma única fatia sintética "Outros", em vez de o gráfico ficar fino demais para ler. Passando de aproximadamente 8 fatias, uma pizza deixa de conseguir mostrar cada uma em um ângulo distinguível, então o agrupamento mantém cada fatia desenhada legível. O agrupamento mantém as 7 maiores fatias por valor e combina todo o resto em "Outros". A legenda e a tabela de dados refletem o mesmo agrupamento, para que o que você lê ao lado do gráfico sempre corresponda ao que é de fato desenhado nele. Nada fica escondido silenciosamente da legenda enquanto ainda é contado na imagem, ou vice-versa.
O modo Donut transforma a pizza em um anel. Só então os campos Center value e Center label fazem alguma coisa, dando a você um número estilo KPI no meio do anel. Esse é um par digitado pelo autor, não derivado dos valores das fatias — o mesmo precedente de "autorado, não inferido" do próprio Δ do scorecard de KPI. Uma pizza sólida não tem um buraco para colocar texto, então esses campos ficam simplesmente inertes até o Donut ser ativado.
Campos configuráveis:
- Chart title — mostrado acima da imagem.
- Alternador Donut (centro oco).
- Data — a lista de linhas (Category + Value + Color opcional).
- Center value / Center label — somente donut.
- Background color, padding, border, border radius no cartão.
- Pares independentes de cor/tamanho de fonte para o título e o texto da legenda/tabela.
Um gráfico de pizza também pode vincular suas fatias a uma fonte de dados conectada em vez de autorar linhas — um campo Group by (cada valor distinto vira uma fatia) mais um campo Value e agregado (Soma, Média, Contagem ou Última linha). Um filtro opcional pode referenciar merge tags do destinatário para uma fatia por destinatário da mesma fonte. Veja Vinculando gráficos a dados reais para a mecânica completa, incluindo o modo de resultados de resposta de campanha — plotando a própria distribuição de votos de uma enquete ou avaliação passada diretamente, por exemplo.
Exemplos
Subject
Where your traffic is coming from
Um relatório pós-campanha pode transformar em pizza a distribuição de votos de uma enquete vinculando-se diretamente aos resultados de resposta daquela campanha — sem necessidade de fonte de dados, apenas escolhendo a enquete no seletor — para que o relatório sempre reflita a contagem atual da enquete. Um recapitulativo de assinaturas pode usar um gráfico donut para "mix de planos" (Free/Starter/Pro/Business como fatias) com o centro mostrando o total de contas ativas como um número estilo KPI dentro do próprio anel. Um resumo de suporte com uma dúzia de categorias de tickets depende do agrupamento automático "Outros" para manter o gráfico legível, confiando que a tabela de dados abaixo ainda liste cada categoria individual pela contagem exata.
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">Plan mix</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="320" height="320"
alt="Donut chart: Free 420 (52%), Starter 210 (26%), Pro 175 (22%)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<div style="display:flex;flex-wrap:wrap;gap:12px;margin:0 0 6px">
<span style="font-size:12px;color:#6b7280">
<span aria-hidden="true" style="display:inline-block;width:10px;height:10px;background-color:#4f46e5"></span>
Free (52%)
</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">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Percent</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Free</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">420</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">52%</td>
</tr>
</table>
</div>
A legenda e a tabela carregam exatamente o mesmo rótulo/valor/porcentagem para cada fatia — deliberadamente duplicado, já que a legenda é para leitura rápida e a tabela é a fonte precisa.