Merge pull request #1017 from mempool/simon/restoring-fee-distribution-graph

Revert "Remove dead code FeeDistributionGraphComponent"

frontend/src/app/app.module.ts

@@ -32,6 +32,7 @@ import { BlockchainComponent } from './components/blockchain/blockchain.componen
 import { FooterComponent } from './components/footer/footer.component';
 import { AudioService } from './services/audio.service';
 import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
+import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component';
 import { IncomingTransactionsGraphComponent } from './components/incoming-transactions-graph/incoming-transactions-graph.component';
 import { TimeSpanComponent } from './components/time-span/time-span.component';
 import { SeoService } from './services/seo.service';
@@ -83,6 +84,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
     MempoolBlocksComponent,
     FooterComponent,
     MempoolBlockComponent,
+    FeeDistributionGraphComponent,
     IncomingTransactionsGraphComponent,
     MempoolGraphComponent,
     LbtcPegsGraphComponent,

frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html

@@ -0,0 +1,9 @@
+<div class="fee-distribution-chart" *ngIf="mempoolVsizeFeesOptions; else loadingFees">
+  <div echarts [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
+</div>
+
+<ng-template #loadingFees>
+  <div class="text-center">
+    <div class="spinner-border text-light"></div>
+  </div>
+</ng-template>

frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts

@@ -0,0 +1,83 @@
+import { OnChanges } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-fee-distribution-graph',
+  templateUrl: './fee-distribution-graph.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FeeDistributionGraphComponent implements OnInit, OnChanges {
+  @Input() data: any;
+  @Input() height: number | string = 210;
+  @Input() top: number | string = 20;
+  @Input() right: number | string = 22;
+  @Input() left: number | string = 30;
+
+  mempoolVsizeFeesOptions: any;
+  mempoolVsizeFeesInitOptions = {
+    renderer: 'svg'
+  };
+
+  constructor() { }
+
+  ngOnInit() {
+    this.mountChart();
+  }
+
+  ngOnChanges() {
+    this.mountChart();
+  }
+
+  mountChart() {
+    this.mempoolVsizeFeesOptions = {
+      grid: {
+        height: '210',
+        right: '20',
+        top: '22',
+        left: '30',
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        }
+      },
+      series: [{
+        data: this.data,
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top',
+          color: '#ffffff',
+          textShadowBlur: 0,
+          formatter: (label: any) => {
+            return Math.floor(label.data);
+          },
+        },
+        smooth: true,
+        lineStyle: {
+          color: '#D81B60',
+          width: 4,
+        },
+        itemStyle: {
+          color: '#b71c1c',
+          borderWidth: 10,
+          borderMiterLimit: 10,
+          opacity: 1,
+        },
+        areaStyle: {
+          color: '#D81B60',
+          opacity: 1,
+        }
+      }]
+    };
+  }
+}

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

@@ -40,6 +40,9 @@
           </tbody>
         </table>
       </div>
+      <div class="col-md chart-container">
+        <app-fee-distribution-graph [data]="mempoolBlock.feeRange" ></app-fee-distribution-graph>
+      </div>
     </div>
   </div>