lab de componentes
Componentes
Datos y visualización

InteractiveChart

Gráfica multitipo (barras, horizontal, línea, área, dona, dispersión) con multiserie, umbrales, scrub con hover y navegación por teclado.

barras / con anotaciones

Columnas animadas con CSS; la anotación con emphasize delinea el punto de datos de la historia.

El review atrapa la mitad de lo que se le escapa al agente.
llegó a prod
la brecha del review
atrapado en review
atrapado por tests
Datos de ejemplo
horizontal

Filas con columna de valores — mejor cuando las etiquetas son largas.

tiempo por tarea (min)
scaffold
12
primera pasada
34
loop de review
donde se va el día
58
pulido
21
línea / con anotaciones

La línea se dibuja sola al entrar en pantalla. Dale replay para verla de nuevo.

La suite se fue poniendo lenta hasta que aterrizó la reescritura de fixtures.
0 20 40 60 Ene Feb Mar Abr May reescritura de fixtures tiempo de suite (s)
área

Línea más un relleno translúcido — para historias acumulativas o con forma de volumen.

posts publicados, acumulado
0 1 2 3 4 5 2025 Q4 2026 Q1 2026 Q2
multiserie / toggle de leyenda / umbrales

Haz hover para mover el crosshair, haz clic en los chips de la leyenda para ocultar una serie, enfoca el SVG y usa las flechas. El umbral se dibuja como una línea de referencia punteada.

El agente entrega más rápido, pero solo la rama con tests se mantiene bajo el presupuesto de errores.
0 5 10 15 sem1 sem2 sem3 sem4 presupuesto de errores regresiones
dispersión

Puntos numéricos x/y con ticks limpios en ambos ejes. Recorre los puntos con hover o con las flechas.

tamaño de PR vs tiempo de review
0 100 200 300 0 200 400 600 SLA de review minutos de review líneas cambiadas
dona

Partes de un todo con leyenda; el total va en serif al centro.

La mayor parte del mes se fue en el loop de review.
42
loop de review 19 · 45%
escribir código 11 · 26%
escribir tests 8 · 19%
pensar 4 · 10%