'/%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
Scatter, Radar y Heatmap
Cómo se relacionan dos medidas, varias medidas a la vez, e intensidad en una grilla.
import { ScatterChart, RadarChart, Heatmap } from '@alea/pro';
Ejemplos
Dispersión y burbujas
El tamaño del punto puede llevar una tercera medida.
- Desktop
- Mobile
Radar
Varias medidas a la vez: dos perfiles comparados.
- Ana
- Bruno
Mapa de calor
Actividad por día y hora; las flechas leen cada celda.
8101214161820MonTueWedThuFriSatSun
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-focus…--alea-text-muted…
Type
--alea-font-family-body…
Motion
--alea-motion-duration-fast…
Props
ScatterChart props
Cómo se relacionan dos medidas; los tamaños lo convierten en un gráfico de burbujas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
seriesobligatoria | { label: string; color?: string | undefined; points: { x: number; y: number; label?: string | undefined; size?: number | undefined; }[]; }[] | - | Grupos de puntos: label, color y los puntos con x, y (y un label y size opcionales). |
description | ReactNode | - | Una oración sobre lo que muestra el gráfico; se lee antes. |
height | number | 280 | Altura del gráfico en px. Por defecto 280. |
showTable | boolean | true | Muestra el botón "ver como tabla". Por defecto true. |
title | ReactNode | - | El título que se muestra arriba y que leen los lectores de pantalla. |
xFormat | ((v: number) => string) | - | Da formato a los valores de x. |
xLabel | string | 'x' | Nombre de la medida x (eje, tooltip, tabla). |
yFormat | ((v: number) => string) | - | Da formato a los valores de y. |
yLabel | string | 'y' | Nombre de la medida y. |
RadarChart props
Varias medidas a la vez, una forma por serie: habilidades, puntajes, perfiles.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
axisobligatoria | string | - | La clave en cada fila que nombra el eje ("skill"). |
dataobligatoria | ChartRow[] | - | Una fila por eje: el nombre del eje en `axis`, un valor por clave de serie. |
seriesobligatoria | Series[] | - | Las series a dibujar: key en cada fila, label para la leyenda, color opcional. |
description | ReactNode | - | Una oración sobre lo que muestra el gráfico; se lee antes. |
max | number | - | El máximo de la escala. Por defecto el valor más grande. |
showTable | boolean | true | Muestra el botón "ver como tabla". Por defecto true. |
size | number | 280 | Ancho y alto en px. Por defecto 280. |
title | ReactNode | - | El título que se muestra arriba y que leen los lectores de pantalla. |
Heatmap props
Intensidad en una grilla: actividad por día y hora, contribuciones, correlaciones.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
columnsobligatoria | string[] | - | Etiquetas de columna. |
rowsobligatoria | { label: string; values: number[]; }[] | - | Filas de celdas: [etiqueta de fila, ...valores]. |
description | ReactNode | - | Una oración sobre lo que muestra el gráfico; se lee antes. |
showTable | boolean | true | Muestra el botón "ver como 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 en el eje, el tooltip y la tabla, por ejemplo v => `${v}k`. |
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.
ScatterChart
- 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-point
RadarChart
- 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-svg.alea-radar.alea-chart-grid.alea-chart-axis.alea-radar-shape
Heatmap
- 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-heatmap.alea-heat-col.alea-heat-row.alea-heat-cell
Accesibilidad
- Dispersión y mapa de calor leen cada punto o celda con las flechas.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Enfoca el gráfico |
| Flechas | Lee cada punto o celda |
| Escape | Oculta el tooltip |
Qué hacer y qué evitar
Hacer
- Usa dispersión para correlación, radar para perfiles, mapa de calor para patrones en el tiempo.
- Escribe la conclusión en description.
Evitar
- No uses gráficos de radar con más de ocho ejes.
- No uses un mapa de calor sin la vista de tabla para los números exactos.