added bounding box to the chart

tools/web_monitor/app.py

@@ -64,9 +64,11 @@ async def miner_websocket(websocket: WebSocket, miner_ip):
             except asyncio.exceptions.TimeoutError:
                 data = {"error": "The miner is not responding."}
                 await websocket.send_json(data)
+                await asyncio.sleep(.5)
             except KeyError:
                 data = {"error": "The miner returned incorrect data."}
                 await websocket.send_json(data)
+                await asyncio.sleep(.5)
     except WebSocketDisconnect:
         print("Websocket disconnected.")
         pass

tools/web_monitor/templates/miner.html

@@ -15,8 +15,22 @@
 </div>
 
 
+<div class="row">
+    <div class="col-10">
+        <canvas id="line-chart" class="grad-border mt-3" width="600" height="360"></canvas>
+    </div>
+    <div class="col-2 mt-2">
+        <div class="d-flex justify-content-center">Fan 1</div>
+        <canvas class="mb-2" id="fan-chart-1" width="100" height="100"></canvas>
+        <div class="d-flex justify-content-center">Fan 2</div>
+        <canvas class="mb-2" id="fan-chart-2" width="100" height="100"></canvas>
+        <div class="d-flex justify-content-center">Fan 3</div>
+        <canvas class="mb-2" id="fan-chart-3" width="100" height="100"></canvas>
+        <div class="d-flex justify-content-center">Fan 4</div>
+        <canvas class="mb-2" id="fan-chart-4" width="100" height="100"></canvas>
+    </div>
+</div>
 
-<canvas id="line-chart" width="600" height="360" class="mt-3"></canvas>
 <div id="errorContainer" class="d-flex align-items-center mt-4 ms-4 alert alert-danger invisible">
     <strong id="errorCode"></strong>
   <div class="spinner-border ms-auto"></div>
@@ -40,8 +54,8 @@ ws.onmessage = function(event) {
             err_container.classList.add("invisible")
         }
         datetime = luxon.DateTime.fromISO(new_data["datetime"]).toLocal();
-        if (minerDataChart.data.labels.length > 49) minerDataChart.data.labels.shift();
+        if (minerDataChart.data.labels.length > 50) minerDataChart.data.labels.shift();
-        if (minerDataChart.data.datasets[0].data.length > 49) minerDataChart.data.datasets[0].data.shift();
+        if (minerDataChart.data.datasets[0].data.length > 50) minerDataChart.data.datasets[0].data.shift();
         minerDataChart.data.labels.push(datetime.toLocaleString(luxon.DateTime.TIME_WITH_SECONDS));
         minerDataChart.data.datasets[0].data.push(new_data["hashrate"]);
         minerDataChart.update();
@@ -49,11 +63,23 @@ ws.onmessage = function(event) {
 };
 
 var ctx = document.getElementById("line-chart").getContext("2d");
-var width = window.innerWidth || document.body.clientWidth;
+var width = document.getElementById("line-chart").width;
 var chartGradient = ctx.createLinearGradient(0, 0, width, 0)
 chartGradient.addColorStop(0, '#D0368A');
 chartGradient.addColorStop(1, '#708AD4');
 
+const chartAreaBorder = {
+  id: 'chartAreaBorder',
+  beforeDraw(chart, args, options) {
+    const {ctx, chartArea: {left, top, width, height}} = chart;
+    ctx.save();
+    ctx.strokeStyle = options.borderColor;
+    ctx.lineWidth = options.borderWidth;
+    ctx.strokeRect(left, top, width, height);
+    ctx.restore();
+  }
+};
+
 var minerDataChart = new Chart(document.getElementById("line-chart"), {
   type: 'line',
   data: {
@@ -71,15 +97,20 @@ var minerDataChart = new Chart(document.getElementById("line-chart"), {
       }
     ]
   },
+  plugins: [chartAreaBorder],
   options: {
       animation: {
         easing: 'easeInSine',
         duration: 250
       },
       plugins: {
-            legend: {
+        chartAreaBorder: {
-                display: false
+          borderColor: chartGradient,
-            }
+          borderWidth: 1
+        },
+        legend: {
+            display: false
+        }
       },
     scales: {
         y: {
@@ -89,12 +120,96 @@ var minerDataChart = new Chart(document.getElementById("line-chart"), {
         },
         x: {
             ticks: {
-                maxTicksLimit: 8,
+                maxTicksLimit: 6,
                 maxRotation: 0
             }
         }
     }
   }
 });
+
+var options_fans = {
+    animation: {
+        duration: 0,
+    },
+    aspectRatio: 1.5,
+    events: [],
+    responsive: true,
+    plugins: {
+        legend: {
+            display: false,
+        }
+    }
+};
+
+var fan1Chart = new Chart(document.getElementById("fan-chart-1"), {
+    type: "doughnut",
+    data: {
+        labels: ["Fan 1"],
+        datasets: [
+            {
+                data: [100, 200],
+                // add colors
+                backgroundColor: [
+                    "rgba(103, 0, 221, 1)",
+                    "rgba(199, 199, 199, 1)"
+                ]
+            },
+        ]
+    },
+    options: options_fans
+});
+var fan2Chart = new Chart(document.getElementById("fan-chart-2"), {
+    type: "doughnut",
+    data: {
+        labels: ["Fan 2"],
+        datasets: [
+            {
+                data: [100, 200],
+                // add colors
+                backgroundColor: [
+                    "rgba(103, 0, 221, 1)",
+                    "rgba(199, 199, 199, 1)"
+                ]
+            },
+        ]
+    },
+    options: options_fans
+});
+var fan3Chart = new Chart(document.getElementById("fan-chart-3"), {
+    type: "doughnut",
+    data: {
+        labels: ["Fan 3"],
+        datasets: [
+            {
+                data: [100, 200],
+                // add colors
+                backgroundColor: [
+                    "rgba(103, 0, 221, 1)",
+                    "rgba(199, 199, 199, 1)"
+                ]
+            },
+        ]
+    },
+    options: options_fans
+});
+var fan4Chart = new Chart(document.getElementById("fan-chart-4"), {
+    type: "doughnut",
+    data: {
+        labels: ["Fan 4"],
+        datasets: [
+            {
+                data: [100, 200],
+                // add colors
+                backgroundColor: [
+                    "rgba(103, 0, 221, 1)",
+                    "rgba(199, 199, 199, 1)"
+                ]
+            },
+        ]
+    },
+    options: options_fans
+});
+
 </script>
 {% endblock content %}