Merge branch 'master' into nymkappa/bugfix/block-prediction-chart-no-data

frontend/src/app/components/block-audit/block-audit.component.html

@@ -0,0 +1,111 @@
+<div class="container-xl" (window:resize)="onResize($event)">
+
+  <div *ngIf="(auditObservable$ | async) as blockAudit; else skeleton">
+    <div class="title-block" id="block">
+      <h1>
+        <span class="next-previous-blocks">
+          <span i18n="shared.block-title">Block </span>
+          &nbsp;
+          <a [routerLink]="['/block/' | relativeUrl, blockAudit.id]">{{ blockAudit.height }}</a>
+          &nbsp;
+          <span i18n="shared.template-vs-mined">Template vs Mined</span>
+        </span>
+      </h1>
+
+      <div class="grow"></div>
+
+      <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm">&#10005;</button>
+    </div>
+
+    <!-- OVERVIEW -->
+    <div class="box mb-3">
+      <div class="row">
+        <!-- LEFT COLUMN -->
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td class="td-width" i18n="block.hash">Hash</td>
+                <td><a [routerLink]="['/block/' | relativeUrl, blockAudit.id]" title="{{ blockAudit.id }}">{{ blockAudit.id | shortenString : 13 }}</a>
+                  <app-clipboard class="d-none d-sm-inline-block" [text]="blockAudit.id"></app-clipboard>
+                </td>
+              </tr>
+              <tr>
+                <td i18n="blockAudit.timestamp">Timestamp</td>
+                <td>
+                  &lrm;{{ blockAudit.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
+                  <div class="lg-inline">
+                    <i class="symbol">(<app-time-since [time]="blockAudit.timestamp" [fastRender]="true">
+                      </app-time-since>)</i>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td i18n="blockAudit.size">Size</td>
+                <td [innerHTML]="'&lrm;' + (blockAudit.size | bytes: 2)"></td>
+              </tr>
+              <tr>
+                <td i18n="block.weight">Weight</td>
+                <td [innerHTML]="'&lrm;' + (blockAudit.weight | wuBytes: 2)"></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- RIGHT COLUMN -->
+        <div class="col-sm" *ngIf="blockAudit">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td class="td-width" i18n="shared.transaction-count">Transactions</td>
+                <td>{{ blockAudit.tx_count }}</td>
+              </tr>
+              <tr>
+                <td i18n="block.match-rate">Match rate</td>
+                <td>{{ blockAudit.matchRate }}%</td>
+              </tr>
+              <tr>
+                <td i18n="block.missing-txs">Missing txs</td>
+                <td>{{ blockAudit.missingTxs.length }}</td>
+              </tr>
+              <tr>
+                <td i18n="block.added-txs">Added txs</td>
+                <td>{{ blockAudit.addedTxs.length }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div> <!-- row -->
+    </div> <!-- box -->
+
+    <!-- ADDED vs MISSING button -->
+    <div class="d-flex justify-content-center menu mt-3" *ngIf="isMobile">
+      <a routerLinkActive="active" class="btn btn-primary w-50 mr-1 ml-1 menu-button" i18n="block.missing-txs"
+        fragment="missing" (click)="changeMode('missing')">Missing</a>
+      <a routerLinkActive="active" class="btn btn-primary w-50 mr-1 ml-1 menu-button" i18n="block.added-txs"
+        fragment="added" (click)="changeMode('added')">Added</a>
+    </div>
+  </div>
+
+  <!-- VISUALIZATIONS -->
+  <div class="box">
+    <div class="row">
+      <!-- MISSING TX RENDERING -->
+      <div class="col-sm" *ngIf="webGlEnabled">
+        <app-block-overview-graph #blockGraphTemplate [isLoading]="isLoading" [resolution]="75"
+          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false"
+          (txClickEvent)="onTxClick($event)"></app-block-overview-graph>
+      </div>
+
+      <!-- ADDED TX RENDERING -->
+      <div class="col-sm" *ngIf="webGlEnabled && !isMobile">
+        <app-block-overview-graph #blockGraphMined [isLoading]="isLoading" [resolution]="75"
+          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false"
+          (txClickEvent)="onTxClick($event)"></app-block-overview-graph>
+      </div>
+    </div> <!-- row -->
+  </div> <!-- box -->
+
+  <ng-template #skeleton></ng-template>
+
+</div>

frontend/src/app/components/block-audit/block-audit.component.scss

@@ -0,0 +1,40 @@
+.title-block {
+  border-top: none;
+}
+
+.table {
+  tr td {
+    &:last-child {
+      text-align: right;
+      @media (min-width: 768px) {
+        text-align: left;
+      }
+    }
+  }
+}
+
+.block-tx-title {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  position: relative;
+  @media (min-width: 550px) {
+    flex-direction: row;
+  }
+  h2 {
+    line-height: 1;
+    margin: 0;
+    position: relative;
+    padding-bottom: 10px;
+    @media (min-width: 550px) {
+      padding-bottom: 0px;
+      align-self: end;
+    }
+  }
+}
+
+.menu-button {
+  @media (min-width: 768px) {
+    max-width: 150px;
+  }
+}

frontend/src/app/components/block-audit/block-audit.component.ts

@@ -0,0 +1,120 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, share, switchMap, tap } from 'rxjs/operators';
+import { BlockAudit, TransactionStripped } from 'src/app/interfaces/node-api.interface';
+import { ApiService } from 'src/app/services/api.service';
+import { StateService } from 'src/app/services/state.service';
+import { detectWebGL } from 'src/app/shared/graphs.utils';
+import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { BlockOverviewGraphComponent } from '../block-overview-graph/block-overview-graph.component';
+
+@Component({
+  selector: 'app-block-audit',
+  templateUrl: './block-audit.component.html',
+  styleUrls: ['./block-audit.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
+})
+export class BlockAuditComponent implements OnInit, OnDestroy {
+  blockAudit: BlockAudit = undefined;
+  transactions: string[];
+  auditObservable$: Observable<BlockAudit>;
+
+  paginationMaxSize: number;
+  page = 1;
+  itemsPerPage: number;
+
+  mode: 'missing' | 'added' = 'missing';
+  isLoading = true;
+  webGlEnabled = true;
+  isMobile = window.innerWidth <= 767.98;
+
+  @ViewChild('blockGraphTemplate') blockGraphTemplate: BlockOverviewGraphComponent;
+  @ViewChild('blockGraphMined') blockGraphMined: BlockOverviewGraphComponent;
+
+  constructor(
+    private route: ActivatedRoute,
+    public stateService: StateService,
+    private router: Router,
+    private apiService: ApiService
+  ) {
+    this.webGlEnabled = detectWebGL();
+  }
+
+  ngOnDestroy(): void {
+  }
+
+  ngOnInit(): void {
+    this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
+    this.itemsPerPage = this.stateService.env.ITEMS_PER_PAGE;
+
+    this.auditObservable$ = this.route.paramMap.pipe(
+      switchMap((params: ParamMap) => {
+        const blockHash: string = params.get('id') || '';
+        return this.apiService.getBlockAudit$(blockHash)
+          .pipe(
+            map((response) => {
+              const blockAudit = response.body;
+              for (let i = 0; i < blockAudit.template.length; ++i) {
+                if (blockAudit.missingTxs.includes(blockAudit.template[i].txid)) {
+                  blockAudit.template[i].status = 'missing';
+                } else if (blockAudit.addedTxs.includes(blockAudit.template[i].txid)) {
+                  blockAudit.template[i].status = 'added';
+                } else {
+                  blockAudit.template[i].status = 'found';
+                }
+              }
+              for (let i = 0; i < blockAudit.transactions.length; ++i) {
+                if (blockAudit.missingTxs.includes(blockAudit.transactions[i].txid)) {
+                  blockAudit.transactions[i].status = 'missing';
+                } else if (blockAudit.addedTxs.includes(blockAudit.transactions[i].txid)) {
+                  blockAudit.transactions[i].status = 'added';
+                } else {
+                  blockAudit.transactions[i].status = 'found';
+                }
+              }
+              return blockAudit;
+            }),
+            tap((blockAudit) => {
+              this.changeMode(this.mode);
+              if (this.blockGraphTemplate) {
+                this.blockGraphTemplate.destroy();
+                this.blockGraphTemplate.setup(blockAudit.template);
+              }
+              if (this.blockGraphMined) {
+                this.blockGraphMined.destroy();
+                this.blockGraphMined.setup(blockAudit.transactions);
+              }
+              this.isLoading = false;
+            }),
+          );
+      }),
+      share()
+    );
+  }
+
+  onResize(event: any) {
+    this.isMobile = event.target.innerWidth <= 767.98;
+    this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
+  }
+
+  changeMode(mode: 'missing' | 'added') {
+    this.router.navigate([], { fragment: mode });
+    this.mode = mode;
+  }
+
+  onTxClick(event: TransactionStripped): void {
+    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.txid}`);
+    this.router.navigate([url]);
+  }
+
+  pageChange(page: number, target: HTMLElement) {
+  }
+}

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html

@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-fee-rates">Block Fee Rates</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-fee-rates">Block Fee Rates</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">

frontend/src/app/components/block-fees-graph/block-fees-graph.component.html

@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-fees">Block Fees</span>
-      <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-fees">Block Fees</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -1,6 +1,5 @@
 import { Component, ElementRef, ViewChild, HostListener, Input, Output, EventEmitter, NgZone, AfterViewInit, OnDestroy } from '@angular/core';
-import { MempoolBlockDelta, TransactionStripped } from 'src/app/interfaces/websocket.interface';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { TransactionStripped } from 'src/app/interfaces/websocket.interface';
 import { FastVertexArray } from './fast-vertex-array';
 import BlockScene from './block-scene';
 import TxSprite from './tx-sprite';

frontend/src/app/components/block-overview-graph/tx-view.ts

@@ -25,6 +25,7 @@ export default class TxView implements TransactionStripped {
   vsize: number;
   value: number;
   feerate: number;
+  status?: 'found' | 'missing' | 'added';
 
   initialised: boolean;
   vertexArray: FastVertexArray;
@@ -43,6 +44,7 @@ export default class TxView implements TransactionStripped {
     this.vsize = tx.vsize;
     this.value = tx.value;
     this.feerate = tx.fee / tx.vsize;
+    this.status = tx.status;
     this.initialised = false;
     this.vertexArray = vertexArray;
 
@@ -140,6 +142,16 @@ export default class TxView implements TransactionStripped {
   }
 
   getColor(): Color {
+    // Block audit
+    if (this.status === 'found') {
+      // return hexToColor('1a4987');
+    } else if (this.status === 'missing') {
+      return hexToColor('039BE5');
+    } else if (this.status === 'added') {
+      return hexToColor('D81B60');
+    }
+
+    // Block component
     const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, this.feerate) < feeLvl) - 1;
     return hexToColor(mempoolFeeColors[feeLevelIndex] || mempoolFeeColors[mempoolFeeColors.length - 1]);
   }

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html

@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span>
-      <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html

@@ -3,10 +3,13 @@
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
-  <span i18n="mining.block-rewards">Block Rewards</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-rewards">Block Rewards</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+  
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html

@@ -1,10 +1,12 @@
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-sizes-weights">Block Sizes and Weights</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-sizes-weights">Block Sizes and Weights</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/components/block/block.component.ts

@@ -12,6 +12,7 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.
 import { BlockExtended, TransactionStripped } from 'src/app/interfaces/node-api.interface';
 import { ApiService } from 'src/app/services/api.service';
 import { BlockOverviewGraphComponent } from 'src/app/components/block-overview-graph/block-overview-graph.component';
+import { detectWebGL } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-block',
@@ -390,10 +391,4 @@ export class BlockComponent implements OnInit, OnDestroy {
     const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.txid}`);
     this.router.navigate([url]);
   }
-}
-
-function detectWebGL() {
-  const canvas = document.createElement('canvas');
-  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
-  return (gl && gl instanceof WebGLRenderingContext);
-}
+}

