mailinapp
Documentation menu

Bloco Treemap

Blocos proporcionais dimensionados por valor, organizados para preencher um retângulo em vez de fatiados em gomos — a mesma forma de autoria de um valor por categoria do gráfico de pizza, apenas disposta por área ("squarified") em vez de por ângulo. É uma resposta visual diferente para a mesma pergunta de "participação de um todo" que um gráfico de pizza ou rosca responde.

Como funciona

Cada linha autorada é um bloco (tile); a área de um bloco é proporcional ao seu valor em relação ao total de todos os blocos mantidos. Um bloco de treemap é idêntico, em modelo de dados, a uma fatia de pizza: um valor por categoria, participação no total, apenas uma geometria diferente. Por isso, o bloco reutiliza diretamente as colunas de autoria, a lógica de atribuição de cores e o comportamento de agrupamento do gráfico de pizza, em vez de duplicar essa lógica para um segundo tipo de gráfico.

Essa linhagem compartilhada significa que a regra de agrupamento é exatamente a da pizza: além de 8 categorias, os menores blocos por valor se agrupam em um único bloco sintético "Outros", em vez de o layout ficar fragmentado a ponto de ficar ilegível. Os blocos que sobrevivem ao agrupamento mantêm sua ordem relativa original de autoria, sem serem reordenados por valor. Isso mantém sua atribuição de cor estável e previsível; "Outros", quando presente, sempre aparece por último. Linhas com rótulo em branco ou valor não positivo são ignoradas de imediato, já que um bloco de treemap não pode representar uma participação zero ou negativa de um todo.

A tabela de dados sempre visível abaixo da imagem segue o mesmo formato da pizza: colunas Categoria, Valor e Porcentagem, uma linha por bloco, incluindo a linha agrupada "Outros" quando existir. Ela carrega as porcentagens exatas que as áreas dos blocos representam, como texto selecionável. A legenda acima da tabela lista todo bloco com a mesma cifra de porcentagem, sempre renderizada e nunca condicionada a uma contagem de séries. O próprio título de um treemap não consegue nomear um bloco individual da forma como uma única série de barra/linha pode tomar emprestado o título do bloco.

Campos configuráveis:

  • Título do gráfico — texto de cabeçalho opcional acima do gráfico.
  • Dados — a lista de linhas: um rótulo de Categoria, um Valor numérico e uma Cor opcional por bloco.
  • Cor de fundo, espaçamento interno, borda e raio da borda no cartão.
  • Cor/tamanho do título e cor/tamanho da legenda — estilo de texto para o cabeçalho e para o texto da legenda/tabela abaixo da imagem.

Se ainda não houver linhas autoradas — ou se toda linha tiver rótulo em branco ou valor não positivo — o bloco pula a imagem. Ele renderiza apenas seu título e o revestimento do cartão, com um aviso simples "Adicione pelo menos uma linha de dados para renderizar este gráfico" no lugar.

Exemplos

A participação de tráfego por canal — orgânico, pago, referência, direto, social — como blocos em um recapitulativo mensal de marketing torna o tamanho relativo de cada fonte imediatamente legível sem ler uma coluna de porcentagem. Um e-mail de alocação orçamentária pode dispor o gasto por departamento ou projeto em blocos para mostrar para onde o dinheiro realmente foi neste trimestre. Uma equipe de suporte pode dispor o volume de tickets por categoria (cobrança, bugs, onboarding, pedidos de recurso) em blocos para dar aos stakeholders uma leitura rápida de onde a carga de suporte se concentra.

Como é o fallback estático

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Traffic share by channel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Treemap: Organic 40 (40%), Paid 25 (25%), Referral 15 (15%), Direct 12 (12%), Social 8 (8%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Percent</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Organic</td>
      <td style="padding:4px 8px">40</td>
      <td style="padding:4px 8px">40%</td>
    </tr>
  </table>
</div>

O texto alt descreve o valor e a participação no total de cada bloco; a tabela abaixo repete as mesmas cifras como HTML selecionável, incluindo qualquer bloco "Outros" agrupado.

Veja também