website/js/ntpGraph.js

import chart from 'chart.js'

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>
        <canvas id="${graphIndexCounter}-Delay"></canvas>
        <canvas id="${graphIndexCounter}-Score"></canvas>
    </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, 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"]);
            });

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


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

function drawPlot(elementName, x, y, title){
    let ctx = document.getElementById(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,
            }]
        },
    });
}