commit 9ff8e9e073cf67f430ed534f5017d27ede1563d9
parent 28751396962450c9f77b69883c7f0e4ccc32a7bc
Author: Kninteman <[email protected]>
Date: Fri, 16 Jun 2023 17:13:31 +0200
Title and DateTime update
Diffstat:
| M | js/panda.js | 46 | ++++++++++++++++++++++++++++++---------------- |
1 file changed, 30 insertions(+), 16 deletions(-)
diff --git a/js/panda.js b/js/panda.js
@@ -92,6 +92,11 @@ var myChart = new Chart(ctx, {
}
},
x: {
+ title: {
+ display: true,
+ text: 'Time (H:M:S)',
+ color: 'white'
+ },
grid: {
color: 'gray'
},
@@ -101,6 +106,15 @@ var myChart = new Chart(ctx, {
}
},
plugins: {
+ title: {
+ display: true,
+ position: 'top',
+ color: 'white',
+ font: {
+ size: 30,
+ weight: 'bold'
+ }
+ },
legend: {
labels: {
color: 'white'
@@ -117,28 +131,28 @@ function fetchDataAndUpdateChart() {
fetch(`http://localhost:8080/api/${facilityToken}`)
.then(response => response.json())
.then(data => {
- let array = [];
- data.forEach(point => {
- array.push(point['humidity']);
- });
-
let splitDataResult = splitData(data);
let chengduData = splitDataResult.chengduData.splice(-5);
let kangdingData = splitDataResult.kangdingData.splice(-5);
let chengduHumidity = getHumidity(chengduData);
let kangdingHumidity = getHumidity(kangdingData);
- let firstDate = getFirstDate(chengduData.slice(0), kangdingData.slice(0));
- let latestDate = getLatestDate(chengduData.slice(-1), kangdingData.slice(-1));
- let fourthDate = chengduData.slice(-2)
- let thirdDate = chengduData.slice(-3)
- let secondDate = chengduData.slice(-4)
-
- myChart.data.labels[0] = firstDate[0]['datetime'];
- myChart.data.labels[4] = latestDate[0]['datetime'];
- myChart.data.labels[3] = fourthDate[0]['datetime'];
- myChart.data.labels[2] = thirdDate[0]['datetime'];
- myChart.data.labels[1] = secondDate[0]['datetime'];
+ let firstDateTime = getFirstDate(chengduData.slice(0), kangdingData.slice(0));
+ let secondDateTime = chengduData.slice(-4)
+ let fourthDateTime = chengduData.slice(-2)
+ let thirdDateTime = chengduData.slice(-3)
+ let latestDateTime = getLatestDate(chengduData.slice(-1), kangdingData.slice(-1));
+
+ let parts = latestDateTime[0]['datetime'].split(" ")[0].split('-');
+ let latestDate = parts[2]+'-'+parts[1]+'-'+parts[0];
+
+ myChart.options.plugins.title.text = `Date: ${latestDate}`;
+
+ myChart.data.labels[0] = firstDateTime[0]['datetime'].split(" ")[1];
+ myChart.data.labels[1] = secondDateTime[0]['datetime'].split(" ")[1];
+ myChart.data.labels[2] = thirdDateTime[0]['datetime'].split(" ")[1];
+ myChart.data.labels[3] = fourthDateTime[0]['datetime'].split(" ")[1];
+ myChart.data.labels[4] = latestDateTime[0]['datetime'].split(" ")[1];
myChart.data.datasets[0].pointBackgroundColor = chengduHumidity.map(value => value > 80 ? 'rgba(207, 72, 72, 1)' : 'rgba(176, 204, 207, 1)');
myChart.data.datasets[0].pointBorderColor = chengduHumidity.map(value => value > 80 ? 'rgba(207, 72, 72, 1)' : 'rgba(176, 204, 207, 1)');
