From 3f77340b79f5c93d65f536031bfbd85ec03969f1 Mon Sep 17 00:00:00 2001
From: Lutz Bender <user.email=github@lutz-bender.de>
Date: Tue, 17 May 2022 14:31:43 +0200
Subject: [PATCH] first monthly chart

---
 src/components/OpenwbPageNavbar.vue |   7 +
 src/router/index.js                 |  12 +
 src/views/DailyGraph.vue            |  39 +-
 src/views/MonthlyChart.vue          | 711 ++++++++++++++++++++++++++++
 4 files changed, 764 insertions(+), 5 deletions(-)
 create mode 100644 src/views/MonthlyChart.vue

diff --git a/src/components/OpenwbPageNavbar.vue b/src/components/OpenwbPageNavbar.vue
index 29d70369..9b850934 100644
--- a/src/components/OpenwbPageNavbar.vue
+++ b/src/components/OpenwbPageNavbar.vue
@@ -230,6 +230,13 @@
 						>
 							Tagesauswertung
 						</router-link>
+						<router-link
+							to="/Logging/MonthlyChart"
+							class="dropdown-item"
+							active-class="active disabled"
+						>
+							Monatsauswertung
+						</router-link>
 					</div>
 				</li>
 				<li v-if="nodeEnv !== 'production'" class="nav-item dropdown">
diff --git a/src/router/index.js b/src/router/index.js
index 47fbb384..e646fe56 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -257,6 +257,18 @@ const routes = [
 				"../views/DailyGraph.vue"
 			),
 	},
