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

use vue-google-charts wrapper

Browse Source
This commit is contained in:
Ralf Bauer 2023-05-22 21:53:18 +02:00
parent d8646b8c19
commit 268d492b4f
3 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/index.html
View File

@ -4,9 +4,6 @@
<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">
google.charts.load('current', { packages: ['corechart', 'bar'] });
</script>
<title>OpenDTU</title> <title>OpenDTU</title>
</head> </head>
<body> <body>

1
webapp/package.json
View File

@ -17,6 +17,7 @@
"mitt": "^3.0.0", "mitt": "^3.0.0",
"spark-md5": "^3.0.2", "spark-md5": "^3.0.2",
"vue": "^3.2.47", "vue": "^3.2.47",
"vue-google-charts": "^1.1.0",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },

90
webapp/src/components/DatabaseChart.vue
View File

@ -3,70 +3,72 @@
<div class="card-header"> <div class="card-header">
{{ $t('databasechart.LastDay') }} {{ $t('databasechart.LastDay') }}
</div> </div>
<GoogleChart />
<div class="card-body">
<div id="chart_div"></div>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { authHeader, handleResponse } from '@/utils/authentication'; import { authHeader, handleResponse } from '@/utils/authentication';
import { defineComponent } from 'vue'; import { defineComponent, h } from 'vue';
import { GChart } from 'vue-google-charts';
//import { DatetimeFormat } from 'vue-i18n';
var data: any = [['Time', 'Energy']];
export const type = 'ColumnChart';
export const options = {
height: 600,
chartArea: { top: 25, width: '85%', height: '80%' },
legend: {
position: 'none'
},
hAxis: {
format: 'dd.MM.YY HH:mm',
slantedText: true
},
vAxis: {
format: '# Wh'
}
};
export default defineComponent({ export default defineComponent({
components: {
GChart,
},
setup() {
return () =>
h(GChart, {
data,
options,
type
});
},
mounted() { mounted() {
this.drawChart() this.drawChart()
}, },
methods: { methods: {
drawChart() { drawChart() {
google.charts.load('current', { packages: ['corechart', 'bar'] });
fetch("/api/database", { headers: authHeader() }) fetch("/api/database", { headers: authHeader() })
.then((response) => handleResponse(response, this.$emitter, this.$router)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((energy) => { .then((energy) => {
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: any[]) => {
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,
chartArea: { top: 25, width: '85%', height: '80%' },
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);
}
var end = new Date() var end = new Date()
var start = new Date() var start = new Date()
var interval = 1 // number of days to show in the chart var interval = 1 // number of days to show in the chart
start.setDate(end.getDate() - interval) start.setDate(end.getDate() - interval)
start.setHours(start.getHours() - 2) start.setHours(start.getHours() - 2)
google.charts.setOnLoadCallback(drawBasic());
var old_energy = energy[0][4]
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);
}); });
} }
} }