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

24h/3d block fee rates chart is clickable

Browse Source
This commit is contained in:
nymkappa 2022-04-15 00:34:15 +09:00
parent 3ce6e81a39
commit b79fb6265c
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,8 @@
</form> </form>
</div> </div>
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"> <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
</div> </div>
<div class="text-center loadingGraphs" *ngIf="isLoading"> <div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>

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

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
import { EChartsOption } from 'echarts'; import { EChartsOption } from 'echarts';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
@ -10,6 +10,9 @@ import { formatterXAxis } from 'src/app/shared/graphs.utils';
import { StorageService } from 'src/app/services/storage.service'; import { StorageService } from 'src/app/services/storage.service';
import { MiningService } from 'src/app/services/mining.service'; import { MiningService } from 'src/app/services/mining.service';
import { selectPowerOfTen } from 'src/app/bitcoin.utils'; import { selectPowerOfTen } from 'src/app/bitcoin.utils';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-block-fee-rates-graph', selector: 'app-block-fee-rates-graph',
@ -41,6 +44,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
isLoading = true; isLoading = true;
formatNumber = formatNumber; formatNumber = formatNumber;
timespan = ''; timespan = '';
chartInstance: any = undefined;
constructor( constructor(
@Inject(LOCALE_ID) public locale: string, @Inject(LOCALE_ID) public locale: string,
@ -48,7 +52,10 @@ export class BlockFeeRatesGraphComponent implements OnInit {
private apiService: ApiService, private apiService: ApiService,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private storageService: StorageService, private storageService: StorageService,
private miningService: MiningService private miningService: MiningService,
private stateService: StateService,
private router: Router,
private zone: NgZone,
) { ) {
this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' }); this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
this.radioGroupForm.controls.dateSpan.setValue('1y'); this.radioGroupForm.controls.dateSpan.setValue('1y');
@ -251,6 +258,25 @@ export class BlockFeeRatesGraphComponent implements OnInit {
}; };
} }
onChartInit(ec) {
if (this.chartInstance !== undefined) {
return;
}
this.chartInstance = ec;
this.chartInstance.on('click', (e) => {
if (e.data.data === 9999) { // "Other"
return;
}
this.zone.run(() => {
if (['24h', '3d'].includes(this.timespan)) {
const url = new RelativeUrlPipe(this.stateService).transform(`/block/${e.data[2]}`);
this.router.navigate([url]);
}
});
});
}
isMobile() { isMobile() {
return (window.innerWidth <= 767.98); return (window.innerWidth <= 767.98);
} }