History UI: visualization and export

[naltatis]

refs #29144
fixes #29286
fixes #29827

Replaces the experimental PowerChart / EnergyChart fix timeframe charts with charts grouped by type.

🍱 data is shown on entity level (before grouped)
📆 proper time range select (see session ui)
🔵 ability to focus on one specific dataset (entity)
💽 csv download expandable data table for raw data debugging
🔢 round api values to Wh precision
🔌 home consumption and ext/aux meters are combined (similar to energy flow in main ui).
🛠️ replaces chart.js with echart (similar to forecast view)

Note: This is still an experimental view with strong focus on checking data correctness. These charts will likely be replaced with more compact higher level data visualizations. Deliberately kept simple for now. 🧪

Todos

• resolve device names (currently yaml or db names)
• add e2e testing
• align directions with PV: track energy metrics and apply forecast scaling to optimizer #29784 (comment) (flip signs)

Out of scope

• Year view feels quite sluggish with large test dataset (see video). We'll need to improve sql performance for this later (time format)

Video

history.2.webm

Screenshots

day

day view dark mode

month

year

mobile consumers

mobile grid

data view

data view, forecast diff

tooltip

[sourcery-ai]

Hey - I've left some high level feedback:

• In History.vue, fetchData captures requestFrom/to/period but still uses this.aggregate and updates rawSeries unconditionally, so if the user changes period/date quickly you can end up applying a stale response; consider deriving aggregate from the captured period and discarding responses that no longer match the current fetchKey.
• The groupColor/groupExportColor helpers in History/groups.ts call window.getComputedStyle directly, which will throw in non-DOM environments (e.g., SSR or some tests); consider guarding access to window or injecting the colors via CSS variables into the Vue app instead.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In History.vue, `fetchData` captures `requestFrom/to/period` but still uses `this.aggregate` and updates `rawSeries` unconditionally, so if the user changes period/date quickly you can end up applying a stale response; consider deriving `aggregate` from the captured period and discarding responses that no longer match the current `fetchKey`.
- The `groupColor`/`groupExportColor` helpers in History/groups.ts call `window.getComputedStyle` directly, which will throw in non-DOM environments (e.g., SSR or some tests); consider guarding access to `window` or injecting the colors via CSS variables into the Vue app instead.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[andig]

…und dann noch in die Hauptnavi damit?

[naltatis]

…und dann noch in die Hauptnavi damit?

langsam, langsam :D
Erst wenn alle Teile sitzen.

[andig]

Negative rounded caps look broken

[andig]

Units are broken- can't have 35kWh in 15min, Y axis needs unit

[andig]

Instead of individual source tables it might make more sense that we provide CSV download rather then inline tables of raw data? Compares to charging sessions these seem less valid.

What I'm missing is an aggregated chart of energy balance (or power), given I don't have an exact idea how it should look. Maybe containing power/energy per group.

[andig]

Tooltips should be beside cursor, not hiding it.

[naltatis]

What I'm missing is an aggregated chart of energy balance (or power), given I don't have an exact idea how it should look. Maybe containing power/energy per group.

See my comment in the description. This is only an in between step with focus on individual measurements. I already have concepts and ideas for more integrated views, but we have to ensure that the basics are correct first.

[naltatis]

• ensure tooltip is always above bar (similar to forecast chart behavior)
• added y-axis unit, align tooltip values (day = kW, month/year = kWh)

[naltatis]

replace html table view with full csv download

history-energy-2026-03.csv

[naltatis]

@sourcery-ai dismiss

[naltatis]

🎨 updated device color palette

• works in light/dark mode
• reasonable contrast to neighbor colors
• stays in blue/red-ish color range to avoid conflict with evcc system colors (battery, pv, grid, ...)
• also applies to existing session chart

[andig]

updated device color palette

Do the colors match the charging sessions view?

[naltatis]

The color palette is shared. We do not have stable color-to-device association yet. But with published names we could achieve this in a later iteration (extend session table).

[naltatis]

Entity title resolution works:

• yaml-configured meters show name
• db-configured meters use title
• loadpoints always use title