website/js/ntpGraph.js

import Plotly from 'plotly.js-dist'

let graphIndexCounter = 0;
let graphElements = document.querySelectorAll("jl-ntp-graph");

graphElements.forEach((elememt) => {
    let ip = elememt.getAttribute("data-server-ip");

    elememt.innerHTML = `
    <span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span>
    <span id="${graphIndexCounter}-Content" class="ntpContent">
        <a target="_blank" href="https://www.ntppool.org/scores/${ip}" class="linkToNtpPool">Server auf dem NTP Pool anzeigen</a>
        <div id="${graphIndexCounter}-Delay"></div>
        <div id="${graphIndexCounter}-Score"></div>
    </span>
    `;
    let currentIndex = graphIndexCounter;
    graphIndexCounter++;

    let xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function (){
        if(xhr.status == 200 && xhr.readyState == 4){
            let rawData = JSON.parse(this.responseText);
            let x = [];
            let yScore = [];
            let yDelay = [];
            rawData["history"].forEach((entry) => {
                x.push(new Date(entry["ts"] * 1000));
                yScore.push(entry["score"]);
                yDelay.push(entry["offset"]);
            });

            drawPlot(currentIndex + "-Delay", x, yDelay, ip + " Delay");
            drawPlot(currentIndex + "-Score", x, yScore, ip + " Score");


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

function drawPlot(elementName, x, y, title){
    let score = {
        x: x,
        y: y,
        mode: 'lines',
        marker: {
            color: '#1cb09a'
        }
    };
    let layout = {
        title: {
            text: title,
            font: {
                color: "#b3b3b3",
            }
        },
        plot_bgcolor: "#171e2b",
        paper_bgcolor: "#171e2b",
        xaxis: {
            gridcolor: "rgb(68, 68, 68)",
            zerolinecolor: "#b3b3b3",
            linecolor: "#b3b3b3",
            tickfont: {
                color: "#b3b3b3",
            },
        },
        yaxis: {
            gridcolor: "rgb(68, 68, 68)",
            zerolinecolor: "#b3b3b3",
            linecolor: "#b3b3b3",
            tickfont: {
                color: "#b3b3b3",
            },
        }
    };
    let config = {
        responsive: true
    };

    Plotly.newPlot(elementName, [score], layout, config);
}