Fix SOC display in middle graph

packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue

@@ -68,11 +68,11 @@ const statusbg = computed(() => {
 			? 'var(--color-battery)'
 			: 'var(--color-menu)'
 })
-const importedSum = computed (() => {
-	let sum=0
-	batteries.value.forEach(bat => {
+const importedSum = computed(() => {
+	let sum = 0
+	batteries.value.forEach((bat) => {
 		sum += bat.dailyYieldImport
-	})   
+	})
 	return sum
 })
 </script>

packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue

@@ -56,8 +56,8 @@
 		<!-- Car information-->
 		<template #footer>
 			<div v-if="!configmode">
-				<div class="row" >
-					<div class="col" >
+				<div class="row">
+					<div class="col">
 						<div
 							class="carTitleLine d-flex justify-content-between align-items-center"
 						>

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

@@ -1,4 +1,4 @@
-import { reactive } from 'vue'
+import { computed, reactive } from 'vue'
 import { updateServer } from '@/assets/js/sendMessages'
 import { ChargeMode, type PowerItem } from '@/assets/js/types'
 import { globalConfig } from '@/assets/js/themeConfig'
@@ -451,3 +451,39 @@ export function resetChargePoints() {
 		delete chargePoints[parseInt(key)]
 	})
 }
+
+export const topVehicles = computed(() => {
+	const result: number[] = []
+	const cps = Object.values(chargePoints)
+	const vhcls = Object.values(vehicles).filter((v) => v.visible)
+	// vehicle 1
+	let v1 = -1
+	switch (cps.length) {
+		case 0:
+			v1 = vhcls[0] ? vhcls[0].id : -1
+			break
+		default:
+			v1 = cps[0].connectedVehicle //?? vhcls[0] ? vhcls[0].id : -1
+	}
+	// vehicle 2
+	let v2 = -1
+	switch (cps.length) {
+		case 0:
+		case 1:
+			v2 = vhcls[0] ? vhcls[0].id : -1
+			break
+		default:
+			v2 = cps[1].connectedVehicle //?? vhcls[1] ? vhcls[1].id : -1
+	}
+	// change v2 if the same as v1
+	if (v1 == v2) {
+		v2 = vhcls[1] ? vhcls[1].id : -1
+	}
+	if (v1 != -1) {
+		result.push(v1)
+	}
+	if (v2 != -1) {
+		result.push(v2)
+	}
+	return result
+})

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

