From 15c62ddc7c0949cd4dfc5591b190648d37d88e70 Mon Sep 17 00:00:00 2001
From: DeathByDenim <jarno@jarno.ca>
Date: Sat, 24 Jun 2023 14:00:16 -0400
Subject: [PATCH] Make live graphs responsive

---
 website/_includes/online.html      | 18 +++++---------
 website/assets/css/serverstats.css |  8 ++++++
 website/js/serverstats.js          | 40 +++++++++++++++++++++++++++---
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/website/_includes/online.html b/website/_includes/online.html
index f5ec7f5..cc87283 100644
--- a/website/_includes/online.html
+++ b/website/_includes/online.html
@@ -2,20 +2,14 @@
             Live stuff requires JavaScript unfortunately
           </noscript>
           <h6>CPU</h6>
-          <div class="graph">
-            <svg id="cpugraph" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
-              <rect class="graphframe" x="0" y="0" width="301" height="100" />
+          <div class="graph w-auto p-1">
+            <svg id="cpugraph" class="w-100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 100">
+              <rect class="graphframe" vector-effect="non-scaling-stroke" x="0" y="0" width="200" height="100" />
             </svg>
           </div>
           <h6>Memory</h6>
-          <div class="graph">
-            <svg id="memgraph" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
-              <rect class="graphframe" x="0" y="0" width="301" height="100" />
+          <div class="graph w-auto p-1">
+            <svg id="memgraph" class="w-100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 100">
+              <rect class="graphframe" vector-effect="non-scaling-stroke" x="0" y="0" width="200" height="100" />
             </svg>
           </div>
-          <script>
-            d3.select('#cpugraph').attr('viewBox', '0 0 310 100');
-            d3.select('#memgraph').attr('viewBox', '0 0 310 100');
-            update();
-            setInterval(update, 5000);
-          </script>
diff --git a/website/assets/css/serverstats.css b/website/assets/css/serverstats.css
index b2a954c..b666d97 100644
--- a/website/assets/css/serverstats.css
+++ b/website/assets/css/serverstats.css
@@ -7,7 +7,15 @@
   stroke-width: 3px;
 }
 .graph {
+  border: solid black thin;
 }
+
+.connlost {
+  text-anchor: middle;
+  dominant-baseline: middle;
+  font-size: 50%;
+}
+
 .graphframe {
   stroke: black;
   fill: none;
diff --git a/website/js/serverstats.js b/website/js/serverstats.js
index 8973912..cd550c0 100644
--- a/website/js/serverstats.js
+++ b/website/js/serverstats.js
@@ -18,10 +18,11 @@
 
 let heightScale = d3.scaleLinear()
   .domain([0,100])
-  .range([100,0]);
+  .range([99,1]);
 let timeScale = d3.scaleLinear()
   .domain([0,60])
-  .range([5,305]);
+  .range([10,190]);
+let connection_lost_since = false;
 
 function updateGraph(data, svgid, property_class, property) {
   d3.select(svgid)
@@ -34,8 +35,9 @@ function updateGraph(data, svgid, property_class, property) {
           .attr('x1', function(d,i){return timeScale(i)})
           .attr('x2', function(d,i){return timeScale(i)})
           .attr('y1', function(d,i){return heightScale(0)})
-          .attr('y2', 100)
-          .attr('class', property_class);
+          .attr('y2', 99)
+          .attr('class', property_class)
+          .attr('vector-effect', 'non-scaling-stroke');
       },
       function(update) {
         return update
@@ -54,7 +56,37 @@ function updateGraph(data, svgid, property_class, property) {
 
 function update() {
   d3.json('http{% if site.content.ssl %}s{% endif %}://{{ site.content.domain_name }}/monitoring/all').then(function(data){
+    d3.selectAll("text.connlost").remove();
     updateGraph(data, '#memgraph', 'mem', 'm');
     updateGraph(data, '#cpugraph', 'cpu', 'c');
+  })
+  .catch(() => {
+    if(!connection_lost_since) {
+      connection_lost_since = d3.timeSecond();
+    }
+    const seconds = [d3.timeSecond.count(connection_lost_since, d3.timeSecond())];
+    d3.selectAll("line.cpu").remove();
+    d3.selectAll("line.mem").remove();
+    d3.select("#cpugraph")
+      .selectAll("text")
+      .data(seconds)
+      .join("text")
+      .attr("x", 100)
+      .attr("y", 50)
+      .classed("connlost", true)
+      .text(d => `Connection lost ${d} seconds ago`);
+    d3.select("#memgraph")
+      .selectAll("text")
+      .data(seconds)
+      .join("text")
+      .attr("x", 100)
+      .attr("y", 50)
+      .classed("connlost", true)
+      .text(d => `Connection lost ${d} seconds ago`);
   });
 }
+
+document.addEventListener("DOMContentLoaded", (event) => {
+  update();
+  setInterval(update, 5000);
+});