website/js/ntpGraph.js

84 lines
2.4 KiB
JavaScript
Raw Normal View History

2021-03-24 22:18:55 +01:00
import Plotly from 'plotly.js-dist'
2021-03-05 18:37:43 +01:00
let graphIndexCounter = 0;
let graphElements = document.querySelectorAll("jl-ntp-graph");
2021-03-24 22:18:55 +01:00
2021-03-05 18:37:43 +01:00
graphElements.forEach((elememt) => {
2021-03-24 22:18:55 +01:00
let ip = elememt.getAttribute("data-server-ip");
2021-03-05 18:37:43 +01:00
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">
2021-03-05 22:19:21 +01:00
<a target="_blank" href="https://www.ntppool.org/scores/${ip}" class="linkToNtpPool">Server auf dem NTP Pool anzeigen</a>
2021-03-05 19:07:35 +01:00
<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){
2021-03-24 22:18:55 +01:00
let rawData = JSON.parse(this.responseText);
let x = [];
let yScore = [];
let yDelay = [];
2021-03-05 18:37:43 +01:00
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();
});
2021-03-24 22:18:55 +01:00
function drawPlot(elementName, x, y, title){
2021-03-05 18:37:43 +01:00
let score = {
x: x,
y: y,
2021-03-05 21:56:35 +01:00
mode: 'lines',
marker: {
color: '#1cb09a'
}
2021-03-05 18:37:43 +01:00
};
let layout = {
2021-03-05 21:56:35 +01:00
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",
},
}
2021-03-05 18:37:43 +01:00
};
2021-03-05 20:25:17 +01:00
let config = {
responsive: true
};
Plotly.newPlot(elementName, [score], layout, config);
2021-03-05 18:37:43 +01:00
}