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

added new card to LiveView page with chart for last 25 hours

Browse Source
This commit is contained in:
Ralf Bauer 2023-05-21 15:18:22 +02:00
parent abc4b8300b
commit a785074fa8
6 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<title>OpenDTU</title> <title>OpenDTU</title>
</head> </head>
<body> <body>

84
webapp/src/components/DatabaseChart.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div class="card" :class="{}">
<div class="card-header">
{{ $t('databasechart.LastDay') }}
</div>
<div class="card-body">
<div id="chart_div"></div>
</div>
</div>
</template>
<script lang="ts">
import { authHeader, authUrl, handleResponse, isLoggedIn } from '@/utils/authentication';
import { defineComponent, type PropType } from 'vue';
export default defineComponent({
props: {
},
created() {
this.fetchData()
},
methods: {
async fetchData() {
fetch("/api/database", { headers: authHeader() })
.then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => {
var energy = data;
this.drawChart(energy)
});
},
drawChart(energy) {
var end = new Date()
var start = new Date()
var interval = 1
start.setDate(end.getDate() - interval)
start.setHours(start.getHours() - 1)
console.log(start.toLocaleString())
console.log(end.toLocaleString())
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Energy');
var old_energy = energy[0][4]
energy.forEach((x) => {
var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
if ((d >= start) && (d <= end)) {
data.addRow([d, (x[4] - old_energy) * 1000])
}
old_energy = x[4]
})
var date_formatter = new google.visualization.DateFormat({
pattern: "dd.MM.YY HH:mm"
});
date_formatter.format(data, 0);
var options = {
height: 600,
legend: {
position: 'none'
},
hAxis: {
format: 'dd.MM.YY HH:mm',
slantedText: true
},
vAxis: {
format: '# Wh'
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
}
});
</script>

3
webapp/src/locales/de.json
View File

@ -289,6 +289,9 @@
"Value": "Wert", "Value": "Wert",
"Unit": "Einheit" "Unit": "Einheit"
}, },
"databasechart": {
"LastDay": "Letzte 25 Stunden",
},
"invertertotalinfo": { "invertertotalinfo": {
"TotalYieldTotal": "Gesamtertrag Insgesamt", "TotalYieldTotal": "Gesamtertrag Insgesamt",
"TotalYieldDay": "Gesamtertrag Heute", "TotalYieldDay": "Gesamtertrag Heute",

3
webapp/src/locales/en.json
View File

@ -289,6 +289,9 @@
"Value": "Value", "Value": "Value",
"Unit": "Unit" "Unit": "Unit"
}, },
"databasechart": {
"LastDay": "last 25 hours",
},
"invertertotalinfo": { "invertertotalinfo": {
"TotalYieldTotal": "Total Yield Total", "TotalYieldTotal": "Total Yield Total",
"TotalYieldDay": "Total Yield Day", "TotalYieldDay": "Total Yield Day",

3
webapp/src/locales/fr.json
View File

@ -289,6 +289,9 @@
"Value": "Valeur", "Value": "Valeur",
"Unit": "Unité" "Unit": "Unité"
}, },
"databasechart": {
"LastDay": "25 dernières heures",
},
"invertertotalinfo": { "invertertotalinfo": {
"TotalYieldTotal": "Rendement total", "TotalYieldTotal": "Rendement total",
"TotalYieldDay": "Rendement du jour", "TotalYieldDay": "Rendement du jour",

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

@ -109,6 +109,7 @@
</template> </template>
</template> </template>
</div> </div>
<DatabaseChart/>
</div> </div>
</div> </div>
</div> </div>
@ -323,6 +324,7 @@ import DevInfo from '@/components/DevInfo.vue';
import EventLog from '@/components/EventLog.vue'; import EventLog from '@/components/EventLog.vue';
import HintView from '@/components/HintView.vue'; import HintView from '@/components/HintView.vue';
import InverterChannelInfo from "@/components/InverterChannelInfo.vue"; import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
import DatabaseChart from "@/components/DatabaseChart.vue";
import InverterTotalInfo from '@/components/InverterTotalInfo.vue'; import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
import type { DevInfoStatus } from '@/types/DevInfoStatus'; import type { DevInfoStatus } from '@/types/DevInfoStatus';
import type { EventlogItems } from '@/types/EventlogStatus'; import type { EventlogItems } from '@/types/EventlogStatus';
@ -353,6 +355,7 @@ export default defineComponent({
EventLog, EventLog,
HintView, HintView,
InverterChannelInfo, InverterChannelInfo,
DatabaseChart,
InverterTotalInfo, InverterTotalInfo,
BIconArrowCounterclockwise, BIconArrowCounterclockwise,
BIconCheckCircleFill, BIconCheckCircleFill,