mailinapp
Documentation menu

Blocco Cascata

Un grafico a totale progressivo — un valore iniziale, poi una sequenza di barre di aumento e diminuzione che fluttuano tra il totale progressivo prima e dopo ciascuna di esse, concludendosi facoltativamente su una barra "totale" inserita manualmente a metà percorso o alla fine. È la forma standard per un ponte di ricavi: "MRR iniziale" → nuovo business → espansione → abbandono → "MRR finale".

Come funziona

Ogni riga inserita diventa una barra che aggiunge un delta con segno al totale progressivo (un aumento o una diminuzione) oppure azzera del tutto il totale progressivo su un valore assoluto (un'ancora di totale o subtotale). Si tratta di una vera differenza geometrica rispetto al grafico a imbuto, non solo di stile. Una barra dell'imbuto parte sempre da zero e si restringe in modo monotono. Una barra della cascata invece fluttua: il suo bordo sinistro si trova dove si trovava già il totale progressivo, e il suo bordo destro si trova dove finisce, il che può muoversi in entrambe le direzioni.

Le barre di aumento, diminuzione e totale vengono sempre disegnate negli stessi tre colori riservati, mai sovrascrivibili dall'autore per la coppia aumento/diminuzione. È la stessa regola di fiducia "il rosso significa sempre negativo" che il prodotto applica a ogni colore di stato, così una cascata si legge in modo coerente in ogni email invece di dipendere da come hai scelto i colori l'ultima volta. Solo il Colore del totale neutro è una scelta reale dell'autore, che per impostazione predefinita usa il colore del brand del progetto se lasciato vuoto.

La tabella dei dati sempre visibile sotto l'immagine ripete di ogni barra l'Etichetta, il Valore, il Tipo (Aumento/Diminuzione/Totale) e il Totale progressivo dopo quella barra. La colonna del totale progressivo è l'unico numero realmente specifico di questo tipo di grafico, poiché solo una sequenza di delta fluttuanti ha una cifra significativa di "a che punto si era arrivati dopo questa barra". La legenda elenca solo i ruoli effettivamente presenti tra le barre inserite — un grafico senza barra di totale non mostra nessun campione "Totale" inutilizzato.

Come per l'imbuto, l'ordine delle barre è il dato stesso: la matematica del totale progressivo dipende dall'ordine in cui hai digitato le righe. Oltre le 8 barre, tutto ciò che eccede il limite viene scartato anziché accorpato in un bucket sintetico come fanno torta/treemap con le fette in eccesso — unire due barre corromperebbe silenziosamente il totale progressivo da cui dipende ogni barra successiva. Un'etichetta vuota o un valore non interpretabile vengono scartati, non conteggiati come una barra reale dal valore zero.

Campi configurabili:

  • Titolo del grafico — testo di intestazione facoltativo sopra il grafico.
  • Barre (in ordine) — l'elenco righe: un'Etichetta, un Valore numerico (un delta con segno, oppure un valore assoluto quando la riga è contrassegnata come totale) e una cella Tipo — digita total (senza distinzione tra maiuscole e minuscole) per rendere quella riga un'ancora assoluta; qualunque altra cosa, inclusa una cella vuota, è un semplice delta.
  • Colore del totale — sovrascrive il colore neutro usato per le barre di totale/subtotale; lascialo vuoto per usare il colore del brand del progetto. I colori di aumento e diminuzione non sono configurabili.
  • Colore di sfondo, padding, bordo e raggio del bordo della card.
  • Colore/dimensione del titolo e colore/dimensione della legenda — stile del testo per l'intestazione e per il testo di legenda/tabella sotto l'immagine.

Se non è ancora stata inserita nessuna barra, il blocco renderizza il suo titolo e il contorno della card con un semplice avviso "Aggiungi almeno una riga di dati per visualizzare questo grafico" al posto dell'immagine.

Esempi

Un ponte di ricavi mensile — MRR iniziale, Nuovo business, Espansione, Abbandono, MRR finale — è l'uso canonico, inserito in un aggiornamento per il board o in un digest per gli investitori così il lettore vede esattamente cosa ha spostato il numero senza un foglio di calcolo allegato. Un report sull'organico può costruire un ponte da Organico iniziale → Assunzioni → Uscite → Organico finale per un riepilogo operativo mensile. Un team di prodotto che monitora il budget di errore del lancio di una funzionalità potrebbe costruire un ponte tra un budget iniziale e gli incidenti categorizzati che lo hanno consumato, atterrando su una barra di totale del budget residuo.

Come appare il fallback statico

<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>

Il testo alt dell'<img> riporta il valore e il ruolo di ogni barra; la tabella aggiunge la cifra del totale progressivo che dà il nome al ponte.

Vedi anche