Horario

Ocupación de recursos en el tiempo.

Definición

Un horario pone cada recurso en una columna y las horas en vertical, y dibuja un bloque por cada ocupación con su inicio y su fin. Se lee buscando dónde quedan huecos útiles y dónde el recurso está troceado. Se usa para aulas, quirófanos, salas o máquinas compartidas.

Editar con tus datos SVG Spec JSON

Los quirófanos no están vacíos, están troceados: de las 15 h 50 libres sólo 7 h 25 caben en un hueco aprovechable

Datos: category · label · start · end · group
Buena para: Ver cuánto sitio libre aprovechable queda en recursos compartidos a lo largo del día.
Evítala cuando: Cuando la escala es de semanas o meses: un horario trabaja con horas dentro del día.
Se lee bien: Entre 3 y 120 elementos; dibuja hasta 130
Datos que faltan: Se niega a dibujar y dice qué valor falta.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`category`	string	El RECURSO que se ocupa: la columna del horario (aula, sala, quirófano, máquina, día de la semana). Una fila por bloque, no por recurso.
`label`	string	Lo que ocurre en el bloque (la asignatura, la intervención, la reserva). Es el texto que se escribe dentro; si no cabe se envuelve y, en último término, se elide con el texto íntegro en el tooltip.
`start`	string	La hora de inicio, ESCRITA COMO HORA: «09:00», «9:00», «9h00». Un número suelto se rechaza con el valor en la mano, porque «9» puede ser las nueve o nueve minutos.
`end` · opcional	string	La hora de fin, con el mismo formato. Puede sustituirse por una columna de duración en minutos («duración», «minutos»), que sí admite un número porque ahí no hay reloj que confundir. Si el bloque cruza la medianoche, el fin se escribe pasado de 24 («26:00»).
`group` · opcional	string	La clase del bloque (especialidad, asignatura, equipo, cliente). Manda el color y la leyenda. Sin ella la figura se pinta con una sola tinta, que es lo correcto cuando no hay clases.

Tamaños

Recompuesta, no encogida

El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.

Móvil · 1102 × 568 px

Escritorio · 1102 × 842 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Las columnas son recursos que se comparten?

Si son tareas de un proyecto con fechas y duraciones en días, hace falta un cronograma.

Sí: quédate con horario

No: usa Diagrama de Gantt

¿La escala es de horas dentro de un día?

Si lo que cuenta es cada día del año, el calendario completo lo enseña.

Sí: quédate con horario

No: usa Mapa de calor de calendario

¿Te interesa el hueco libre entre bloques?

Si solo importa por qué estados pasa cada elemento y cuánto dura cada uno, una línea de estados basta.

Sí: quédate con horario

No: usa Línea de estados

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('timetable');
spec.data.rows = misFilas; // category, label, start
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Cómo escribo las horas?

Como hora: «09:00», «9:00» o «9h00». Un número suelto se rechaza. El fin puede darse como hora o como duración en minutos.

¿Qué cuenta como hueco?

Solo el tramo libre que supera un umbral declarado. El mismo porcentaje ocioso puede ser sitio de sobra o nada, según cuánto esté troceado.

¿Para qué sirve el color?

Para distinguir la clase del bloque: especialidad, equipo o cliente. Sin esa columna todo va en una sola tinta.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿Cómo se ve en el móvil?

El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.

Relacionadas

Otras formas de responder «dónde se sitúa cada uno»

Guía para elegir: dónde se sitúa cada uno →