Descomposición DuPont

Descomponer el ROE en sus factores.

Definición

La descomposición DuPont dibuja el ROE como un árbol de cajas en el que cada una es un factor de la identidad margen × rotación × apalancamiento, con su cifra y su fórmula. Cada nivel ocupa una columna y cada caja cuelga del factor que descompone. Se usa para explicar de dónde sale la rentabilidad de una empresa.

Editar con tus datos SVG Spec JSON

Datos: component · value · formula · level · parent
Buena para: Enseñar qué factores componen el ROE y cuánto vale cada uno.
Evítala cuando: Cuando quieres explicar por qué cambió la rentabilidad: la identidad descompone, no señala causas.
Se lee bien: Entre 3 y 12 elementos; dibuja hasta 1000
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é
`component` · opcional	string	El factor de la identidad. También es la clave del nodo, así que dos filas con el mismo texto colisionan.
`value` · opcional	any	La cifra de la caja. Si es número se localiza con el `fmt` del spec; si ya viene compuesta («22,5 %», «2,5x») se respeta verbatim. Sin columna, la caja sale sin cifra — antes se imprimía ahí el rótulo del propio nodo.
`formula` · opcional	string	La fórmula que se imprime bajo el rótulo. Sin columna no se imprime nada.
`level` · opcional	number	Profundidad en la descomposición. AHORA SÍ COLOCA: `nx` sale del nivel —todos los hijos de un padre en la misma columna— y `ny` del reparto por carriles de hojas, el mismo de `DecisionTreeChart`. Antes se repartía `nx=(i+1)/(count+1)`, `ny=0,5`: todas las cajas en una misma horizontal por orden de fila (medido releyendo su propia exportación: UNA sola `ny` para los cinco nodos).
`parent` · opcional	string	De qué componente cuelga esta fila: el ENLACE, que es la afirmación del árbol («ROE = ROA × Multiplicador»). Sin esta columna el padre sólo se deduce cuando el nivel anterior tiene UN candidato; con dos o más la pieza falla con el recuento en vez de atar al primero, que es lo que hacía. `toExportRows()` la emite desde el 2-sep para que la pieza sepa releer su propia exportación.

Tamaños

Recompuesta, no encogida

El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.

Móvil · 528 × 570 px

Escritorio · 848 × 642 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Los componentes se multiplican entre sí?

Si los componentes se suman o restan, una cascada enseña cómo se llega del principio al final.

Sí: quédate con descomposición dupont

No: usa Gráfico de cascada

¿Tienes una cifra para cada caja?

Si solo quieres enseñar qué palancas mueven el resultado, sin cifras, un árbol de palancas lo hace.

Sí: quédate con descomposición dupont

No: usa Árbol de palancas

¿Son pocos factores, doce como mucho?

Si la jerarquía tiene muchos niveles y ramas, un árbol con sangrías la lista sin quedarse sin sitio.

Sí: quédate con descomposición dupont

No: usa Árbol con sangrías

Código

La misma pieza, con tus datos

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

const spec = await getPreset('dupont');
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 se conectan las cajas?

Con la columna de padre: cada fila dice de qué componente cuelga. Sin ella el padre solo se deduce si el nivel anterior tiene un único candidato; con dos o más, la pieza falla.

¿Puedo escribir la cifra ya formateada?

Sí. «22,5 %» o «2,5x» se respetan tal cual; si es un número, se formatea.

¿Pueden repetirse nombres de componente?

No. El nombre es la clave de la caja, y dos filas con el mismo texto colisionan.

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

El motor la recompone a 480 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.

Relacionadas