Added fee distribution Pie Chart to the block inspector.

frontend/src/app/blockchain-blocks/block-modal/block-modal.component.html

@@ -30,16 +30,5 @@
 
   <hr>
 
-  <div style="height: 400px;" *ngIf="mempoolVsizeFeesData; else loadingFees">
-    <app-chartist 
-      [data]="mempoolVsizeFeesData"
-      [type]="'Bar'"
-      [options]="mempoolVsizeFeesOptions">
-    </app-chartist>
-  </div>
-  <ng-template #loadingFees>
-    <div class="text-center">
-      <div class="spinner-border text-light"></div>
-    </div>
-  </ng-template>
+  <app-fee-distribution-graph [blockHeight]="block.height"></app-fee-distribution-graph>
 </div>

frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts

@@ -1,9 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { ApiService } from '../../services/api.service';
 import { IBlock } from '../../blockchain/interfaces';
 import { MemPoolService } from '../../services/mem-pool.service';
-import * as Chartist from 'chartist';
 
 @Component({
   selector: 'app-block-modal',
@@ -13,61 +11,17 @@ import * as Chartist from 'chartist';
 export class BlockModalComponent implements OnInit {
   @Input() block: IBlock;
 
-  mempoolVsizeFeesData: any;
-  mempoolVsizeFeesOptions: any;
   conversions: any;
 
   constructor(
     public activeModal: NgbActiveModal,
-    private apiService: ApiService,
     private memPoolService: MemPoolService,
   ) { }
 
   ngOnInit() {
-
-    this.mempoolVsizeFeesOptions = {
-      showArea: false,
-      showLine: false,
-      fullWidth: false,
-      showPoint: false,
-      low: 0,
-      axisX: {
-        position: 'start',
-        showLabel: false,
-        offset: 0,
-        showGrid: false,
-      },
-      axisY: {
-        position: 'end',
-        scaleMinSpace: 40,
-        showGrid: false,
-      },
-      plugins: [
-        Chartist.plugins.tooltip({
-          tooltipOffset: {
-            x: 15,
-            y: 250
-          },
-          transformTooltipTextFnc: (value: number): any => {
-            return Math.ceil(value) + ' sat/vB';
-          },
-          anchorToPoint: false,
-        })
-      ]
-    };
-
     this.memPoolService.conversions$
       .subscribe((conversions) => {
         this.conversions = conversions;
       });
-
-    this.apiService.listTransactionsForBlock$(this.block.height)
-      .subscribe((data) => {
-        this.mempoolVsizeFeesData = {
-          labels: data.map((x, i) => i),
-          series: [data.map((tx) => tx.fpv)]
-        };
-      });
   }
-
 }