Colors theme: bug fixes and improvements

packages/modules/web_themes/colors/source/src/assets/js/model.ts

@@ -134,6 +134,7 @@ function createPowerItem(key: string): PowerItem {
 		pvPercentage: 0,
 		color: masterData[key] ? masterData[key].color : 'var(--color-charging)',
 		icon: masterData[key] ? masterData[key].icon : '',
+		showInGraph: true,
 	}
 	return p
 }

packages/modules/web_themes/colors/source/src/assets/js/mqttClient.ts

@@ -85,14 +85,14 @@ export async function mqttPublish(topic: string, message: string) {
 	const qos: QoS = 0
 	let connected = client.connected
 	let retries = 0
-	while (!connected && retries < 10) {
+	while (!connected && retries < 20) {
 		console.warn('MQTT publish: Not connected. Waiting 0.1 seconds')
 		await delay(100)
 		connected = client.connected
 		retries += 1
 	}
 	// console.warn ('MQTT publish: Now connected')
-	if (retries < 10) {
+	if (retries < 20) {
 		try {
 			client.publish(topic, message, { qos }, (error) => {
 				if (error) {

packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts

@@ -236,7 +236,7 @@ function processSystemMessages(topic: string, message: string) {
 		topic.match(/^openWB\/system\/device\/[0-9]+\/component\/[0-9]+\/config$/i)
 	) {
 		const config = JSON.parse(message)
-		if (config.type == 'counter') {
+		if (config.type == 'counter' && counters[config.id]) {
 			counters[config.id].name = config.name
 		}
 	}

packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts

@@ -8,7 +8,7 @@ import { computed, reactive } from 'vue'
 import { select } from 'd3'
 import type { ChargeModeInfo } from './types'
 import { addShDevice, shDevices } from '@/components/smartHome/model'
-import { ChargeMode } from '@/components/chargePointList/model'
+import { ChargeMode, vehicles } from '@/components/chargePointList/model'
 import { sourceSummary } from './model'
 export class Config {
 	private _showRelativeArcs = false
@@ -30,6 +30,7 @@ export class Config {
 	private _showButtonBar = true
 	private _showCounters = false
 	private _showVehicles = false
+	private _showStandardVehicle = true
 	private _showPrices = false
 	private _debug: boolean = false
 	isEtEnabled: boolean = false
@@ -233,6 +234,17 @@ export class Config {
 	setShowVehicles(show: boolean) {
 		this._showVehicles = show
 	}
+	get showStandardVehicle() {
+		return this._showStandardVehicle
+	}
+	set showStandardVehicle(show: boolean) {
+		this._showStandardVehicle = show
+		vehicles[0].visible = show
+		savePrefs()
+	}
+	setShowStandardVehicle(show: boolean) {
+		this._showStandardVehicle = show
+	}
 	get showPrices() {
 		return this._showPrices
 	}
@@ -385,13 +397,14 @@ interface Preferences {
 	showButtonBar?: boolean
 	showCounters?: boolean
 	showVehicles?: boolean
+	showStandardV?: boolean
 	showPrices?: boolean
 	debug?: boolean
 }
 
 function writeCookie() {
 	const prefs: Preferences = {}
-	prefs.hideSH = Object.values(shDevices)
+	prefs.hideSH = [...shDevices.values()]
 		.filter((device) => !device.showInGraph)
 		.map((device) => device.id)
 	prefs.showLG = globalConfig.graphPreference == 'live'
@@ -412,6 +425,7 @@ function writeCookie() {
 	prefs.showButtonBar = globalConfig.showButtonBar
 	prefs.showCounters = globalConfig.showCounters
 	prefs.showVehicles = globalConfig.showVehicles
+	prefs.showStandardV = globalConfig.showStandardVehicle
 	prefs.showPrices = globalConfig.showPrices
 	prefs.debug = globalConfig.debug
 
@@ -435,11 +449,11 @@ function readCookie() {
 			globalConfig.setSmartHomeColors(prefs.smartHomeC)
 		}
 		if (prefs.hideSH !== undefined) {
-			prefs.hideSH.map((i) => {
-				if (shDevices[i] == undefined) {
+			prefs.hideSH.forEach((i) => {
+				if (shDevices.get(i) == undefined) {
 					addShDevice(i)
 				}
-				shDevices[i].setShowInGraph(false)
+				shDevices.get(i)!.setShowInGraph(false)
 			})
 		}
 		if (prefs.showLG !== undefined) {
@@ -490,6 +504,9 @@ function readCookie() {
 		if (prefs.showVehicles !== undefined) {
 			globalConfig.setShowVehicles(prefs.showVehicles)
 		}
+		if (prefs.showStandardV !== undefined) {
+			globalConfig.setShowStandardVehicle(prefs.showStandardV)
+		}
 		if (prefs.showPrices !== undefined) {
 			globalConfig.setShowPrices(prefs.showPrices)
 		}

packages/modules/web_themes/colors/source/src/assets/js/types.ts

@@ -78,6 +78,7 @@ export interface PowerItem {
 	pvPercentage: number
 	color: string
 	icon: string
+	showInGraph: boolean
 }
 
 export interface ItemList {

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

@@ -11,7 +11,7 @@
 					{{ props.chargepoint.name }}</span
 				>
 				<span
-					v-if="cp.faultState != 0"
+					v-if="cp.faultState == 2"
 					class="badge rounded-pill errorbadge ms-3"
 					>Fehler</span
 				>
@@ -324,8 +324,11 @@ const realChargeAmpereString = computed(() => {
 	)
 })
 const chargedRangeString = computed(() => {
+	const rangeSincePlugged = props.chargepoint.rangeCharged
+	const energySincePlugged = props.chargepoint.chargedSincePlugged
+	const energyToday = props.chargepoint.dailyYield
 	return (
-		Math.round(props.chargepoint.rangeCharged).toString() +
+		Math.round(rangeSincePlugged / energySincePlugged * energyToday).toString() +
 		' ' +
 		props.chargepoint.rangeUnit
 	)

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

@@ -258,12 +258,14 @@ export class ChargePoint {
 			pvPercentage: this.pvPercentage,
 			color: this.color,
 			icon: this.icon,
+			showInGraph: true,
 		}
 	}
 }
 export class Vehicle {
 	id: number
 	name = ''
+	visible = true
 	private _chargeTemplateId = 0
 	private _evTemplateId = 0
 	tags: Array<string> = []

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

@@ -16,6 +16,7 @@ import type {
 	EvTemplate,
 	ChargeSchedule,
 } from './model'
+import { globalConfig } from '@/assets/js/themeConfig'
 
 export function processChargepointMessages(topic: string, message: string) {
 	const index = getIndex(topic)
@@ -141,6 +142,9 @@ export function processVehicleMessages(topic: string, message: string) {
 	if (index != undefined) {
 		if (!(index in vehicles)) {
 			const v = new Vehicle(index)
+			if (index == 0 && !globalConfig.showStandardVehicle) {
+				v.visible = false
+			}
 			vehicles[index] = v
 			// console.info('New vehicle created: ' + index)
 		}
@@ -156,7 +160,11 @@ export function processVehicleMessages(topic: string, message: string) {
 			// set soc for cp
 			vehicles[index].soc = JSON.parse(message)
 		} else if (topic.match(/^openwb\/vehicle\/[0-9]+\/get\/range$/i)) {
-			vehicles[index].range = +message
+			if (isNaN(+message)) {
+				vehicles[index].range = 0
+			} else {
+				vehicles[index].range = +message
+			}
 		} else if (topic.match(/^openwb\/vehicle\/[0-9]+\/charge_template$/i)) {
 			vehicles[index].updateChargeTemplateId(+message)
 		} else if (topic.match(/^openwb\/vehicle\/[0-9]+\/ev_template$/i)) {

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

@@ -34,11 +34,11 @@ const props = defineProps<{
 function autPct(item: PowerItem) {
 	if (item.name == 'PV') {
 		const src =
-			graphData.graphMode == 'live' || graphData.graphMode == 'day'
+			graphData.graphMode == 'live' || graphData.graphMode == 'today'
 				? sourceSummary
 				: historicSummary.items
 		const usg =
-			graphData.graphMode == 'live' || graphData.graphMode == 'day'
+			graphData.graphMode == 'live' || graphData.graphMode == 'today'
 				? usageSummary
 				: historicSummary.items
 		const exportedEnergy = usg.evuOut.energy
@@ -48,11 +48,11 @@ function autPct(item: PowerItem) {
 		)
 	} else if (item.name == 'Netz') {
 		const src =
-			graphData.graphMode == 'live' || graphData.graphMode == 'day'
+			graphData.graphMode == 'live' || graphData.graphMode == 'today'
 				? sourceSummary
 				: historicSummary.items
 		const usg =
-			graphData.graphMode == 'live' || graphData.graphMode == 'day'
+			graphData.graphMode == 'live' || graphData.graphMode == 'today'
 				? usageSummary
 				: historicSummary.items
 		const exportedEnergy = usg.evuOut.energy

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

@@ -7,6 +7,7 @@ import { computed } from 'vue'
 import type { AxisScale, AxisContainerElement } from 'd3'
 import { axisLeft, select } from 'd3'
 import { globalConfig } from '@/assets/js/themeConfig'
+import { graphData } from '../powerGraph/model'
 const props = defineProps<{
 	yScale: AxisScale<number>
 	width: number
@@ -16,7 +17,7 @@ const props = defineProps<{
 // computed
 const yAxisGenerator = computed(() => {
 	return axisLeft<number>(props.yScale)
-		.tickFormat((d) => (d > 0 ? (d / 1000).toString() : ''))
+		.tickFormat((d) => formatNumber(d))
 		.ticks(6)
 		.tickSizeInner(-props.width)
 })
@@ -43,6 +44,18 @@ const drawYAxis = computed(() => {
 	yAxis.select('.domain').attr('stroke', 'var(--color-bg)')
 	return 'emYAxis.vue'
 })
+
+function formatNumber(n: number) {
+	if (n > 0) {
+		if (graphData.graphMode == 'year') {
+			return (n / 1000000).toString()
+		} else {
+			return (n / 1000).toString()
+		}
+	} else {
+		return ''
+	}
+}
 </script>
 
 <style></style>

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

@@ -96,7 +96,7 @@ const axisFontsize = 12
 const plotdata = computed(() => {
 	let sources = Object.values(sourceSummary)
 	let usage = usageDetails.value
-	let historic = historicSummary.values()
+	const historic = historicSummary.items
 	let result: PowerItem[] = []
 
 	if (globalConfig.debug) {
@@ -120,11 +120,13 @@ const plotdata = computed(() => {
 		case 'day':
 		case 'month':
 		case 'year':
-			if (historic.length == 0) {
+			if (Object.values(historic).length == 0) {
 				noData.value = true
 			} else {
 				noData.value = false
-				result = historic.filter((row) => row.energy > 0)
+				result = [historic.evuIn, historic.pv, historic.evuOut, historic.batOut]
+					.concat(usage)
+					.filter((row) => row.energy > 0)
 			}
 	}
 	return result
@@ -144,23 +146,27 @@ const heading = 'Energie'
 
 const usageDetails = computed(() => {
 	const cpcount = Object.values(chargePoints).length
-	const shcount = Object.values(shDevices).filter(
-		(dev) => dev.configured,
-	).length
-	return [usageSummary.evuOut, usageSummary.devices, usageSummary.charging]
-		.concat(
+	const shcount = [...shDevices.values()].filter((dev) => dev.configured).length
+	let usg = usageSummary
+	if (graphData.graphMode != 'live' && graphData.graphMode != 'day') {
+		usg = historicSummary.items
+	}
+	return [
+		...[usg.evuOut, usg.charging].concat(
 			cpcount > 1
 				? Object.values(chargePoints).map((cp) => cp.toPowerItem())
 				: [],
-		)
-		.concat(
-			shcount > 1
-				? Object.values(shDevices).filter(
-						(row) => row.configured && row.showInGraph,
-				  )
-				: [],
-		)
-		.concat([usageSummary.batIn, usageSummary.house])
+		),
+		...[usg.devices]
+			.concat(
+				shcount > 1
+					? [...shDevices.values()].filter(
+							(row) => row.configured && row.showInGraph,
+					  )
+					: [],
+			)
+			.concat([usageSummary.batIn, usageSummary.house]),
+	]
 })
 </script>
 

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

@@ -24,6 +24,8 @@ import {
 	animateSourceGraph,
 	sourceGraphIsInitialized,
 	xScaleMonth,
+	xScale,
+type GraphDataItem,
 } from './model'
 const props = defineProps<{
 	width: number
@@ -72,18 +74,7 @@ const keys = computed(() => {
 		? ['evuIn', 'batOut', 'selfUsage', 'evuOut']
 		: ['selfUsage', 'evuOut', 'batOut', 'evuIn']
 })
-const iScale = computed(() => {
-	return scaleLinear()
-		.domain([0, graphData.data.length - 1])
-		.range([0, props.width])
-})
 
-/* const iScaleMonth = computed(() =>
-	scaleBand<number>()
-		.domain(Array.from({ length: graphData.data.length }, (v, k) => k))
-		.range([0, props.width + props.margin.right])
-		.paddingInner(0.4),
-) */
 const stackGen = computed(() => stack().keys(keys.value))
 const stackedSeries = computed(() => stackGen.value(graphData.data))
 
@@ -138,10 +129,10 @@ const ticklineColor = computed(() => {
 
 function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
 	const area0 = area()
-		.x((d, i) => iScale.value(i))
+		.x((d,i) => xScale.value(graphData.data[i]['date']))
 		.y(yScale.value(0))
 	const area1 = area()
-		.x((d, i) => iScale.value(i))
+		.x((d,i) => xScale.value(graphData.data[i]['date']))
 		.y0((d) => yScale.value(graphData.graphMode == 'year' ? d[0] / 1000 : d[0]))
 		.y1((d) => yScale.value(graphData.graphMode == 'year' ? d[1] / 1000 : d[1]))
 	if (animateSourceGraph) {