Vibe Coding #4 — Data Analytics Dashboard with Svelte & Python | ENTSO-E API Energy Data

Result

An interactive dashboard that queries ENTSO-E energy data for any European country — generation mix, electricity loads, and day-ahead prices displayed in synchronized ECharts with draggable layouts, all built in a single live session.

The problem

• In Vibe Coding #3 we built python-entsoe to query European energy data, but every analysis still required writing Python code
• The official ENTSO-E Transparency Platform has limited interactivity — no cross-chart synchronization, no custom layouts
• Business users need a point-and-click interface to explore generation, loads, and prices without touching code
• Comparing multiple data dimensions (generation vs. loads vs. prices) side by side requires manual effort every time

The solution

We started from the python-entsoe library built in Vibe Coding #3 and set out to wrap it in an interactive web dashboard — no more writing code to see charts.

Planning and architecture

First step: write a CLAUDE.md plan specifying the goal (a dashboard web application serving ENTSO-E Python data), the tech stack, and the repo structure before implementing anything.

Claude Code researched charting libraries. We compared D3.js, LayerCake (native Svelte), and Apache ECharts by checking GitHub stars, npm downloads, and interactive demos.

ECharts won — more reactive interactions out of the box, especially for hover tooltips and zoom controls. Claude Code then proposed a monorepo structure with backend/ (FastAPI) and frontend/ (SvelteKit):

Building the backend

The FastAPI backend uses python-entsoe to query generation, loads, and prices. The key preprocessing step: pivot tables to restructure the raw DataFrames into the format ECharts expects — generation types as columns, timestamps as rows, with NaN values filled to zero for JSON serialization.

We also reused the country metadata from the python-entsoe library (area codes, country names) instead of hardcoding duplicates — a detail Claude Code would have missed without guidance.

Frontend setup

For the frontend, we installed SvelteKit with Shadcn UI components using Bun. Shadcn provides pre-built components like sidebars, combo boxes, and buttons — speeding up dashboard development significantly.

First working dashboard

After connecting backend to frontend, we queried Germany’s energy generation. The first attempt hit a JSON serialization error — the pivot table produced NaN values. After filling missing values with zeros, the charts rendered:

Caching and data persistence

The ENTSO-E API is slow for large date ranges. We implemented a two-layer caching system: in-memory TTL cache for fast repeated queries, plus disk persistence (Parquet files keyed by country and date range) so data survives server restarts.

UX improvements

The country selector was a basic dropdown — scrolling through 40+ countries to find Spain. We replaced it with a Shadcn combo box with type-ahead filtering:

Synchronized chart zooming

The breakthrough feature: zoom into any chart and all others update simultaneously. A checkbox in the sidebar toggles synchronization — when enabled, selecting a time range on the generation chart automatically zooms the loads and prices charts to the same window.

Draggable layout

The final feature: a configurable grid layout where charts can be dragged and resized. We researched Svelte-compatible drag libraries and integrated one to allow custom dashboard arrangements — put generation and loads side by side, enlarge the prices chart, or stack them vertically.

Final result

The finished dashboard querying Spain data — three charts (generation mix, electricity loads, day-ahead prices) arranged side by side with synchronized zoom controls:

We also previewed the Datons social platform for sharing data visualizations — where these dashboard concepts will evolve into a collaborative tool with comments, full-page views, and advanced chart types like heatmaps:

Reference

Dashboard features

Feature	Details	Description
Country selector	Combo box with search	Type-ahead filtering across 40+ ENTSO-E countries
Date range	Start/end date pickers	Custom date range for all queries
Generation mix	ECharts stacked area	Solar, wind, nuclear, gas, hydro, biomass, etc.
Electricity loads	ECharts line chart	Actual demand over time
Day-ahead prices	ECharts line chart	Hourly prices in EUR/MWh
Synchronized zoom	Toggle checkbox	Zoom in one chart updates all others
Draggable layout	Grid with drag/resize	Configurable dashboard arrangement
Caching	Memory + disk (Parquet)	Fast repeated queries, survives restarts

Project structure

Architecture

Stack

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

Resources

• python-entsoe on PyPI - the library powering the backend
• GitHub repository - source code and documentation
• ENTSO-E Transparency Platform - the official data source
• Apache ECharts - the charting library used for all visualizations
• Shadcn Svelte - UI component library for the dashboard
• Vibe Coding #3 - building the python-entsoe library
• Vibe Coding #2 - MCP server for ENTSO-E