add the start of a temperature graph to miner page

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',