+	{
+		path: "/Logging/MonthlyChart",
+		name: "DailyChart",
+		meta: {
+			heading: "Monatsauswertung",
+		},
+		component: () =>
+			import(
+				/* webpackChunkName: "MonthlyChart" */
+				"../views/MonthlyChart.vue"
+			),
+	},
 ];
 /* examples for development only start here */
 if (process.env.NODE_ENV !== "production") {
diff --git a/src/views/DailyGraph.vue b/src/views/DailyGraph.vue
index 956b5b39..d167d82d 100644
--- a/src/views/DailyGraph.vue
+++ b/src/views/DailyGraph.vue
@@ -31,11 +31,19 @@
 					<LineChart :chartData="chartData" :options="chartOptions" />
 				</openwb-base-card>
 				<openwb-base-card
-					title="Tagessummen (Test)"
+					title="Tagessummen"
 					:collapsible="true"
 					:collapsed="true"
 				>
-					<pre>{{ JSON.stringify(chartTotals, undefined, 2) }}</pre>
+					<openwb-base-number-input
+						v-for="(element, elementKey) in chartTotals"
+						:key="elementKey"
+						:title="element.label"
+						readonly
+						class="text-right"
+						unit="kWh"
+						:model-value="element.value"
+					/>
 				</openwb-base-card>
 			</div>
 		</form>
@@ -619,7 +627,20 @@ export default {
 						}
 						break;
 					case "cp":
-						label = "Ladepunkte (Summe)";
+						label = "Ladepunkte";
+						switch (elementKey) {
+							case "imported":
+								label += " (Ladung, Summe)";
+								break;
+							case "exported":
+								label += " (Entladung, Summe)";
+								break;
+							case "soc":
+								label += " SoC (Summe)";
+								break;
+							default:
+								label += " (Summe)";
+						}
 						break;
 				}
 			} else {
@@ -670,8 +691,16 @@ export default {
 						break;
 					case "cp":
 						label = this.$store.state.mqtt[objectTopic].name;
-						if (elementKey == "soc") {
-							label += " SoC";
+						switch (elementKey) {
+							case "imported":
+								label += " (Ladung)";
+								break;
+							case "exported":
+								label += " (Entladung)";
+								break;
+							case "soc":
+								label += " SoC";
+								break;
 						}
 						break;
 					case "ev":
diff --git a/src/views/MonthlyChart.vue b/src/views/MonthlyChart.vue
new file mode 100644
index 00000000..6a4b7af6
--- /dev/null
+++ b/src/views/MonthlyChart.vue
@@ -0,0 +1,711 @@
+<template>
+	<div class="monthlyChart">
+		<form name="monthlyChartForm">
+			<openwb-base-card title="Filter">
+				<openwb-base-text-input
+					title="Monat"
+					subtype="month"
+					min="2018-01"
+					:max="currentMonth"
+					v-model="monthlyChartDate"
+				/>
+				<template #footer>
+					<div class="row justify-content-center">
+						<openwb-base-click-button
+							class="col-4 btn-success"
+							@click="requestMonthlyChart()"
+						>
+							Daten anfordern
+						</openwb-base-click-button>
+					</div>
+				</template>
+			</openwb-base-card>
+			<openwb-base-alert v-if="!chartDataRead" subtype="info">
+				Es wurden noch keine Daten abgerufen.
+			</openwb-base-alert>
+			<div v-else>
+				<openwb-base-alert v-if="!chartDataHasEntries" subtype="info">
+					Es konnten keine Daten für diesen Zeitraum gefunden werden.
+				</openwb-base-alert>
+				<openwb-base-card v-else title="Monats-Diagramm">
+					<LineChart :chartData="chartData" :options="chartOptions" />
+				</openwb-base-card>
+				<openwb-base-card
+					title="Monatssummen"
+					:collapsible="true"
+					:collapsed="true"
+				>
+					<openwb-base-number-input
+						v-for="(element, elementKey) in chartTotals"
+						:key="elementKey"
+						:title="element.label"
+						readonly
+						class="text-right"
+						unit="kWh"
+						:model-value="element.value"
+					/>
+				</openwb-base-card>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script>
+import ComponentStateMixin from "@/components/mixins/ComponentState.vue";
+
+import { LineChart } from "vue-chart-3";
+import "chartjs-adapter-luxon";
+import "hammerjs";
+import ZoomPlugin from "chartjs-plugin-zoom";
+import {
+	Chart,
+	Tooltip,
+	Legend,
+	LineController,
+	LineElement,
+	PointElement,
+	// CategoryScale,
+	LinearScale,
+	TimeScale,
+} from "chart.js";
+Chart.register(
+	Tooltip,
+	Legend,
+	LineController,
+	LineElement,
+	PointElement,
+	// CategoryScale,
+	LinearScale,
+	TimeScale,
+	ZoomPlugin
+);
+
+export default {
+	name: "OpenwbMonthlyChart",
+	components: { LineChart },
+	mixins: [ComponentStateMixin],
+	emits: ["sendCommand"],
+	data() {
+		return {
+			mqttTopicsToSubscribe: [
+				"openWB/general/extern",
+				"openWB/log/monthly/#",
+				"openWB/system/device/+/component/+/config",
+				"openWB/chargepoint/+/config",
+				"openWB/vehicle/+/name",
+			],
+			currentMonth: "",
+			monthlyChartRequestData: {
+				month: "",
+				year: "",
+			},
+			datasetTemplates: {
+				"counter-power": {
+					label: "Zähler",
+					jsonKey: null,
+					borderColor: "rgba(255, 0, 0, 0.7)",
+					backgroundColor: "rgba(255, 10, 13, 0.3)",
+					fill: false,
+					lineTension: 0.2,
+					hidden: false,
+					borderWidth: 1,
+					data: null,
+					yAxisID: "y1",
+					parsing: {
+						xAxisKey: "timestamp",
+						yAxisKey: null,
+					},
+				},
+				"pv-power": {
+					label: "PV",
+					jsonKey: null,
+					borderColor: "rgba(0, 255, 0, 0.7)",
+					backgroundColor: "rgba(10, 255, 13, 0.3)",
+					fill: true,
+					lineTension: 0.2,
+					hidden: true,
+					borderWidth: 1,
+					data: null,
+					yAxisID: "y1",
+					parsing: {
+						xAxisKey: "timestamp",
+						yAxisKey: null,
+					},
+				},
+				"bat-power": {
+					label: "Speicher",
+					jsonKey: null,
+					borderColor: "rgba(255, 153, 13, 0.7)",
+					backgroundColor: "rgba(200, 255, 13, 0.3)",
+					fill: false,
+					lineTension: 0.2,
+					hidden: true,
+					borderWidth: 1,
+					data: null,
+					yAxisID: "y1",
+					parsing: {
+						xAxisKey: "timestamp",
+						yAxisKey: null,
+					},
+				},
+				"cp-power": {
+					label: "Ladepunkt",
+					jsonKey: null,
+					borderColor: "rgba(0, 0, 255, 0.7)",
+					backgroundColor: "rgba(0, 0, 255, 0.7)",
+					fill: true,
+					lineTension: 0.2,
+					hidden: true,
+					borderWidth: 1,
+					data: null,
+					yAxisID: "y1",
+					parsing: {
+						xAxisKey: "timestamp",
+						yAxisKey: null,
+					},
+				},
+			},
+			chartOptions: {
+				plugins: {
+					title: {
+						display: false,
+					},
+					tooltip: {
+						enabled: true,
+					},
+					legend: {
+						display: true,
+					},
+					zoom: {
+						// Container for pan options
+						pan: {
+							// Boolean to enable panning
+							enabled: true,
+							// Panning directions. Remove the appropriate direction to disable
+							// Eg. 'y' would only allow panning in the y direction
+							mode: "x",
+							threshold: 5,
+						},
+						// Container for zoom options
+						zoom: {
+							// Boolean to enable zooming
+							wheel: {
+								enabled: true,
+							},
+							pinch: {
+								enabled: true,
+							},
+							// Zooming directions. Remove the appropriate direction to disable
+							// Eg. 'y' would only allow zooming in the y direction
+							mode: "x",
+						},
+					},
+				},
+				elements: {
+					point: {
+						radius: 0,
+					},
+				},
+				responsive: true,
+				maintainAspectRatio: false,
+				scales: {
+					x: {
+						type: "time",
+						time: {
+							unit: "day",
+							tooltipFormat: "D",
+						},
+						display: true,
+						title: {
+							display: true,
+							text: "Tag",
+						},
+						ticks: {
+							source: "timestamp",
+							font: {
+								size: 12,
+							},
+							// color: tickColor,
+							maxTicksLimit: 31,
+						},
+						grid: {
+							// color: xGridColor,
+						},
+					},
+					y1: {
+						// horizontal line for values displayed on the left side (power, kW)
+						position: "left",
+						type: "linear",
+						display: "auto",
+						suggestedMin: 0,
+						suggestedMax: 0,
+						title: {
+							font: {
+								size: 12,
+							},
+							display: true,
+							text: "Energie [kWh]",
+							// color: fontColor
+						},
+						grid: {
+							// color: gridColor
+						},
+						ticks: {
+							font: {
+								size: 12,
+							},
+							stepSize: 0.2,
+							maxTicksLimit: 11,
+							// color: tickColor
+						},
+					},
+				},
+			},
+			chartDatasets: {
+				datasets: [],
+			},
+		};
+	},
+	computed: {
+		monthlyChartDate: {
+			get() {
+				return (
+					this.monthlyChartRequestData.year +
+					"-" +
+					this.monthlyChartRequestData.month
+				);
+			},
+			set(newValue) {
+				let splitDate = newValue.split("-");
+				this.monthlyChartRequestData.year = splitDate[0];
+				this.monthlyChartRequestData.month = splitDate[1];
+			},
+		},
+		commandData: {
+			get() {
+				return {
+					month:
+						this.monthlyChartRequestData.year +
+						this.monthlyChartRequestData.month,
+				};
+			},
+		},
+		chartDataRead: {
+			get() {
+				return this.chartDataObject != undefined;
+			},
+		},
+		chartDataHasEntries: {
+			get() {
+				return this.chartDataObject.length > 0;
+			},
+		},
+		chartTotals() {
+			var diff = {};
+			const keysToProcess = ["counter", "imported", "exported"];
+
+			const process = (startValue, endValue, path) => {
+				// console.log("process:", path);
+				const keys = path.split(".");
+				if (keysToProcess.includes(keys[keys.length - 1])) {
+					if (keys.length == 3) {
+						var label = this.getDatasetLabel(
+							keys[0],
+							keys[1],
+							keys[2],
+							path
+						);
+					}
+					diff[path] = {
+						value: Math.floor(endValue - startValue) / 1000,
+						label: label,
+					};
+				}
+			};
+
+			const traverse = (
+				startObject,
+				endObject,
+				method,
+				currentPath = ""
+			) => {
+				for (var element in endObject) {
+					if (
+						endObject[element] !== null &&
+						typeof endObject[element] == "object"
+					) {
+						//going one step down in the object tree!!
+						traverse(
+							startObject[element],
+							endObject[element],
+							method,
+							currentPath ? currentPath + "." + element : element
+						);
+					} else {
+						method.apply(this, [
+							startObject[element],
+							endObject[element],
+							currentPath ? currentPath + "." + element : element,
+						]);
+					}
+				}
+			};
+
+			if (
+				this.$store.state.mqtt[
+					"openWB/log/monthly/" + this.commandData.month
+				]
+			) {
+				const start =
+					this.$store.state.mqtt[
+						"openWB/log/monthly/" + this.commandData.month
+					][0];
+				const end =
+					this.$store.state.mqtt[
+						"openWB/log/monthly/" + this.commandData.month
+					][
+						this.$store.state.mqtt[
+							"openWB/log/monthly/" + this.commandData.month
+						].length - 1
+					];
+				traverse(start, end, process);
+				return diff;
+			}
+			return undefined;
+		},
+		chartDataObject() {
+			if (
+				this.$store.state.mqtt[
+					"openWB/log/monthly/" + this.commandData.month
+				]
+			) {
+				var lastRow = undefined;
+				var myData = JSON.parse(
+					JSON.stringify(
+						this.$store.state.mqtt[
+							"openWB/log/monthly/" + this.commandData.month
+						]
+					)
+				).map((row) => {
+					row.timestamp = row.timestamp * 1000;
+					if (lastRow) {
+						const timeDiff = row.timestamp - lastRow.timestamp;
+						var baseObjectsToProcess = [
+							"pv",
+							"counter",
+							"bat",
+							"cp",
+						];
+						baseObjectsToProcess.forEach((baseObject) => {
+							Object.entries(row[baseObject]).forEach(
+								([key, value]) => {
+									Object.keys(value).forEach(() => {
+										switch (baseObject) {
+											case "pv":
+												row[baseObject][key].power =
+													Math.floor(
+														(row[baseObject][key]
+															.imported -
+															lastRow[baseObject][
+																key
+															].imported) /
+															(timeDiff /
+																1000 /
+																3600)
+													) / 1000;
+												break;
+											case "counter":
+												row[baseObject][key].power =
+													Math.floor(
+														(row[baseObject][key]
+															.imported -
+															lastRow[baseObject][
+																key
+															].imported -
+															(row[baseObject][
+																key
+															].exported -
+																lastRow[
+																	baseObject
+																][key]
+																	.exported)) /
+															(timeDiff /
+																1000 /
+																3600)
+													) / 1000;
+												row[baseObject][
+													key
+												].powerImport = Math.max(
+													0,
+													row[baseObject][key].power
+												);
+												row[baseObject][
+													key
+												].powerExport = Math.min(
+													0,
+													row[baseObject][key].power
+												);
+												break;
+											case "bat":
+												row[baseObject][key].power =
+													Math.floor(
+														(row[baseObject][key]
+															.imported -
+															lastRow[baseObject][
+																key
+															].imported -
+															(row[baseObject][
+																key
+															].exported -
+																lastRow[
+																	baseObject
+																][key]
+																	.exported)) /
+															(timeDiff /
+																1000 /
+																3600)
+													) / 1000;
+												row[baseObject][
+													key
+												].powerImport = Math.max(
+													0,
+													row[baseObject][key].power
+												);
+												row[baseObject][
+													key
+												].powerExport = Math.min(
+													0,
+													row[baseObject][key].power
+												);
+												break;
+											case "cp":
+												row[baseObject][key].power =
+													Math.floor(
+														(row[baseObject][key]
+															.imported -
+															lastRow[baseObject][
+																key
+															].imported) /
+															(timeDiff /
+																1000 /
+																3600)
+													) / 1000;
+												break;
+										}
+									});
+								}
+							);
+						});
+						lastRow = row;
+						return row;
+					} else {
+						lastRow = row;
+						return;
+					}
+				});
+				myData.shift();
+				return myData;
+			}
+			return undefined;
+		},
+		chartData() {
+			// add all datasets available in the last entry
+			var baseObjectsToProcess = ["pv", "counter", "bat", "cp", "ev"];
+			const lastElement =
+				this.chartDataObject[this.chartDataObject.length - 1];
+			if (lastElement) {
+				baseObjectsToProcess.forEach((baseObject) => {
+					Object.entries(lastElement[baseObject]).forEach(
+						([key, value]) => {
+							Object.keys(value).forEach((entryKey) => {
+								this.initDataset(baseObject, key, entryKey);
+							});
+						}
+					);
+				});
+			}
+			return this.chartDatasets;
+		},
+	},
+	methods: {
+		getDatasetLabel(baseObject, objectKey, elementKey, datasetKey) {
+			// console.log(
+			// 	"getDatasetLabel",
+			// 	baseObject,
+			// 	objectKey,
+			// 	elementKey,
+			// 	datasetKey
+			// );
+			var label = "*" + datasetKey;
+			if (objectKey == "all") {
+				switch (baseObject) {
+					case "pv":
+						label = "PV (Summe)";
+						break;
+					case "bat":
+						label = "Speicher";
+						switch (elementKey) {
+							case "imported":
+								label += " (Ladung, Summe)";
+								break;
+							case "exported":
+								label += " (Entladung, Summe)";
+								break;
+							case "soc":
+								label += " SoC (Summe)";
+								break;
+							default:
+								label += " (Summe)";
+						}
+						break;
+					case "cp":
+						label = "Ladepunkte (Summe)";
+						break;
+				}
+			} else {
+				var objectId = objectKey.match(/\d+$/);
+				var topic = "";
+				switch (baseObject) {
+					case "cp":
+						topic = "openWB/chargepoint/" + objectId + "/config";
+						break;
+					case "ev":
+						topic = "openWB/vehicle/" + objectId + "/name";
+						break;
+					default:
+						topic =
+							"openWB/system/device/+/component/" +
+							objectId +
+							"/config";
+				}
+				var objectTopic = Object.keys(this.getWildcardTopics(topic))[0];
+				switch (baseObject) {
+					case "pv":
+						label = this.$store.state.mqtt[objectTopic].name;
+						break;
+					case "counter":
+						label = this.$store.state.mqtt[objectTopic].name;
+						switch (elementKey) {
+							case "imported":
+								label += " (Bezug)";
+								break;
+							case "exported":
+								label += " (Einspeisung)";
+								break;
+						}
+						break;
+					case "bat":
+						label = this.$store.state.mqtt[objectTopic].name;
+						switch (elementKey) {
+							case "imported":
+								label += " (Ladung)";
+								break;
+							case "exported":
+								label += " (Entladung)";
+								break;
+							case "soc":
+								label += " SoC";
+								break;
+						}
+						break;
+					case "cp":
+						label = this.$store.state.mqtt[objectTopic].name;
+						if (elementKey == "soc") {
+							label += " SoC";
+						}
+						break;
+					case "ev":
+						label = this.$store.state.mqtt[objectTopic];
+						break;
+				}
+			}
+			return label;
+		},
+		getDatasetIndex(datasetKey) {
+			let index = this.chartDatasets.datasets.findIndex((dataset) => {
+				return dataset.jsonKey == datasetKey;
+			});
+			if (index != -1) {
+				return index;
+			}
+			return;
+		},
+		addDataset(baseObject, objectKey, elementKey, datasetKey) {
+			console.debug(
+				"adding new dataset",
+				baseObject,
+				objectKey,
+				elementKey,
+				datasetKey
+			);
+			var datasetTemplate = baseObject + "-" + elementKey;
+			if (this.datasetTemplates[datasetTemplate]) {
+				var newDataset = JSON.parse(
+					JSON.stringify(this.datasetTemplates[datasetTemplate])
+				);
+				newDataset.parsing.yAxisKey = datasetKey;
+				newDataset.jsonKey = datasetKey;
+				newDataset.data = this.chartDataObject;
+				newDataset.label = this.getDatasetLabel(
+					baseObject,
+					objectKey,
+					elementKey,
+					datasetKey
+				);
+				if (newDataset.labelSuffix != undefined) {
+					newDataset.label =
+						newDataset.label + newDataset.labelSuffix;
+				}
+				if (objectKey == "all") {
+					newDataset.hidden = false;
+				}
+				return this.chartDatasets.datasets.push(newDataset) - 1;
+			} else {
+				console.warn(
+					"no matching template found for: " +
+						datasetKey +
+						" with template: " +
+						datasetTemplate
+				);
+			}
+			return;
+		},
+		initDataset(baseObject, objectKey, elementKey) {
+			const elementKeysToAdd = ["power", "soc"];
+			const datasetKey = baseObject + "." + objectKey + "." + elementKey;
+			if (elementKeysToAdd.includes(elementKey)) {
+				var index = this.getDatasetIndex(datasetKey);
+				if (index == undefined) {
+					index = this.addDataset(
+						baseObject,
+						objectKey,
+						elementKey,
+						datasetKey
+					);
+				}
+			}
+		},
+		requestMonthlyChart() {
+			let myForm = document.forms["monthlyChartForm"];
+			if (!myForm.reportValidity()) {
+				console.log("form invalid");
+				return;
+			} else {
+				this.chartDatasets.datasets = [];
+				this.$emit("sendCommand", {
+					command: "getMonthlyLog",
+					data: this.commandData,
+				});
+			}
+		},
+	},
+	mounted() {
+		const today = new Date();
+		this.currentMonth = this.monthlyChartDate =
+			today.getFullYear() +
+			"-" +
+			String(today.getMonth() + 1).padStart(2, "0");
+		this.requestMonthlyChart();
+	},
+};
+</script>