Gráficas
Activity cell heatmap
Activity cell heatmap: Una cuadrícula de calendario de pequeños cuadrados teñidos que se desplaza en una onda diagonal y permite que una franja de nivel aísle una intensidad a la vez.
Cómo usar Activity cell heatmap
Usa este mapa de calor de calendario para explorar una visualización compacta de actividad con cinco niveles de intensidad y una leyenda de color compartida.
Activity cell heatmap se presenta con el formato de vista previa «ancho» y el tema «claro/oscuro».
Cambia el número de semanas y el inicio de la semana para comparar composiciones de paneles. Pasa el cursor o enfoca un día para consultar su detalle cuando la interacción esté activada.
Esta implementación genera actividad de ejemplo determinista alrededor de una fecha fija. Conecta datos reales y actualiza el modelo de fechas antes de presentarla como un informe de actividad en vivo.
Personalizar la vista previa
Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.
| Control | Tipo | Valor inicial | Límites de la vista previa |
|---|---|---|---|
accent | color | #9BE15D | Los metadatos no indican otro límite. |
weeks | number | 30 | De 12 a 53; paso 1 |
gap | number | 2 | De 1 a 6; paso 1 |
cornerRadius | number | 2 | De 0 a 6; paso 1 |
weekStart | select | sunday | Opciones: sunday, monday |
interactive | boolean | true | Los metadatos no indican otro límite. |
¿Para qué frameworks está disponible Activity cell heatmap?
Activity cell heatmap está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.
¿Qué dependencias tiene Activity cell heatmap?
Los metadatos de React indican estas dependencias npm además de React: motion, clsx, tailwind-merge.
¿Qué detalles de accesibilidad se observan en Activity cell heatmap?
El código React de Activity cell heatmap incluye: elementos nativos (button); atributos y manejadores (aria-hidden, aria-label, onKeyDown, tabIndex); comparaciones de teclas (ArrowDown, ArrowLeft, ArrowRight, ArrowUp). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.
¿Cómo maneja Activity cell heatmap el movimiento reducido?
Activity cell heatmap consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: duration: reduce ? 0 : 0.12; isActive && !reduce ? "scale(1.26)" : "scale(1)"; transitionDelay: !reduce && ready && !revealed ? `${((cell.col + cell.row) * stepMs).toFixed(0)}ms` : "0ms". Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.
