<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inngangsverkstedet</title>
<style>
body {
text-align: center;
width: 80vw;
margin: auto auto;
}
#graphDiv {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<h2>En kort analyse av nerders døgnrytme i deres naturlige habitat, PVV</h2>
<div id="graphDiv">
<h4>Siste 24 timer</h4>
<canvas id="doorGraphDay"></canvas>
<h4>Siste 7 dager</h4>
<canvas id="doorGraphWeek"></canvas>
</div>
<script src="chart.min.js"></script>
<script src="moment.js"></script>
<script src="chartjs-adapter-moment.js"></script>
<script>
const graphElDay = document.getElementById("doorGraphDay");
const graphElWeek = document.getElementById("doorGraphWeek");
const XHR = new XMLHttpRequest();
const url="/door/?period=week";
XHR.open("GET", url);
XHR.send();
XHR.onreadystatechange = ()=>{
if (XHR.readyState == 4 && XHR.status == 200) {
console.log("Response 200 from API")
response = JSON.parse(XHR.responseText); //Should be try-catched?
if (response.status != "OK") {
console.log("Error when connecting to API.");
return
} else {
const allDatapoints = response.entries;
console.log("Success, " + allDatapoints.length + " datapoints received.");
const dayDatapoints = getLastDay(allDatapoints);
displayLineDiagram(graphElDay, dayDatapoints, "hour");
displayLineDiagram(graphElWeek, allDatapoints, "day");
}
}
}
function getLastDay(data) {
let date = new Date();
let curTime = date.getTime();
let targetTime = parseInt(curTime/1e3) - (60*60*24);
let i;
for (i = 0; i < data.length; i++) {
if (data[i].time < targetTime) {
break;
}
}
return data.slice(0, i);
}
function displayLineDiagram(canv, data, timeunit) {
let ctx = canv.getContext("2d");
let dotColor = data.map(entry => entry.open ? "rgb(10, 150, 10)" : "rgb(200, 100, 100)");
let chart = new Chart(ctx, {
type: 'line',
data: {
labels: data.map(entry=> 1e3 * entry.time),
datasets: [{
data: data.map(entry => entry.open),
stepped: "before",
borderColor: dotColor,
backgroundColor: dotColor
}],
},
options: {
scales: {
xAxis: {
type: "time",
time: {
unit: timeunit
},
},
yAxis: {
suggestedMin: -0.1,
suggestedMax: 1.1,
grid: {display: false},
ticks: {
callback: function(label, index, labels) {
if (label == 0) {
return "Stengt";
} else if (label == 1) {
return "Åpent";
} else {
return "";
}
}
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
const value = tooltipItem.formattedValue;
if (value == 0) {
return "Stengt";
} else if (value == 1) {
return "Åpent";
} else {
return "";
}
}
}
}
}
}
});
}
</script>
</body>
</html>