Caso de estudio 14 / 17Visualización de datos
Diagrama de proceso en vivo generado desde la configuración
Genera el diagrama en vivo de cada línea desde su configuración: estado en palabra y color, valores validados y cero carga extra en la API.
Stack
- TypeScript
- React
- Next.js
- Node.js
- SVG
- CSS animations
- ECharts
01 · Cómo funciona
- HoyaModificado en este trabajo
- Flujo de datos
Qué hace
Construí un diagrama de proceso en tiempo real para el panel de operaciones de la plataforma de monitoreo, generado desde el archivo de configuración de cada sistema. Cada estación y tramo muestra primero su estado con una palabra y un color, luego un número con una unidad simple, y los valores de ingeniería quedan a un toque.
Leer más
Está pensado para operadores, que necesitan saber en segundos si su línea está bien y, si no, dónde.
5 conexiones· elige un componente para ver su recorrido
- Config del sistema a Importador de topología: leída una vez, sin secretos
- Importador de topología a API backend: topología versionada
- API del modelo de origen a API backend: sondeo como antes, 0 extra
- API backend a Reglas de estado: topología + valores actuales
- Reglas de estado a Diagrama SVG dinámico: palabra, color, luego número
02Resultados
- R01Cuanto más bajo, mejor
Filas a leer en el sistema más largo (% de la tabla previa)
Antes 100%, después 25%, 4× menor. Cuanto más bajo, mejor.AntesDespués - R02Cuanto más bajo, mejor
Biblioteca de diagramas en el bundle (comercial/SVG propio)
Antes 1.06 MB, después 0 MB, a cero. Cuanto más bajo, mejor.AntesDespués
Qué logró
- Cada sistema: una tabla de números → un diagrama en vivo generado desde su configuración, con respaldo a partir de los nombres de tramo
- Lectura del estado: número por número → primero una palabra y un color, respaldados por 36 pruebas con lecturas reales
Leer más
- Filas por revisar en el sistema más largo: una por tramo → cerca de un cuarto
- Carga en la API aguas arriba: ninguna permitida → 0 peticiones agregadas
- Despliegue gradual: una vista → la antigua y la nueva lado a lado, con un selector recordado por usuario y sistema
El desafío
El panel de operaciones era una tabla con todo lo que publica el modelo aguas arriba, así que en el sistema más largo un operador leía una fila por tramo, número por número, hasta encontrar la que importaba. Algunos valores inducían a error: una vista rotulaba la altura de carga como bar, y en un sistema dos tercios de las estaciones mostraban un caudal copiado de un medidor de otro punto como si fuera medido.
Leer más
Cualquier vista nueva debía costarle cero a la API, porque el sondeo ya excedía levemente su límite de tasa. Se evaluaba una librería comercial de diagramas, pero era pesada, se licenciaba por dominio y dibujaba fuera del tema de la aplicación.
Qué aprendí
Validar los datos antes de darles color. Revisé los valores del panel desde primeros principios: la pérdida de carga por unidad de longitud coincidía con la diferencia de altura de carga sobre la distancia dentro de 0.5 %, lo que estableció qué valores podían llevar color con seguridad.
Leer más
El gris significa normal, así que el color conserva su significado y aparece solo donde se requiere atención. Descarté la librería comercial: el diseño automático resuelve un problema que no tiene una línea de estaciones con posiciones conocidas. Mantener la vista antigua a un clic hizo segura la adopción.
Stack
- TypeScript
- React
- Next.js
- Node.js
- SVG
- CSS animations
- ECharts
Habilidades
- Diseño de información
- Visualización de datos
- UI guiada por configuración
- Validación de datos de ingeniería
- Despliegue incremental
