website/js/ntpGraph.js
2021-04-02 18:48:09 +02:00

67 lines
No EOL
2.1 KiB
JavaScript

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,
}]
},
});
}