Cronograma

El plan de trabajo en barras: qué va del día tal al día cual y cuánto lleva hecho. Un Gantt de andar por casa, sin dependencias entre tareas. Como en el resto de gráficos de la biblioteca, el dibujo es el adorno y la tabla es el dato: debajo va una tabla de verdad con fechas, duración y avance, oculta a la vista salvo que se pida.

Cuándo usarlo

• El plan de un lanzamiento, una colección, una obra: pocas tareas con fecha de inicio (from) y de fin (to).
• progress (de 0 a 100) pinta la parte hecha dentro de la barra; tone en una tarea la colorea con el vocabulario común (accent, info, success, warning, error o neutral), y tone en el cronograma pinta todas las que no traen el suyo. detail sale en la tabla.
• range para que dos cronogramas compartan escala, y tableVisible cuando la tabla también tiene que verse. withToday={false} quita la línea de hoy.

Cuándo no

• Eventos de un día en el mes: MonthAgenda.
• Un proceso por fases que avanza en orden: Steps.
• Comparar cantidades: BarChart.

Teclado: no es interactivo y no tiene paradas de Tab. Las barras no se pulsan: son parte de una imagen.

Accesibilidad: el dibujo es una imagen con el resumen escrito en su nombre («Plan de la colección de otoño. 5 tareas, del 1 de septiembre al 15 de octubre. La más larga, Fundición, 16 días.»). La tabla está siempre en el DOM con su caption, aunque no se vea. Los meses y la línea de hoy son adorno. Las barras se miden en días de calendario contados en UTC, para que el cambio de hora no meta un día de 23 horas y descuadre el ancho.

Tamaños: barras de 20, 24 o 32 px de alto, con la columna de nombres de 7, 9 u 11 rem y su letra.

Fechas en la barra: el tramo como lo escribe el idioma («10–25 sept», «21 sept – 5 oct», «15 oct» si es de un día). Si no cabe acaba en «…», y en una barra de menos de 3 rem no se pinta; entero está en el title de la barra y en la tabla.

Movimiento: las barras entran creciendo desde su inicio, lo hecho crece detrás y la línea de hoy aparece cuando ya han llegado. Si cambian las fechas, las barras se desplazan a su sitio. Con movimiento reducido, nada de eso.

Aspecto fino: --amset-timeline-name es el ancho de la columna de nombres: la cabecera de meses, las barras y la línea de hoy se colocan a partir de él. Además -height (las barras), -slot (entre filas), -font (los nombres), -description (meses, fechas y tabla), -radius, -track (el fondo de cada fila), -bar y -bar-ink (el relleno y el color de sus fechas), -progress (lo hecho, encima de la barra), -today y -today-width.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben los meses y las fechas.