Saltar al contenido
EspañolEnglish
Todos los componentes (204)

Mapa de actividad

Datos · ActivityMap · .amset-activity

Qué es y cuándo usarlo

La rejilla de días por semanas, como la del perfil de GitHub: cada columna es una semana (de lunes a domingo), cada cuadro un día, y el color dice cuánta actividad hubo. Arriba, el título y el total del periodo, y encima de las columnas el nombre de cada mes en la semana en que empieza. Si el periodo no arranca en lunes, la primera columna sale con huecos en los días de antes: es la misma semana, no un descuadre.

Cuándo usarlo

  • Para ver de un vistazo qué días hay más movimiento en unos meses: pedidos, entradas al taller, reseñas.
  • from y to marcan el periodo, los dos incluidos; los días sin datos cuentan como cero, no como hueco. Son días de calendario, sin hora: el cambio de hora de marzo y de octubre no repite ni se come ninguno.
  • label dice qué se mide y unit de qué es cada cuenta («pedidos»).
  • tableVisible enseña debajo la tabla de días con su cuenta, cuando el número exacto importa.
  • El color se reparte en cuatro niveles sobre el máximo real del periodo: si el mejor día son cuatro pedidos, cuatro es el tope.

Cuándo no

  • Para comparar cantidades de unas pocas categorías: BarChart.
  • Para la evolución de una cifra, con su subida o bajada: Trend.
  • Para citas y eventos de un mes que se pueden abrir: MonthAgenda.

Teclado: no tiene: no hay nada que pulsar.

Accesibilidad: la rejilla es una table de verdad, con el título en el caption y el día de la semana como cabecera de cada fila. Cada cuadro lleva escritos, ocultos a la vista, su fecha completa y su cuenta («lunes, 14 de septiembre de 2026: 3 pedidos»): un cuadrado de color no se lee en voz alta ni se distingue si no se ven bien los colores. La leyenda «Menos … Más» es decorativa. Con tableVisible, la tabla de días es el dato para todos y la rejilla pasa a ser el dibujo (aria-hidden), para que el lector no lo oiga dos veces. Si from va después de to, lo dice («No hay fechas que enseñar») en vez de pintar una rejilla vacía.

Aspecto fino: variables CSS --amset-activity-*: -cell, -day, -label, -radius, -slot, -title. El tamaño mueve el lado de la casilla, el hueco entre ellas y los rótulos.

Cómo se ve

