Responsive mempool blocks.

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -10,8 +10,8 @@
           </div>
           <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
           <div class="transaction-count">{{ projectedBlock.nTx }} transactions</div>
-          <div class="time-difference" *ngIf="i !== 3">In ~{{ 10 * i + 10 }} minutes</div>
-          <ng-template [ngIf]="i === 3 && mempoolBlocks?.length >= 4 && (projectedBlock.blockVSize / 1000000 | ceil) > 1">
+          <div class="time-difference" *ngIf="projectedBlock.blockVSize < 1000000">In ~{{ 10 * i + 10 }} minutes</div>
+          <ng-template [ngIf]="i === mempoolBlocks.length - 1 && projectedBlock.blockVSize >= 1000000">
             <div class="time-difference">+{{ projectedBlock.blockVSize / 1000000 | ceil }} blocks</div>
           </ng-template>
         </div>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, EventEmitter, Output, OnChanges } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, EventEmitter, Output, OnChanges, HostListener } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
@@ -10,6 +10,7 @@ import { StateService } from 'src/app/services/state.service';
 })
 export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   mempoolBlocks: MempoolBlock[];
+  mempoolBlocksFull: MempoolBlock[];
   mempoolBlocksSubscription: Subscription;
 
   blockWidth = 125;
@@ -27,11 +28,21 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   ngOnInit() {
     this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$
       .subscribe((blocks) => {
-        this.mempoolBlocks = blocks;
+        this.mempoolBlocksFull = JSON.parse(JSON.stringify(blocks));
+        this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(blocks);
         this.calculateTransactionPosition();
       });
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    console.log('onResize');
+    if (this.mempoolBlocks.length) {
+      this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(JSON.stringify(this.mempoolBlocksFull)));
+    }
+  }
+
+
   ngOnChanges() {
     this.calculateTransactionPosition();
   }
@@ -44,6 +55,32 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     return index;
   }
 
+  reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
+    const blocksAmount = Math.max(1, Math.floor(window.innerWidth / 2 / (this.blockWidth + this.blockPadding)));
+    while (blocks.length > blocksAmount) {
+      const block = blocks.pop();
+      const lastBlock = blocks[blocks.length - 1];
+      lastBlock.blockSize += block.blockSize;
+      lastBlock.blockVSize += block.blockVSize;
+      lastBlock.nTx += block.nTx;
+      lastBlock.feeRange = lastBlock.feeRange.concat(block.feeRange);
+      lastBlock.feeRange.sort((a, b) => a - b);
+      lastBlock.medianFee = this.median(lastBlock.feeRange);
+    }
+    return blocks;
+  }
+
+  median(numbers: number[]) {
+    let medianNr = 0;
+    const numsLen = numbers.length;
+    if (numsLen % 2 === 0) {
+        medianNr = (numbers[numsLen / 2 - 1] + numbers[numsLen / 2]) / 2;
+    } else {
+        medianNr = numbers[(numsLen - 1) / 2];
+    }
+    return medianNr;
+  }
+
   getStyleForMempoolBlockAtIndex(index: number) {
     const greenBackgroundHeight = 100 - this.mempoolBlocks[index].blockVSize / 1000000 * 100;
     return {

frontend/src/app/services/websocket.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
-import { WebsocketResponse } from '../interfaces/websocket.interface';
+import { WebsocketResponse, MempoolBlock } from '../interfaces/websocket.interface';
 import { StateService } from './state.service';
 import { Block, Transaction } from '../interfaces/electrs.interface';
 import { Subscription } from 'rxjs';