From 939302af63c510ed2fe5048b96eafc1ec7524460 Mon Sep 17 00:00:00 2001
From: Herbert Wolverson <herberticus@gmail.com>
Date: Sat, 7 Jan 2023 16:37:48 +0000
Subject: [PATCH] Throughput graph is responsive, doesn't fill to zero on
 unshaped, and has an X-axis label.

---
 src/rust/lqos_node_manager/static/main.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/rust/lqos_node_manager/static/main.html b/src/rust/lqos_node_manager/static/main.html
index 7fcde918..d14f060c 100644
--- a/src/rust/lqos_node_manager/static/main.html
+++ b/src/rust/lqos_node_manager/static/main.html
@@ -102,7 +102,7 @@
             <div class="card bg-light">
                 <div class="card-body">
                     <h5 class="card-title"><i class="fa fa-hourglass"></i> Last 5 Minutes</h5>
-                    <div id="tpGraph" style="height: 150px"></div>
+                    <div id="tpGraph" style="min-height: 150px; width: 100%"></div>
                 </div>
             </div>
         </div>
@@ -172,12 +172,12 @@
                     y4.push(0.0 - tp[i].shaped_bits_per_second[1]);
                 }
                 let data = [
-                    {x: x, y:y, name: 'Download', type: 'scatter', fill: 'tozeroy'},
-                    {x: x, y:y2, name: 'Upload', type: 'scatter', fill: 'tozeroy'},
+                    {x: x, y:y, name: 'Download', type: 'scatter'},
+                    {x: x, y:y2, name: 'Upload', type: 'scatter'},
                     {x: x, y:y3, name: 'Shaped Download', type: 'scatter', fill: 'tozeroy'},
                     {x: x, y:y4, name: 'Shaped Upload', type: 'scatter', fill: 'tozeroy'},
                 ];
-                Plotly.newPlot(graph, data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true }, xaxis: {automargin: true} });
+                Plotly.newPlot(graph, data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true }, xaxis: {automargin: true, title: "Time since now (seconds)"} }, { responsive: true });
                 //console.log(tp);
                 setTimeout(updateThroughputGraph, 1000);
             });