From ce91e4e03ff37c21607775ba5bea81509020621d Mon Sep 17 00:00:00 2001 From: Claus Hagen Date: Tue, 28 Oct 2025 21:47:37 +0100 Subject: [PATCH 1/6] fix counter errors --- .../colors/source/src/assets/js/processMessages.ts | 12 +++++------- .../colors/source/src/assets/js/themeConfig.ts | 9 +++++++++ .../src/components/counterList/CounterSettings.vue | 2 ++ .../source/src/components/counterList/model.ts | 14 +++++++++++--- .../src/components/energyMeter/EnergyMeter.vue | 8 +++++--- .../src/components/energyMeter2/EnergyMeter2.vue | 8 +++++--- 6 files changed, 37 insertions(+), 16 deletions(-) diff --git a/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts b/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts index 464d947073..b6fc744489 100755 --- a/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts +++ b/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts @@ -30,6 +30,7 @@ import { } from '@/components/counterList/model' import { mqttClientId } from './mqttClient' import { add } from '@/components/mqttViewer/model' +import { globalConfig } from './themeConfig' const topicsToSubscribe = [ 'openWB/counter/#', @@ -120,13 +121,7 @@ function processGlobalCounterMessages(topic: string, message: string) { if (hierarchy.length) { resetChargePoints() resetBatteries() - - for (const element of hierarchy) { - if (element.id == 0) { - globalData.evuId = element.id - // console.info('EVU counter is ' + globalData.evuId) - } - } + globalData.evuId = hierarchy[0].id processHierarchy(hierarchy[0]) } } else if (topic.match(/^openwb\/counter\/set\/home_consumption$/i)) { @@ -145,6 +140,9 @@ function processHierarchy(hierarchy: Hierarchy) { case 'counter': // console.info('counter in hierachy: ' + hierarchy.id) addCounter(hierarchy.id, hierarchy.type, hierarchy.id == globalData.evuId) + if (globalConfig.countersToShow.includes(hierarchy.id)) { + counters.get(hierarchy.id)!.showInGraph = true + } break case 'cp': addChargePoint(hierarchy.id) diff --git a/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts b/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts index 145a5a8293..216780c22b 100644 --- a/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts +++ b/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts @@ -14,6 +14,7 @@ import { usageGraphIsNotInitialized, } from '@/components/powerGraph/model' import { updateServer } from './sendMessages' +import { counters } from '@/components/counterList/model' export class Config { private _showRelativeArcs = false showTodayGraph = true @@ -50,6 +51,7 @@ export class Config { animationDelay = 100 zoomGraph = false zoomedWidget = 1 + countersToShow: number[] = [] constructor() {} get showRelativeArcs() { return this._showRelativeArcs @@ -479,6 +481,7 @@ export const infotext: { [key: string]: string } = { } interface Preferences { hideSH?: string[] + showCtr?: string[] showLG?: boolean displayM?: string stackO?: number @@ -513,6 +516,9 @@ function writeCookie() { prefs.hideSH = [...shDevices.values()] .filter((device) => !device.showInGraph) .map((device) => device.id) + prefs.showCtr = [...counters.values()] + .filter((ctr) => ctr.showInGraph) + .map((ctr) => ctr.id.toString()) prefs.showLG = globalConfig.graphPreference == 'live' prefs.displayM = globalConfig.displayMode prefs.stackO = globalConfig.usageStackOrder @@ -569,6 +575,9 @@ function readCookie() { shDevices.get(i)!.setShowInGraph(false) }) } + if (prefs.showCtr !== undefined) { + globalConfig.countersToShow = prefs.showCtr.map((i) => +i) + } if (prefs.showLG !== undefined) { globalConfig.setGraphPreference(prefs.showLG ? 'live' : 'today') } diff --git a/packages/modules/web_themes/colors/source/src/components/counterList/CounterSettings.vue b/packages/modules/web_themes/colors/source/src/components/counterList/CounterSettings.vue index 717dd8742b..fd37c1d764 100644 --- a/packages/modules/web_themes/colors/source/src/components/counterList/CounterSettings.vue +++ b/packages/modules/web_themes/colors/source/src/components/counterList/CounterSettings.vue @@ -15,9 +15,11 @@ + + diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts index bec9bfa5fc..86ffc3e994 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts @@ -346,6 +346,7 @@ export function updateEnergyValues( registry.setEnergy('batIn', totals.bat.all.energy_imported) registry.setEnergy('batOut', totals.bat.all.energy_exported) } + // Chargepoints Object.entries(totals.cp).forEach(([id, values]) => { if (id == 'all') { updatePvValues(values, 'charging') @@ -353,6 +354,7 @@ export function updateEnergyValues( updatePvValues(values, id) } }) + // Devices registry.setEnergy('devices', 0) let devicesPvEnergy = 0 let devicesBatEnergy = 0 @@ -374,7 +376,7 @@ export function updateEnergyValues( registry.setEnergyBat('devices', devicesBatEnergy) registry.calculatePvPercentage('devices') - // + // Counters registry.setEnergy('counters', 0) let counterEnergy = 0 let counterPvEnergy = 0 @@ -396,6 +398,7 @@ export function updateEnergyValues( registry.setEnergyBat('counters', counterBatEnergy) registry.calculatePvPercentage('counters') + // house registry.setEnergy('house', 0) if (totals.hc && totals.hc.all) { registry.setEnergy('house', totals.hc.all.energy_imported) @@ -441,7 +444,7 @@ export const xScaleMonth = computed(() => { return scaleBand() .domain(Array.from({ length: e[1] }, (v, k) => k + 1)) .paddingInner(0.4) - .range([0, width - margin.left - 2]) + .range([0, width - margin.left - 20]) } else { return scaleBand().range([0, 0]) } diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts index b6ee0f6f15..bde7c03759 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts @@ -154,7 +154,7 @@ function transformRow(currentRow: RawDayGraphDataItem): GraphDataItem { currentItem.counters = 0 Object.entries(currentRow.counter).forEach(([id, values]) => { if (!values.grid) { - currentItem[id] = values.power_imported ?? 0 + currentItem[id] = values.power_imported ?? 0 if (!registry.keys().includes(id)) { registry.duplicateItem(id, counters.get(+id.slice(7))!) //registry.items.get(id)!.showInGraph = true diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/processLiveGraphData.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/processLiveGraphData.ts index 37f81dca87..0f58f9b1a8 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/processLiveGraphData.ts +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/processLiveGraphData.ts @@ -1,5 +1,6 @@ import { globalData } from '../../assets/js/model' import { chargePoints } from '../chargePointList/model' +import { counters } from '../counterList/model' import { type GraphDataItem, type RawGraphDataItem, @@ -145,8 +146,10 @@ function extractValues(data: RawGraphDataItem): GraphDataItem { const found = key.match(re_ctr) if (found && found[1]) { const id = 'ctr' + found[1] - values[id] = +(data[key] ?? 0) - values['counters'] += +(data[key] ?? 0) + if (counters.get(+found[1])?.showInGraph) { + values[id] = +(data[key] ?? 0) + values['counters'] += +(data[key] ?? 0) + } } }) values.selfUsage = values.pv - values.evuOut diff --git a/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue b/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue index 12b028756e..2c1fcb1ff1 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue +++ b/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue @@ -257,10 +257,12 @@ const valuesToDisplay = computed(() => { registry.getItem('evuOut'), registry.getItem('charging'), registry.getItem('devices'), - registry.getItem('counters'), registry.getItem('batIn'), registry.getItem('house'), - ].filter((x) => x.power > 0) + registry.getItem('counters'), + ] + .filter((x) => x.power > 0) + .slice(0, 5) }) const scheme = computed(() => schemes[valuesToDisplay.value.length - 1]) function labelCoordinates(item: number) { From abfdc468b090b16e3a914bdb541f2c8532bc2b75 Mon Sep 17 00:00:00 2001 From: Claus Hagen Date: Sun, 2 Nov 2025 10:01:26 +0100 Subject: [PATCH 6/6] move graph stack order button to header of widget --- .../components/powerGraph/PgUsageGraph.vue | 1 - .../src/components/powerGraph/PowerGraph.vue | 36 ++++--------------- .../source/src/components/powerGraph/model.ts | 1 + 3 files changed, 7 insertions(+), 31 deletions(-) diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgUsageGraph.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgUsageGraph.vue index 7c8162060e..99d27ca9c6 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgUsageGraph.vue +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgUsageGraph.vue @@ -107,7 +107,6 @@ const draw = computed(() => { yAxis.selectAll('.tick line').attr('stroke', 'var(--color-bg)') } yAxis.select('.domain').attr('stroke', 'var(--color-bg)') - return 'pgUsageGraph.vue' }) //const stackGen = computed(() => stack().keys(keys[props.stackOrder].concat(['cp3']))) diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue index 333bceda52..0da506e061 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue @@ -23,6 +23,9 @@ > + + + @@ -92,6 +95,7 @@ :margin="margin" :order="2" /> + - - - - - {{ '\uf0dc' }} - - - @@ -259,7 +235,7 @@ onMounted(() => { .fa-magnifying-glass { color: var(--color-menu); } -.restackbutton { - padding: 5px; +.fa-sort { + color: var(--color-menu); } diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts index 86ffc3e994..a41b0b5170 100755 --- a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts +++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts @@ -165,6 +165,7 @@ export const dayGraph = reactive({ this.date.getDate().toString().padStart(2, '0') this.topic = 'openWB/log/daily/' + dateString + console.log(`Request data at ${Date.now()}`) mqttSubscribe(this.topic) if (erase) { graphData.data = []