nettsiden/www/door/graph.html

145 lines
4.5 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>