add the start of a temperature graph to miner page

tools/web_monitor/static/navbar.css

@@ -155,11 +155,11 @@ main {
   background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
 }
 
-.nav-link:hover {
+.navbar-link:hover {
   background-image: linear-gradient(180deg, #760A45 0%, #23449F 99%);
 }
 
-.nav-link {
+.navbar-link {
     transition: unset;
     color: unset;
 }

tools/web_monitor/templates/miner.html

@@ -37,9 +37,27 @@
 
 
 <div class="row">
-    <div class="col-12 line_chart">
-        <canvas id="line-chart" class="grad-border mt-3" width="600" height="200"></canvas>
+    <ul class="nav nav-tabs" id="myTab" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link active text-dark" id="hashrate-tab" data-bs-toggle="tab" data-bs-target="#hashrate" type="button" role="tab" aria-controls="hashrate" aria-selected="true">Hashrate</button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link text-dark" id="temp-tab" data-bs-toggle="tab" data-bs-target="#temp" type="button" role="tab" aria-controls="temp" aria-selected="false">Temperature</button>
+      </li>
+    </ul>
+    <div class="tab-content" id="hashrateTempTabs">
+      <div class="tab-pane fade show active" id="hashrate" role="tabpanel" aria-labelledby="hashrate-tab">
+        <div class="col-12 line_chart">
+            <canvas id="hr-chart" class="grad-border mt-3" width="600" height="200"></canvas>
+        </div>
+      </div>
+      <div class="tab-pane fade" id="temp" role="tabpanel" aria-labelledby="temp-tab">
+        <div class="col-12 line_chart">
+            <canvas id="temp-chart" class="grad-border mt-3" width="600" height="200"></canvas>
+        </div>
+      </div>
     </div>
+
     <div class="col-3">
         <div class="d-flex justify-content-center text-nowrap" id="fan1">Fan 1</div>
         <canvas class="mb-2" id="fan-chart-1" width="100" height="100"></canvas>
@@ -86,7 +104,7 @@ ws.onmessage = function(event) {
         var miner_hr = document.getElementById("minerHashrate")
         miner_hr.innerHTML = "?"
     } else {
-        var chart = document.getElementById("line-chart")
+        var chart = document.getElementById("hr-chart")
         var err_container = document.getElementById("errorContainer")
         if (!err_container.classList.hasOwnProperty("invisible")) {
             err_container.classList.add("invisible")
@@ -116,8 +134,8 @@ ws.onmessage = function(event) {
     };
 };
 
-var ctx = document.getElementById("line-chart").getContext("2d");
-var width = document.getElementById("line-chart").width;
+var ctx = document.getElementById("hr-chart").getContext("2d");
+var width = document.getElementById("hr-chart").width;
 var chartGradient = ctx.createLinearGradient(0, 0, width, 0)
 chartGradient.addColorStop(0, '#D0368A');
 chartGradient.addColorStop(1, '#708AD4');
@@ -134,7 +152,7 @@ const chartAreaBorder = {
   }
 };
 
-var minerDataChart = new Chart(document.getElementById("line-chart"), {
+var minerDataChart = new Chart(document.getElementById("hr-chart"), {
   type: 'line',
   data: {
     labels: [
@@ -196,6 +214,68 @@ var minerDataChart = new Chart(document.getElementById("line-chart"), {
   }
 });
 
+var minerTempChart = new Chart(document.getElementById("temp-chart"), {
+  type: 'line',
+  data: {
+    labels: [
+    ],
+    datasets: [{
+          label: "Temperature",
+          borderColor: chartGradient,
+          pointBorderColor: chartGradient,
+          pointBackgroundColor: chartGradient,
+          pointHoverBackgroundColor: chartGradient,
+          pointHoverBorderColor: chartGradient,
+        data: [
+        ],
+      }
+    ]
+  },
+  plugins: [chartAreaBorder],
+  options: {
+      animation: {
+        easing: 'easeInSine',
+        duration: 0
+      },
+      plugins: {
+        chartAreaBorder: {
+          borderColor: chartGradient,
+          borderWidth: 1
+        },
+        legend: {
+            labels: {
+                color: chartGradient
+            }
+        },
+        tooltip: {
+            callbacks: {
+                label: function(data) {
+                    return data.dataset.data[data.dataIndex] + " °C";
+                }
+            }
+        }
+      },
+    scales: {
+        y: {
+            min: 0, // minimum value
+            suggestedMax: 100,
+            stepSize: 5,
+            ticks: {
+                callback: function(value, index, ticks) {
+                    return value + " °C";
+                }
+            }
+        },
+        x: {
+            ticks: {
+                maxTicksLimit: 6,
+                maxRotation: 0
+            }
+        }
+    }
+  }
+});
+
 var options_fans = {
     animation: {
         easing: 'easeInSine',

tools/web_monitor/templates/navbar.html

@@ -53,27 +53,27 @@
       <div class="position-sticky pt-3">
         <ul class="nav nav-pills flex-column">
           <li class="nav-item mb-1 mx-2">
-            <a href="/dashboard" class="nav-link {% if request.path.strip('/') == 'dashboard' %}active{% else %}text-white{% endif %}">
+            <a href="/dashboard" class="nav-link navbar-link {% if request.path.strip('/') == 'dashboard' %}active{% else %}text-white{% endif %}">
               <svg class="bi me-2" width="16" height="16"><use xlink:href="#dashboard"></use></svg>
               Dashboard
             </a>
           </li>
           <li class="nav-item mb-1 mx-2">
-            <a href="" class="nav-link {% if request.path.strip('/') == 'scan' or request.path.split('/')[1] == 'miner' %}active{% else %}text-white{% endif %}" data-bs-toggle="collapse" data-bs-target="#miners-collapse" aria-expanded="false">
+            <a href="" class="nav-link navbar-link {% if request.path.strip('/') == 'scan' or request.path.split('/')[1] == 'miner' %}active{% else %}text-white{% endif %}" data-bs-toggle="collapse" data-bs-target="#miners-collapse" aria-expanded="false">
               <svg class="bi me-2" width="16" height="16"><use xlink:href="#miners"></use></svg>
               Miners
             </a>
             <div class="collapse mt-1" id="miners-collapse" style="">
               <ul id="navMiners" class="btn-toggle-nav overflow-auto list-unstyled fw-normal pb-1 small">
                   <li>
-                  <a href="/scan" class="nav-link {% if request.path.strip('/') == 'scan' %}active{% else %}text-white{% endif %}">
+                  <a href="/scan" class="nav-link navbar-link {% if request.path.strip('/') == 'scan' %}active{% else %}text-white{% endif %}">
                     <svg class="bi me-2 mt-1" width="16" height="16"><use xlink:href="#scan"></use></svg>
                     Add Miners
                   </a>
                 </li>
                 {% for miner in cur_miners %}
                   <li>
-                    <a href="/miner/{{miner}}" class="nav-link {% if request.path.strip('/') == 'miner/' + miner %}active{% else %}text-white{% endif %}">
+                    <a href="/miner/{{miner}}" class="nav-link navbar-link {% if request.path.strip('/') == 'miner/' + miner %}active{% else %}text-white{% endif %}">
                       <svg class="bi me-2 mt-1" width="16" height="16"><use xlink:href="#miner"></use></svg>
                       {{miner}}
                     </a>
@@ -87,7 +87,7 @@
           <li class="border-top my-3"></li>
 
           <li class="nav-item mb-1 mx-2">
-            <a href="/settings" class="nav-link {% if request.path.strip('/') == 'settings' %}active{% else %}text-white{% endif %}">
+            <a href="/settings" class="nav-link navbar-link {% if request.path.strip('/') == 'settings' %}active{% else %}text-white{% endif %}">
               <svg class="bi me-2" width="16" height="16"><use xlink:href="#settings"></use></svg>
               Settings
             </a>