Una gráfica de línea de las de toda la vida: altas por día, treinta días, en un panel interno. Sin librería: un componente que recibe un array y devuelve un path de SVG. Para treinta puntos no me apetecía arrastrar una dependencia de las grandes.
Funcionaba. Y cada semana, sábado y domingo, la línea se iba al suelo y volvía a subir el lunes. Pico, barranco, pico, barranco. Un dientes de sierra limpísimo que me creí dos días enteros, porque tenía una explicación cómoda: fin de semana, nadie se registra.
No era eso. El dato lo traía un export del proveedor que solo se ejecuta de lunes a viernes, así que sábado y domingo llegaban con valor null. Y null no quiere decir cero: quiere decir no lo sé.
El culpable era mío y de una línea: al construir la escala había puesto un valor ?? 0. No por vago, sino porque si un undefined se cuela en el atributo d, aparece un NaN, el navegador descarta el path entero y te quedas con un lienzo vacío sin un solo error en consola. Ese ?? 0 me salvaba de la pantalla en blanco y, de paso, me inventaba ocho caídas al mes.
Había un segundo síntoma que ni había relacionado: el mínimo y el máximo se calculaban sobre ese array ya rellenado de ceros, así que todo el rango útil quedaba apretujado en el tercio de arriba. Dos cosas raras, una sola causa.
Cómo ayudó tener la IA dentro del editor
El arreglo conceptual es fácil de decir y tedioso de escribir: los huecos no generan punto, el path se parte en tramos (varios M dentro del mismo d) y los extremos se calculan solo con números finitos. Es código de índices, de los que se te va por uno y no te enteras.
Ahí es donde pedir ayuda sale rentable. Le pasé la serie real y le pedí el agrupador de tramos consecutivos, y luego los casos límite que yo no iba a escribir a mano:
- una serie que empieza por hueco, y otra que acaba en hueco;
- un punto solo rodeado de huecos (una polilínea de un punto no pinta nada: eso pide un círculo);
- la serie entera a null, que debe dar gráfica vacía con eje, no gráfica a cero.
El tercero no se me había ocurrido y se me habría colado en producción.
Lo interesante del asunto: lo que pegué en el chat no era un mock. Eran las altas por día de verdad, porque depurar una gráfica con datos inventados es perder el tiempo. Esa curva no es un secreto de Estado, pero es el pulso del negocio, y no tenía ninguna gana de subirla a un servidor ajeno para que me arreglaran un reduce. Con el modelo corriendo dentro de la propia pestaña, pegarla no cuesta nada: ni se sube, ni se registra, ni se queda en el historial de nadie.
Un hueco no es un cero. Si tu gráfica no sabe distinguirlos, no está midiendo: está rellenando.
Si tienes una utilidad así a medio hacer, ábrela en Elffuss Code: el IDE y el modelo corren dentro del navegador, así que puedes pegar los datos reales sin que salgan de tu equipo.
Abrir Code →