@@ -123,7 +123,6 @@ const plotdata = computed(() => {
 		default:
 		case 'live':
 		case 'today':
-			//result = sources
 			result = addSourceDetails(sources).concat(usage)
 			break
 		case 'day':

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

@@ -38,7 +38,7 @@ import {
 	type Selection,
 	select,
 } from 'd3'
-import { chargePoints } from '../chargePointList/model'
+import { topVehicles, vehicles } from '../chargePointList/model'
 import { graphData, type GraphDataItem, zoomedRange } from './model'
 
 const props = defineProps<{
@@ -66,25 +66,36 @@ const myline = computed(() => {
 		.y(
 			(d) =>
 				yScale.value(
-					props.order == 2 ? d.batSoc : d['soc' + cp.value.connectedVehicle],
+					props.order == 2
+						? d.batSoc
+						: props.order == 0
+							? d['soc' + topVehicles.value[0]]
+							: d['soc' + topVehicles.value[1]!],
 				) ?? yScale.value(0),
 		)
 
 	let p = path(graphData.data)
 	return p ? p : ''
 })
 const vID = computed(() => {
-	if (props.order == 2) {
-		return 'Speicher'
-	} else {
-		return cp.value.connectedVehicle
-	}
+	return props.order
 })
 const vName = computed(() => {
-	if (props.order == 2) {
-		return 'Speicher'
-	} else {
-		return cp.value.vehicleName
+	switch (props.order) {
+		case 2:
+			return 'Speicher'
+		case 1:
+			if (vehicles[topVehicles.value[1]]) {
+				return vehicles[topVehicles.value[1]].name
+			} else {
+				return 'oops'
+			}
+		default:
+			if (vehicles[topVehicles.value[0]]) {
+				return vehicles[topVehicles.value[0]].name
+			} else {
+				return 'hhhm'
+			}
 	}
 })
 
@@ -102,30 +113,31 @@ const cpColor = computed(() => {
 })
 const nameX = computed(() => {
 	switch (props.order) {
-		case 0:
-			return props.width - 3
 		case 1:
+			return props.width - 3
+		case 0:
 			return 3
 		case 2:
 			return props.width / 2
 		default:
 			return 0 // error
 	}
 })
-const cp = computed(() => {
-	const idx = props.order == 2 ? 0 : props.order
-	return Object.values(chargePoints)[idx]
-})
+
 const nameY = computed(() => {
 	if (graphData.data.length > 0) {
 		let index: number
 		switch (props.order) {
 			case 0:
 				index = graphData.data.length - 1
-				return yScale.value(graphData.data[index]['soc' + vID.value] + 2)
+				return yScale.value(
+					graphData.data[index]['soc' + topVehicles.value[0]] + 2,
+				)
 			case 1:
 				index = 0
-				return yScale.value(graphData.data[index]['soc' + vID.value] + 2)
+				return yScale.value(
+					graphData.data[index]['soc' + topVehicles.value[1]] + 2,
+				)
 			case 2:
 				index = Math.round(graphData.data.length / 2)
 				return yScale.value(graphData.data[index].batSoc + 2)
@@ -161,7 +173,11 @@ const autozoom = computed(() => {
 			.y(
 				(d) =>
 					yScale.value(
-						props.order == 2 ? d.batSoc : d['soc' + cp.value.connectedVehicle],
+						props.order == 2
+							? d.batSoc
+							: props.order == 1
+								? d['soc' + topVehicles.value[0]]
+								: d['soc' + topVehicles.value[1]!],
 					) ?? yScale.value(0),
 			)
 		path1.attr('d', path(graphData.data))

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

@@ -52,7 +52,7 @@
 							(graphData.graphMode == 'day' ||
 								graphData.graphMode == 'today' ||
 								graphData.graphMode == 'live') &&
-							Object.values(chargePoints).length > 0
+							Object.values(vehicles).filter((v) => v.visible).length > 0
 						"
 						:width="width - margin.left - 2 * margin.right"
 						:height="(height - margin.top - margin.bottom) / 2"
@@ -64,7 +64,7 @@
 							(graphData.graphMode == 'day' ||
 								graphData.graphMode == 'today' ||
 								graphData.graphMode == 'live') &&
-							Object.values(chargePoints).length > 1
+							Object.values(vehicles).filter((v) => v.visible).length > 1
 						"
 						:width="width - margin.left - 2 * margin.right"
 						:height="(height - margin.top - margin.bottom) / 2"
@@ -139,7 +139,7 @@ import {
 import { globalConfig, widescreen } from '@/assets/js/themeConfig'
 import PgSoc from './PgSoc.vue'
 import PgSocAxis from './PgSocAxis.vue'
-import { chargePoints } from '../chargePointList/model'
+import { vehicles } from '../chargePointList/model'
 import PgSelector from './PgSelector.vue'
 import { zoom, type D3ZoomEvent, type Selection, select } from 'd3'
 import { onMounted } from 'vue'

packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue

@@ -69,22 +69,28 @@
 
 					<!-- Show the SoC for the first two cars -->
 					<PMLabel
-						v-if="vehicle1"
+						v-if="topVehicles[0] && vehicles[topVehicles[0]]"
 						:x="-width / 2 - margin / 4 + 10"
 						:y="-height / 2 + margin + 5"
 						:labeltext="
-							trimName(vehicle1.name) + ': ' + Math.round(vehicle1.soc) + '%'
+							trimName(vehicles[topVehicles[0]].name) +
+							': ' +
+							Math.round(vehicles[topVehicles[0]].soc) +
+							'%'
 						"
 						:labelcolor="chargepoints[0].color"
 						:anchor="'start'"
 						:config="globalConfig"
 					/>
 					<PMLabel
-						v-if="vehicle2"
+						v-if="topVehicles[1] && vehicles[topVehicles[1]]"
 						:x="width / 2 + margin / 4 - 10"
 						:y="-height / 2 + margin + 5"
 						:labeltext="
-							trimName(vehicle2.name) + ': ' + Math.round(vehicle2.soc) + '%'
+							trimName(vehicles[topVehicles[1]].name) +
+							': ' +
+							Math.round(vehicles[topVehicles[0]].soc) +
+							'%'
 						"
 						:labelcolor="
 							chargepoints[1] ? chargepoints[1].color : 'var(--color-charging)'
@@ -153,7 +159,11 @@ import {
 	masterData,
 } from '@/assets/js/model'
 import { shDevices } from '../smartHome/model'
-import { chargePoints, vehicles } from '@/components/chargePointList/model'
+import {
+	chargePoints,
+	vehicles,
+	topVehicles,
+} from '@/components/chargePointList/model'
 import PMSourceArc from './PMSourceArc.vue'
 import PMUsageArc from './PMUsageArc.vue'
 import PMLabel from './PMLabel.vue'
@@ -241,36 +251,6 @@ function labelCoordinates(item: number) {
 	return labelPositions[scheme.value[item]]
 }
 
-const vehicle1 = computed(() => {
-	if (
-		chargepoints.value.length >= 1 &&
-		chargepoints.value[0].connectedVehicle != undefined &&
-		vehicles[chargepoints.value[0].connectedVehicle]
-	) {
-		return vehicles[chargepoints.value[0].connectedVehicle]
-	} else {
-		return undefined
-	}
-})
-const vehicle2 = computed(() => {
-	if (chargepoints.value.length < 1) {
-		return undefined
-	} else if (chargepoints.value.length == 1) {
-		if (Object.values(vehicles).filter((v) => v.visible).length > 1) {
-			const cars = Object.values(vehicles).filter((v) => v.visible)
-			if (cars[0].id == chargepoints.value[0].connectedVehicle) {
-				return cars[1]
-			} else {
-				return cars[0]
-			}
-		} else {
-			return undefined
-		}
-	} else {
-		return vehicles[chargepoints.value[1].connectedVehicle] ?? undefined
-	}
-})
-
 // methods
 function trimName(name: string) {
 	const maxlen = 12

packages/modules/web_themes/colors/web/index.html

@@ -24,9 +24,9 @@
 	<link rel="apple-touch-icon" sizes="60x60" href="/openWB/web/img/favicons/apple-touch-icon-60x60.png">
 	<link rel="manifest" href="/openWB/web/manifest.json">
 	<title>openWB</title>
-  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-Dmt_dAAR.js"></script>
+  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-BUxp8QI0.js"></script>
   <link rel="modulepreload" crossorigin href="/openWB/web/themes/colors/assets/vendor-BMda9Kth.js">
-  <link rel="stylesheet" crossorigin href="/openWB/web/themes/colors/assets/index-CCfUbv6I.css">
+  <link rel="stylesheet" crossorigin href="/openWB/web/themes/colors/assets/index-CpjcPsNc.css">
 </head>
 
 <body>