Colors theme fixes

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)

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')
 		}

packages/modules/web_themes/colors/source/src/components/batteryList/model.ts

@@ -4,7 +4,6 @@
  * Copyright (c) 2022 Claus Hagen
  */
 
-import { getColor } from '@/assets/js/model'
 import {
 	PowerItemType,
 	type EnergyData,
@@ -60,7 +59,7 @@ export const batterySummary = reactive(new BatterySummary())
 export const batteries = ref(new Map<number, Battery>())
 export const addBattery = (index: number) => {
 	batteries.value.set(index, new Battery(index))
-	batteries.value.get(index)!.color = getColor('bat', batteries.value.size)
+	//batteries.value.get(index)!.color = getColor('bat', batteries.value.size)
 	//masterData['bat' + batteries.value.size].color
 }
 

packages/modules/web_themes/colors/source/src/components/counterList/CounterSettings.vue

@@ -15,9 +15,11 @@
 		</div>
 	</div>
 </template>
+
 <script setup lang="ts">
 import { counters } from '../counterList/model'
 </script>
+
 <style scoped>
 .settingstitle {
 	font-weight: bold;

packages/modules/web_themes/colors/source/src/components/counterList/model.ts

@@ -1,4 +1,5 @@
 import { registry } from '@/assets/js/model'
+import { savePrefs } from '@/assets/js/themeConfig'
 import {
 	PowerItemType,
 	type EnergyData,
@@ -28,10 +29,17 @@ export class Counter implements PowerItem {
 	type = PowerItemType.counter
 	color = 'var(--color-ctr7)'
 	icon = 'Zähler'
-	showInGraph = true
+	_showInGraph = false
 	constructor(index: number) {
 		this.id = index
 	}
+	get showInGraph() {
+		return this._showInGraph
+	}
+	set showInGraph(value: boolean) {
+		this._showInGraph = value
+		savePrefs()
+	}
 }
 
 //export const counters: { [key: number]: Counter } = reactive({})
@@ -45,9 +53,9 @@ export function addCounter(index: number, counterType: string, grid = false) {
 				counters.get(index)!.color = grid
 					? 'var(--color-evu)'
 					: 'var(--color-ctr' + (counters.size - 1) + ')'
-				if (grid) {
+				/* if (grid) {
 					counters.get(index)!.showInGraph = false
-				}
+				} */
 				break
 			case 'inverter':
 				counters.get(index)!.color = 'var(--color-pv)'

packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue

@@ -117,17 +117,21 @@ const plotdata = computed(() => {
 			registry.getItem('batOut'),
 			registry.getItem('charging'),
 		]
-		Object.values(chargePoints).forEach((cp) => {
-			result.push(cp)
-		})
+		if (Object.values(chargePoints).length > 1) {
+			Object.values(chargePoints).forEach((cp) => {
+				result.push(cp)
+			})
+		}
 	}
 	result.push(registry.getItem('devices')!)
 	shDevices.forEach((dev) => {
 		if (dev.showInGraph) {
 			result.push(dev)
 		}
 	})
-	result.push(registry.getItem('counters'))
+
+	//result.push(registry.getItem('counters'))
+
 	counters.forEach((ctr) => {
 		if (ctr.showInGraph) {
 			result.push(ctr)

packages/modules/web_themes/colors/source/src/components/energyMeter2/EnergyMeter2.vue

@@ -120,17 +120,21 @@ const plotdata = computed(() => {
 			registry.getItem('batOut'),
 			registry.getItem('charging'),
 		]
-		Object.values(chargePoints).forEach((cp) => {
-			result.push(cp)
-		})
+		if (Object.values(chargePoints).length > 1) {
+			Object.values(chargePoints).forEach((cp) => {
+				result.push(cp)
+			})
+		}
 	}
 	result.push(registry.getItem('devices'))
 	shDevices.forEach((dev) => {
 		if (dev.showInGraph) {
 			result.push(dev)
 		}
 	})
-	result.push(registry.getItem('counters'))
+
+	//result.push(registry.getItem('counters'))
+
 	counters.forEach((ctr) => {
 		if (ctr.showInGraph) {
 			result.push(ctr)

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'])))
@@ -131,8 +130,8 @@ const yScale = computed(() => {
 const keysToUse = computed(() => {
 	if (
 		graphData.graphMode != 'today' &&
-		graphData.graphMode != 'day' &&
-		graphData.graphMode != 'live'
+		graphData.graphMode != 'day' //&&
+		//graphData.graphMode != 'live'
 	) {
 		return keys.value[props.stackOrder]
 	} else {

packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue

@@ -23,6 +23,9 @@
 				>
 					<span class="fa-solid fa-lg ps-1 fa-magnifying-glass" />
 				</span>
+				<span type="button" class="ms-1 p-0 pt-1" @click="changeStackOrder">
+					<span class="fa-solid fa-lg ps-1 fa-sort" />
+				</span>
 			</div>
 		</template>
 
@@ -59,7 +62,8 @@
 							(graphData.graphMode == 'day' ||
 								graphData.graphMode == 'today' ||
 								graphData.graphMode == 'live') &&
-							Object.values(vehicles).filter((v) => v.visible).length > 0
+							vehicles[topVehicles[0]] != undefined &&
+							vehicles[topVehicles[0]].isSocConfigured
 						"
 						:width="width - margin.left - 2 * margin.right"
 						:height="(height - margin.top - margin.bottom) / 2"
@@ -71,7 +75,8 @@
 							(graphData.graphMode == 'day' ||
 								graphData.graphMode == 'today' ||
 								graphData.graphMode == 'live') &&
-							Object.values(vehicles).filter((v) => v.visible).length > 1
+							vehicles[topVehicles[1]] != undefined &&
+							vehicles[topVehicles[1]].isSocConfigured
 						"
 						:width="width - margin.left - 2 * margin.right"
 						:height="(height - margin.top - margin.bottom) / 2"
@@ -90,6 +95,7 @@
 						:margin="margin"
 						:order="2"
 					/>
+
 					<PgSocAxis
 						v-if="
 							graphData.graphMode == 'day' ||
@@ -108,18 +114,6 @@
 					:margin="margin"
 					:data="graphData.data"
 				></PgToolTips>
-				<g id="button" type="button" @click="changeStackOrder">
-					<text
-						:x="width - 10"
-						:y="height - 10"
-						color="var(--color-menu)"
-						text-anchor="end"
-					>
-						<tspan fill="var(--color-menu)" class="fas fa-lg">
-							{{ '\uf0dc' }}
-						</tspan>
-					</text>
-				</g>
 			</svg>
 		</figure>
 	</WBWidget>
@@ -145,6 +139,7 @@ import {
 	mytransform,
 } from './model'
 import { globalConfig, widescreen } from '@/assets/js/themeConfig'
+import { topVehicles } from '../chargePointList/model'
 import PgSoc from './PgSoc.vue'
 import PgSocAxis from './PgSocAxis.vue'
 import { vehicles } from '../chargePointList/model'
@@ -240,4 +235,7 @@ onMounted(() => {
 .fa-magnifying-glass {
 	color: var(--color-menu);
 }
+.fa-sort {
+	color: var(--color-menu);
+}
 </style>

packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts

@@ -5,6 +5,7 @@ import { sendCommand } from '@/assets/js/sendMessages'
 import { globalConfig } from '@/assets/js/themeConfig'
 import { energyMeterNeedsRedraw, registry } from '@/assets/js/model'
 import { shDevices } from '../smartHome/model'
+import { counters } from '../counterList/model'
 
 export const width = 500
 export const height = 500
@@ -164,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 = []
@@ -345,13 +347,15 @@ 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')
 			} else {
 				updatePvValues(values, id)
 			}
 		})
+		// Devices
 		registry.setEnergy('devices', 0)
 		let devicesPvEnergy = 0
 		let devicesBatEnergy = 0
@@ -373,13 +377,17 @@ export function updateEnergyValues(
 		registry.setEnergyBat('devices', devicesBatEnergy)
 		registry.calculatePvPercentage('devices')
 
-		//
+		// Counters
 		registry.setEnergy('counters', 0)
 		let counterEnergy = 0
 		let counterPvEnergy = 0
 		let counterBatEnergy = 0
 		Object.entries(totals.counter).forEach(([id, values]) => {
-			if (!values.grid) {
+			if (
+				!values.grid &&
+				counters.get(+id.slice(7)) &&
+				counters.get(+id.slice(7))!.showInGraph
+			) {
 				updatePvValues(values, id)
 				counterEnergy += values.energy_imported
 				counterPvEnergy += values.energy_imported_pv
@@ -391,6 +399,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)
@@ -436,7 +445,7 @@ export const xScaleMonth = computed(() => {
 		return scaleBand<number>()
 			.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<number>().range([0, 0])
 	}

packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts

@@ -154,11 +154,13 @@ function transformRow(currentRow: RawDayGraphDataItem): GraphDataItem {
 	currentItem.counters = 0
 	Object.entries(currentRow.counter).forEach(([id, values]) => {
 		if (!values.grid) {
-			currentItem.counters += 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
+				//registry.items.get(id)!.showInGraph = true
+			}
+			if (registry.items.get(id)!.showInGraph) {
+				currentItem.counters += values.power_imported ?? 0
 			}
 		}
 	})

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