services/energy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add go-e wallbox charger to live and statistics views

Browse Source 
- PowerPoint/EnergyBar: add charger/charge fields
- getPower: query charger_10m/charger_1h alongside PV and meters
- getBars: compute daily charge kWh via LAG on charger_daily.eto_wh
- EnergyView: green Charger series in live power chart
- StatisticsView: purple Charge bars in statistics chart

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Thomas Klaehn
2026-04-18 11:31:10 +02:00
parent 9fa7d36610
commit 74f7266632
4 changed files with 60 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/api/client.ts
View File

@@ -28,6 +28,7 @@ export interface EnergyBar {
sell: number
produce: number
consume: number
charge: number
}
export interface PowerPoint {
@@ -35,6 +36,7 @@ export interface PowerPoint {
pv: number
house: number
barn: number
charger: number
}
export interface BatteryPoint {

8
frontend/src/views/EnergyView.vue
View File

@@ -39,6 +39,7 @@ const COLORS = {
pv: { bg: 'rgba(255,213,79,0.15)', border: '#ffd54f' },
house: { bg: 'rgba(66,165,245,0.15)', border: '#42a5f5' },
barn: { bg: 'rgba(239,83,80,0.15)', border: '#ef5350' },
charger: { bg: 'rgba(102,187,106,0.15)', border: '#66bb6a' },
battery: { bg: 'rgba(66,165,245,0.2)', border: '#42a5f5' },
}
@@ -69,9 +70,10 @@ function buildPowerChart(canvas: HTMLCanvasElement, pts: PowerPoint[], range: st
data: {
labels,
datasets: [
{ label: 'PV Production', data: pts.map(p => p.pv), borderColor: COLORS.pv.border, backgroundColor: COLORS.pv.bg, borderWidth: 1.5, pointRadius: 0, fill: true, tension: 0.3 },
{ label: 'House', data: pts.map(p => p.house), borderColor: COLORS.house.border, backgroundColor: COLORS.house.bg, borderWidth: 1.5, pointRadius: 0, fill: true, tension: 0.3 },
{ label: 'Barn', data: pts.map(p => p.barn), borderColor: COLORS.barn.border, backgroundColor: COLORS.barn.bg, borderWidth: 1.5, pointRadius: 0, fill: true, tension: 0.3 },
{ label: 'PV Production', data: pts.map(p => p.pv), borderColor: COLORS.pv.border, backgroundColor: COLORS.pv.bg, borderWidth: 1.5, pointRadius: 0, fill: true, tension: 0.3 },
{ label: 'House', data: pts.map(p => p.house), borderColor: COLORS.house.border, backgroundColor: COLORS.house.bg, borderWidth: 1.5, pointRadius: 0, fill: true, tension: 0.3 },
{ label: 'Barn', data: pts.map(p => p.barn), borderColor: COLORS.barn.border, backgroundColor: COLORS.barn.bg, borderWidth: 1.5, pointRadius: 0, fill: true, tension: 0.3 },
{ label: 'Charger', data: pts.map(p => p.charger), borderColor: COLORS.charger.border, backgroundColor: COLORS.charger.bg, borderWidth: 1.5, pointRadius: 0, fill: true, tension: 0.3 },
],
},
options: {

2
frontend/src/views/StatisticsView.vue
View File

@@ -61,6 +61,7 @@ const COLORS = {
sell: { bg: 'rgba(66,165,245,0.8)', border: '#42a5f5' },
produce: { bg: 'rgba(102,187,106,0.8)', border: '#66bb6a' },
consume: { bg: 'rgba(255,167,38,0.8)', border: '#ffa726' },
charge: { bg: 'rgba(171,71,188,0.8)', border: '#ab47bc' },
}
function labelFor(t: string): string {
@@ -78,6 +79,7 @@ function datasets(data: EnergyBar[]): ChartDataset<'bar'>[] {
{ label: 'Sell', data: data.map(b => b.sell), backgroundColor: COLORS.sell.bg, borderColor: COLORS.sell.border, borderWidth: 1 },
{ label: 'Produce', data: data.map(b => b.produce), backgroundColor: COLORS.produce.bg, borderColor: COLORS.produce.border, borderWidth: 1 },
{ label: 'Consume', data: data.map(b => b.consume), backgroundColor: COLORS.consume.bg, borderColor: COLORS.consume.border, borderWidth: 1 },
{ label: 'Charge', data: data.map(b => b.charge), backgroundColor: COLORS.charge.bg, borderColor: COLORS.charge.border, borderWidth: 1 },
]
}