Fixed problem that charts are not shown after page refresh.
This commit is contained in:
Ralf Bauer
parent
ccc9d55e38
commit
6d52b7f701
@ -1,15 +1,17 @@
|
||||
<template>
|
||||
<div class="card" :class="{}">
|
||||
<div class="card-header">
|
||||
{{ $t('chart.LastDay') }}
|
||||
<div v-if="dataBase.valid_data">
|
||||
<div class="card-header">
|
||||
{{ $t('chart.LastDay') }}
|
||||
</div>
|
||||
<GoogleChart />
|
||||
</div>
|
||||
<GoogleChart />
|
||||
</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,36 +46,32 @@ 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)
|
||||
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[]) => {
|
||||
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]
|
||||
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 date_formatter = new google.visualization.DateFormat({
|
||||
// pattern: "dd.MM.YY HH:mm"
|
||||
// });
|
||||
// date_formatter.format(data, 0);
|
||||
});
|
||||
// var date_formatter = new google.visualization.DateFormat({
|
||||
// pattern: "dd.MM.YY HH:mm"
|
||||
// });
|
||||
// date_formatter.format(data, 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -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, 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,44 +46,41 @@ 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'
|
||||
},
|
||||
{
|
||||
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 = [[{
|
||||
type: 'date',
|
||||
id: 'Date'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
id: 'Energy'
|
||||
}]]
|
||||
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
|
||||
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);
|
||||
});
|
||||
// var date_formatter = new google.visualization.DateFormat({
|
||||
// pattern: "dd.MM.YY HH:mm"
|
||||
// });
|
||||
// date_formatter.format(data, 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
4
webapp/src/types/DatabaseStatus.ts
Normal file
4
webapp/src/types/DatabaseStatus.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export interface DatabaseStatus {
|
||||
valid_data: boolean;
|
||||
values: [];
|
||||
}
|
||||
@ -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,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() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user