95 lines
No EOL
3 KiB
JavaScript
95 lines
No EOL
3 KiB
JavaScript
import chart from 'chart.js'
|
|
|
|
class NtpGraph extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
let ip = this.getAttribute("data-server-ip");
|
|
|
|
const ntpBanner = document.createElement("span");
|
|
ntpBanner.classList.add("ntpBanner");
|
|
ntpBanner.innerText = ip;
|
|
this.appendChild(ntpBanner);
|
|
|
|
const ntpContent = document.createElement("span");
|
|
ntpContent.classList.add("ntpContent");
|
|
this.appendChild(ntpContent);
|
|
|
|
const ntpLink = document.createElement("a");
|
|
ntpLink.target = "_blank";
|
|
ntpLink.href = `https://www.ntppool.org/scores/${ip}`;
|
|
ntpLink.classList.add("linkToNtpPool");
|
|
ntpLink.innerText = "Server auf der Seite des NTP Pools anzeigen";
|
|
ntpContent.appendChild(ntpLink);
|
|
|
|
|
|
const ntpDelayCanvas = document.createElement("canvas");
|
|
ntpDelayCanvas.classList.add("graphDelay");
|
|
ntpContent.appendChild(ntpDelayCanvas);
|
|
|
|
const ntpScoreCanvas = document.createElement("canvas");
|
|
ntpScoreCanvas.classList.add("graphScore");
|
|
ntpContent.appendChild(ntpScoreCanvas);
|
|
|
|
ntpBanner.onclick = () => {
|
|
|
|
if (ntpContent.classList.contains("visible")) {
|
|
ntpContent.classList.remove("visible");
|
|
} else {
|
|
ntpContent.classList.add("visible");
|
|
}
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
|
|
xhr.onreadystatechange = () => {
|
|
if (xhr.status === 200 && xhr.readyState === 4) {
|
|
let rawData = JSON.parse(xhr.responseText);
|
|
let x = [];
|
|
let yScore = [];
|
|
let yDelay = [];
|
|
rawData["history"].forEach((entry, index) => {
|
|
let date = new Date(entry["ts"] * 1000).toLocaleDateString();
|
|
if (index % 10 !== 0) {
|
|
date = "";
|
|
}
|
|
x.push(date);
|
|
yScore.push(entry["score"]);
|
|
yDelay.push(entry["offset"]);
|
|
});
|
|
|
|
this.drawPlot(".graphDelay", x, yDelay, "Delay");
|
|
this.drawPlot(".graphScore", x, yScore, "Score");
|
|
|
|
|
|
}
|
|
}
|
|
xhr.open("GET", "https://www.ntppool.org/scores/" + ip + "/json?monitor=*&limit=800");
|
|
xhr.send();
|
|
|
|
}
|
|
}
|
|
|
|
drawPlot(elementName, x, y, title) {
|
|
let ctx = this.querySelector(elementName).getContext('2d');
|
|
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
responsive: true,
|
|
scaleShowVerticalLines: false,
|
|
showTooltips: false,
|
|
data: {
|
|
labels: x,
|
|
datasets: [{
|
|
label: title,
|
|
data: y,
|
|
borderColor: '#199a87',
|
|
fill: false,
|
|
radius: 0,
|
|
}]
|
|
},
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define("jl-ntp-graph", NtpGraph); |