Puente de ingresos

Qué explica el cambio entre dos periodos.

Definición

El puente de ingresos parte del total de un periodo, suma y resta cada efecto con nombre —precio, volumen, clientes nuevos, bajas— y llega al total del siguiente. Los tramos flotan sobre el acumulado, así que se lee qué explica la diferencia y cuánto aporta cada causa. Se usa en revisiones de resultados y de presupuesto.

Editar con tus datos SVG Spec JSON

Datos: category · value · type
Buena para: Explicar qué efectos llevan de un total al siguiente y cuánto pesa cada uno.
Evítala cuando: Cuando los efectos no suman la diferencia entre los dos totales: un puente que no cierra no es un puente.
Se lee bien: Entre 3 y 15 elementos; dibuja hasta 26
Datos que faltan: Dibuja el valor ausente como cero.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`category` · opcional	string	El efecto. Sin ella la pieza devuelve cero filas.
`value` · opcional	number	La aportación del efecto, con su signo. Su propia exportación la escribe cruda en «Value ($M)» (el «+$45M» es cosa del render) y el nombre casa por `nombreSinUnidad`. Una celda con texto que no es un número no vale 0: la pieza falla diciendo cuántas y cuáles.
`type` · opcional	string	Cuál de las filas es un ANCLA: la que dice «Total» arranca en cero y fija el acumulado; las demás son tramos flotantes. Si no viene la columna, no hay anclas y todas las filas son tramos — que es lo que significa un puente sin cabeceras, no una suposición.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px el motor se niega y explica por qué: el eje X no puede rotular sus 8 categorías: cada banda mide 33.0 px y «Price Effect» pide 116.5. «Prior Year Revenue» y «Price Effect» se abrevian las dos a «Pr. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Quieres explicar la diferencia entre dos totales?

Si sólo hay que comparar los dos periodos, unas barras verticales lo enseñan sin descomponer.

Sí: quédate con puente de ingresos

No: usa Gráfico de barras verticales

¿Hablas de ingresos en general y no de recurrente mensual?

En un negocio de suscripción, la cascada de MRR explica el ingreso recurrente mensual final por sus movimientos, cada uno con su signo.

Sí: quédate con puente de ingresos

No: usa Cascada de MRR

¿Cada efecto es un solo número?

Si cada efecto se reparte a su vez entre segmentos, la cascada apilada desglosa cada tramo.

Sí: quédate con puente de ingresos

No: usa Cascada apilada

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('revenuebridge');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Cómo marco el total de salida y el de llegada?

Con la columna de tipo: la fila marcada como «Total» arranca en cero y fija el acumulado. Sin esa columna, todas las filas son tramos.

¿Qué pasa con una celda que no es un número?

No cuenta como cero: la pieza falla diciendo cuántas celdas y cuáles.

¿Llevan signo los efectos?

Sí: cada aportación va con su signo, positivo si suma y negativo si resta.

¿Qué hace si faltan datos?

Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «partes de un todo»

Guía para elegir: partes de un todo →