charts maybe?

src/main/resources/webui/dataReceive.js

@@ -12,6 +12,10 @@ let lockDash;
 //non-option var
 let statRequest;
 //stat vars
+let hitmiss,
+    byte,
+    cached,
+    req;
 
 //dockable things
 let config = {
@@ -113,7 +117,7 @@ function loadDash() {
     if (savedState !== null) {
         dashlayout = new GoldenLayout(JSON.parse(savedState), $("#dashboard"));
     } else {
-    dashlayout = new GoldenLayout(config, $("#dashboard"));
+        dashlayout = new GoldenLayout(config, $("#dashboard"));
     }
     //graphs
     dashlayout.registerComponent('Network Utilization', function (container, state) {
@@ -180,12 +184,102 @@ jQuery(document).ready(function () {
             $(this).text("");
             $('#console_text').scrollTop($("#console_text")[0].scrollHeight)
         }
-    })
+    });
-    statRequest = setInterval(function () {
+    loadStuff();
-        requestStats();
+    fetch("/api/allStats")
-    }, refreshRate);
+        .then(response => async function () {
+            let respj = JSON.parse(await response.text());
+            updateValues(respj);
+            console.log(respj);
+        });
+    statRequest = setInterval(getStats, refreshRate);
 });
 
+function loadStuff() {
+    hitmiss = new Chart(document.getElementById('hitpie').getContext('2d'), {
+        type: 'doughnut',
+        data: {
+            datasets: [{
+                data: [0, 0]
+            }],
+            labels: [
+                'Hits',
+                'Misses'
+            ]
+        },
+        options: {}
+    });
+    req = new Chart(document.getElementById('requestsserved').getContext('2d'), {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [{
+                label: 'Requests Served',
+                backgroundColor: "#f00",
+                borderColor: "#f00",
+                data: [],
+                fill: false
+            }]
+        },
+        options: {
+            maintainAspectRatio: false,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        }
+    });
+    byte = new Chart(document.getElementById('bytessent').getContext('2d'), {
+        type: 'line',
+        data: {
+            labels: [1, 2, 3, 4],
+            datasets: [{
+                label: 'Bytes Sent',
+                backgroundColor: "#f00",
+                borderColor: "#f00",
+                data: [36, 98, 45, 67],
+                fill: false
+            }]
+        },
+        options: {
+            maintainAspectRatio: false,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        }
+    });
+    cached = new Chart(document.getElementById('browsercached').getContext('2d'), {
+        type: 'line',
+        data: {
+            labels: [1, 2, 3, 4],
+            datasets: [{
+                label: 'Cached',
+                backgroundColor: "#f00",
+                borderColor: "#f00",
+                data: [36, 98, 45, 67],
+                fill: false
+            }]
+        },
+        options: {
+            maintainAspectRatio: false,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        }
+    });
+}
+
 //site functions, no connections involved
 
 $(window).on("click", function () {
@@ -491,17 +585,51 @@ function updateWithMessage(m) {
 
 function getStats() {
     fetch("/api/stats")
-        .then(response => parseResponse(response));
+        .then(response => async function () {
+            let respj = JSON.parse(await response.text());
+            parseResponse(respj);
+            console.log(respj);
+        });
     //TODO: use values and update web info
 }
 
 function parseResponse(x) {
-    let respj = JSON.parse(x);
+    hitmiss.data.datasets[0].data[0] = (x.cache_hits);
-    console.log(x);
+    hitmiss.data.datasets[0].data[1] = (x.misses);
+    req.data.labels.push(x.snap_time);
+    req.data.datasets.forEach((dataset) => {
+        dataset.data.push(x.requests_served);
+    });
+    byte.data.labels.push(x.snap_time);
+    byte.data.datasets.forEach((dataset) => {
+        dataset.data.push(x.bytes_sent);
+    });
+    cached.data.labels.push(x.snap_time);
+    cached.data.datasets.forEach((dataset) => {
+        dataset.data.push(x.browser_cached);
+    });
 }
 
-function updateValues() {
+function updateValues(data) {
-
+    for (let key in data) {
+        if (data.hasOwnProperty(key)) {
+            let x = data[key];
+            hitmiss.data.datasets[0].data[0] = (x.cache_hits);
+            hitmiss.data.datasets[0].data[1] = (x.misses);
+            req.data.labels.push(key);
+            req.data.datasets.forEach((dataset) => {
+                dataset.data.push(x.requests_served);
+            });
+            byte.data.labels.push(key);
+            byte.data.datasets.forEach((dataset) => {
+                dataset.data.push(x.bytes_sent);
+            });
+            cached.data.labels.push(key);
+            cached.data.datasets.forEach((dataset) => {
+                dataset.data.push(x.browser_cached);
+            });
+        }
+    }
 }
 
 //console functions

src/main/resources/webui/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>MD@H Client</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
     <script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
     <script src="dataReceive.js"></script>
     <link rel="stylesheet" type="text/css" href="layout.css">
@@ -43,13 +44,30 @@
     </div>
 </div>
 <div id="content">
-    <div id="dashb" class="content">
+    <div id="dashb" class="content" style="overflow-y: scroll">
         <div class="contentHeader">
             <h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
         </div>
-        <div id="dashboard"></div>
+        <div id="dashboard" hidden></div>
-        <div id="gDat" hidden>
+        <div id="pleasejustwork" style="height: calc(100% - 140px); width: calc(100% - 40px); margin: 20px">
+            <div id="thelonelynumber" style="position: absolute; width: 30%; margin: 20px;">
+                <div class="line_graph_data">
+                    <canvas id="hitpie"></canvas>
+                </div>
 
+            </div>
+            <div id="thegraphfamily"
+                 style="position: absolute; width: calc(70% - 80px); margin: 20px; left: calc(30% + 40px); top: 100px">
+                <div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
+                    <canvas id="bytessent" style="height: 250px"></canvas>
+                </div>
+                <div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
+                    <canvas id="requestsserved" style="height: 250px"></canvas>
+                </div>
+                <div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
+                    <canvas id="browsercached" style="height: 250px"></canvas>
+                </div>
+            </div>
         </div>
     </div>
     <div id="console" class="content" hidden>

src/main/resources/webui/layout.css

@@ -145,10 +145,10 @@ body {
     overflow-y: scroll;
 }
 
-.line_graph_data {
+/*.line_graph_data {*/
-    height: 100%;
+/*    height: 100%;*/
-    width: 100%;
+/*    width: 100%;*/
-}
+/*}*/
 
 /*Console and options positions*/