adding txns & fees chart

templates/stats.html.tera

@@ -23,6 +23,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-speedometer2"></i> TRANSACTIONS & FEES</div>
+          <div style="position: relative; height:60vh; width:90vw"><canvas id="3"></canvas></div>
+        </div>
+      </div>
+    </div>
 
   </code>
 
@@ -60,6 +69,7 @@
       options: options
     });
 
+
     <!-- Hashrate Chart -->
     var options = {
       maintainAspectRatio: false,
@@ -70,11 +80,23 @@
         legend: {
           display: false
         },
+      },
+      scales: {
+        x: { 
+          grid: {
+            display: false
+          }
+        },
+        y: {
+          grid: {
+            display: false
+          }
+        },
       }
     };
 
     var data = {
-      labels: {{ hash_date }},
+      labels: {{ date }},
       datasets: [{
         label: 'Hashrate (kG/s)',
         data: {{ hashrate }},
@@ -91,6 +113,56 @@
       options: options
     });
     
+
+    <!-- Transactions & Fees Chart -->
+    var options = {
+      maintainAspectRatio: false,
+      interaction: {
+        intersect: false,
+      },
+      plugins: {
+        legend: {
+          display: true
+        },
+      },
+      scales: {
+        x: { 
+          grid: {
+            display: false
+          }
+        },
+        y: {
+          grid: {
+            display: false
+          }
+        },
+      }
+    };
+
+    var data = {
+      labels: {{ date }},
+      datasets: [
+        {
+          label: 'Transactions',
+          data: {{ txns }},
+          fill: false,
+          tension: 0.1
+        },
+        {
+          label: 'Fees',
+          data: {{ fees }},
+          fill: false,
+          tension: 0.1
+        }
+      ]
+    };
+
+    new Chart(document.getElementById("3"), {
+      type: 'line',
+      data: data,
+      options: options
+    });
+    
   </script>