mailinapp
Documentation menu

Bloque de cascada

Un gráfico de total acumulado — un valor inicial, luego una secuencia de barras de aumento y disminución que flotan entre el total acumulado antes y después de cada una, opcionalmente terminando en una barra de "total" definida a mitad de camino o al final. Es la forma estándar para un puente de ingresos: "MRR inicial" → nuevos negocios → expansión → cancelaciones → "MRR final."

Cómo funciona

Cada fila escrita se convierte en una barra que suma un delta con signo al total acumulado (un aumento o una disminución) o restablece el total acumulado directamente a un valor absoluto (un ancla de total o subtotal). Esa es una diferencia geométrica real respecto al gráfico de embudo, no solo de estilo. Una barra de embudo siempre empieza en cero y se reduce de forma monótona. Una barra de cascada flota en cambio: su borde izquierdo se ubica donde ya estaba el total acumulado, y su borde derecho se ubica donde termina, lo cual puede moverse en cualquier dirección.

Las barras de aumento, disminución y total siempre se dibujan con los mismos tres colores reservados, nunca sobrescribibles por el autor para el par aumento/disminución. Es la misma regla de confianza de "el rojo siempre significa malo" que el producto aplica a cada color de estado, así una cascada se lee de forma consistente en cada correo en lugar de como sea que elegiste los colores la última vez. Solo el Color del total neutral es una elección real del autor, y usa por defecto el color de marca del proyecto cuando se deja en blanco.

La tabla de datos siempre visible debajo de la imagen repite la Etiqueta, el Valor, el Tipo (Aumento/Disminución/Total), y el Total acumulado de cada barra después de esa barra. La columna de total acumulado es el único número genuinamente específico de este tipo de gráfico, ya que solo una secuencia de deltas flotantes tiene una cifra con sentido de "dónde estaban las cosas después de esta barra." La leyenda solo enumera los roles realmente presentes entre las barras escritas — un gráfico sin barra de total no muestra ninguna muestra de color de "Total" que nadie usó.

Igual que el embudo, el orden de las barras es el dato: las matemáticas del total acumulado dependen del orden en que escribiste las filas. Pasadas 8 barras, todo lo que exceda el límite se descarta en lugar de agruparse en un bucket sintético como hacen el gráfico circular/mapa de árbol con las porciones desbordadas — fusionar dos barras corrompería silenciosamente el total acumulado del que depende cada barra siguiente. Una etiqueta en blanco o un valor no interpretable se omite, no se cuenta como una barra real de valor cero.

Campos configurables:

  • Título del gráfico — texto de encabezado opcional sobre el gráfico.
  • Barras (en orden) — la lista de filas: una Etiqueta, un Valor numérico (un delta con signo, o un valor absoluto cuando la fila está marcada como total), y una celda de Tipo — escríbela como total (sin distinguir mayúsculas de minúsculas) para hacer de esa fila un ancla absoluta; cualquier otra cosa, incluida una celda en blanco, es un delta simple.
  • Color del total — sobrescribe el color neutral usado para las barras de total/subtotal; déjalo en blanco para usar el color de marca del proyecto. Los colores de aumento y disminución no son configurables.
  • Color de fondo, relleno, borde y radio de borde de la tarjeta.
  • Color/tamaño del título y color/tamaño de la leyenda — estilo de texto para el encabezado y el texto de la leyenda/tabla debajo de la imagen.

Si aún no se ha escrito ninguna barra, el bloque renderiza su título y el marco de la tarjeta con un simple aviso de "Agrega al menos una fila de datos para renderizar este gráfico" en lugar de la imagen.

Ejemplos

Un puente de ingresos mensuales — MRR inicial, Nuevos negocios, Expansión, Cancelaciones, MRR final — es el uso canónico, colocado en una actualización para la junta directiva o un resumen para inversionistas para que el lector vea exactamente qué movió el número sin necesidad de una hoja de cálculo adjunta. Un informe de plantilla puede construir un puente de Plantilla inicial → Contrataciones → Bajas → Plantilla final para un resumen operativo mensual. Un equipo de producto que rastrea el presupuesto de errores del lanzamiento de una función podría construir un puente de un presupuesto inicial contra incidentes categorizados que lo consumieron, terminando en una barra de total del presupuesto restante.

Cómo se ve la alternativa estática

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

El texto alternativo de la <img> detalla el valor y el rol de cada barra; la tabla agrega la cifra de total acumulado que le da su nombre al puente.

Relacionado