Fixed problem that charts are not shown after page refresh.

webapp/src/components/BarChart.vue

@@ -1,15 +1,17 @@
 <template>
     <div class="card" :class="{}">
-        <div class="card-header">
+        <div v-if="dataBase.valid_data">
-            {{ $t('chart.LastDay') }}
+            <div class="card-header">
+                {{ $t('chart.LastDay') }}
+            </div>
+            <GoogleChart />
         </div>
-        <GoogleChart />
     </div>
 </template>
 
 <script lang="ts">
-import { authHeader, handleResponse } from '@/utils/authentication';
+import { defineComponent, type PropType, h } from 'vue';
-import { defineComponent, h } from 'vue';
+import type { DatabaseStatus } from "@/types/DatabaseStatus";
 import { GChart } from 'vue-google-charts';
 //import { DatetimeFormat } from 'vue-i18n';
 
@@ -33,6 +35,9 @@ export default defineComponent({
     components: {
         GChart,
     },
+    props: {
+        dataBase: { type: Object as PropType<DatabaseStatus>, required: true },
+    },
     setup() {
         return () =>
             h(GChart, {
@@ -41,36 +46,32 @@ export default defineComponent({
                 type
             });
     },
-    mounted() {
+    beforeMount() {
         this.drawChart()
     },
     methods: {
         drawChart() {
-            fetch("/api/database", { headers: authHeader() })
+            var end = new Date()
-                .then((response) => handleResponse(response, this.$emitter, this.$router))
+            var start = new Date()
-                .then((energy) => {
+            var interval = 1    // number of days to show in the chart
-                    var end = new Date()
+            start.setDate(end.getDate() - interval)
-                    var start = new Date()
+            start.setHours(start.getHours() - 2)
-                    var interval = 1    // number of days to show in the chart
+            const energy = this.dataBase.values
-                    start.setDate(end.getDate() - interval)
+            var old_energy = energy[0][4]
-                    start.setHours(start.getHours() - 2)
+            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)) {
+                    var a = [d, (x[4] - old_energy) * 1000]
+                    data.push(a)
+                }
+                old_energy = x[4]
+            })
 
-                    var old_energy = energy[0][4]
+            // var date_formatter = new google.visualization.DateFormat({
-                    data = [['Time', 'Energy']];
+            //     pattern: "dd.MM.YY HH:mm"
-                    energy.forEach((x: any[]) => {
+            // });
-                        var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
+            // date_formatter.format(data, 0);
-                        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);
-                });
         }
     }
 });

webapp/src/components/CalendarChart.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="card" :class="{}">
-        <div class="card-header">
+        <div v-if="dataBase.valid_data">
+            <div class="card-header">
+            </div>
+            <GoogleChart />
         </div>
-        <GoogleChart />
     </div>
 </template>
 
 <script lang="ts">
-import { authHeader, handleResponse } from '@/utils/authentication';
+import { defineComponent, type PropType, h } from 'vue';
-import { defineComponent, h } from 'vue';
+import type { DatabaseStatus } from "@/types/DatabaseStatus";
 import { GChart } from 'vue-google-charts';
 //import { DatetimeFormat } from 'vue-i18n';
 
@@ -30,6 +32,9 @@ export default defineComponent({
     components: {
         GChart,
     },
+    props: {
+        dataBase: { type: Object as PropType<DatabaseStatus>, required: true },
+    },
     setup() {
         return () =>
             h(GChart, {
@@ -41,44 +46,41 @@ export default defineComponent({
                 }
             });
     },
-    mounted() {
+    beforeMount() {
         this.drawChart()
     },
     methods: {
         drawChart() {
-            fetch("/api/database", { headers: authHeader() })
+            data = [[{
-                .then((response) => handleResponse(response, this.$emitter, this.$router))
+                type: 'date',
-                .then((energy) => {
+                id: 'Date'
-                    data = [[{
+            },
-                        type: 'date',
+            {
-                        id: 'Date'
+                type: 'number',
-                    },
+                id: 'Energy'
-                    {
+            }]]
-                        type: 'number',
+            var d: Date
-                        id: 'Energy'
+            var a: any
-                    }]]
+            const energy = this.dataBase.values
-                    var d : Date
+            var old_energy = energy[0][4]
-                    var a : any
+            var old_day = energy[0][2]
-                    var old_energy = energy[0][4]
+            var last_energy: number
-                    var old_day = energy[0][2]
+            energy.forEach((x: any[]) => {
-                    var last_energy : number
+                if (x[2] != old_day) {
-                    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)
+                    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({
+            // var date_formatter = new google.visualization.DateFormat({
-                    //     pattern: "dd.MM.YY HH:mm"
+            //     pattern: "dd.MM.YY HH:mm"
-                    // });
+            // });
-                    // date_formatter.format(data, 0);
+            // date_formatter.format(data, 0);
-                });
         }
     }
 });

webapp/src/types/DatabaseStatus.ts

@@ -0,0 +1,4 @@
+export interface DatabaseStatus {
+    valid_data: boolean;
+    values: [];
+}

webapp/src/views/HomeView.vue

@@ -16,8 +16,8 @@
                     </button>
                 </div>
             </div>
-            <BarChart />
+            <BarChart v-bind:dataBase="dataBase" dataLoading="dataLoading" />
-            <CalendarChart />
+            <CalendarChart v-bind:dataBase="dataBase" />
 
             <div class="tab-content" id="v-pills-tabContent" :class="{
                     'col-sm-9 col-md-10': inverterData.length > 1,
@@ -338,6 +338,7 @@ import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
 import BarChart from "@/components/BarChart.vue";
 import CalendarChart from "@/components/CalendarChart.vue";
 import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
+import type { DatabaseStatus } from '@/types/DatabaseStatus';
 import type { DevInfoStatus } from '@/types/DevInfoStatus';
 import type { EventlogItems } from '@/types/EventlogStatus';
 import type { LimitConfig } from '@/types/LimitConfig';
@@ -396,6 +397,7 @@ export default defineComponent({
             eventLogLoading: true,
             devInfoView: {} as bootstrap.Modal,
             devInfoList: {} as DevInfoStatus,
+            dataBase: {} as DatabaseStatus,
             devInfoLoading: true,
 
             limitSettingView: {} as bootstrap.Modal,
@@ -486,7 +488,13 @@ export default defineComponent({
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.liveData = data;
-                    this.dataLoading = false;
+                    fetch("/api/database", { headers: authHeader() })
+                        .then((response) => handleResponse(response, this.$emitter, this.$router))
+                        .then((data) => {
+                            this.dataBase.values = data;
+                            this.dataBase.valid_data = true;
+                            this.dataLoading = false;
+                        });
                 });
         },
         initSocket() {