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