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

Add download button on pool ranking and mempool graphs

Browse Source
This commit is contained in:
nymkappa 2022-05-05 16:38:16 +09:00
parent e8bb18fbc3
commit 7a487046b9
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
11 changed files with 80 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
View File

@ -1,7 +1,7 @@
<div class="full-container">
<div class="card-header mb-0 mb-md-4">
<span i18n="mining.block-fee-rates">Block fee rates</span>
<button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>

2
frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
View File

@ -1,7 +1,7 @@
<div class="full-container">
<div class="card-header mb-0 mb-md-4">
<span i18n="mining.block-fees">Block fees</span>
<button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>

2
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
View File

@ -2,7 +2,7 @@
<div class="card-header mb-0 mb-md-4">
<span i18n="mining.block-rewards">Block rewards</span>
<button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>

2
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View File

@ -19,7 +19,7 @@
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
<span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
<button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>

2
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
View File

@ -2,7 +2,7 @@
<div class="card-header mb-0 mb-md-4">
<span i18n="mining.pools-dominance">Mining pools dominance</span>
<button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>

4
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html
View File

@ -1,4 +1,6 @@
<div class="echarts" echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"></div>
<div class="echarts" echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"
(chartInit)="onChartInit($event)">
</div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>

24
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
View File

@ -2,7 +2,7 @@ import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit }
import { EChartsOption } from 'echarts';
import { OnChanges } from '@angular/core';
import { StorageService } from 'src/app/services/storage.service';
import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
import { formatNumber } from '@angular/common';
@Component({
@ -34,6 +34,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
renderer: 'svg'
};
windowPreference: string;
chartInstance: any = undefined;
constructor(
@Inject(LOCALE_ID) private locale: string,
@ -61,6 +62,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
mountChart(): void {
this.mempoolStatsChartOption = {
backgroundColor: '#11131f',
grid: {
height: this.height,
right: this.right,
@ -224,7 +226,27 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
};
}
onChartInit(ec) {
this.chartInstance = ec;
}
isMobile() {
return window.innerWidth <= 767.98;
}
onSaveChart(timespan) {
// @ts-ignore
const prevHeight = this.mempoolStatsChartOption.grid.height;
const now = new Date();
// @ts-ignore
this.mempoolStatsChartOption.grid.height = prevHeight + 20;
this.chartInstance.setOption(this.mempoolStatsChartOption);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
excludeComponents: ['dataZoom'],
}), `incoming-vbytes-${timespan}-${now.getTime() / 1000}`);
// @ts-ignore
this.mempoolStatsChartOption.grid.height = prevHeight;
this.chartInstance.setOption(this.mempoolStatsChartOption);
}
}

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

@ -1,12 +1,12 @@
import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
import { formatNumber } from "@angular/common";
import { formatNumber } from '@angular/common';
import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
import { StateService } from 'src/app/services/state.service';
import { StorageService } from 'src/app/services/storage.service';
import { EChartsOption } from 'echarts';
import { feeLevels, chartColors } from 'src/app/app.constants';
import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
@Component({
selector: 'app-mempool-graph',
@ -45,6 +45,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
feeLevelsOrdered = [];
chartColorsOrdered = chartColors;
inverted: boolean;
chartInstance: any = undefined;
constructor(
private vbytesPipe: VbytesPipe,
@ -83,6 +84,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
this.hoverIndexSerie = e.target.parent.parent.__ecComponentInfo.index;
}
});
this.chartInstance = myChart;
}
handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
@ -99,7 +101,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
generateArray(mempoolStats: OptimizedMempoolStats[]) {
const finalArray: number[][][] = [];
let feesArray: number[][] = [];
let limitFeesTemplate = this.template === 'advanced' ? 26 : 20;
const limitFeesTemplate = this.template === 'advanced' ? 26 : 20;
for (let index = limitFeesTemplate; index > -1; index--) {
feesArray = [];
mempoolStats.forEach((stats) => {
@ -167,6 +169,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
}
this.mempoolVsizeFeesOptions = {
backgroundColor: '#11131f',
series: this.inverted ? [...seriesGraph].reverse() : seriesGraph,
hover: true,
color: this.inverted ? [...newColors].reverse() : newColors,
@ -387,5 +390,21 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
isMobile() {
return window.innerWidth <= 767.98;
}
onSaveChart(timespan) {
// @ts-ignore
const prevHeight = this.mempoolVsizeFeesOptions.grid.height;
const now = new Date();
// @ts-ignore
this.mempoolVsizeFeesOptions.grid.height = prevHeight + 20;
this.chartInstance.setOption(this.mempoolVsizeFeesOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
excludeComponents: ['dataZoom'],
}), `mempool-graph-${timespan}-${now.getTime() / 1000}`);
// @ts-ignore
this.mempoolVsizeFeesOptions.grid.height = prevHeight;
this.chartInstance.setOption(this.mempoolVsizeFeesOptions);
}
}

2
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View File

@ -25,7 +25,7 @@
<div class="card-header" *ngIf="!widget">
<span i18n="mining.mining-pool-share">Mining pools share</span>
<button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>

12
frontend/src/app/components/statistics/statistics.component.html
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'"

17
frontend/src/app/components/statistics/statistics.component.ts
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);
}
}
}