From 5e425f177a507c55565e595af7036d438ebd3959 Mon Sep 17 00:00:00 2001
From: jonasled <git@jonasled.de>
Date: Fri, 5 Mar 2021 18:37:43 +0100
Subject: [PATCH] use plotly to generate grpahs
---
public/ntpstatus.php | 11 ++------
scss/_ntp.scss | 38 ++-------------------------
ts/jl-ntp-graph.ts | 61 ++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 65 insertions(+), 45 deletions(-)
create mode 100644 ts/jl-ntp-graph.ts
diff --git a/public/ntpstatus.php b/public/ntpstatus.php
index 5682a0f..211510b 100644
--- a/public/ntpstatus.php
+++ b/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">
- <div data-server-ip="$ip" class="graph"></div>
- </a>
+ <jl-ntp-graph data-server-ip="$ip"></jl-ntp-graph>
EOF;
}
?>
- <script type="text/javascript">
- 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>
+ <script type="text/javascript" src="https://cdn.jonasled.de/plotly-latest.min.js"></script>
<?php
getFooter();
?>
\ No newline at end of file
diff --git a/scss/_ntp.scss b/scss/_ntp.scss
index 276159c..65f2189 100644
--- a/scss/_ntp.scss
+++ b/scss/_ntp.scss
@@ -1,37 +1,3 @@
-@media print {
- * {
- 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;
- }
- }
+.js-plotly-plot {
+ margin-bottom: 10px;
}
\ No newline at end of file
diff --git a/ts/jl-ntp-graph.ts b/ts/jl-ntp-graph.ts
new file mode 100644
index 0000000..b513514
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
--
GitLab