pvv-nixos-config/www/door/graph.html

101 lines
3.2 KiB
HTML
Raw Normal View History

2021-10-11 16:23:18 +02:00
<!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>
</head>
<body>
<!-- Felixalb 2021 -->
<h2>En kort analyse av nerders døgnrytme i deres naturlige habitat, PVV</h2>
<h3 id="infoText"></h3>
<canvas id="doorGraph1"></canvas>
<script src="./p5.min.js"></script>
<script>
const infoEl = document.getElementById("infoText");
const graphEl1 = document.getElementById("doorGraph1");
const XHR = new XMLHttpRequest();
const url="/door/?period=day&edgeonly=true";
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);
if (response.status != "OK") {
infoEl.innerHTML = "Error when connecting to API.";
return
} else {
let datapoints = response.entries;
console.log("Success, " + datapoints.length + " datapoints received.");
// displayLineDiagram(graphEl1, datapoints);
displayBar(datapoints);
}
}
}
// function getDateString(time) {
// let dateObj = new Date(time*1e3);
// return dateObj.toLocaleString();
// }
// function displayLineDiagram(canv, data) {
// let ctx = canv.getContext("2d");
// let chart = new Chart(ctx, {
// type: 'line',
// data: {
// labels: data.map(entry=> getDateString(entry.time)),
// // labels: data.map(entry=> 1e3 * entry.time),
// datasets: [{
// data: data.map(entry => entry.open)
// }],
// }
// });
// }
function setup() {
createCanvas(800, 200);
noLoop();
background(50);
}
function draw() {}
function displayBar(data) {
const fullLength = 60*60*24;
// const dateObj = new Date();
const curTime = Math.floor(Date.now() / 1000)
let borderPositions = [0];
//Convert timestamps to a position on the graph
for(let i = data.length-1; i > 0; i--) {
const ts = data[i]["time"];
const pixelPos = width - (((curTime - ts) / fullLength) * width);
borderPositions.push(pixelPos);
}
console.log(borderPositions);
let sectionColors = ["gray"];
//Define list of colors, gray=?, green=open, red=closed
for(let i = 0; i < data.length; i++) {
sectionColors.push((data[i]["open"]) ? "green" : "red");
}
console.log(sectionColors);
for(let i = 0; i < borderPositions.length-1; i++) {
fill(sectionColors[i]);
rect(borderPositions[i], 0, borderPositions[i+1], height);
console.log(`${sectionColors[i]} from ${borderPositions[i]}px to ${borderPositions[i+1]}px`)
}
}
</script>
<!-- <script src="./chart.min.js"></script> -->
</body>
</html>