2021-03-05 18:37:43 +01:00
|
|
|
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 = `
|
2021-03-05 19:07:35 +01:00
|
|
|
<span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span>
|
|
|
|
<span id="${graphIndexCounter}-Content" class="ntpContent">
|
|
|
|
<div id="${graphIndexCounter}-Delay"></div>
|
|
|
|
<div id="${graphIndexCounter}-Score"></div>
|
|
|
|
</span>
|
2021-03-05 18:37:43 +01:00
|
|
|
`;
|
|
|
|
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'
|
|
|
|
};
|
|
|
|
let layout = {
|
|
|
|
title: title,
|
|
|
|
};
|
|
|
|
Plotly.newPlot(elementName, [score], layout);
|
|
|
|
}
|