replaced plotly with chart.js

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,
+            }]
+        },
+    });
 }

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

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"
   }

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"