website/js/ntpGraph.js
2021-03-24 22:18:55 +01:00

84 lines
No EOL
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);
}