diff --git a/js/ntpGraph.js b/js/ntpGraph.js
index 326a993b49d67d50ee76eb041ddb74e9b2787c83..8ae557e5f223a887e6ff636b640880ed61794ecc 100644
--- a/js/ntpGraph.js
+++ b/js/ntpGraph.js
@@ -1,4 +1,4 @@
-import Plotly from 'plotly.js-dist'
+import chart from 'chart.js'
let graphIndexCounter = 0;
let graphElements = document.querySelectorAll("jl-ntp-graph");
@@ -10,8 +10,8 @@ graphElements.forEach((elememt) => {
<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>
+ <canvas id="${graphIndexCounter}-Delay"></canvas>
+ <canvas id="${graphIndexCounter}-Score"></canvas>
</span>
`;
let currentIndex = graphIndexCounter;
@@ -20,19 +20,23 @@ graphElements.forEach((elememt) => {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
- if(xhr.status == 200 && xhr.readyState == 4){
+ 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));
+ 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"]);
});
- drawPlot(currentIndex + "-Delay", x, yDelay, ip + " Delay");
- drawPlot(currentIndex + "-Score", x, yScore, ip + " Score");
+ drawPlot(currentIndex + "-Delay", x, yDelay, "Delay");
+ drawPlot(currentIndex + "-Score", x, yScore, "Score");
}
@@ -42,43 +46,22 @@ graphElements.forEach((elememt) => {
});
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
- };
+ let ctx = document.getElementById(elementName).getContext('2d');
- Plotly.newPlot(elementName, [score], layout, config);
+ 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,
+ }]
+ },
+ });
}
\ No newline at end of file
diff --git a/js/ntpMenu.js b/js/ntpMenu.js
index 4e62949b58d89796ac10999ec19c1bb8ddfe2cbf..4fe714189fadf653cc4f6b5a518e0bcb962cfbd5 100644
--- a/js/ntpMenu.js
+++ b/js/ntpMenu.js
@@ -1,5 +1,3 @@
-let Plotly = require('plotly.js-dist')
-
let ntpNav = document.querySelectorAll(".ntpBanner");
ntpNav.forEach((element) => {
@@ -12,8 +10,6 @@ ntpNav.forEach((element) => {
contentElement.classList.remove("visible");
} else {
contentElement.classList.add("visible");
- Plotly.relayout(index + "-Delay", {autosize: true});
- Plotly.relayout(index + "-Score", {autosize: true});
}
}
});
\ No newline at end of file
diff --git a/package.json b/package.json
index 39161732e08abecc7697ea403ddf27f8f2dca7b8..b2c8019bc768ed70715e15ee81e08a490268b8a0 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
},
"dependencies": {
"basiclightbox": "^5.0.4",
- "plotly.js-dist": "^1.58.4",
+ "chart.js": "^2.9.4",
"sass": "^1.32.8",
"webpack": "^5.28.0"
}
diff --git a/yarn.lock b/yarn.lock
index 13853a7ff4f4e3388e04b7bcf5e25477ac302bce..74ce46ccd6c9859d419aa8466553664f42cb82a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -319,6 +319,29 @@ chalk@^4.1.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
+chart.js@^2.9.4:
+ version "2.9.4"
+ resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+ integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+ dependencies:
+ chartjs-color "^2.1.0"
+ moment "^2.10.2"
+
+chartjs-color-string@^0.6.0:
+ version "0.6.0"
+ resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+ integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+ dependencies:
+ color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+ version "2.4.1"
+ resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+ integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+ dependencies:
+ chartjs-color-string "^0.6.0"
+ color-convert "^1.9.3"
+
"chokidar@>=2.0.0 <4.0.0":
version "3.5.1"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
@@ -359,7 +382,7 @@ clone-deep@^4.0.1:
kind-of "^6.0.2"
shallow-clone "^3.0.0"
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.3:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -378,7 +401,7 @@ color-name@1.1.3:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -772,6 +795,11 @@ mimic-fn@^2.1.0:
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+moment@^2.10.2:
+ version "2.29.1"
+ resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+ integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
neo-async@^2.6.2:
version "2.6.2"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
@@ -874,11 +902,6 @@ pkg-dir@^4.2.0:
dependencies:
find-up "^4.0.0"
-plotly.js-dist@^1.58.4:
- version "1.58.4"
- resolved "https://registry.yarnpkg.com/plotly.js-dist/-/plotly.js-dist-1.58.4.tgz#d57b73d27af57a0d6cd2cf9428a001962889cf5b"
- integrity sha512-oXCTRJFN8FBsHZSQPYoM3LuJQchPUrf6sOXFC0EFdvcr5lmJmLcAsW74jDy9PkRpm3PB+A+2oY1hsUMmk2eZbw==
-
punycode@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"