website/js/customElements/ntpGraph.js

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);