84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
import Plotly from 'plotly.js-dist'
|
|
|
|
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>
|
|
<div id="${graphIndexCounter}-Delay"></div>
|
|
<div id="${graphIndexCounter}-Score"></div>
|
|
</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) => {
|
|
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, x, y, title){
|
|
let score = {
|
|
x: x,
|
|
y: y,
|
|
mode: 'lines',
|
|
marker: {
|
|
color: '#1cb09a'
|
|
}
|
|
};
|
|
let layout = {
|
|
title: {
|
|
text: title,
|
|
font: {
|
|
color: "#b3b3b3",
|
|
}
|
|
},
|
|
plot_bgcolor: "#171e2b",
|
|
paper_bgcolor: "#171e2b",
|
|
xaxis: {
|
|
gridcolor: "rgb(68, 68, 68)",
|
|
zerolinecolor: "#b3b3b3",
|
|
linecolor: "#b3b3b3",
|
|
tickfont: {
|
|
color: "#b3b3b3",
|
|
},
|
|
},
|
|
yaxis: {
|
|
gridcolor: "rgb(68, 68, 68)",
|
|
zerolinecolor: "#b3b3b3",
|
|
linecolor: "#b3b3b3",
|
|
tickfont: {
|
|
color: "#b3b3b3",
|
|
},
|
|
}
|
|
};
|
|
let config = {
|
|
responsive: true
|
|
};
|
|
|
|
Plotly.newPlot(elementName, [score], layout, config);
|
|
} |