'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
GráficosAlea Pro
WaterfallChart
Cómo un monto inicial llega a uno final: cada cambio sube o baja desde el total acumulado, y los totales parten del piso.
import { WaterfallChart } from '@alea/pro';
Ejemplos
Puente de ganancias
Lo que sumó y lo que restó, desde el monto inicial hasta el total.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…--alea-border-control…--alea-focus…--alea-text-muted…
Type
--alea-font-family-body…
Motion
--alea-motion-duration-fast…--alea-motion-duration-slower…--alea-motion-spring…
Props
WaterfallChart props
Cómo un monto inicial llega a uno final: lo que sumó y lo que restó (puentes de ganancias, cambios de presupuesto).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
dataobligatoria | { label: string; value: number; isTotal?: boolean | undefined; }[] | - | Pasos: un cambio (positivo o negativo), o una barra de total (isTotal) que muestra la suma acumulada. |
className | string | - | Clases extra para el elemento raíz. |
description | ReactNode | - | Una oración sobre lo que muestran los datos; se lee antes del gráfico. |
height | number | 280 | Altura en px. Por defecto 280. |
isLoading | boolean | - | Muestra un relleno con brillo mientras cargan los datos. |
showTable | boolean | true | Muestra el botón de tabla. Por defecto true. |
title | ReactNode | - | El título que se muestra arriba y que leen los lectores de pantalla. |
valueFormat | ((v: number) => string) | - | Da formato a los valores (eje, tooltip, tabla). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Estados
- Keyboard focus
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-chart-svgwrap.alea-chart-svg.alea-chart-grid.alea-chart-axis.alea-chart-bargroup.alea-chart-bar.alea-chart-cross- Atributos data
data-dim
Accesibilidad
- El gráfico es una figura con su título como nombre y su descripción; la imagen tiene un resumen en texto.
- Tab hasta el gráfico, luego las flechas recorren los datos y se anuncia cada valor; Escape sale.
- El botón de tabla muestra los mismos datos como tabla real para quien no puede usar la imagen.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Enfoca el gráfico |
| Izquierda o Flecha derecha | Valor anterior o siguiente |
| Inicio o Fin | Primer o último valor |
| Escape | Borra la selección |
Qué hacer y qué evitar
Hacer
- Empieza y termina con totales, y muestra los cambios entre ellos.
- Usa los tonos success y danger para subidas y bajadas, y dilo también en las etiquetas.
Evitar
- No lo uses para valores que no se suman de uno al siguiente.