adding kernels chart

templates/stats.html.tera

@@ -41,6 +41,15 @@
         </div>
       </div>
     </div>
+    
+    <div class="card border-bottom-0 border-start-0 border-end-0 rounded-0">
+      <div class="card-body" align="center">
+        <div class="value-text">
+          <div class="darkorange-text"><i class="bi bi-card-list"></i> KERNELS</div>
+          <div style="position: relative; height:60vh; width:90vw"><canvas id="5"></canvas></div>
+        </div>
+      </div>
+    </div>
 
   </code>
 
@@ -125,7 +134,7 @@
 
 
     <!-- Hashrate Chart -->
-    var ctx_hash = document.getElementById('2').getContext('2d');
+    var ctx_hash = document.getElementById('3').getContext('2d');
     var gradient_hash = ctx_hash.createLinearGradient(0, 0, 0, 600);
     gradient_hash.addColorStop(0, 'rgba(178, 81, 16, 1)');
     gradient_hash.addColorStop(1, 'rgba(255, 158, 93, 0)');
@@ -174,7 +183,7 @@
     
 
     <!-- Unspent Outputs Chart -->
-    var ctx_utxo = document.getElementById('2').getContext('2d');
+    var ctx_utxo = document.getElementById('4').getContext('2d');
     var gradient_utxo = ctx_hash.createLinearGradient(0, 0, 0, 600);
     gradient_utxo.addColorStop(0, 'rgba(178, 81, 16, 1)');
     gradient_utxo.addColorStop(1, 'rgba(255, 158, 93, 0)');
@@ -234,6 +243,68 @@
       options: options
     });
     
+
+    <!-- Kernels Chart -->
+    var ctx_kernel = document.getElementById('5').getContext('2d');
+    var gradient_kernel = ctx_kernel.createLinearGradient(0, 0, 0, 600);
+    gradient_kernel.addColorStop(0, 'rgba(178, 81, 16, 1)');
+    gradient_kernel.addColorStop(1, 'rgba(255, 158, 93, 0)');
+
+    var options = {
+      maintainAspectRatio: false,
+      interaction: {
+        intersect: false,
+      },
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          callbacks: {
+            footer: function(tooltipItems) {
+              let size = 0;
+              tooltipItems.forEach(function(tooltipItem) {
+                size = tooltipItem.parsed.y * {{ kernel_size }} / 1000 / 1000;
+              });
+              return 'Size: ' + size.toFixed(2) + ' MB';
+            }
+          }
+        }
+      },
+      scales: {
+        x: { 
+          grid: {
+            display: false
+          }
+        },
+        y: {
+          grid: {
+            display: false
+          }
+        },
+      }
+    };
+
+    var data = {
+      labels: {{ date }},
+      datasets: [
+        {
+          label: 'Kernels',
+          data: {{ kernels }},
+          fill: true,
+          borderColor: "#b25110",
+          backgroundColor: gradient_utxo,
+          tension: 0.1
+        }
+      ]
+    };
+
+    new Chart(document.getElementById("5"), {
+      type: 'line',
+      data: data,
+      options: options
+    });
+    
   </script>