website/js/customElements/ntpGraph.js

import chart from 'chart.js'

class NtpGraph extends HTMLElement {
    constructor() {
        super();

        let ip = this.getAttribute("data-server-ip");

        const ntpBanner = document.createElement("span");
        ntpBanner.classList.add("ntpBanner");
        ntpBanner.innerText = ip;
        this.appendChild(ntpBanner);

        const ntpContent = document.createElement("span");
        ntpContent.classList.add("ntpContent");
        this.appendChild(ntpContent);

        const ntpLink = document.createElement("a");
        ntpLink.target = "_blank";
        ntpLink.href = `https://www.ntppool.org/scores/${ip}`;
        ntpLink.classList.add("linkToNtpPool");
        ntpLink.innerText = "Server auf dem NTP Pool anzeigen";
        ntpContent.appendChild(ntpLink);

        const ntpDelayCanvas = document.createElement("canvas");
        ntpDelayCanvas.classList.add("graphDelay");
        ntpContent.appendChild(ntpDelayCanvas);
        
        const ntpScoreCanvas = document.createElement("canvas");
        ntpScoreCanvas.classList.add("graphScore");
        ntpContent.appendChild(ntpScoreCanvas);

        ntpBanner.onclick = () => {

            if (ntpContent.classList.contains("visible")) {
                ntpContent.classList.remove("visible");
            } else {
                ntpContent.classList.add("visible");
            }

            let xhr = new XMLHttpRequest();

            xhr.onreadystatechange = () => {
                if (xhr.status === 200 && xhr.readyState === 4) {
                    let rawData = JSON.parse(xhr.responseText);
                    let x = [];
                    let yScore = [];
                    let yDelay = [];
                    rawData["history"].forEach((entry, index) => {
                        let date = new Date(entry["ts"] * 1000).toLocaleDateString();
                        if (index % 10 !== 0) {
                            date = "";
                        }
                        x.push(date);
                        yScore.push(entry["score"]);
                        yDelay.push(entry["offset"]);
                    });

                    this.drawPlot(".graphDelay", x, yDelay, "Delay");
                    this.drawPlot(".graphScore", x, yScore, "Score");


                }
            }
            xhr.open("GET", "https://www.ntppool.org/scores/" + ip + "/json?monitor=*&limit=800");
            xhr.send();

        }
    }

    drawPlot(elementName, x, y, title) {
        let ctx = this.querySelector(elementName).getContext('2d');

        new Chart(ctx, {
            type: 'line',
            responsive: true,
            scaleShowVerticalLines: false,
            showTooltips: false,
            data: {
                labels: x,
                datasets: [{
                    label: title,
                    data: y,
                    borderColor: '#199a87',
                    fill: false,
                    radius: 0,
                }]
            },
        });
    }

}

customElements.define("jl-ntp-graph", NtpGraph);