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

Add download feature on mining charts

Browse Source
This commit is contained in:
nymkappa
2022-05-05 16:18:28 +09:00
parent c987aed0a1
commit 0e0b8dbd6c
14 changed files with 172 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,10 @@
<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()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1">

19
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
View File

@@ -6,7 +6,7 @@ import { ApiService } from 'src/app/services/api.service';
import { SeoService } from 'src/app/services/seo.service';
import { formatNumber } from '@angular/common';
import { FormBuilder, FormGroup } from '@angular/forms';
import { formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils';
import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils';
import { StorageService } from 'src/app/services/storage.service';
import { MiningService } from 'src/app/services/mining.service';
import { selectPowerOfTen } from 'src/app/bitcoin.utils';
@@ -147,6 +147,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
prepareChartOptions(data) {
this.chartOptions = {
backgroundColor: '#11131f',
color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
animation: false,
grid: {
@@ -297,4 +298,20 @@ export class BlockFeeRatesGraphComponent implements OnInit {
isMobile() {
return (window.innerWidth <= 767.98);
}
onSaveChart() {
// @ts-ignore
const prevBottom = this.chartOptions.grid.bottom;
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 40;
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
excludeComponents: ['dataZoom'],
}), `block-fee-rates-${this.timespan}-${now.getTime() / 1000}`);
// @ts-ignore
this.chartOptions.grid.bottom = prevBottom;
this.chartInstance.setOption(this.chartOptions);
}
}