Línea de estados
En qué estado está cada elemento y cuándo.
Definición
La línea de estados dibuja un carril por elemento —una máquina, un vehículo, un servicio— y lo pinta por tramos, cada uno del color del estado en que estaba. Se lee de izquierda a derecha: cuándo cambió cada carril y cuánto tiempo pasó en cada estado. Se usa en operaciones, flotas y monitorización de sistemas.
- Datos
- category · series · start · end
- Buena para
- Ver en qué estado estuvo cada elemento en cada momento y cómo se reparte su tiempo.
- Evítala cuando
- Cuando un elemento puede estar en dos estados a la vez: los tramos de un carril se excluyen entre sí.
- Se lee bien
- Entre 2 y 300 elementos; dibuja hasta 400
- 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 carril cuyo estado se sigue: una franja por valor distinto, en el orden del fichero. |
series | string | El estado activo durante el tramo. Es un nombre, no un número; el orden en que aparecen en la tabla es el de la leyenda y el que reparte la paleta. Como mucho siete distintos. |
start | date | Instante en el que el carril entra en ese estado. |
end | date | Instante en el que sale de él. Es obligatorio: sin él el último tramo de cada carril no tiene dónde acabar y la ventana observada —que es el eje entero de esta figura— habría que inventarla. |
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.
Cuándo usarla
Tres preguntas antes de elegirla
¿Cada carril está en un solo estado a la vez?
Si son tareas que se solapan y se encadenan, es un Gantt.
Sí: quédate con línea de estados
No: usa Diagrama de Gantt
¿Importa cuándo cambió cada carril, no sólo el total de tiempo en cada estado?
Si sólo interesa el reparto del tiempo por estado, unas barras apiladas lo resumen.
Sí: quédate con línea de estados
No: usa Barras apiladas
¿Lo que cambia es un estado con nombre, no un valor numérico?
Si es un nivel numérico que se mantiene hasta el siguiente cambio, conviene el gráfico de escalones.
Sí: quédate con línea de estados
No: usa Gráfico de escalones
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('state-timeline');
spec.data.rows = misFilas; // category, series, start, end
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Qué pasa si un carril tiene dos estados a la vez?
La pieza lo trata como un error de datos y se detiene, en vez de dibujar uno encima del otro.
¿Por qué hace falta el instante de salida?
Porque sin él el último tramo de cada carril no tiene dónde acabar y habría que inventar el final de la ventana observada.
¿Cuántos estados distintos admite?
Hasta siete. El orden en que aparecen en la tabla es el de la leyenda y el que reparte los colores.
¿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 420 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «cómo cambia en el tiempo»
Gráfico de áreasuna medida en el tiempo con el volumen destacado
Gráfico de control por atributostasa de defectos de lotes frente a sus límites
Barras y línea combinadasuna cifra absoluta junto a su tasa
Bandas de Bollingerprecio frente a su rango habitual de variación
Gráfico con selector de rangoexplorar un tramo de una serie larga
Burndowntrabajo pendiente frente al plan de un sprint