TV view button. Updated stats bar. Removed tx/second graph. CSS fixes.

frontend/src/app/blockchain/blockchain.component.scss

@@ -28,6 +28,7 @@
 @media (max-width: 767.98px) {
   #divider {
     top: -50px;
+    height: 1300px;
   }
   .position-container {
     top: 100px;

frontend/src/app/footer/footer.component.html

@@ -2,9 +2,9 @@
   <div class="container">
     <div class="my-2 my-md-0 mr-md-3">
       <div *ngIf="memPoolInfo" class="info-block">
-        <span class="unconfirmedTx">Unconfirmed transactions:</span>&nbsp;<b>{{ memPoolInfo?.memPoolInfo?.size | number }} ({{ mempoolBlocks }} block<span [hidden]="mempoolBlocks <= 1">s</span>)</b>
+        <span class="unconfirmedTx">Unconfirmed transactions:</span>&nbsp;<b>{{ memPoolInfo?.memPoolInfo?.size | number }}</b>
         <br />
-        <span class="mempoolSize">Tx per second:</span>&nbsp;<b>{{ memPoolInfo?.txPerSecond | number : '1.2-2' }} tx/s</b>
+        <span class="mempoolSize">Mempool size:</span>&nbsp;<b>{{ mempoolSize | bytes }} ({{ mempoolBlocks }} block<span [hidden]="mempoolBlocks <= 1">s</span>)</b>
         <br />
         <span class="txPerSecond">Tx weight per second:</span>&nbsp;
         

frontend/src/app/footer/footer.component.scss

@@ -23,12 +23,14 @@
 }
 
 .info-block {
-  float:left;
+  float: left;
+  width: 350px;
+  line-height: 25px;
 }
 
 .progress {
   display: inline-flex;
-  width: 150px;
+  width: 160px;
   background-color: #2d3348;
   height: 1.1rem;
 }

frontend/src/app/footer/footer.component.ts

@@ -11,6 +11,7 @@ export class FooterComponent implements OnInit {
   mempoolBlocks = 0;
   progressWidth = '';
   progressClass: string;
+  mempoolSize = 0;
 
   constructor(
     private memPoolService: MemPoolService
@@ -22,9 +23,14 @@ export class FooterComponent implements OnInit {
         this.memPoolInfo = mempoolState;
         this.updateProgress();
       });
-    this.memPoolService.mempoolWeight$
-      .subscribe((mempoolWeight) => {
-        this.mempoolBlocks = Math.ceil(mempoolWeight / 4000000);
+
+    this.memPoolService.projectedBlocks$
+      .subscribe((projectedblocks) => {
+        if (!projectedblocks.length) { return; }
+        const size = projectedblocks.map((m) => m.blockSize).reduce((a, b) => a + b);
+        const weight = projectedblocks.map((m) => m.blockWeight).reduce((a, b) => a + b);
+        this.mempoolSize = size;
+        this.mempoolBlocks = Math.ceil(weight / 4000000);
       });
   }
 

frontend/src/app/master-page/master-page.component.html

@@ -15,6 +15,9 @@
       <li class="nav-item" routerLinkActive="active">
         <a class="nav-link" routerLink="/graphs" (click)="collapse()">Graphs</a>
       </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" routerLink="/tv" (click)="collapse()">TV view &nbsp;<img src="./assets/expand.png" width="15"/></a>
+      </li>
       <li class="nav-item" routerLinkActive="active">
         <a class="nav-link" routerLink="/about" (click)="collapse()">About</a>
       </li>

frontend/src/app/statistics/statistics.component.html

@@ -86,23 +86,6 @@
       </div>
     </div>
 
-    <div class="col-lg-12">
-        <div class="card mb-3" *ngIf="mempoolTransactionsPerSecondData">
-          <div class="card-header">
-            <i class="fa fa-area-chart"></i> Transactions per second (tx/s)</div>
-          <div class="card-body">
-            <div style="height: 600px;">
-              <app-chartist
-                [data]="mempoolTransactionsPerSecondData"
-                [type]="'Line'"
-                [options]="transactionsPerSecondOptions">
-              </app-chartist>
-            </div>
-    
-          </div>
-        </div>
-      </div>
-
   </div>
 
 </div>

frontend/src/app/statistics/statistics.component.ts

@@ -24,11 +24,9 @@ export class StatisticsComponent implements OnInit {
 
   mempoolVsizeFeesData: any;
   mempoolUnconfirmedTransactionsData: any;
-  mempoolTransactionsPerSecondData: any;
   mempoolTransactionsWeightPerSecondData: any;
 
   mempoolVsizeFeesOptions: any;
-  transactionsPerSecondOptions: any;
   transactionsWeightPerSecondOptions: any;
 
   radioGroupForm: FormGroup;
@@ -120,19 +118,6 @@ export class StatisticsComponent implements OnInit {
       ]
     };
 
-    this.transactionsPerSecondOptions = {
-      showArea: false,
-      showLine: true,
-      showPoint: false,
-      low: 0,
-      axisY: {
-        offset: 40
-      },
-      axisX: {
-        labelInterpolationFnc: labelInterpolationFnc
-      },
-    };
-
     this.route
       .fragment
       .subscribe((fragment) => {
@@ -192,13 +177,6 @@ export class StatisticsComponent implements OnInit {
     mempoolStats.reverse();
     const labels = mempoolStats.map(stats => stats.added);
 
-    /** Active admins summed up */
-
-    this.mempoolTransactionsPerSecondData = {
-      labels: labels,
-      series: [mempoolStats.map((stats) => stats.tx_per_second)],
-    };
-
     this.mempoolTransactionsWeightPerSecondData = {
       labels: labels,
       series: [mempoolStats.map((stats) => stats.vbytes_per_second)],

frontend/src/app/television/television.component.scss

@@ -14,6 +14,10 @@
   bottom: 150px;
 }
 
+.chart-holder {
+  height: calc(100% - 220px);
+}
+
 #divider {
   width: 3px;
   height: 175px;
@@ -30,6 +34,12 @@
   top: -28px;
 }
 
-.chart-holder {
-  height: calc(100% - 220px);
-}
+@media (min-width: 1920px) {
+  .position-container {
+    transform: scale(1.3);
+    bottom: 190px;
+  }
+  .chart-holder {
+    height: calc(100% - 280px);
+  }
+}

frontend/src/app/television/television.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, LOCALE_ID, Inject } from '@angular/core';
+import { Component, OnInit, LOCALE_ID, Inject, Renderer2 } from '@angular/core';
 import { ApiService } from '../services/api.service';
 import { formatDate } from '@angular/common';
 import { BytesPipe } from '../shared/pipes/bytes-pipe/bytes.pipe';
@@ -24,11 +24,14 @@ export class TelevisionComponent implements OnInit {
     @Inject(LOCALE_ID) private locale: string,
     private bytesPipe: BytesPipe,
     private memPoolService: MemPoolService,
+    private renderer: Renderer2,
   ) { }
 
   ngOnInit() {
     this.apiService.webSocketWant(['projected-blocks', 'live-2h-chart']);
 
+    this.renderer.addClass(document.body, 'disable-scroll');
+
     const labelInterpolationFnc = (value: any, index: any) => {
       return index % 6  === 0 ? formatDate(value, 'HH:mm', this.locale) : null;
     };