61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
|
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 = `
|
||
|
|
<div id="${graphIndexCounter}-Delay"></div>
|
||
|
|
<div id="${graphIndexCounter}-Score"></div>
|
||
|
|
`;
|
||
|
|
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);
|
||
|
|
}
|