145 lines
4.5 KiB
HTML
145 lines
4.5 KiB
HTML
<!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> |