Un panel interno, ocho tarjetas, y en cada una una línea diminuta con la evolución de los últimos meses. Nada de librerías: cuatro props, un path de SVG y a otra cosa. El componente cabía en cuarenta líneas y funcionó a la primera con los datos de prueba.
Hasta que una serie se quedó plana
La escala es la de siempre: normalizas cada valor entre el mínimo y el máximo de la serie y lo mapeas a la altura del SVG. Si todos los valores son iguales, el mínimo y el máximo también lo son: la resta da cero, la división da NaN y ese NaN se cuela en el atributo d.
Y aquí lo desagradable: un path con un NaN dentro no lanza ningún error. El navegador lo descarta y dibuja nada. Sin excepción, sin aviso en consola, sin nada rojo. Una tarjeta en blanco y tú buscando en el sitio equivocado —en la consulta, en el fetch, en el estado— un rato largo.
Lo útil no fue el código
Le pedí el componente a la IA del editor y me dio exactamente la versión de manual: correcta, elegante y con el mismo agujero. Lo que cambió la tarde fue la segunda pregunta: dame las series que romperían esto. La lista:
- Serie vacía.
- Un solo punto: no hay línea que pintar, hay que pintar un círculo.
- Todos los valores iguales, la raya plana, que por convenio va por el centro.
- Huecos: meses sin dato. Interpolar mentiría, así que hay que cortar el path y empezar otro.
- Un outlier que aplasta todo lo demás contra el suelo.
- Negativos, con el cero en un sitio que ya no es el borde de abajo.
De esos seis, tres me habrían llegado en producción. El componente final tiene el doble de líneas que el bonito, y la mitad son guardas.
Por qué el bucle entero se quedó en la pestaña
Para depurar aquello no valía un array de juguete: había que enseñar la serie de verdad, con sus valores y con los nombres de las métricas, que en un panel interno describen bastante bien cómo le va al negocio. Y el componente tampoco vive solo: alrededor están las props del sistema de diseño del cliente, sus convenciones, sus nombres.
Nada de eso es un secreto de estado. Es, simplemente, material que no me corresponde pegar en el formulario de otro.
El día que lo pruebas con los datos reales es el día en que el componente empieza a servir. Conviene que ese día no implique subir nada.
En Elffuss Code el modelo corre en la GPU del propio navegador. Pegas la serie entera, el componente entero y los seis casos raros, iteras hasta que la raya plana sale por el centro, y no ha salido un byte del equipo. Sin cuenta, sin cuota y —en un tren, que fue donde acabé esto— sin conexión.
Ábrelo en Elffuss Code y pega tu serie de verdad: el editor y el modelo corren dentro de tu navegador, así que ni el código ni los datos suben a ningún sitio.
Abrir Code →