added calendar chart

webapp/src/components/BarChart.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="card" :class="{}">
         <div class="card-header">
-            {{ $t('databasechart.LastDay') }}
+            {{ $t('chart.LastDay') }}
         </div>
         <GoogleChart />
     </div>
@@ -13,7 +13,7 @@ import { defineComponent, h } from 'vue';
 import { GChart } from 'vue-google-charts';
 //import { DatetimeFormat } from 'vue-i18n';
 
-var data: any = [['Time', 'Energy']];
+var data: any;
 export const type = 'ColumnChart';
 export const options = {
     height: 600,
@@ -56,6 +56,7 @@ export default defineComponent({
                     start.setHours(start.getHours() - 2)
 
                     var old_energy = energy[0][4]
+                    data = [['Time', 'Energy']];
                     energy.forEach((x: any[]) => {
                         var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
                         if ((d >= start) && (d <= end)) {

webapp/src/components/CalendarChart.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="card" :class="{}">
+        <div class="card-header">
+        </div>
+        <GoogleChart />
+    </div>
+</template>
+
+<script lang="ts">
+import { authHeader, handleResponse } from '@/utils/authentication';
+import { defineComponent, h } from 'vue';
+import { GChart } from 'vue-google-charts';
+//import { DatetimeFormat } from 'vue-i18n';
+
+var data: any;
+export const type = 'Calendar';
+export const options = {
+    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,
+                settings: {
+                    packages: ['calendar']
+                }
+            });
+    },
+    mounted() {
+        this.drawChart()
+    },
+    methods: {
+        drawChart() {
+            fetch("/api/database", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
+                .then((energy) => {
+                    data = [[{
+                        type: 'date',
+                        id: 'Date'
+                    },
+                    {
+                        type: 'number',
+                        id: 'Energy'
+                    }]]
+                    var d : Date
+                    var a : any
+                    var old_energy = energy[0][4]
+                    var old_day = energy[0][2]
+                    var last_energy : number
+                    energy.forEach((x: any[]) => {
+                        if (x[2] != old_day) {
+                            data.push(a)
+                            old_day = x[2]
+                            old_energy = last_energy
+                        }
+                        last_energy = x[4]
+                        d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
+                        a = [d, ((last_energy - old_energy) * 1000).toFixed(0)]
+                    })
+                    data.push(a)
+
+                    // var date_formatter = new google.visualization.DateFormat({
+                    //     pattern: "dd.MM.YY HH:mm"
+                    // });
+                    // date_formatter.format(data, 0);
+                });
+        }
+    }
+});
+</script>

webapp/src/locales/de.json

@@ -289,7 +289,7 @@
         "Value": "Wert",
         "Unit": "Einheit"
     },
-    "databasechart": {
+    "chart": {
         "LastDay": "Letzte 25 Stunden",
     },
     "invertertotalinfo": {

webapp/src/locales/en.json

@@ -289,7 +289,7 @@
         "Value": "Value",
         "Unit": "Unit"
     },
-    "databasechart": {
+    "chart": {
         "LastDay": "last 25 hours",
     },
     "invertertotalinfo": {

webapp/src/locales/fr.json

@@ -289,7 +289,7 @@
         "Value": "Valeur",
         "Unit": "Unité"
     },
-    "databasechart": {
+    "chart": {
         "LastDay": "25 dernières heures",
     },
     "invertertotalinfo": {