patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed problem that charts are not shown after page refresh.

Browse Source
This commit is contained in:
Ralf Bauer 2023-06-03 12:35:24 +02:00
parent ccc9d55e38
commit 6d52b7f701
4 changed files with 84 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
webapp/src/components/BarChart.vue
View File

@ -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, h } from 'vue';
import { defineComponent, type PropType, 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);
});
}
}
});

22
webapp/src/components/CalendarChart.vue
View File

@ -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, h } from 'vue';
import { defineComponent, type PropType, 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 a : any
var d: Date
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);
});
}
}
});

4
webapp/src/types/DatabaseStatus.ts Normal file
View File

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

12
webapp/src/views/HomeView.vue
View File

@ -16,8 +16,8 @@
</button>
</div>
</div>
<BarChart />
<CalendarChart />
<BarChart v-bind:dataBase="dataBase" dataLoading="dataLoading" />
<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");