website/ts/jl-ntp-graph.ts

interface ntppoolJSONHistory {
    offset: number,
    ts: number,
    monitor_id: string,
    score: number,
    step: number
}

interface ntppoolJSON {
    history: ntppoolJSONHistory[],
    monitors: any,
    server: any,
}

let graphIndexCounter = 0;
let graphElements = document.querySelectorAll("jl-ntp-graph");
graphElements.forEach((elememt) => {
    let ip:string = <string> 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:ntppoolJSON = JSON.parse(this.responseText);
            let x:Date[] = [];
            let yScore:number[] = [];
            let yDelay:number[] = [];
            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:string, x:Date[], y:number[], title:string){
    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);
}