adding kernels chart

src/data.rs

@@ -249,6 +249,8 @@ pub struct Statistics {
     pub fees:       Vec<String>,
     // UTXOs
     pub utxo_count: Vec<String>,
+    // Kernels
+    pub kernels:    Vec<String>,
 }
 
 impl Statistics {
@@ -262,6 +264,7 @@ impl Statistics {
             txns:       Vec::new(),
             fees:       Vec::new(),
             utxo_count: Vec::new(),
+            kernels:    Vec::new(),
         }
     }
 }

src/main.rs

@@ -225,7 +225,9 @@ fn stats(statistics: &State<Arc<Mutex<Statistics>>>) -> Template {
         txns:        data.txns.clone(),
         fees:        data.fees.clone(),
         utxo_count:  data.utxo_count.clone(),
+        kernels:     data.kernels.clone(),
         output_size: OUTPUT_SIZE,
+        kernel_size: KERNEL_SIZE,
     })
 }
 
@@ -677,7 +679,7 @@ fn unspent_outputs(dashboard: &State<Arc<Mutex<Dashboard>>>) -> String {
 fn kernels(dashboard: &State<Arc<Mutex<Dashboard>>>) -> String {
     let data = dashboard.lock().unwrap();
 
-    if data.utxo_count.is_empty() == false {
+    if data.kernel_mmr_size.is_empty() == false {
         let kernel_count    = data.kernel_mmr_size.parse::<u64>().unwrap() / 2;
         let mut kernel_size = kernel_count as f64 * KERNEL_SIZE as f64 / 1000.0 / 1000.0;
         let mut unit        = "MB";

src/worker.rs

@@ -38,6 +38,7 @@ pub async fn stats(dash: Arc<Mutex<Dashboard>>, txns: Arc<Mutex<Transactions>>,
         stats.txns.remove(0);
         stats.fees.remove(0);
         stats.utxo_count.remove(0);
+        stats.kernels.remove(0);
     }
 
     stats.date.push(format!("\"{}\"", Utc::now().format("%d-%m-%Y")));
@@ -46,6 +47,9 @@ pub async fn stats(dash: Arc<Mutex<Dashboard>>, txns: Arc<Mutex<Transactions>>,
     stats.fees.push(txns.fees_24h.clone());
     stats.utxo_count.push(dash.utxo_count.clone());
 
+    let kernel_count = dash.kernel_mmr_size.parse::<u64>().unwrap() / 2;
+    stats.kernels.push(kernel_count.to_string());
+
     Ok(())
 }
 

templates/stats.html.tera

@@ -42,6 +42,15 @@
       </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>
 
   <script>
@@ -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>