From 73089c2888b9d5addc37bb1916585ad839089de5 Mon Sep 17 00:00:00 2001
From: Lutz Bender <user.email=github@lutz-bender.de>
Date: Fri, 18 Feb 2022 12:28:25 +0100
Subject: [PATCH 1/3] update dependencies

---
 package-lock.json | 86 ++++++++++++++++++++++++++++++++++++++++++-----
 package.json      |  5 ++-
 2 files changed, 81 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1bd2362d..417d92f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,15 +15,18 @@
         "@popperjs/core": "^2.11.2",
         "axios": "^0.24.0",
         "bootstrap": "^4.6.1",
-        "core-js": "^3.21.0",
+        "chart.js": "^3.7.1",
+        "core-js": "^3.21.1",
         "jquery": "^3.6.0",
         "lodash": "^4.17.21",
         "mqtt": "^4.3.5",
         "popper.js": "^1.16.1",
         "vue": "^3.2.31",
         "vue-axios": "^3.4.1",
+        "vue-chart-3": "^3.1.0",
         "vue-loader": "^15.9.8",
         "vue-router": "^4.0.12",
+        "vue3-table-lite": "^1.1.7-1",
         "vuedraggable": "^4.1.0",
         "vuex": "^4.0.0-0",
         "webpack-dev-server": "^3.11.3"
@@ -6122,6 +6125,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "node_modules/check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -6992,9 +7000,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.0.tgz",
-      "integrity": "sha512-YUdI3fFu4TF/2WykQ2xzSiTQdldLB4KVuL9WeAy5XONZYt5Cun/fpQvctoKbCgvPhmzADeesTk/j2Rdx77AcKQ==",
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz",
+      "integrity": "sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -12758,6 +12766,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -18061,6 +18074,24 @@
         "vue": "^3.0.0 || ^2.0.0"
       }
     },
+    "node_modules/vue-chart-3": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.1.0.tgz",
+      "integrity": "sha512-3PUTW5cV5OLFdnRjFtfAFl9Suen/vAolqAG7KLfeNyG4ZduV9xqxZXRboeNqeruoyR4aRTHC/9yfkiDZM58cvA==",
+      "dependencies": {
+        "@vue/runtime-core": "^3.2.31",
+        "@vue/runtime-dom": "^3.2.31",
+        "csstype": "latest",
+        "lodash-es": "^4.17.21",
+        "pascalcase": "0.1.1"
+      },
+      "peerDependencies": {
+        "@vue/runtime-core": "> 3",
+        "@vue/runtime-dom": "> 3",
+        "chart.js": "=> ^3.1.0",
+        "vue": ">= 3"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -18169,6 +18200,14 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "node_modules/vue3-table-lite": {
+      "version": "1.1.7-1",
+      "resolved": "https://registry.npmjs.org/vue3-table-lite/-/vue3-table-lite-1.1.7-1.tgz",
+      "integrity": "sha512-n+5NtMNWaosXRWenALzE52Dh5OOPmFI1kmEViU218CLrktOw2DQ5zxVifCMjNTiX7LlUL4WZYWy8bAux1tmcfw==",
+      "dependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -24472,6 +24511,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -25191,9 +25235,9 @@
       }
     },
     "core-js": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.0.tgz",
-      "integrity": "sha512-YUdI3fFu4TF/2WykQ2xzSiTQdldLB4KVuL9WeAy5XONZYt5Cun/fpQvctoKbCgvPhmzADeesTk/j2Rdx77AcKQ=="
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz",
+      "integrity": "sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig=="
     },
     "core-js-compat": {
       "version": "3.19.0",
@@ -29942,6 +29986,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -34418,8 +34467,19 @@
     "vue-axios": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-3.4.1.tgz",
-      "integrity": "sha512-8YZYUOQrBEJktxoQtrM4rr2LfVcDaWfJqv8MqtLlgLlkuBvCYKFSZSo6AXQ4YcCzdgccDqstmuaEh68lcH9xWA==",
-      "requires": {}
+      "integrity": "sha512-8YZYUOQrBEJktxoQtrM4rr2LfVcDaWfJqv8MqtLlgLlkuBvCYKFSZSo6AXQ4YcCzdgccDqstmuaEh68lcH9xWA=="
+    },
+    "vue-chart-3": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.1.0.tgz",
+      "integrity": "sha512-3PUTW5cV5OLFdnRjFtfAFl9Suen/vAolqAG7KLfeNyG4ZduV9xqxZXRboeNqeruoyR4aRTHC/9yfkiDZM58cvA==",
+      "requires": {
+        "@vue/runtime-core": "^3.2.31",
+        "@vue/runtime-dom": "^3.2.31",
+        "csstype": "latest",
+        "lodash-es": "^4.17.21",
+        "pascalcase": "0.1.1"
+      }
     },
     "vue-eslint-parser": {
       "version": "7.11.0",
@@ -34530,6 +34590,14 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vue3-table-lite": {
+      "version": "1.1.7-1",
+      "resolved": "https://registry.npmjs.org/vue3-table-lite/-/vue3-table-lite-1.1.7-1.tgz",
+      "integrity": "sha512-n+5NtMNWaosXRWenALzE52Dh5OOPmFI1kmEViU218CLrktOw2DQ5zxVifCMjNTiX7LlUL4WZYWy8bAux1tmcfw==",
+      "requires": {
+        "vue": "^3.0.0"
+      }
+    },
     "vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
