'/%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
CalendarHeatmap
Actividad por día a lo largo de un año, como un gráfico de contribuciones: rachas y semanas tranquilas de un vistazo.
import { CalendarHeatmap } from '@alea/pro';
Ejemplos
Contribuciones
Actividad por día; cuanto más oscuro, más. Las flechas se mueven día por día.
Steady on weekdays, quiet in August.
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-focus…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Component
--alea-chart-1…
Props
CalendarHeatmap props
Actividad por día a lo largo de meses, como un gráfico de contribuciones: rachas y semanas tranquilas de un vistazo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
dataobligatoria | { date: DateValue; value: number; }[] | - | Un valor por día. |
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. |
start | DateValue | - | Primer día mostrado. Por defecto 52 semanas antes de la última fecha. |
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-calheat.alea-calheat-months.alea-calheat-body.alea-calheat-wd.alea-calheat-grid.alea-calheat-day- Atributos data
data-level=1data-level=2data-level=3data-level=4
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
- Úsalo para la actividad por día a lo largo de meses o un año.
- Di en la descripción qué significa una celda más oscura.
Evitar
- No lo uses para valores exactos: usa la tabla o un gráfico de líneas.