[SebastianLopezO]

Caso

• Origen: revisión de UX/UI en móvil (390 px).
• Problema: los gráficos usaban un viewBox fijo (640 × 240 y 760 × 260) escalado al contenedor: en un teléfono el
  texto de los ejes medía unos 5 px y dos tercios del alto quedaban vacíos; en escritorio el texto se agrandaba al
  137 %. El tooltip dependía de hasta 480 círculos con mouseenter, sin respuesta al tacto, y las marcas del eje X se
  elegían por índice, así que con huecos en las lecturas se encimaban. En las tarjetas de variables la insignia
  «Ideal» partía etiquetas como «Humedad del sustrato» en tres líneas.

Cambio

• useElementSize (ResizeObserver) y lib/chart.ts: el SVG se dibuja a escala 1:1, con 3, 4 o 5 marcas según el
  ancho, repartidas por igual en el tiempo y con los extremos alineados al borde.
• Un solo manejador de puntero (pointermove/pointerdown) busca el punto más cercano: funciona con mouse y con el
  dedo, con touch-action: pan-y para no bloquear el desplazamiento. Se agrega una guía vertical en el punto activo.
• MetricTile: la etiqueta va sola en su línea y la insignia se ubica junto al valor.
• Pruebas de nearestIndex, xTickCount y timeTicks.

Verificación

• En la demo beta (móvil): viewBox igual al contenedor (316 × 288), texto de 11 px a tamaño real, tooltip al tocar,
  marcas sin encimarse y dentro del gráfico.
• bun run lint, tsc y bun run test en verde.

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None