67 lines
2.1 KiB
JavaScript
67 lines
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,
|
|
}]
|
|
},
|
|
});
|
|
} |