diff --git a/package.json b/package.json
index 6b6273cc..71da691d 100644
--- a/package.json
+++ b/package.json
@@ -19,15 +19,18 @@
     "@popperjs/core": "^2.11.2",
     "axios": "^0.24.0",
     "bootstrap": "^4.6.1",
-    "core-js": "^3.21.0",
+    "chart.js": "^3.7.1",
+    "core-js": "^3.21.1",
     "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "mqtt": "^4.3.5",
     "popper.js": "^1.16.1",
     "vue": "^3.2.31",
     "vue-axios": "^3.4.1",
+    "vue-chart-3": "^3.1.0",
     "vue-loader": "^15.9.8",
     "vue-router": "^4.0.12",
+    "vue3-table-lite": "^1.1.7-1",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.0-0",
     "webpack-dev-server": "^3.11.3"

From 86ea857ea1b6787c7727a2ad7b75c5b15c25e9c4 Mon Sep 17 00:00:00 2001
From: Lutz Bender <user.email=github@lutz-bender.de>
Date: Fri, 18 Feb 2022 12:28:45 +0100
Subject: [PATCH 2/3] charge log table

---
 src/views/ChargeLog.vue | 210 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 196 insertions(+), 14 deletions(-)

diff --git a/src/views/ChargeLog.vue b/src/views/ChargeLog.vue
index a50e6080..1ae2ce75 100644
--- a/src/views/ChargeLog.vue
+++ b/src/views/ChargeLog.vue
@@ -6,7 +6,7 @@
 					title="Zeitraum"
 					subtype="month"
 					min="2018-01"
-					max="2022-12"
+					:max="currentMonth"
 					v-model="chargeLogDate"
 				/>
 				<openwb-base-card
@@ -17,8 +17,7 @@
 					<openwb-base-textarea
 						title="Filter Objekt"
 						subtype="json"
-						readonly
-						v-model="chargeLogRequestData"
+						v-model="chargeLogRequestData.filter"
 					/>
 				</openwb-base-card>
 				<template #footer>
@@ -32,33 +31,42 @@
 					</div>
 				</template>
 			</openwb-base-card>
-			<openwb-base-card title="Ladeprotokoll"></openwb-base-card>
-			<openwb-base-alert subtype="info">
-				<pre>{{
-					JSON.stringify(
-						$store.state.mqtt[
-							"openWB/log/" + mqttClientId + "/data"
-						]
-					)
-				}}</pre>
+			<openwb-base-alert v-if="!chargeLogRead" subtype="info">
+				Es wurden noch keine Daten abgerufen.
 			</openwb-base-alert>
+			<div v-else>
+				<vue3-table-lite
+					id="charge-log-table"
+					:is-static-mode="true"
+					:columns="table.columns"
+					:rows="chargeLogDataset"
+					:total="totalRecordCount"
+					:sortable="table.sortable"
+					:messages="table.messages"
+					:page-options="table.pageOptions"
+					:limit="25"
+				/>
+			</div>
 		</form>
 	</div>
 </template>
 
 <script>
