'/%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
FunnelChart
Cuántos pasan cada paso, con la proporción conservada desde el primero y desde el anterior.
import { FunnelChart } from '@alea/pro';
Ejemplos
Embudo de registro
Cada etapa muestra su valor y la proporción conservada desde el primer paso. Las flechas recorren las etapas.
One in five visitors starts a trial; one in four trials pays.
Visits12,400 100%
Sign-ups2,610 21%
Trials1,180 9.5%
Paid296 2.4%
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-bg…--alea-focus…--alea-text…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-sm…
Type
--alea-font-size-md…--alea-font-weight-regular…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…--alea-motion-duration-slow…--alea-motion-duration-slower…--alea-motion-ease-out…--alea-motion-spring…
Props
FunnelChart props
Cuántos pasan cada paso (visitas, registros, compras), con la proporción conservada desde el primero y desde el anterior.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
dataobligatoria | { label: string; value: number; }[] | - | Etapas de la más ancha a la más angosta. |
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. |
isLoading | boolean | - | Muestra un relleno con brillo mientras cargan los datos. |
showTable | boolean | true | Muestra el botón de tabla. Por defecto true. |
stageHeight | number | 44 | Altura de cada etapa en px. Por defecto 44. |
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 focusPressed (CSS)
- 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-funnel.alea-funnel-stage.alea-funnel-bar.alea-funnel-label.alea-funnel-value.alea-funnel-pct- Atributos data
data-contrast=moredata-contrast=normal
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
- Ordena los pasos como la gente los recorre.
- Nombra cada paso con lo que hizo la gente: Visitó, Se registró, Pagó.
Evitar
- No lo uses para pasos que se pueden saltar o hacer en cualquier orden.
- No pongas más de unos siete pasos.