From 682d21cb5bafc160d290b8c2abcd57252952833e Mon Sep 17 00:00:00 2001 From: softsimon Date: Sun, 29 Mar 2020 23:59:04 +0700 Subject: [PATCH] Merging duplicate mempool graph code. --- frontend/src/app/app.module.ts | 2 + .../mempool-graph.component.html | 6 + .../mempool-graph/mempool-graph.component.ts | 113 ++++++++++++++++++ .../statistics/statistics.component.html | 20 +--- .../statistics/statistics.component.ts | 82 +------------ .../television/television.component.html | 8 +- .../television/television.component.ts | 93 +------------- 7 files changed, 127 insertions(+), 197 deletions(-) create mode 100644 frontend/src/app/components/mempool-graph/mempool-graph.component.html create mode 100644 frontend/src/app/components/mempool-graph/mempool-graph.component.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 3b4671858..1aa94dc82 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -44,6 +44,7 @@ import { MempoolBlockComponent } from './components/mempool-block/mempool-block. import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component'; import { TimespanComponent } from './components/timespan/timespan.component'; import { SeoService } from './services/seo.service'; +import { MempoolGraphComponent } from './components/mempool-graph/mempool-graph.component'; @NgModule({ declarations: [ @@ -78,6 +79,7 @@ import { SeoService } from './services/seo.service'; FiatComponent, MempoolBlockComponent, FeeDistributionGraphComponent, + MempoolGraphComponent, ], imports: [ BrowserModule, diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.html b/frontend/src/app/components/mempool-graph/mempool-graph.component.html new file mode 100644 index 000000000..ff91f4a90 --- /dev/null +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.html @@ -0,0 +1,6 @@ + + diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts new file mode 100644 index 000000000..ddf86e42a --- /dev/null +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -0,0 +1,113 @@ +import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core'; +import { formatDate } from '@angular/common'; +import { VbytesPipe } from 'src/app/pipes/bytes-pipe/vbytes.pipe'; +import * as Chartist from 'chartist'; +import { environment } from 'src/environments/environment'; +import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface'; + +@Component({ + selector: 'app-mempool-graph', + templateUrl: './mempool-graph.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MempoolGraphComponent implements OnInit, OnChanges { + @Input() data; + + network = environment.network; + mempoolVsizeFeesOptions: any; + mempoolVsizeFeesData: any; + + constructor( + private vbytesPipe: VbytesPipe, + @Inject(LOCALE_ID) private locale: string, + ) { } + + ngOnInit(): void { + const labelInterpolationFnc = (value: any, index: any) => { + return index % 6 === 0 ? formatDate(value, 'HH:mm', this.locale) : null; + }; + + this.mempoolVsizeFeesOptions = { + showArea: true, + showLine: false, + fullWidth: true, + showPoint: false, + low: 0, + axisX: { + labelInterpolationFnc: labelInterpolationFnc, + offset: 40 + }, + axisY: { + labelInterpolationFnc: (value: number): any => { + return this.vbytesPipe.transform(value, 2); + }, + offset: 160 + }, + plugins: [ + Chartist.plugins.ctTargetLine({ + value: 1000000 + }), + Chartist.plugins.legend({ + legendNames: [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, + 250, 300, 350, 400].map((sats, i, arr) => { + if (sats === 400) { + return '350+'; + } + if (i === 0) { + if (this.network === 'liquid') { + return '0 - 1'; + } + return '1 sat/vB'; + } + return arr[i - 1] + ' - ' + sats; + }) + }) + ] + }; + } + + ngOnChanges() { + this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([])); + } + + handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) { + mempoolStats.reverse(); + const labels = mempoolStats.map(stats => stats.added); + + const finalArrayVbyte = this.generateArray(mempoolStats); + + // Only Liquid has lower than 1 sat/vb transactions + if (this.network !== 'liquid') { + finalArrayVbyte.shift(); + } + + return { + labels: labels, + series: finalArrayVbyte + }; + } + + generateArray(mempoolStats: OptimizedMempoolStats[]) { + const finalArray: number[][] = []; + let feesArray: number[] = []; + + for (let index = 37; index > -1; index--) { + feesArray = []; + mempoolStats.forEach((stats) => { + const theFee = stats.vsizes[index].toString(); + if (theFee) { + feesArray.push(parseInt(theFee, 10)); + } else { + feesArray.push(0); + } + }); + if (finalArray.length) { + feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]); + } + finalArray.push(feesArray); + } + finalArray.reverse(); + return finalArray; + } + +} diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 74f0365cc..53c28a5be 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -1,17 +1,5 @@
- -
@@ -23,7 +11,7 @@
-
+
Mempool by vbytes (satoshis/vbyte) @@ -56,11 +44,7 @@
- - +
diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts index d71386565..7ec2c9ada 100644 --- a/frontend/src/app/components/statistics/statistics.component.ts +++ b/frontend/src/app/components/statistics/statistics.component.ts @@ -3,9 +3,8 @@ import { ActivatedRoute } from '@angular/router'; import { formatDate } from '@angular/common'; import { FormGroup, FormBuilder } from '@angular/forms'; import { of, merge} from 'rxjs'; -import { switchMap, tap } from 'rxjs/operators'; +import { switchMap } from 'rxjs/operators'; -import { VbytesPipe } from '../../pipes/bytes-pipe/vbytes.pipe'; import { OptimizedMempoolStats } from '../../interfaces/node-api.interface'; import { WebsocketService } from '../../services/websocket.service'; import { ApiService } from '../../services/api.service'; @@ -39,7 +38,6 @@ export class StatisticsComponent implements OnInit { constructor( @Inject(LOCALE_ID) private locale: string, - private vbytesPipe: VbytesPipe, private formBuilder: FormBuilder, private route: ActivatedRoute, private websocketService: WebsocketService, @@ -75,44 +73,6 @@ export class StatisticsComponent implements OnInit { return index % nr === 0 ? value : null; }; - this.mempoolVsizeFeesOptions = { - showArea: true, - showLine: false, - fullWidth: true, - showPoint: false, - low: 0, - axisX: { - labelInterpolationFnc: labelInterpolationFnc, - offset: 40 - }, - axisY: { - labelInterpolationFnc: (value: number): any => { - return this.vbytesPipe.transform(value, 2); - }, - offset: 160 - }, - plugins: [ - Chartist.plugins.ctTargetLine({ - value: 1000000 - }), - Chartist.plugins.legend({ - legendNames: [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, - 250, 300, 350, 400, 500, 600].map((sats, i, arr) => { - if (sats === 600) { - return '500+'; - } - if (i === 0) { - if (this.network === 'liquid') { - return '0 - 1'; - } - return '1 sat/vB'; - } - return arr[i - 1] + ' - ' + sats; - }) - }) - ] - }; - this.transactionsWeightPerSecondOptions = { showArea: false, showLine: true, @@ -142,11 +102,6 @@ export class StatisticsComponent implements OnInit { merge( of(''), this.radioGroupForm.controls.dateSpan.valueChanges - .pipe( - tap(() => { - this.mempoolStats = []; - }) - ) ) .pipe( switchMap(() => { @@ -197,40 +152,5 @@ export class StatisticsComponent implements OnInit { labels: labels, series: [mempoolStats.map((stats) => stats.vbytes_per_second)], }; - - const finalArrayVbyte = this.generateArray(mempoolStats); - - // Only Liquid has lower than 1 sat/vb transactions - if (this.network !== 'liquid') { - finalArrayVbyte.shift(); - } - - this.mempoolVsizeFeesData = { - labels: labels, - series: finalArrayVbyte - }; - } - - generateArray(mempoolStats: OptimizedMempoolStats[]) { - const finalArray: number[][] = []; - let feesArray: number[] = []; - - for (let index = 37; index > -1; index--) { - feesArray = []; - mempoolStats.forEach((stats) => { - const theFee = stats.vsizes[index].toString(); - if (theFee) { - feesArray.push(parseInt(theFee, 10)); - } else { - feesArray.push(0); - } - }); - if (finalArray.length) { - feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]); - } - finalArray.push(feesArray); - } - finalArray.reverse(); - return finalArray; } } diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html index cc1cc6fa4..3efa6583d 100644 --- a/frontend/src/app/components/television/television.component.html +++ b/frontend/src/app/components/television/television.component.html @@ -4,12 +4,8 @@
-
- - +
+
diff --git a/frontend/src/app/components/television/television.component.ts b/frontend/src/app/components/television/television.component.ts index 370e2522a..db141a02f 100644 --- a/frontend/src/app/components/television/television.component.ts +++ b/frontend/src/app/components/television/television.component.ts @@ -1,8 +1,4 @@ -import { Component, OnInit, LOCALE_ID, Inject, Renderer2 } from '@angular/core'; -import { formatDate } from '@angular/common'; -import { VbytesPipe } from '../../pipes/bytes-pipe/vbytes.pipe'; - -import * as Chartist from 'chartist'; +import { Component, OnInit } from '@angular/core'; import { WebsocketService } from 'src/app/services/websocket.service'; import { OptimizedMempoolStats } from '../../interfaces/node-api.interface'; import { StateService } from 'src/app/services/state.service'; @@ -21,12 +17,9 @@ export class TelevisionComponent implements OnInit { mempoolStats: OptimizedMempoolStats[] = []; mempoolVsizeFeesData: any; - mempoolVsizeFeesOptions: any; constructor( private websocketService: WebsocketService, - @Inject(LOCALE_ID) private locale: string, - private vbytesPipe: VbytesPipe, private apiService: ApiService, private stateService: StateService, private seoService: SeoService, @@ -36,52 +29,9 @@ export class TelevisionComponent implements OnInit { this.seoService.setTitle('TV view'); this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']); - const labelInterpolationFnc = (value: any, index: any) => { - return index % 6 === 0 ? formatDate(value, 'HH:mm', this.locale) : null; - }; - - this.mempoolVsizeFeesOptions = { - showArea: true, - showLine: false, - fullWidth: true, - showPoint: false, - low: 0, - axisX: { - labelInterpolationFnc: labelInterpolationFnc, - offset: 40 - }, - axisY: { - labelInterpolationFnc: (value: number): any => { - return this.vbytesPipe.transform(value, 2); - }, - offset: 160 - }, - plugins: [ - Chartist.plugins.ctTargetLine({ - value: 1000000 - }), - Chartist.plugins.legend({ - legendNames: [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, - 250, 300, 350, 400].map((sats, i, arr) => { - if (sats === 400) { - return '350+'; - } - if (i === 0) { - if (this.network === 'liquid') { - return '0 - 1'; - } - return '1 sat/vB'; - } - return arr[i - 1] + ' - ' + sats; - }) - }) - ] - }; - this.apiService.list2HStatistics$() .subscribe((mempoolStats) => { this.mempoolStats = mempoolStats; - this.handleNewMempoolData(this.mempoolStats.concat([])); this.loading = false; }); @@ -89,48 +39,7 @@ export class TelevisionComponent implements OnInit { .subscribe((mempoolStats) => { this.mempoolStats.unshift(mempoolStats); this.mempoolStats = this.mempoolStats.slice(0, this.mempoolStats.length - 1); - this.handleNewMempoolData(this.mempoolStats.concat([])); }); } - handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) { - mempoolStats.reverse(); - const labels = mempoolStats.map(stats => stats.added); - - const finalArrayVbyte = this.generateArray(mempoolStats); - - // Only Liquid has lower than 1 sat/vb transactions - if (this.network !== 'liquid') { - finalArrayVbyte.shift(); - } - - this.mempoolVsizeFeesData = { - labels: labels, - series: finalArrayVbyte - }; - } - - generateArray(mempoolStats: OptimizedMempoolStats[]) { - const finalArray: number[][] = []; - let feesArray: number[] = []; - - for (let index = 37; index > -1; index--) { - feesArray = []; - mempoolStats.forEach((stats) => { - const theFee = stats.vsizes[index].toString(); - if (theFee) { - feesArray.push(parseInt(theFee, 10)); - } else { - feesArray.push(0); - } - }); - if (finalArray.length) { - feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]); - } - finalArray.push(feesArray); - } - finalArray.reverse(); - return finalArray; - } - }