frontend/src/app/components/graphs/graphs.component.html

@@ -31,9 +31,13 @@
     <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="lightning">Lightning</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
       <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]"
-        i18n="lightning.nodes-networks">Nodes per network</a>
+        i18n="lightning.nodes-networks">Lightning nodes per network</a>
       <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/capacity' | relativeUrl]"
         i18n="lightning.capacity">Network capacity</a>
+      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-per-isp' | relativeUrl]"
+        i18n="lightning.nodes-per-isp">Lightning nodes per ISP</a>
+      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-per-country' | relativeUrl]"
+        i18n="lightning.nodes-per-isp">Lightning nodes per country</a>
     </div>
   </div>
 </div>

frontend/src/app/components/hashrate-chart/hashrate-chart.component.html

@@ -23,10 +23,12 @@
   </div>
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
-    <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -109,7 +109,7 @@ export class HashrateChartComponent implements OnInit {
                     while (hashIndex < data.hashrates.length) {
                       diffFixed.push({
                         timestamp: data.hashrates[hashIndex].timestamp,
-                        difficulty: data.difficulty[data.difficulty.length - 1].difficulty
+                        difficulty: data.difficulty.length > 0 ?  data.difficulty[data.difficulty.length - 1].difficulty : null
                       });
                       ++hashIndex;
                     }
@@ -231,11 +231,15 @@ export class HashrateChartComponent implements OnInit {
             } else if (tick.seriesIndex === 1) { // Difficulty
               let difficultyPowerOfTen = hashratePowerOfTen;
               let difficulty = tick.data[1];
-              if (this.isMobile()) {
-                difficultyPowerOfTen = selectPowerOfTen(tick.data[1]);
-                difficulty = Math.round(tick.data[1] / difficultyPowerOfTen.divider);
+              if (difficulty === null) {
+                difficultyString = `${tick.marker} ${tick.seriesName}: No data<br>`;  
+              } else {
+                if (this.isMobile()) {
+                  difficultyPowerOfTen = selectPowerOfTen(tick.data[1]);
+                  difficulty = Math.round(tick.data[1] / difficultyPowerOfTen.divider);
+                }
+                difficultyString = `${tick.marker} ${tick.seriesName}: ${formatNumber(difficulty, this.locale, '1.2-2')} ${difficultyPowerOfTen.unit}<br>`;
               }
-              difficultyString = `${tick.marker} ${tick.seriesName}: ${formatNumber(difficulty, this.locale, '1.2-2')} ${difficultyPowerOfTen.unit}<br>`;
             } else if (tick.seriesIndex === 2) { // Hashrate MA
               let hashrate = tick.data[1];
               if (this.isMobile()) {

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -2,11 +2,14 @@
 
 <div class="full-container">
 
-  <div class="card-header  mb-0 mb-md-4">
-    <span i18n="mining.pools-dominance">Pools Dominance</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+  <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.pools-dominance">Pools Dominance</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">

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

@@ -44,9 +44,6 @@
       <li class="nav-item" routerLinkActive="active" id="btn-graphs">
         <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
       </li>
-      <li class="nav-item d-none d-lg-block" routerLinkActive="active" id="btn-tv">
-        <a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>
-      </li>
       <li class="nav-item" routerLinkActive="active" id="btn-docs">
         <a class="nav-link" [routerLink]="['/docs' | relativeUrl ]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="documentation.title" title="Documentation"></fa-icon></a>
       </li>

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -32,10 +32,12 @@
   </div>
 
   <div class="card-header" *ngIf="!widget">
-    <span i18n="mining.pools">Pools Ranking</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.pools">Pools Ranking</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
     <form [formGroup]="radioGroupForm" class="formRadioGroup"
       *ngIf="!widget && (miningStatsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

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

@@ -3,14 +3,22 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <i class="fa fa-area-chart"></i>
-          <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
-          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
-            <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-          </button>
+          <div class="d-flex d-md-block align-items-baseline">
+            <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
+            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
+              <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+            </button>
+          </div>  
 
           <form [formGroup]="radioGroupForm" class="formRadioGroup"
             [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
+            <div *ngIf="!isMobile()" class="btn-group btn-group-toggle">
+              <label ngbButtonLabel class="btn-primary btn-sm mr-2">
+                <a [routerLink]="['/tv' | relativeUrl]" style="color: white">
+                  <fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon>
+                </a>
+                </label>
+            </div>
             <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
               <label ngbButtonLabel class="btn-primary btn-sm">
                 <input ngbButton type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h"> 2H
@@ -84,11 +92,12 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <i class="fa fa-area-chart"></i>
-          <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
-          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
-            <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-          </button>
+          <div class="d-flex d-md-block align-items-baseline">
+            <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
+            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
+              <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+            </button>
+          </div>  
         </div>
 
         <div class="card-body">

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

@@ -210,4 +210,8 @@ export class StatisticsComponent implements OnInit {
       this.incomingGraph.onSaveChart(this.timespan);
     }
   }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
 }