pvv-nixos-config/www/door/graph.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>