use plotly to generate grpahs

public/ntpstatus.php

@@ -10,19 +10,12 @@ $IPs = ["23.94.219.121", "83.136.84.239", "193.109.84.119", "2001:470:1f14:da8::
 
 foreach($IPs as $ip){
     echo <<<EOF
-    <a href="https://www.ntppool.org/scores/$ip">
+    <jl-ntp-graph data-server-ip="$ip"></jl-ntp-graph>
-        <div data-server-ip="$ip" class="graph"></div>
-    </a>
 EOF;
 
 }
 ?>
-    <script type="text/javascript">
+    <script type="text/javascript" src="https://cdn.jonasled.de/plotly-latest.min.js"></script>
-        if (!NP) var NP= {};
-    </script>
-    <script type="text/javascript" src="https://jonasled.pages.gitlab.jonasled.de/pool.ntp.org-graph/jquery.js"></script>
-    <script type="text/javascript" src="https://jonasled.pages.gitlab.jonasled.de/pool.ntp.org-graph/d3.js"></script>
-    <script type="text/javascript" src="https://jonasled.pages.gitlab.jonasled.de/pool.ntp.org-graph/graphs.js"></script>
 <?php
 getFooter();
 ?>

scss/_ntp.scss

@@ -1,37 +1,3 @@
-@media print {
+.js-plotly-plot {
-    * {
+    margin-bottom: 10px;
-        color: #000!important;
-        text-shadow: none!important;
-        background: transparent!important;
-        box-shadow: none!important;
-    }
-}
-.total_score {
-    fill: none;
-    stroke: #00f;
-    stroke-width: 2px;
-}
-.graph {
-    rect {
-        fill: none;
-        stroke: #000;
-        shape-rendering: crispEdges;
-    }
-    .y line, .x line, .y_score line {
-        stroke: #ccc;
-        shape-rendering: crispEdges;
-    }
-    .y_score line {
-        stroke: #ddd;
-        stroke-dasharray: 2, 2, 2, 2;
-    }
-    svg{
-        background-color: #ebebeb;
-    }
-    @media only screen and (max-width: $mobile-max-width){
-        svg {
-            width: 100%;
-            height: auto;
-        }
-    }
 }

ts/jl-ntp-graph.ts

@@ -0,0 +1,61 @@
+interface ntppoolJSONHistory {
+    offset: number,
+    ts: number,
+    monitor_id: string,
+    score: number,
+    step: number
+}
+
+interface ntppoolJSON {
+    history: ntppoolJSONHistory[],
+    monitors: any,
+    server: any,
+}
+
+let graphIndexCounter = 0;
+let graphElements = document.querySelectorAll("jl-ntp-graph");
+graphElements.forEach((elememt) => {
+    let ip:string = <string> elememt.getAttribute("data-server-ip");
+
+    elememt.innerHTML = `
+    <div id="${graphIndexCounter}-Delay"></div>
+    <div id="${graphIndexCounter}-Score"></div>
+    `;
+    let currentIndex = graphIndexCounter;
+    graphIndexCounter++;
+
+    let xhr = new XMLHttpRequest();
+
+    xhr.onreadystatechange = function (){
+        if(xhr.status == 200 && xhr.readyState == 4){
+            let rawData:ntppoolJSON = JSON.parse(this.responseText);
+            let x:Date[] = [];
+            let yScore:number[] = [];
+            let yDelay:number[] = [];
+            rawData["history"].forEach((entry) => {
+                x.push(new Date(entry["ts"] * 1000));
+                yScore.push(entry["score"]);
+                yDelay.push(entry["offset"]);
+            });
+
+            drawPlot(currentIndex + "-Delay", x, yDelay, ip + " Delay");
+            drawPlot(currentIndex + "-Score", x, yScore, ip + " Score");
+
+
+        }
+    }
+    xhr.open("GET", "https://www.ntppool.org/scores/" + ip + "/json?monitor=*&limit=400");
+    xhr.send();
+});
+
+function drawPlot(elementName:string, x:Date[], y:number[], title:string){
+    let score = {
+        x: x,
+        y: y,
+        mode: 'lines'
+    };
+    let layout = {
+        title: title,
+    };
+    Plotly.newPlot(elementName, [score], layout);
+}