Projects/nettsiden
7
3
Fork 0
Code Issues 26 Pull Requests Activity

www/door: clean up graph options

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit
2026-01-13 18:58:25 +09:00
parent 5a25087d32
commit cefd8640b5
1 changed files with 126 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/door/graph.html
+126 -111
View File
@@ -1,30 +1,29 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inngangsverkstedet</title> <title>Inngangsverkstedet</title>
<style> <style>
body { body {
text-align: center; text-align: center;
width: 80vw; width: 80vw;
margin: auto auto; margin: auto auto;
} }
#graphDiv { #graphDiv {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
</style> </style>
</head> </head>
<body> <body>
<h2>En kort analyse av nerders døgnrytme i deres naturlige habitat, PVV</h2> <h2>En kort analyse av nerders døgnrytme i deres naturlige habitat, PVV</h2>
<div id="graphDiv"> <div id="graphDiv">
<h4>Siste 24 timer</h4> <h4>Siste 24 timer</h4>
<canvas id="doorGraphDay"></canvas> <canvas id="doorGraphDay"></canvas>
<h4>Siste 7 dager</h4> <h4>Siste 7 dager</h4>
<canvas id="doorGraphWeek"></canvas> <canvas id="doorGraphWeek"></canvas>
</div> </div>
<script <script
@@ -44,115 +43,131 @@
></script> ></script>
<script> <script>
const graphElDay = document.getElementById("doorGraphDay");
const graphElWeek = document.getElementById("doorGraphWeek");
const graphElDay = document.getElementById("doorGraphDay"); const XHR = new XMLHttpRequest();
const graphElWeek = document.getElementById("doorGraphWeek"); const url = "/door/?period=week";
XHR.open("GET", url);
XHR.send();
const XHR = new XMLHttpRequest(); XHR.onreadystatechange = () => {
const url="/door/?period=week";
XHR.open("GET", url);
XHR.send();
XHR.onreadystatechange = ()=>{
if (XHR.readyState == 4 && XHR.status == 200) { if (XHR.readyState == 4 && XHR.status == 200) {
console.log("Response 200 from API") console.log("Response 200 from API");
response = JSON.parse(XHR.responseText); //Should be try-catched? response = JSON.parse(XHR.responseText); //Should be try-catched?
if (response.status != "OK") { if (response.status != "OK") {
console.log("Error when connecting to API."); console.log("Error when connecting to API.");
return return;
} else { } else {
const allDatapoints = response.entries; const allDatapoints = response.entries;
console.log("Success, " + allDatapoints.length + " datapoints received."); console.log(
"Success, " + allDatapoints.length + " datapoints received.",
);
const dayDatapoints = getLastDay(allDatapoints); const dayDatapoints = getLastDay(allDatapoints);
displayLineDiagram(graphElDay, dayDatapoints, "hour"); displayLineDiagram(graphElDay, dayDatapoints, "hour");
displayLineDiagram(graphElWeek, allDatapoints, "day"); displayLineDiagram(graphElWeek, allDatapoints, "day");
} }
} }
} };
function getLastDay(data) { function getLastDay(data) {
let date = new Date(); let date = new Date();
let curTime = date.getTime(); let curTime = date.getTime();
let targetTime = parseInt(curTime/1e3) - (60*60*24); let targetTime = parseInt(curTime / 1e3) - 60 * 60 * 24;
let i; let i;
for (i = 0; i < data.length; i++) { for (i = 0; i < data.length; i++) {
if (data[i].time < targetTime) { if (data[i].time < targetTime) {
break; break;
} }
} }
return data.slice(0, i); return data.slice(0, i);
} }
function displayLineDiagram(canv, data, timeunit) { // https://www.chartjs.org/docs/latest/configuration/canvas-background.html
const bgColorPlugin = {
id: "bgColorPlugin",
beforeDraw: (chart, args, options) => {
const { ctx } = chart;
ctx.save();
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = options.color || "#99ffff";
ctx.fillRect(0, 0, chart.width, chart.height);
ctx.restore();
},
};
function displayLineDiagram(canv, data, timeunit) {
let ctx = canv.getContext("2d"); let ctx = canv.getContext("2d");
let dotColor = data.map(entry => entry.open ? "rgb(10, 150, 10)" : "rgb(200, 100, 100)"); let dotColor = data.map((entry) =>
entry.open ? "rgb(10, 150, 10)" : "rgb(200, 100, 100)",
);
let chart = new Chart(ctx, { let chart = new Chart(ctx, {
type: 'line', type: "line",
data: { data: {
labels: data.map(entry=> 1e3 * entry.time), labels: data.map((entry) => 1e3 * entry.time),
datasets: [{ datasets: [
data: data.map(entry => entry.open), {
stepped: "before", data: data.map((entry) => entry.open),
borderColor: dotColor, stepped: "before",
backgroundColor: dotColor segment: {
}], borderColor: (ctx) =>
}, ctx.p0.parsed.y === 1
options: { ? "rgb(10, 150, 10)"
scales: { : "rgb(200, 100, 100)",
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: { borderColor: dotColor,
legend: { backgroundColor: dotColor,
display: false },
}, ],
tooltip: { },
callbacks: { options: {
label: function(tooltipItem) { scales: {
const value = tooltipItem.formattedValue; x: {
if (value == 0) { type: "time",
return "Stengt"; display: true,
} else if (value == 1) { time: {
return "Åpent"; unit: timeunit,
} else { },
return ""; ticks: {
} display: true,
} source: "data",
} },
} grid: {
} display: true,
} },
},
y: {
suggestedMin: -0.1,
suggestedMax: 1.1,
grid: { display: false },
ticks: {
callback: (label, index, labels) =>
label === 1 ? "Åpent" : label === 0 ? "Stengt" : "",
},
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (tooltipItem) =>
tooltipItem.formattedValue === "1" ? "Åpent" : "Stengt",
},
},
bgColorPlugin: {
color: "#EEEEEE",
},
},
},
plugins: [bgColorPlugin],
}); });
} }
</script> </script>
</body>
</body>
</html> </html>