Vibe Coding #4 — Dashboard de Analítica de Datos con Svelte y Python | ENTSO-E API Datos Energéticos

Resultado

Un dashboard interactivo que consulta datos energéticos de ENTSO-E para cualquier país europeo — mix de generación, cargas eléctricas y precios day-ahead visualizados en ECharts sincronizados con layouts arrastrables, todo construido en una sola sesión en directo.

El problema

• En Vibe Coding #3 construimos python-entsoe para consultar datos energéticos europeos, pero cada análisis seguía requiriendo escribir código Python
• La Plataforma de Transparencia oficial de ENTSO-E tiene interactividad limitada — sin sincronización entre gráficos, sin layouts personalizables
• Los usuarios de negocio necesitan una interfaz point-and-click para explorar generación, cargas y precios sin tocar código
• Comparar múltiples dimensiones de datos (generación vs. cargas vs. precios) lado a lado requiere esfuerzo manual cada vez

La solución

Partimos de la librería python-entsoe construida en el Vibe Coding #3 y nos propusimos envolverla en un dashboard web interactivo — sin más código para ver gráficos.

Planificación y arquitectura

Primer paso: escribir un plan en CLAUDE.md especificando el objetivo (una aplicación web dashboard sirviendo datos de Python ENTSO-E), el stack tecnológico y la estructura del repositorio antes de implementar nada.

Claude Code investigó librerías de gráficos. Comparamos D3.js, LayerCake (nativa de Svelte) y Apache ECharts revisando estrellas en GitHub, descargas en npm y demos interactivas.

ECharts ganó — interacciones más reactivas de serie, especialmente para tooltips hover y controles de zoom. Claude Code propuso una estructura monorepo con backend/ (FastAPI) y frontend/ (SvelteKit):

Construyendo el backend

El backend FastAPI usa python-entsoe para consultar generación, cargas y precios. El paso clave de preprocesamiento: tablas pivote para reestructurar los DataFrames crudos al formato que ECharts espera — tipos de generación como columnas, timestamps como filas, con valores NaN rellenados a cero para la serialización JSON.

También reutilizamos los metadatos de países de la librería python-entsoe (códigos de área, nombres de países) en lugar de duplicar hardcoded — un detalle que Claude Code habría pasado por alto sin guía.

Setup del frontend

Para el frontend, instalamos SvelteKit con componentes Shadcn UI usando Bun. Shadcn proporciona componentes prediseñados como sidebars, combo boxes y botones — acelerando significativamente el desarrollo del dashboard.

Primer dashboard funcional

Tras conectar backend con frontend, consultamos la generación energética de Alemania. El primer intento falló con un error de serialización JSON — la tabla pivote producía valores NaN. Tras rellenar valores faltantes con ceros, los gráficos renderizaron:

Caché y persistencia de datos

La API de ENTSO-E es lenta para rangos de fechas grandes. Implementamos un sistema de caché de dos capas: caché TTL en memoria para consultas repetidas rápidas, más persistencia en disco (archivos Parquet indexados por país y rango de fechas) para que los datos sobrevivan reinicios del servidor.

Mejoras de UX

El selector de países era un dropdown básico — hacer scroll entre 40+ países para encontrar España. Lo reemplazamos por un combo box de Shadcn con filtrado por escritura:

Zoom sincronizado de gráficos

La funcionalidad estrella: hacer zoom en cualquier gráfico y que todos los demás se actualicen simultáneamente. Un checkbox en el sidebar activa la sincronización — al seleccionar un rango temporal en el gráfico de generación, los gráficos de cargas y precios hacen zoom automáticamente a la misma ventana.

Layout arrastrable

La última funcionalidad: un grid configurable donde los gráficos se pueden arrastrar y redimensionar. Investigamos librerías de drag compatibles con Svelte e integramos una para permitir disposiciones personalizadas — poner generación y cargas lado a lado, ampliar el gráfico de precios, o apilarlos verticalmente.

Resultado final

El dashboard terminado consultando datos de España — tres gráficos (mix de generación, cargas eléctricas, precios day-ahead) dispuestos lado a lado con controles de zoom sincronizado:

También mostramos la plataforma social de Datons para compartir visualizaciones de datos — donde estos conceptos de dashboard evolucionarán hacia una herramienta colaborativa con comentarios, vistas a página completa y tipos de gráficos avanzados como heatmaps:

Referencia

Funcionalidades del dashboard

Funcionalidad	Detalles	Descripción
Selector de países	Combo box con búsqueda	Filtrado por escritura entre 40+ países ENTSO-E
Rango de fechas	Selectores inicio/fin	Rango personalizado para todas las consultas
Mix de generación	ECharts área apilada	Solar, eólica, nuclear, gas, hidro, biomasa, etc.
Cargas eléctricas	ECharts gráfico de línea	Demanda real a lo largo del tiempo
Precios day-ahead	ECharts gráfico de línea	Precios horarios en EUR/MWh
Zoom sincronizado	Toggle checkbox	Hacer zoom en un gráfico actualiza todos los demás
Layout arrastrable	Grid con drag/resize	Disposición configurable del dashboard
Caché	Memoria + disco (Parquet)	Consultas repetidas rápidas, sobrevive reinicios

Estructura del proyecto

Arquitectura

Stack

• SvelteKit 5 · Apache ECharts · Shadcn UI · Bun
• FastAPI · python-entsoe · Caché Parquet

Recursos

• python-entsoe en PyPI - la librería que alimenta el backend
• Repositorio GitHub - código fuente y documentación
• ENTSO-E Transparency Platform - la fuente oficial de datos
• Apache ECharts - la librería de gráficos usada para todas las visualizaciones
• Shadcn Svelte - librería de componentes UI para el dashboard
• Vibe Coding #3 - construyendo la librería python-entsoe
• Vibe Coding #2 - servidor MCP para ENTSO-E