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 v-if="dataBase.valid_data">
             <div class="card-header">
                 {{ $t('chart.LastDay') }}
             </div>
             <GoogleChart />
         </div>
+    </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,20 +46,17 @@ export default defineComponent({
                 type
             });
     },
-    mounted() {
+    beforeMount() {
         this.drawChart()
     },
     methods: {
         drawChart() {
-            fetch("/api/database", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then((energy) => {
             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)
-
+            const energy = this.dataBase.values
             var old_energy = energy[0][4]
             data = [['Time', 'Energy']];
             energy.forEach((x: any[]) => {
@@ -70,7 +72,6 @@ export default defineComponent({
             //     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 v-if="dataBase.valid_data">
             <div class="card-header">
             </div>
             <GoogleChart />
         </div>
+    </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,14 +46,11 @@ export default defineComponent({
                 }
             });
     },
-    mounted() {
+    beforeMount() {
         this.drawChart()
     },
     methods: {
         drawChart() {
-            fetch("/api/database", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then((energy) => {
             data = [[{
                 type: 'date',
                 id: 'Date'
@@ -57,11 +59,12 @@ export default defineComponent({
                 type: 'number',
                 id: 'Energy'
             }]]
-                    var d : Date
+            var d: Date
-                    var a : any
+            var a: any
+            const energy = this.dataBase.values
             var old_energy = energy[0][4]
             var old_day = energy[0][2]
-                    var last_energy : number
+            var last_energy: number
             energy.forEach((x: any[]) => {
                 if (x[2] != old_day) {
                     data.push(a)
@@ -78,7 +81,6 @@ export default defineComponent({
             //     pattern: "dd.MM.YY HH:mm"
             // });
             // 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,8 +488,14 @@ export default defineComponent({
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.liveData = data;
+                    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() {
             console.log("Starting connection to WebSocket Server");