Make chart display tabbed

ISPChk/wwwroot/index.html

@@ -12,32 +12,6 @@
         <div class="row">
             <div class="col-sm">
                 <button id="btnDebug">DEBUG</button>
-            </div>
-            <div class="col-sm">
-                Hosts
-                <table id="tblHosts" class="table">
-                    <thead>
-                        <tr>
-                            <th scope="col">ID</th>
-                            <th scope="col">Name</th>
-                            <th scope="col">Hostname</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>1</td>
-                            <td>Mark</td>
-                            <td>Otto</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <div class="col-sm">
-                Testlel
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm">
                 <form id="frmHostAdd">
                     <div>
                         <label for="inpNameAdd" class="form-label">Name</label>
@@ -60,7 +34,22 @@
                 </form>
             </div>
             <div class="col-sm">
-                Testlel
+                <table id="tblHosts" class="table">
+                    <thead>
+                        <tr>
+                            <th scope="col">ID</th>
+                            <th scope="col">Name</th>
+                            <th scope="col">Hostname</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>1</td>
+                            <td>Mark</td>
+                            <td>Otto</td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
             <div class="col-sm">
                 <form id="frmHistory">
@@ -72,7 +61,18 @@
                 </form>
             </div>
         </div>
-        <div id="charts" class="row">
+        <div class="row">
+            <div class="col-sm">
+            </div>
+            <div class="col-sm">
+                <div id="chartContainerButtons">
+                </div>
+            </div>
+            <div class="col-sm">
+            </div>
+        </div>
+        <div id="chartContainer" class="row">
+            
         </div>
     </div>
 <script src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>

ISPChk/wwwroot/ispchk.js

@@ -57,6 +57,32 @@ async function transformChartData(pings) {
     return res;
 }
 
+async function activateChart(id) {
+    var chartDiv = $("#chartContainer");
+    var chartId = "chart_" + id;
+    var charts = chartDiv.children("canvas");
+    for (let chart of charts) {
+        var thisId = $(chart).attr('id');
+        if (thisId == chartId) {
+            $(chart).show();
+        } else {
+            $(chart).hide();
+        }
+        console.log(chart);
+    }
+}
+
+async function prepareChart(host) {
+    var buttonDiv = $("#chartContainerButtons");
+    var chartDiv = $("#chartContainer");
+    var chartId = "chart_" + host.hostId;
+    var canvas = $("<canvas>", { id: chartId, width: 400, height: 200 }).appendTo(chartDiv).hide();
+    $("<button>").appendTo(buttonDiv).text(host.name).click(async () => {
+        await activateChart(host.hostId);
+    });
+    return canvas[0];
+}
+
 async function updateGraphs() {
     var chartDiv = $("#charts");
     chartDiv.empty();
@@ -66,9 +92,10 @@ async function updateGraphs() {
     var end = Date.now();
     for (let host of hosts) {
         console.log("Appending ", host);
+        var chartElement = await prepareChart(host);
+        console.log("chartElement: ", chartElement);
         var val = await transformChartData(await fetchPings(host.hostId, start, end));
-        $("<canvas>", { id: "chart_" + host.hostId, width: 200, height: 200 }).appendTo(chartDiv);
-        var ctx = document.getElementById('chart_' + host.hostId).getContext('2d');
+        var ctx = chartElement.getContext('2d');
         charts[host.hostId] = new Chart(ctx, {
             type: 'line',
             data: {
@@ -115,8 +142,8 @@ async function updateGraphs() {
                             id: "y-latency",
                             position: "left",
                             ticks: {
-                                suggestedMin: 10,
-                                suggestedMax: 40
+                                suggestedMin: 0,
+                                suggestedMax: 100
                             }
                         },/*
                         {
@@ -140,6 +167,7 @@ async function updateGraphs() {
             }
         });
     }
+    activateChart(1);
 }
 
 $('#btnDebug').click(async () => {