www/door: clean up graph options
This commit is contained in:
@@ -1,30 +1,29 @@
|
||||
<!DOCTYPE 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">
|
||||
<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;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
width: 80vw;
|
||||
margin: auto auto;
|
||||
}
|
||||
#graphDiv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</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>
|
||||
<h4>Siste 24 timer</h4>
|
||||
<canvas id="doorGraphDay"></canvas>
|
||||
<h4>Siste 7 dager</h4>
|
||||
<canvas id="doorGraphWeek"></canvas>
|
||||
</div>
|
||||
|
||||
<script
|
||||
@@ -44,115 +43,131 @@
|
||||
></script>
|
||||
|
||||
<script>
|
||||
const graphElDay = document.getElementById("doorGraphDay");
|
||||
const graphElWeek = document.getElementById("doorGraphWeek");
|
||||
|
||||
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();
|
||||
|
||||
const XHR = new XMLHttpRequest();
|
||||
const url="/door/?period=week";
|
||||
XHR.open("GET", url);
|
||||
XHR.send();
|
||||
|
||||
|
||||
XHR.onreadystatechange = ()=>{
|
||||
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.");
|
||||
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);
|
||||
const dayDatapoints = getLastDay(allDatapoints);
|
||||
|
||||
displayLineDiagram(graphElDay, dayDatapoints, "hour");
|
||||
displayLineDiagram(graphElWeek, allDatapoints, "day");
|
||||
}
|
||||
displayLineDiagram(graphElDay, dayDatapoints, "hour");
|
||||
displayLineDiagram(graphElWeek, allDatapoints, "day");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function getLastDay(data) {
|
||||
function getLastDay(data) {
|
||||
let date = new Date();
|
||||
let curTime = date.getTime();
|
||||
let targetTime = parseInt(curTime/1e3) - (60*60*24);
|
||||
let targetTime = parseInt(curTime / 1e3) - 60 * 60 * 24;
|
||||
|
||||
let i;
|
||||
for (i = 0; i < data.length; i++) {
|
||||
if (data[i].time < targetTime) {
|
||||
break;
|
||||
}
|
||||
if (data[i].time < targetTime) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
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 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, {
|
||||
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 "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
type: "line",
|
||||
data: {
|
||||
labels: data.map((entry) => 1e3 * entry.time),
|
||||
datasets: [
|
||||
{
|
||||
data: data.map((entry) => entry.open),
|
||||
stepped: "before",
|
||||
segment: {
|
||||
borderColor: (ctx) =>
|
||||
ctx.p0.parsed.y === 1
|
||||
? "rgb(10, 150, 10)"
|
||||
: "rgb(200, 100, 100)",
|
||||
},
|
||||
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 "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
borderColor: dotColor,
|
||||
backgroundColor: dotColor,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
type: "time",
|
||||
display: true,
|
||||
time: {
|
||||
unit: timeunit,
|
||||
},
|
||||
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>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user