Add download button on pool ranking and mempool graphs

This commit is contained in:
nymkappa
2022-05-05 16:38:16 +09:00
parent e8bb18fbc3
commit 7a487046b9
11 changed files with 80 additions and 14 deletions

View File

@@ -4,6 +4,10 @@
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
<button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart('mempool')">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
<form [formGroup]="radioGroupForm" class="formRadioGroup" [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm">
@@ -60,7 +64,7 @@
</div>
<div class="card-body">
<div class="incoming-transactions-graph">
<app-mempool-graph
<app-mempool-graph #mempoolgraph
dir="ltr"
[template]="'advanced'"
[limitFee]="500"
@@ -80,9 +84,13 @@
<div class="card-header">
<i class="fa fa-area-chart"></i> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
</div>
<button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart('incoming')">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
<div class="card-body">
<div class="incoming-transactions-graph">
<app-incoming-transactions-graph
<app-incoming-transactions-graph #incominggraph
[height]="500"
[left]="65"
[template]="'advanced'"

View File

@@ -1,4 +1,4 @@
import { Component, OnInit, LOCALE_ID, Inject } from '@angular/core';
import { Component, OnInit, LOCALE_ID, Inject, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';
import { of, merge} from 'rxjs';
@@ -12,6 +12,8 @@ import { StateService } from 'src/app/services/state.service';
import { SeoService } from 'src/app/services/seo.service';
import { StorageService } from 'src/app/services/storage.service';
import { feeLevels, chartColors } from 'src/app/app.constants';
import { MempoolGraphComponent } from '../mempool-graph/mempool-graph.component';
import { IncomingTransactionsGraphComponent } from '../incoming-transactions-graph/incoming-transactions-graph.component';
@Component({
selector: 'app-statistics',
@@ -19,6 +21,9 @@ import { feeLevels, chartColors } from 'src/app/app.constants';
styleUrls: ['./statistics.component.scss']
})
export class StatisticsComponent implements OnInit {
@ViewChild('mempoolgraph') mempoolGraph: MempoolGraphComponent;
@ViewChild('incominggraph') incomingGraph: IncomingTransactionsGraphComponent;
network = '';
loading = true;
@@ -38,6 +43,7 @@ export class StatisticsComponent implements OnInit {
graphWindowPreference: string;
inverted: boolean;
feeLevelDropdownData = [];
timespan = '';
constructor(
@Inject(LOCALE_ID) private locale: string,
@@ -75,6 +81,7 @@ export class StatisticsComponent implements OnInit {
)
.pipe(
switchMap(() => {
this.timespan = this.radioGroupForm.controls.dateSpan.value;
this.spinnerLoading = true;
if (this.radioGroupForm.controls.dateSpan.value === '2h') {
this.websocketService.want(['blocks', 'live-2h-chart']);
@@ -195,4 +202,12 @@ export class StatisticsComponent implements OnInit {
stat.vbytes_per_second = Math.min(median * capRatio, stat.vbytes_per_second);
}
}
onSaveChart(name) {
if (name === 'mempool') {
this.mempoolGraph.onSaveChart(this.timespan);
} else if (name === 'incoming') {
this.incomingGraph.onSaveChart(this.timespan);
}
}
}