From 268d492b4f2b2a10753063ee12e1988eaf18793b Mon Sep 17 00:00:00 2001
From: Ralf Bauer <Ralf@Bauer-NSU.de>
Date: Mon, 22 May 2023 21:53:18 +0200
Subject: [PATCH] use vue-google-charts wrapper

---
 webapp/index.html                       |  3 -
 webapp/package.json                     |  1 +
 webapp/src/components/DatabaseChart.vue | 90 +++++++++++++------------
 3 files changed, 47 insertions(+), 47 deletions(-)
diff --git a/webapp/index.html b/webapp/index.html
index 4c29f0c2..36236f18 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -4,9 +4,6 @@
     <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">
-      google.charts.load('current', { packages: ['corechart', 'bar'] });
-    </script>
     <title>OpenDTU</title>
   </head>
   <body>
diff --git a/webapp/package.json b/webapp/package.json
index fd52900c..e84f264e 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -17,6 +17,7 @@
     "mitt": "^3.0.0",
     "spark-md5": "^3.0.2",
     "vue": "^3.2.47",
+    "vue-google-charts": "^1.1.0",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6"
   },
diff --git a/webapp/src/components/DatabaseChart.vue b/webapp/src/components/DatabaseChart.vue
index 89a20a55..fef932d1 100644
--- a/webapp/src/components/DatabaseChart.vue
+++ b/webapp/src/components/DatabaseChart.vue
@@ -3,70 +3,72 @@
         <div class="card-header">
             {{ $t('databasechart.LastDay') }}
         </div>
-
-        <div class="card-body">
-            <div id="chart_div"></div>
-        </div>
+        <GoogleChart />
     </div>
 </template>
 
 <script lang="ts">
 import { authHeader, handleResponse } from '@/utils/authentication';
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';
+import { GChart } from 'vue-google-charts';
+//import { DatetimeFormat } from 'vue-i18n';
 
+var data: any = [['Time', 'Energy']];
+export const type = 'ColumnChart';
+export const options = {
+    height: 600,
+    chartArea: { top: 25, width: '85%', height: '80%' },
+    legend: {
+        position: 'none'
+    },
+    hAxis: {
+        format: 'dd.MM.YY HH:mm',
+        slantedText: true
+    },
+    vAxis: {
+        format: '# Wh'
+    }
+};
 export default defineComponent({
+    components: {
+        GChart,
+    },
+    setup() {
+        return () =>
+            h(GChart, {
+                data,
+                options,
+                type
+            });
+    },
     mounted() {
         this.drawChart()
     },
     methods: {
         drawChart() {
-            google.charts.load('current', { packages: ['corechart', 'bar'] });
             fetch("/api/database", { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((energy) => {
-                    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: any[]) => {
-                            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,
-                            chartArea: { top: 25, width: '85%', height: '80%' },
-                            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);
-                    }
-
                     var end = new Date()
                     var start = new Date()
                     var interval = 1    // number of days to show in the chart
                     start.setDate(end.getDate() - interval)
                     start.setHours(start.getHours() - 2)
-                    google.charts.setOnLoadCallback(drawBasic());
+
+                    var old_energy = energy[0][4]
+                    energy.forEach((x: any[]) => {
+                        var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
+                        if ((d >= start) && (d <= end)) {
+                            var a = [d, (x[4] - old_energy) * 1000]
+                            data.push(a)
+                        }
+                        old_energy = x[4]
+                    })
+
+                    // var date_formatter = new google.visualization.DateFormat({
+                    //     pattern: "dd.MM.YY HH:mm"
+                    // });
+                    // date_formatter.format(data, 0);
                 });
         }
     }