Pedidos del trimestre22 pedidos
lunlunes, 3 de agosto de 2026: 0 pedidoslunes, 10 de agosto de 2026: 0 pedidoslunes, 17 de agosto de 2026: 0 pedidoslunes, 24 de agosto de 2026: 0 pedidoslunes, 31 de agosto de 2026: 0 pedidoslunes, 7 de septiembre de 2026: 0 pedidoslunes, 14 de septiembre de 2026: 11 pedidoslunes, 21 de septiembre de 2026: 0 pedidoslunes, 28 de septiembre de 2026: 0 pedidoslunes, 5 de octubre de 2026: 0 pedidoslunes, 12 de octubre de 2026: 0 pedidoslunes, 19 de octubre de 2026: 0 pedidoslunes, 26 de octubre de 2026: 0 pedidos
marmartes, 4 de agosto de 2026: 0 pedidosmartes, 11 de agosto de 2026: 0 pedidosmartes, 18 de agosto de 2026: 0 pedidosmartes, 25 de agosto de 2026: 0 pedidosmartes, 1 de septiembre de 2026: 0 pedidosmartes, 8 de septiembre de 2026: 0 pedidosmartes, 15 de septiembre de 2026: 0 pedidosmartes, 22 de septiembre de 2026: 0 pedidosmartes, 29 de septiembre de 2026: 0 pedidosmartes, 6 de octubre de 2026: 0 pedidosmartes, 13 de octubre de 2026: 0 pedidosmartes, 20 de octubre de 2026: 0 pedidosmartes, 27 de octubre de 2026: 0 pedidos
miémiércoles, 5 de agosto de 2026: 0 pedidosmiércoles, 12 de agosto de 2026: 0 pedidosmiércoles, 19 de agosto de 2026: 0 pedidosmiércoles, 26 de agosto de 2026: 0 pedidosmiércoles, 2 de septiembre de 2026: 4 pedidosmiércoles, 9 de septiembre de 2026: 0 pedidosmiércoles, 16 de septiembre de 2026: 0 pedidosmiércoles, 23 de septiembre de 2026: 0 pedidosmiércoles, 30 de septiembre de 2026: 0 pedidosmiércoles, 7 de octubre de 2026: 0 pedidosmiércoles, 14 de octubre de 2026: 0 pedidosmiércoles, 21 de octubre de 2026: 0 pedidosmiércoles, 28 de octubre de 2026: 0 pedidos
juejueves, 6 de agosto de 2026: 0 pedidosjueves, 13 de agosto de 2026: 0 pedidosjueves, 20 de agosto de 2026: 0 pedidosjueves, 27 de agosto de 2026: 0 pedidosjueves, 3 de septiembre de 2026: 0 pedidosjueves, 10 de septiembre de 2026: 0 pedidosjueves, 17 de septiembre de 2026: 0 pedidosjueves, 24 de septiembre de 2026: 0 pedidosjueves, 1 de octubre de 2026: 7 pedidosjueves, 8 de octubre de 2026: 0 pedidosjueves, 15 de octubre de 2026: 0 pedidosjueves, 22 de octubre de 2026: 0 pedidosjueves, 29 de octubre de 2026: 0 pedidos
vieviernes, 7 de agosto de 2026: 0 pedidosviernes, 14 de agosto de 2026: 0 pedidosviernes, 21 de agosto de 2026: 0 pedidosviernes, 28 de agosto de 2026: 0 pedidosviernes, 4 de septiembre de 2026: 0 pedidosviernes, 11 de septiembre de 2026: 0 pedidosviernes, 18 de septiembre de 2026: 0 pedidosviernes, 25 de septiembre de 2026: 0 pedidosviernes, 2 de octubre de 2026: 0 pedidosviernes, 9 de octubre de 2026: 0 pedidosviernes, 16 de octubre de 2026: 0 pedidosviernes, 23 de octubre de 2026: 0 pedidosviernes, 30 de octubre de 2026: 0 pedidos
sábsábado, 1 de agosto de 2026: 0 pedidossábado, 8 de agosto de 2026: 0 pedidossábado, 15 de agosto de 2026: 0 pedidossábado, 22 de agosto de 2026: 0 pedidossábado, 29 de agosto de 2026: 0 pedidossábado, 5 de septiembre de 2026: 0 pedidossábado, 12 de septiembre de 2026: 0 pedidossábado, 19 de septiembre de 2026: 0 pedidossábado, 26 de septiembre de 2026: 0 pedidossábado, 3 de octubre de 2026: 0 pedidossábado, 10 de octubre de 2026: 0 pedidossábado, 17 de octubre de 2026: 0 pedidossábado, 24 de octubre de 2026: 0 pedidossábado, 31 de octubre de 2026: 0 pedidos
domdomingo, 2 de agosto de 2026: 0 pedidosdomingo, 9 de agosto de 2026: 0 pedidosdomingo, 16 de agosto de 2026: 0 pedidosdomingo, 23 de agosto de 2026: 0 pedidosdomingo, 30 de agosto de 2026: 0 pedidosdomingo, 6 de septiembre de 2026: 0 pedidosdomingo, 13 de septiembre de 2026: 0 pedidosdomingo, 20 de septiembre de 2026: 0 pedidosdomingo, 27 de septiembre de 2026: 0 pedidosdomingo, 4 de octubre de 2026: 0 pedidosdomingo, 11 de octubre de 2026: 0 pedidosdomingo, 18 de octubre de 2026: 0 pedidosdomingo, 25 de octubre de 2026: 0 pedidos

<ActivityMap
  label="Pedidos del trimestre"
  unit="pedidos"
  from="2026-08-01"
  to="2026-10-31"
  days={[{ date: '2026-09-14', count: 11 }]}
/>

Props

Se importa con import { ActivityMap } from '@amset/ui'. Las obligatorias van marcadas.

PropTipoPara qué sirve
daysobligatoriareadonly ActivityDay[]—
fromobligatoriastring | PlainDate | DatePrimer dia, incluido: `AAAA-MM-DD`, un dia suelto o un `Date`.
labelobligatoriastringQue se esta midiendo. Es el nombre de la tabla.
toobligatoriastring | PlainDate | DateUltimo dia, incluido.
unitobligatoriastringDe que es la actividad: «pedidos», «entrenamientos», «publicaciones».
classNamestringSe une a las clases de la biblioteca, no las sustituye.
size"sm" | "md" | "lg"—
tableVisiblebooleanEnseña tambien la tabla de dias y cuentas debajo de la rejilla. Entonces la tabla es el dato para todos y la rejilla, el dibujo; sin ella, la propia rejilla es la tabla para el lector de pantalla.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

VariablePor defecto
--amset-activity-cell0.75rem
--amset-activity-slot3px
--amset-activity-radius2px
--amset-activity-titlevar(--amset-text-sm)
--amset-activity-labelvar(--amset-text-xs)
--amset-activity-day0.625rem

Cómo se cambia

.amset-activity {
  --amset-activity-cell: ...;
  --amset-activity-slot: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: