From 3dedf1e3e1ff35f0b1ee479444b7c6887ca246f8 Mon Sep 17 00:00:00 2001 From: softsimon Date: Sat, 26 Sep 2020 22:46:26 +0700 Subject: [PATCH] Adding mini-graphs on dashboard. --- backend/src/routes.ts | 4 +- frontend/src/app/app.module.ts | 5 +- .../app/components/block/block.component.ts | 3 + .../master-page/master-page.component.html | 6 +- .../mempool-block/mempool-block.component.ts | 4 + .../mempool-graph/mempool-graph.component.ts | 23 ++++-- .../app/components/start/start.component.ts | 13 +--- .../statistics/statistics.component.ts | 6 +- .../transaction/transaction.component.ts | 1 + .../app/dashboard/dashboard.component.html | 37 ++++++++-- .../app/dashboard/dashboard.component.scss | 6 +- .../src/app/dashboard/dashboard.component.ts | 74 ++++++++++++++++++- .../src/app/services/websocket.service.ts | 3 + 13 files changed, 148 insertions(+), 37 deletions(-) diff --git a/backend/src/routes.ts b/backend/src/routes.ts index ecf827dee..22205a3a9 100644 --- a/backend/src/routes.ts +++ b/backend/src/routes.ts @@ -15,8 +15,8 @@ class Routes { constructor() { if (!config.DB_DISABLED) { - this.createCache(); - setInterval(this.createCache.bind(this), 600000); + // this.createCache(); + // setInterval(this.createCache.bind(this), 600000); } } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 00b9282b6..8482e8df1 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -43,7 +43,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; import { FeesBoxComponent } from './components/fees-box/fees-box.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; -import { faChartArea, faCube, faDatabase, faInfo, faInfoCircle, faList, faQuestion, faQuestionCircle, faSearch, faTachometerAlt, faThList, faTv } from '@fortawesome/free-solid-svg-icons'; +import { faChartArea, faCube, faCubes, faDatabase, faInfo, faInfoCircle, faList, faQuestion, faQuestionCircle, faSearch, faTachometerAlt, faThList, faTv } from '@fortawesome/free-solid-svg-icons'; @NgModule({ declarations: [ @@ -101,7 +101,8 @@ export class AppModule { library.addIcons(faInfoCircle); library.addIcons(faChartArea); library.addIcons(faTv); - library.addIcons(faCube); + library.addIcons(faTachometerAlt); + library.addIcons(faCubes); library.addIcons(faThList); library.addIcons(faList); library.addIcons(faTachometerAlt); diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 735e258c7..4a27ccf06 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -8,6 +8,7 @@ import { of, Subscription } from 'rxjs'; import { StateService } from '../../services/state.service'; import { SeoService } from 'src/app/services/seo.service'; import { env } from 'src/app/app.constants'; +import { WebsocketService } from 'src/app/services/websocket.service'; @Component({ selector: 'app-block', @@ -39,9 +40,11 @@ export class BlockComponent implements OnInit, OnDestroy { private electrsApiService: ElectrsApiService, private stateService: StateService, private seoService: SeoService, + private websocketService: WebsocketService, ) { } ngOnInit() { + this.websocketService.want(['blocks', 'mempool-blocks']); this.paginationMaxSize = window.matchMedia('(max-width: 700px)').matches ? 3 : 5; this.network = this.stateService.network; diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index 4f15e99c6..21afec088 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -29,7 +29,7 @@
  • - +
  • @@ -37,10 +37,10 @@
  • - +
  • - +
  • diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.ts b/frontend/src/app/components/mempool-block/mempool-block.component.ts index f4027ef2f..312faead5 100644 --- a/frontend/src/app/components/mempool-block/mempool-block.component.ts +++ b/frontend/src/app/components/mempool-block/mempool-block.component.ts @@ -6,6 +6,7 @@ import { MempoolBlock } from 'src/app/interfaces/websocket.interface'; import { Observable, BehaviorSubject } from 'rxjs'; import { SeoService } from 'src/app/services/seo.service'; import { env } from 'src/app/app.constants'; +import { WebsocketService } from 'src/app/services/websocket.service'; @Component({ selector: 'app-mempool-block', @@ -23,9 +24,12 @@ export class MempoolBlockComponent implements OnInit, OnDestroy { private route: ActivatedRoute, private stateService: StateService, private seoService: SeoService, + private websocketService: WebsocketService, ) { } ngOnInit(): void { + this.websocketService.want(['blocks', 'mempool-blocks']); + this.mempoolBlock$ = this.route.paramMap .pipe( switchMap((params: ParamMap) => { diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts index 0753d505a..59faa9bff 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -13,6 +13,9 @@ import { StateService } from 'src/app/services/state.service'; export class MempoolGraphComponent implements OnInit, OnChanges { @Input() data; @Input() dateSpan = '2h'; + @Input() showLegend = true; + @Input() offsetX = 40; + @Input() offsetY = 40; mempoolVsizeFeesOptions: any; mempoolVsizeFeesData: any; @@ -26,6 +29,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges { ) { } ngOnInit(): void { + const showLegend = !this.isMobile && this.showLegend; + const labelHops = this.isMobile || !this.showLegend ? 12 : 6; + const labelInterpolationFnc = (value: any, index: any) => { switch (this.dateSpan) { case '2h': @@ -41,7 +47,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { case '1y': value = formatDate(value, 'dd/MM', this.locale); } - return index % 6 === 0 ? value : null; + return index % labelHops === 0 ? value : null; }; this.mempoolVsizeFeesOptions = { @@ -52,23 +58,28 @@ export class MempoolGraphComponent implements OnInit, OnChanges { low: 0, axisX: { labelInterpolationFnc: labelInterpolationFnc, - offset: 40 + offset: this.offsetX, }, axisY: { labelInterpolationFnc: (value: number): any => { return this.vbytesPipe.transform(value, 2); }, - offset: this.isMobile ? 60 : 160 + offset: showLegend ? 160 : 60, }, plugins: [ Chartist.plugins.ctTargetLine({ value: 1000000 }), + ] + }; + + if (showLegend) { + this.mempoolVsizeFeesOptions.plugins.push( 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((sat, i, arr) => { if (sat === 400) { - return '350+'; + return '350+'; } if (i === 0) { if (this.stateService.network === 'liquid') { @@ -79,8 +90,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges { return arr[i - 1] + ' - ' + sat; }) }) - ] - }; + ); + } } ngOnChanges() { diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts index e1763ed92..2a2b7ca01 100644 --- a/frontend/src/app/components/start/start.component.ts +++ b/frontend/src/app/components/start/start.component.ts @@ -1,17 +1,10 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; -import { WebsocketService } from 'src/app/services/websocket.service'; +import { Component } from '@angular/core'; @Component({ selector: 'app-start', templateUrl: './start.component.html', styleUrls: ['./start.component.scss'], }) -export class StartComponent implements OnInit { - constructor( - private websocketService: WebsocketService, - ) { } - - ngOnInit() { - this.websocketService.want(['blocks', 'stats', 'mempool-blocks']); - } +export class StartComponent { + constructor() { } } diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts index d5dc1a587..01f1936c4 100644 --- a/frontend/src/app/components/statistics/statistics.component.ts +++ b/frontend/src/app/components/statistics/statistics.component.ts @@ -52,10 +52,10 @@ export class StatisticsComponent implements OnInit { ngOnInit() { this.seoService.setTitle('Graphs'); this.stateService.networkChanged$.subscribe((network) => this.network = network); + const isMobile = window.innerWidth <= 767.98; + const labelHops = isMobile ? 12 : 6; const labelInterpolationFnc = (value: any, index: any) => { - const nr = 6; - switch (this.radioGroupForm.controls.dateSpan.value) { case '2h': case '24h': @@ -71,7 +71,7 @@ export class StatisticsComponent implements OnInit { value = formatDate(value, 'dd/MM', this.locale); } - return index % nr === 0 ? value : null; + return index % labelHops === 0 ? value : null; }; this.transactionsWeightPerSecondOptions = { diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 1f5077339..946b49a57 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/frontend/src/app/components/transaction/transaction.component.ts @@ -39,6 +39,7 @@ export class TransactionComponent implements OnInit, OnDestroy { ) { } ngOnInit() { + this.websocketService.want(['blocks', 'mempool-blocks']); this.stateService.networkChanged$.subscribe((network) => this.network = network); this.subscription = this.route.paramMap.pipe( diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index d65a2eae8..154a11661 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -21,7 +21,7 @@
    -
    +
    Tx weight per second
    @@ -38,7 +38,7 @@
    -
    +
    Difficulty adjustment
    +{{ epochData.change | number: '1.0-2' }}%
    @@ -48,6 +48,31 @@
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    @@ -56,14 +81,14 @@ Height Mined - Txs + Txs Filled {{ block.height }} ago - {{ block.tx_count | number }} + {{ block.tx_count | number }}
    @@ -84,13 +109,13 @@ - + - + diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 87627ce8b..a83ced2c4 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -27,6 +27,6 @@ width: 200px; } -.card-body { - padding: 1.5rem; -} \ No newline at end of file +.more-padding { + padding: 1.25rem 2rem 1.25rem 2rem; +} diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index bfe513c59..fdfab299d 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/frontend/src/app/dashboard/dashboard.component.ts @@ -1,9 +1,14 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core'; import { combineLatest, merge, Observable, of } from 'rxjs'; -import { map, reduce, scan, tap } from 'rxjs/operators'; +import { map, scan, switchMap, take, tap } from 'rxjs/operators'; import { Block } from '../interfaces/electrs.interface'; +import { OptimizedMempoolStats } from '../interfaces/node-api.interface'; import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface'; +import { ApiService } from '../services/api.service'; import { StateService } from '../services/state.service'; +import * as Chartist from 'chartist'; +import { formatDate } from '@angular/common'; +import { WebsocketService } from '../services/websocket.service'; interface MempoolBlocksData { blocks: number; @@ -24,6 +29,11 @@ interface MempoolInfoData { progressClass: string; } +interface MempoolStatsData { + mempool: OptimizedMempoolStats[]; + weightPerSecond: any; +} + @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', @@ -39,12 +49,19 @@ export class DashboardComponent implements OnInit { blocks$: Observable; transactions$: Observable; latestBlockHeight: number; + mempoolTransactionsWeightPerSecondData: any; + mempoolStats$: Observable; + transactionsWeightPerSecondOptions: any; constructor( + @Inject(LOCALE_ID) private locale: string, private stateService: StateService, + private apiService: ApiService, + private websocketService: WebsocketService, ) { } ngOnInit(): void { + this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']); this.network$ = merge(of(''), this.stateService.networkChanged$); this.mempoolInfoData$ = combineLatest([ @@ -137,6 +154,59 @@ export class DashboardComponent implements OnInit { }, []), map((txs) => txs.slice(0, 6)), ); + + this.mempoolStats$ = this.apiService.list2HStatistics$() + .pipe( + switchMap((mempoolStats) => { + return merge( + this.stateService.live2Chart$ + .pipe( + scan((acc, stats) => { + acc.unshift(stats); + acc = acc.slice(0, acc.length - 1); + return acc; + }, mempoolStats) + ), + of(mempoolStats) + ); + }), + map((mempoolStats) => { + return { + mempool: mempoolStats, + weightPerSecond: this.handleNewMempoolData(mempoolStats.concat([])), + }; + }) + ); + + this.transactionsWeightPerSecondOptions = { + showArea: false, + showLine: true, + fullWidth: true, + showPoint: false, + low: 0, + axisY: { + offset: 40 + }, + axisX: { + labelInterpolationFnc: (value: any, index: any) => index % 12 === 0 ? formatDate(value, 'HH:mm', this.locale) : null, + offset: 10 + }, + plugins: [ + Chartist.plugins.ctTargetLine({ + value: 1667 + }), + ] + }; + } + + handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) { + mempoolStats.reverse(); + const labels = mempoolStats.map(stats => stats.added); + + return { + labels: labels, + series: [mempoolStats.map((stats) => stats.vbytes_per_second)], + }; } trackByBlock(index: number, block: Block) { diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts index a85efcc84..a1d7e341f 100644 --- a/frontend/src/app/services/websocket.service.ts +++ b/frontend/src/app/services/websocket.service.ts @@ -216,6 +216,9 @@ export class WebsocketService { } want(data: string[]) { + if (data === this.lastWant) { + return; + } this.websocketSubject.next({action: 'want', data: data}); this.lastWant = data; }
    TXIDAmount (BTC)Amount (BTC) Fee
    {{ transaction.txid | shortenString : 12 }} () () {{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB