Colors Theme: Update Pricechart handling (#2756)

* update pricechart handling

* improve layout of chargepoint config

Author: cshagen

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

@@ -43,8 +43,6 @@ export class Config {
 	private _lowerPriceBound = 0
 	private _upperPriceBound = 0
 	private _showPmLabels = true
-	isEtEnabled: boolean = false
-	etPrice: number = 20.5
 	showRightButton = true
 	showLeftButton = true
 	// graphMode = ''
@@ -407,6 +405,7 @@ export class GlobalData {
 	cpDailyExported = 0
 	evuId = 0
 	etProvider = ''
+	country = 'de'
 	get pvBatteryPriority() {
 		return this._pvBatteryPriority
 	}

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

@@ -120,14 +120,14 @@
 			heading="Strompreis:"
 			class="grid-col-4 grid-left"
 		>
-			<span :style="currentPriceStyle">{{ currentPrice }} ct </span>
+			<span :style="currentPriceStyle">{{ etData.etCurrentPriceString }} </span>
 		</InfoItem>
 		<InfoItem v-if="cp.etActive" heading="max. Preis:" class="grid-col-4">
 			<span type="button" @click="editPrice = !editPrice"
 				>{{
 					props.chargepoint.etActive
 						? (Math.round(props.chargepoint.etMaxPrice * 10) / 10).toFixed(1) +
-							' ct'
+							priceUnit
 						: '-'
 				}}
 				<i
@@ -175,6 +175,7 @@ import RangeInput from '../shared/RangeInput.vue'
 import PriceChart from '../priceChart/PriceChart.vue'
 import InfoItem from '@/components/shared/InfoItem.vue'
 import ChargingState from './ChargingState.vue'
+import { globalData } from '@/assets/js/model'
 
 const props = defineProps<{
 	chargepoint: ChargePoint
@@ -253,7 +254,9 @@ const modePillStyle = computed(() => {
 			}
 	}
 })
-
+const priceUnit = computed(() => {
+	return globalData.country === 'ch' ? ' Rp' : ' ct'
+})
 //methods
 function loadSoc() {
 	updateServer('socUpdate', 1, props.chargepoint.connectedVehicle)

packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigPv.vue

@@ -11,7 +11,7 @@
 			<template #inline-item>
 				<SwitchInput v-model="useMinPv" />
 			</template>
-			<div class="subconfigstack grid-col-12">
+			<div class="subconfigstack grid-col-12 mt-4">
 				<div v-if="useMinPv" class="subconfig subgrid">
 					<span class="subconfigtitle grid-col-1">Stärke:</span>
 					<RangeInput
@@ -46,7 +46,7 @@
 			<template #inline-item>
 				<SwitchInput v-model="useMinSoc" class="grid-col-3" />
 			</template>
-			<div v-if="useMinSoc" class="subconfigstack">
+			<div v-if="useMinSoc" class="subconfigstack mt-4">
 				<div class="subconfig subgrid">
 					<span class="subconfigtitle grid-col-1">SoC:</span>
 					<RangeInput

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

@@ -125,18 +125,18 @@ function extractValues(data: RawGraphDataItem): GraphDataItem {
 
 	values.charging = +data['charging-all']
 	// charge points - we only show a maximum of 10 chargepoints in the graph
-/* 	for (let i = 0; i < 10; i++) {
+	/* 	for (let i = 0; i < 10; i++) {
 		const idx = 'cp' + i
 		values[idx] = +(data[idx + '-power'] ?? 0)
 	} */
-Object.keys(data)
-.filter(key => re_cp.test(key))
-	.forEach((key) => {
-		const found = key.match(re_cp)
-		if (found && found[1]) {
-			values['cp' + found[1]] = +(data[key] ?? 0)
-		}
-	})
+	Object.keys(data)
+		.filter((key) => re_cp.test(key))
+		.forEach((key) => {
+			const found = key.match(re_cp)
+			if (found && found[1]) {
+				values['cp' + found[1]] = +(data[key] ?? 0)
+			}
+		})
 	values.selfUsage = values.pv - values.evuOut
 	if (values.selfUsage < 0) {
 		values.selfUsage = 0

packages/modules/web_themes/colors/source/src/components/priceChart/GlobalPriceChart.vue

@@ -127,7 +127,11 @@ const xAxisGenerator = computed(() => {
 		.ticks(plotdata.value.length)
 		.tickSize(5)
 		.tickSizeInner(-height)
-		.tickFormat((d) => (d.getHours() % 6 == 0 ? timeFormat('%H:%M')(d) : ''))
+		.tickFormat((d) =>
+			d.getHours() % 6 == 0 && d.getMinutes() == 0
+				? timeFormat('%H:%M')(d)
+				: '',
+		)
 })
 const yAxisGenerator = computed(() => {
 	return (
@@ -156,7 +160,9 @@ const draw = computed(() => {
 	bargroups
 		.append('rect')
 		.attr('class', 'bar')
-		.attr('x', (d) => xScale.value(d[0]))
+		.attr('x', (d) => {
+			return xScale.value(d[0])
+		})
 		.attr('y', (d) => yScale.value(d[1]))
 		.attr('width', barwidth.value)
 		.attr('height', (d) => yScale.value(yDomain.value[0]) - yScale.value(d[1]))
@@ -172,7 +178,11 @@ const draw = computed(() => {
 		.selectAll('.tick line')
 		.attr('stroke', 'var(--color-bg)')
 		.attr('stroke-width', (d) =>
-			(d as Date).getHours() % 6 == 0 ? '2' : '0.5',
+			(d as Date).getMinutes() == 0
+				? (d as Date).getHours() % 6 == 0
+					? '2'
+					: '0.5'
+				: '0',
 		)
 	xAxis.select('.domain').attr('stroke', 'var(--color-bg')
 	// Y Axis

packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue

@@ -23,7 +23,7 @@
 			:show-subrange="true"
 			:subrange-min="prices[0]"
 			:subrange-max="prices[prices.length - 1]"
-			unit="ct"
+			:unit="globalData.country == 'ch' ? 'Rp' : 'ct'"
 		/>
 	</div>
 	<div class="d-flex justify-content-between px-3 pb-2 pt-0 mt-0">
@@ -50,6 +50,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { globalData } from '@/assets/js/model'
 import { etData } from './model'
 import {
 	extent,
@@ -106,7 +107,7 @@ const plotdata = computed(() => {
 })
 const barwidth = computed(() => {
 	if (plotdata.value.length > 1) {
-		return (width - margin.left - margin.right) / plotdata.value.length - 1
+		return (width - margin.left - margin.right) / plotdata.value.length
 	} else {
 		return 0
 	}
@@ -181,9 +182,14 @@ const zeroPath = computed(() => {
 
 const xAxisGenerator = computed(() => {
 	return axisBottom<Date>(xScale.value)
-		.ticks(6)
+		.ticks(plotdata.value.length)
 		.tickSize(5)
-		.tickFormat(timeFormat('%H:%M'))
+		.tickSizeInner(-height)
+		.tickFormat((d) =>
+			d.getHours() % 6 == 0 && d.getMinutes() == 0
+				? timeFormat('%H:%M')(d)
+				: '',
+		)
 })
 const yAxisGenerator = computed(() => {
 	return axisLeft<number>(yScale.value)
@@ -221,8 +227,14 @@ const draw = computed(() => {
 		.attr('color', 'var(--color-bg)')
 	xAxis
 		.selectAll('.tick line')
-		.attr('stroke', 'var(--color-fg)')
-		.attr('stroke-width', '0.5')
+		.attr('stroke', 'var(--color-bg)')
+		.attr('stroke-width', (d) =>
+			(d as Date).getMinutes() == 0
+				? (d as Date).getHours() % 6 == 0
+					? '2'
+					: '0.5'
+				: '0',
+		)
 	xAxis.select('.domain').attr('stroke', 'var(--color-bg')
 	// Y Axis
 	const yAxis = svg.append('g').attr('class', 'axis').call(yAxisGenerator.value)

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

@@ -1,14 +1,19 @@
 import { reactive } from 'vue'
-// import { updateServer } from '@/assets/js/sendMessages'
+import { globalData } from '@/assets/js/model'
+
 class EtData {
 	active = false
 	etPriceList = new Map<Date, number>()
 	etProvider = ''
 	etMaxPrice = 0
+	country = 'de'
 
 	get etCurrentPriceString() {
 		const [p] = etData.etPriceList.values()
-		return (Math.round(p * 10) / 10).toFixed(1) + ' ct'
+		return (
+			(Math.round(p * 10) / 10).toFixed(1) +
+			(globalData.country === 'ch' ? ' Rp' : ' ct')
+		)
 	}
 }
 

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

@@ -1,3 +1,4 @@
+import { globalData } from '@/assets/js/model'
 import { etData } from './model'
 
 export function processEtProviderMessages(topic: string, message: string) {
@@ -9,6 +10,9 @@ export function processEtProviderMessages(topic: string, message: string) {
 			etData.active = true
 			etData.etProvider = JSON.parse(message).name
 		}
+		if (data.configuration && data.configuration.country != null) {
+			globalData.country = data.configuration.country
+		}
 	} else if (topic == 'openWB/optional/et/get/prices') {
 		const plist = JSON.parse(message)
 		etData.etPriceList = new Map<Date, number>()