+import Vue3TableLite from "vue3-table-lite";
 import ComponentStateMixin from "@/components/mixins/ComponentState.vue";
 
 export default {
 	name: "ChargeLog",
+	components: { Vue3TableLite },
 	mixins: [ComponentStateMixin],
 	emits: ["sendCommand"],
 	data() {
 		return {
 			mqttTopicsToSubscribe: ["openWB/general/extern"],
+			currentMonth: "",
 			chargeLogRequestData: {
-				month: "12",
-				year: "2021",
+				month: "",
+				year: "",
 				filter: {
 					chargepoint: {
 						id: [],
@@ -71,6 +79,75 @@ export default {
 					},
 				},
 			},
+			table: {
+				messages: {
+					pagingInfo: "Einträge {0}-{1} von {2}",
+					pageSizeChangeLabel: "Einträge:",
+					gotoPageLabel: " Gehe zu:",
+					noDataAvailable: "Keine Einträge gefunden.",
+				},
+				pageOptions: [
+					{ value: 5, text: "5" },
+					{ value: 10, text: "10" },
+					{ value: 25, text: "25" },
+					{ value: 50, text: "50" },
+					{ value: 100, text: "100" },
+				],
+				columns: [
+					{
+						label: "Beginn",
+						field: "time_begin",
+						width: "15%",
+						sortable: true,
+					},
+					{
+						label: "Ende",
+						field: "time_end",
+						width: "15%",
+						sortable: true,
+					},
+					{
+						label: "Fahrzeug",
+						field: "vehicle_name",
+						width: "10%",
+						sortable: true,
+					},
+					{
+						label: "Dauer",
+						field: "time_time_charged",
+						width: "15%",
+						sortable: true,
+					},
+					{
+						label: "Geladen [kWh]",
+						field: "data_charged_since_plugged_counter",
+						width: "15%",
+						sortable: true,
+					},
+					{
+						label: "Kosten",
+						field: "data_costs",
+						width: "15%",
+						sortable: true,
+					},
+					{
+						label: "Lademodus",
+						field: "vehicle_chargemode",
+						width: "15%",
+						sortable: true,
+					},
+					{
+						label: "Ladepunkt",
+						field: "chargepoint_name",
+						width: "3%",
+						sortable: true,
+					},
+				],
+				sortable: {
+					order: "time_begin",
+					sort: "asc",
+				},
+			},
 		};
 	},
 	computed: {
@@ -88,6 +165,66 @@ export default {
 				this.chargeLogRequestData.month = splitDate[1];
 			},
 		},
+		chargeLogDataset: {
+			get() {
+				let dateTimeFormat = new Intl.DateTimeFormat("de-DE", {
+					year: "numeric",
+					month: "2-digit",
+					day: "2-digit",
+					hour: "2-digit",
+					minute: "2-digit",
+					second: "2-digit",
+				});
+				try {
+					return this.$store.state.mqtt[
+						"openWB/log/" + this.mqttClientId + "/data"
+					]["entries"].map((entry) => {
+						return {
+							chargepoint_id: entry["chargepoint"]["id"],
+							chargepoint_name: entry["chargepoint"]["name"],
+							vehicle_id: entry["vehicle"]["id"],
+							vehicle_name: entry["vehicle"]["name"],
+							vehicle_chargemode: entry["vehicle"]["chargemode"],
+							vehicle_rfid: entry["vehicle"]["rfid"],
+							vehicle_prio: entry["vehicle"]["prio"],
+							time_begin: dateTimeFormat.format(
+								new Date(entry["time"]["begin"])
+							),
+							time_end: dateTimeFormat.format(
+								new Date(entry["time"]["end"])
+							),
+							time_time_charged: entry["time"]["time_charged"],
+							data_power: entry["data"]["power"],
+							data_range_charged: entry["data"]["range_charged"],
+							data_costs: entry["data"]["costs"],
+							data_charged_since_plugged_counter:
+								entry["data"]["charged_since_plugged_counter"],
+							data_charged_since_mode_switch:
+								entry["data"]["charged_since_mode_switch"],
+						};
+					});
+				} catch (error) {
+					return [];
+				}
+			},
+		},
+		chargeLogRead: {
+			get() {
+				return this.chargeLogDataset != undefined;
+			},
+		},
+		chargeLogHasEntries: {
+			get() {
+				if (this.chargeLogDataset == undefined) {
+					return false;
+				} else {
+					return this.chargeLogDataset.length > 0;
+				}
+			},
+		},
+		totalRecordCount() {
+			return this.chargeLogDataset.length;
+		},
 	},
 	methods: {
 		requestChargeLog() {
@@ -104,5 +241,50 @@ export default {
 			}
 		},
 	},
+	mounted() {
+		const today = new Date();
+		this.currentMonth = this.chargeLogDate =
+			today.getFullYear() +
+			"-" +
+			String(today.getMonth() + 1).padStart(2, "0");
+		this.requestChargeLog();
+	},
 };
 </script>
