Fuentes y usos

De dónde viene y a dónde va el dinero.

Definición

Fuentes y usos pone dos columnas apiladas una junto a otra: a la izquierda, de dónde sale el dinero de una operación; a la derecha, en qué se emplea. Las dos tienen que sumar lo mismo, así que cualquier diferencia de altura es el hallazgo. Se usa en financiaciones, compras de empresas y planes de inversión.

Editar con tus datos SVG Spec JSON

Datos: label · value · category
Buena para: Explicar cómo se financia una operación y comprobar que lo que entra cubre lo que se gasta.
Evítala cuando: Cuando el dinero pasa por varias etapas intermedias: dos columnas no enseñan el camino.
Se lee bien: Entre 2 y 12 elementos; dibuja hasta 300
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é
`label` · opcional	string	El concepto de cada tramo. Sin ninguna columna de texto la pieza devuelve cero filas. «category» ya NO está entre sus alias: es la columna del lado, y con las dos listas compartiéndola el rótulo y el lado podían salir de la misma columna.
`value` · opcional	number	El importe del tramo, que se apila dentro de su columna. La suma de la columna es el total que se rotula arriba. Una celda con texto que no es un número no vale 0: falla con la cifra.
`category`	string	De qué lado está la fila. OBLIGATORIA: es lo único que distingue lo que financia de en lo que se gasta, y partir las filas por la mitad —lo que hacía antes— cambia los dos totales sin decirlo. Se acepta «debt», «equity» o «Sources» para el origen y «use» o «Uses» para el empleo; se prueba primero «category»/«categoria», que son las únicas que además separan deuda de fondos propios (el color de la columna de fuentes). Cualquier otro valor FALLA CON LA CIFRA.

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 sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. 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

¿Basta con dos lados, origen y aplicación?

Si el dinero atraviesa varias etapas antes de llegar a su destino, un Sankey dibuja cada paso.

Sí: quédate con fuentes y usos

No: usa Diagrama de Sankey

¿Interesa una foto de la operación, no cómo cambia en el tiempo?

Si quieres seguir cómo evoluciona la mezcla de deuda y fondos propios año a año, conviene la estructura de capital.

Sí: quédate con fuentes y usos

No: usa Estructura de capital

¿Los importes se reparten en dos lados que deben cuadrar, no en pasos que se acumulan?

Si lo que cuentas es cómo se pasa de una cifra inicial a una final, sumando y restando, es una cascada.

Sí: quédate con fuentes y usos

No: usa Gráfico de cascada

Código

La misma pieza, con tus datos

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

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

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

Dudas

¿Y si las dos columnas no suman lo mismo?

Se dibujan tal cual, cada una con su total rotulado arriba. El desequilibrio queda a la vista y suele ser lo que hay que explicar.

¿Cómo sabe la pieza en qué lado va cada fila?

Por una columna obligatoria que dice el lado: «debt», «equity» o «Sources» para el origen y «use» o «Uses» para el empleo. Cualquier otro valor hace fallar la lámina en vez de adivinarlo.

¿Distingue la deuda de los fondos propios?

Sí, si la columna de lado los separa («debt» y «equity»): el color de la columna de fuentes los diferencia.

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