Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
<html>
<head>
<link rel="stylesheet" href="../../css/spectre.min.css">
</head>
<body>
<div id="data"></div>
<button class="btn" id="btnRefresh">Refresh</button>
<button class="btn btn-default" id="btnSave">Save</button>
<script src="../../core/lib/interface.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
var dataElement = document.getElementById("data");
var csvData = "";
function getData() {
// show loading window
Util.showModal("Loading...");
// get the data
dataElement.innerHTML = "";
Puck.eval(`{hr:hours.get(),lastHr:hours.getLast(),day:days.get(),lastDay:days.getLast()}`,data=>{
// remove window
Util.hideModal();
// Draw graphs
dataElement.innerHTML = `<div><canvas id="hrChart"></div>
<div><canvas id="moChart"></div>`;
new Chart(document.getElementById('hrChart'), {
type: 'line',
data: {
labels : data.hr.map((y,x)=>`${x>>1}:${(x&1)?"30":"00"}`),
datasets : [
{ data: data.hr, label: 'Today', borderColor: "red",
backgroundColor: 'rgba(0, 0, 0, 0)', fill: false, },
{ data: data.lastHr, label: 'Yesterday', borderColor: "grey",
backgroundColor: 'rgba(0, 0, 0, 0)', fill: false, },
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Day Temperature'
},
tooltips: {
mode: 'index'
}
}
});
new Chart(document.getElementById('moChart'), {
type: 'line',
data: {
labels : data.day.map((y,x)=>x),
datasets : [
{ data: data.day, label: 'This Month', borderColor: "red",
backgroundColor: 'rgba(0, 0, 0, 0)', fill: false, },
{ data: data.lastDay, label: 'Last Month', borderColor: "grey",
backgroundColor: 'rgba(0, 0, 0, 0)', fill: false, },
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Month Temperature'
},
tooltips: {
mode: 'index'
}
}
});
// CSV
csvData = "Time,Temp Yesterday,Temp Today\n";
data.hr.forEach(function(v,i) {
csvData += `${i>>2}:${15*(i&3)},${data.lastHr[i]},${v}\n`;
});
csvData += "Day,Temp Last Month,Temp This Month\n";
data.day.forEach(function(v,i) {
csvData += `${i},${data.lastDay[i]},${v}\n`;
});
});
}
document.getElementById("btnRefresh").addEventListener("click", function() {
getData();
});
document.getElementById("btnSave").addEventListener("click", function() {
Util.saveCSV("day_temperature", csvData);
});
// Called when app starts
function onInit() {
getData();
}
</script>
</body>
</html>