+
+<style scoped>
+#charge-log-table {
+	border: none;
+	padding: 0;
+}
+
+#charge-log-table :deep(.card-body) {
+	padding: 0;
+}
+
+:deep(.vtl-table .vtl-thead .vtl-thead-th) {
+	color: var(--light);
+	background-color: var(--primary);
+	border-color: var(--light);
+}
+
+:deep(.vtl-table .vtl-tbody .vtl-tbody-tr:hover) {
+	background-color: #d1ecf1;
+}
+
+:deep(.vtl-table .vtl-tbody .vtl-tbody-tr:nth-child(odd):not(:hover)) {
+	background-color: var(--light);
+}
+
+:deep(.vtl-table .vtl-tbody .vtl-tbody-tr:nth-child(even):not(:hover)) {
+	background-color: var(--white);
+}
+
+:deep(.vtl-paging) {
+	align-items: center;
+}
+
+:deep(.vtl-paging-change-div) {
+	text-align: center;
+}
+</style>

From 259e234d1038571b8b2edc641eeea1b1b8ba76fc Mon Sep 17 00:00:00 2001
From: Lutz Bender <user.email=github@lutz-bender.de>
Date: Fri, 18 Feb 2022 12:36:06 +0100
Subject: [PATCH 3/3] daily graph with demo data

---
 src/views/DailyGraph.vue | 81 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 6 deletions(-)

diff --git a/src/views/DailyGraph.vue b/src/views/DailyGraph.vue
index d6ee8a3c..c0bb8023 100644
--- a/src/views/DailyGraph.vue
+++ b/src/views/DailyGraph.vue
@@ -6,7 +6,7 @@
 					title="Datum"
 					subtype="date"
 					min="2018-01-01"
-					max="2022-12-31"
+					:max="currentDay"
 					v-model="dailyGraphDate"
 				/>
 				<template #footer>
@@ -20,11 +20,17 @@
 					</div>
 				</template>
 			</openwb-base-card>
-			<openwb-base-card title="Tages-Diagramm"></openwb-base-card>
-			<openwb-base-alert subtype="info">
-				Graph Dataset:<br />
-				<pre>{{ dailyGraphDataset }}</pre>
+			<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 Einträge für dieses Datum gefunden werden.
+				</openwb-base-alert>
+				<openwb-base-card v-else title="Demo-Diagramm">
+					<LineChart :chartData="testData" />
+				</openwb-base-card>
+			</div>
 		</form>
 	</div>
 </template>
@@ -32,8 +38,30 @@
 <script>
 import ComponentStateMixin from "@/components/mixins/ComponentState.vue";
 
+import { LineChart } from "vue-chart-3";
+import {
+	Chart,
+	Tooltip,
+	Legend,
+	LineController,
+	LineElement,
+	PointElement,
+	CategoryScale,
+	LinearScale,
+} from "chart.js";
+Chart.register(
+	Tooltip,
+	Legend,
+	LineController,
+	LineElement,
+	PointElement,
+	CategoryScale,
+	LinearScale
+);
+
 export default {
 	name: "DailyGraph",
+	components: { LineChart },
 	mixins: [ComponentStateMixin],
 	emits: ["sendCommand"],
 	data() {
@@ -42,11 +70,28 @@ export default {
 				"openWB/general/extern",
 				"openWB/log/daily/#",
 			],
+			currentDay: "",
 			dailyGraphRequestData: {
 				day: "01",
 				month: "01",
 				year: "2022",
 			},
+			testData: {
+				labels: ["00:00", "00:01", "00:02", "00:03", "00:04"],
+				datasets: [
+					{
+						label: "Datenreihe 1",
+						data: [123, 54, -13, -27, 5],
+						backgroundColor: [
+							"#77CEFF",
+							"#0079AF",
+							"#123E6B",
+							"#97B0C4",
+							"#A5C8ED",
+						],
+					},
+				],
+			},
 		};
 	},
 	computed: {
@@ -77,13 +122,27 @@ export default {
 				};
 			},
 		},
-		dailyGraphDataset: {
+		chartDataset: {
 			get() {
 				return this.$store.state.mqtt[
 					"openWB/log/daily/" + this.commandData.day
 				];
 			},
 		},
+		chartDataRead: {
+			get() {
+				return this.chartDataset != undefined;
+			},
+		},
+		chartDataHasEntries: {
+			get() {
+				if (this.chartDataset == undefined) {
+					return false;
+				} else {
+					return this.chartDataset.length > 0;
+				}
+			},
+		},
 	},
 	methods: {
 		requestDailyGraph() {
@@ -100,5 +159,15 @@ export default {
 			}
 		},
 	},
+	mounted() {
+		const today = new Date();
+		this.currentDay = this.dailyGraphDate =
+			today.getFullYear() +
+			"-" +
+			String(today.getMonth() + 1).padStart(2, "0") +
+			"-" +
+			String(today.getDate()).padStart(2, "0");
+		this.requestDailyGraph();
+	},
 };
 </script>