mailinapp
Documentation menu

Bloco Cascata

Um gráfico de total corrente — um valor inicial, seguido por uma sequência de barras de aumento e diminuição que flutuam entre o total corrente antes e depois de cada uma, opcionalmente pousando em uma barra "total" autorada na metade ou no final. É o formato padrão para uma ponte de receita: "MRR inicial" → novos negócios → expansão → churn → "MRR final".

Como funciona

Cada linha autorada se torna uma barra que soma um delta com sinal ao total corrente (um aumento ou uma diminuição) ou redefine o total corrente diretamente para um valor absoluto (uma âncora de total ou subtotal). Essa é uma diferença geométrica real em relação ao gráfico de funil, não apenas de estilo. Uma barra de funil sempre começa em zero e encolhe monotonicamente. Uma barra de cascata flutua: sua borda esquerda fica onde quer que o total corrente já estivesse, e sua borda direita fica onde quer que ele termine, o que pode se mover em qualquer direção.

Barras de aumento, diminuição e total sempre são desenhadas nas mesmas três cores reservadas, nunca sobrepostas pelo autor no caso do par aumento/diminuição. Essa é a mesma regra de confiança "vermelho sempre significa ruim" que o produto aplica a toda cor de status, para que uma cascata seja lida de forma consistente em todo e-mail, em vez de depender de como você escolheu as cores da última vez. Apenas a Cor do total, neutra, é uma escolha real de autoria, usando por padrão a cor de marca do projeto quando deixada em branco.

A tabela de dados sempre visível abaixo da imagem repete o Rótulo, o Valor, o Tipo (Aumento/Diminuição/Total) e o Total corrente de cada barra após ela. A coluna de total corrente é o único número genuinamente específico desse tipo de gráfico, já que apenas uma sequência de deltas flutuantes tem uma cifra significativa de "onde as coisas estavam depois desta barra". A legenda só lista os papéis realmente presentes entre as barras autoradas — um gráfico sem barra de total não mostra uma amostra "Total" que ninguém usou.

Assim como no funil, a ordem das barras é o próprio dado: a matemática do total corrente depende da ordem em que você digitou as linhas. Além de 8 barras, tudo que ultrapassar o limite é descartado em vez de agrupado em um bucket sintético como a pizza/o treemap fazem com o excedente de fatias — mesclar duas barras corromperia silenciosamente o total corrente do qual toda barra seguinte depende. Um rótulo em branco ou um valor não interpretável são ignorados, não contados como uma barra real de valor zero.

Campos configuráveis:

  • Título do gráfico — texto de cabeçalho opcional acima do gráfico.
  • Barras (em ordem) — a lista de linhas: um Rótulo, um Valor numérico (um delta com sinal, ou um valor absoluto quando a linha é marcada como total) e uma célula de Tipo — digite total (sem diferenciar maiúsculas/minúsculas) para tornar essa linha uma âncora absoluta; qualquer outra coisa, incluindo uma célula em branco, é um delta simples.
  • Cor do total — sobrepõe a cor neutra usada para barras de total/subtotal; deixe em branco para usar a cor de marca do projeto. As cores de aumento e diminuição não são configuráveis.
  • 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 barras autoradas, o bloco renderiza 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 da imagem.

Exemplos

Uma ponte de receita mensal — MRR inicial, Novos negócios, Expansão, Churn, MRR final — é o uso canônico, colocada em uma atualização para o conselho ou um resumo para investidores para que o leitor veja exatamente o que moveu o número sem uma planilha anexada. Um relatório de headcount pode fazer a ponte de Headcount inicial → Contratações → Desligamentos → Headcount final para um recapitulativo mensal de operações. Uma equipe de produto acompanhando o orçamento de erros de um lançamento de recurso poderia fazer a ponte de um orçamento inicial contra incidentes categorizados que o consumiram, pousando em uma barra de total de orçamento restante.

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">Monthly MRR bridge</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Waterfall: Starting MRR 12,000 (total) → New business +3,200 → Expansion +1,400 → Churn -1,800 → Ending MRR 14,800 (total)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Label</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">Type</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Running total</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Churn</td>
      <td style="padding:4px 8px">-1,800</td>
      <td style="padding:4px 8px">Decrease</td>
      <td style="padding:4px 8px">13,000</td>
    </tr>
  </table>
</div>

O texto alt da <img> descreve o valor e o papel de cada barra; a tabela adiciona a cifra de total corrente que dá nome à ponte.

Veja também