From a785074fa8ac6486d82f1c6574a2632d3f38fed5 Mon Sep 17 00:00:00 2001
From: Ralf Bauer <Ralf@Bauer-NSU.de>
Date: Sun, 21 May 2023 15:18:22 +0200
Subject: [PATCH] added new card to LiveView page with chart for last 25 hours

---
 webapp/index.html                       |  1 +
 webapp/src/components/DatabaseChart.vue | 84 +++++++++++++++++++++++++
 webapp/src/locales/de.json              |  3 +
 webapp/src/locales/en.json              |  3 +
 webapp/src/locales/fr.json              |  3 +
 webapp/src/views/HomeView.vue           |  3 +
 6 files changed, 97 insertions(+)
 create mode 100644 webapp/src/components/DatabaseChart.vue
diff --git a/webapp/index.html b/webapp/index.html
index 36236f18..9c0466a8 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <title>OpenDTU</title>
   </head>
   <body>
diff --git a/webapp/src/components/DatabaseChart.vue b/webapp/src/components/DatabaseChart.vue
new file mode 100644
index 00000000..67ade66c
--- /dev/null
+++ b/webapp/src/components/DatabaseChart.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="card" :class="{}">
+        <div class="card-header">
+            {{ $t('databasechart.LastDay') }}
+        </div>
+
+        <div class="card-body">
+            <div id="chart_div"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { authHeader, authUrl, handleResponse, isLoggedIn } from '@/utils/authentication';
+import { defineComponent, type PropType } from 'vue';
+
+export default defineComponent({
+    props: {
+    },
+    created() {
+        this.fetchData()
+    },
+    methods: {
+        async fetchData() {
+            fetch("/api/database", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
+                .then((data) => {
+                    var energy = data;
+                    this.drawChart(energy)
+                });
+        },
+        drawChart(energy) {
+            var end = new Date()
+            var start = new Date()
+            var interval = 1
+            start.setDate(end.getDate() - interval)
+            start.setHours(start.getHours() - 1)
+            console.log(start.toLocaleString())
+            console.log(end.toLocaleString())
+
+            google.charts.load('current', {
+                packages: ['corechart', 'bar']
+            });
+            google.charts.setOnLoadCallback(drawBasic);
+
+            function drawBasic() {
+                var data = new google.visualization.DataTable();
+                data.addColumn('datetime', 'Time');
+                data.addColumn('number', 'Energy');
+                var old_energy = energy[0][4]
+                energy.forEach((x) => {
+                    var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
+                    if ((d >= start) && (d <= end)) {
+                        data.addRow([d, (x[4] - old_energy) * 1000])
+                    }
+                    old_energy = x[4]
+                })
+
+                var date_formatter = new google.visualization.DateFormat({
+                    pattern: "dd.MM.YY HH:mm"
+                });
+                date_formatter.format(data, 0);
+
+                var options = {
+                    height: 600,
+                    legend: {
+                        position: 'none'
+                    },
+                    hAxis: {
+                        format: 'dd.MM.YY HH:mm',
+                        slantedText: true
+                    },
+                    vAxis: {
+                        format: '# Wh'
+                    }
+                }
+
+                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
+                chart.draw(data, options);
+            }
+        }
+    }
+});
+</script>
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index 871b3240..a06a0674 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -289,6 +289,9 @@
         "Value": "Wert",
         "Unit": "Einheit"
     },
+    "databasechart": {
+        "LastDay": "Letzte 25 Stunden",
+    },
     "invertertotalinfo": {
         "TotalYieldTotal": "Gesamtertrag Insgesamt",
         "TotalYieldDay": "Gesamtertrag Heute",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 130d948d..20c40041 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -289,6 +289,9 @@
         "Value": "Value",
         "Unit": "Unit"
     },
+    "databasechart": {
+        "LastDay": "last 25 hours",
+    },
     "invertertotalinfo": {
         "TotalYieldTotal": "Total Yield Total",
         "TotalYieldDay": "Total Yield Day",
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index eca44fae..c056ff85 100644
--- a/webapp/src/locales/fr.json
+++ b/webapp/src/locales/fr.json
@@ -289,6 +289,9 @@
         "Value": "Valeur",
         "Unit": "Unité"
     },
+    "databasechart": {
+        "LastDay": "25 dernières heures",
+    },
     "invertertotalinfo": {
         "TotalYieldTotal": "Rendement total",
         "TotalYieldDay": "Rendement du jour",
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 08cf1cb7..19ac0958 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -109,6 +109,7 @@
                                     </template>
                                 </template>
                             </div>
+                            <DatabaseChart/>
                         </div>
                     </div>
                 </div>
@@ -323,6 +324,7 @@ import DevInfo from '@/components/DevInfo.vue';
 import EventLog from '@/components/EventLog.vue';
 import HintView from '@/components/HintView.vue';
 import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
+import DatabaseChart from "@/components/DatabaseChart.vue";
 import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
 import type { DevInfoStatus } from '@/types/DevInfoStatus';
 import type { EventlogItems } from '@/types/EventlogStatus';
@@ -353,6 +355,7 @@ export default defineComponent({
         EventLog,
         HintView,
         InverterChannelInfo,
+        DatabaseChart,
         InverterTotalInfo,
         BIconArrowCounterclockwise,
         BIconCheckCircleFill,
