machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding mini-graphs on dashboard.

Browse Source
This commit is contained in:
softsimon
2020-09-26 22:46:26 +07:00
parent eea77ca863
commit 4bfaabbb5f
13 changed files with 148 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/components/block/block.component.ts
View File

@@ -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;

6
frontend/src/app/components/master-page/master-page.component.html
View File

@@ -29,7 +29,7 @@
<a class="nav-link" [routerLink]="['/bisq']" (click)="collapse()"><fa-icon [icon]="['fas', 'list']" [fixedWidth]="true" title="Transactions"></fa-icon></a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/bisq/blocks']" (click)="collapse()"><fa-icon [icon]="['fas', 'th-list']" [fixedWidth]="true" title="Blocks"></fa-icon></a>
<a class="nav-link" [routerLink]="['/bisq/blocks']" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" title="Blocks"></fa-icon></a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/bisq/stats']" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" title="Stats"></fa-icon></a>
@@ -37,10 +37,10 @@
</ng-template>
<ng-template #notBisq>
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cube']" [fixedWidth]="true" title="Dashboard"></fa-icon></a>
<a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" title="Dashboard"></fa-icon></a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'th-list']" [fixedWidth]="true" title="Blocks"></fa-icon></a>
<a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" title="Blocks"></fa-icon></a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" title="Graphs"></fa-icon></a>

4
frontend/src/app/components/mempool-block/mempool-block.component.ts
View File

@@ -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) => {

23
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@@ -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() {

13
frontend/src/app/components/start/start.component.ts
View File

@@ -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() { }
}

6
frontend/src/app/components/statistics/statistics.component.ts
View File

@@ -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 = {

1
frontend/src/app/components/transaction/transaction.component.ts
View File

@@ -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(