mirror of
https://github.com/mempool/mempool.git
synced 2024-12-28 01:04:28 +01:00
Add timespan switch for pool stats and load more for pool's blocks
This commit is contained in:
nymkappa
parent
3f55aabc53
commit
f2abedfbaa
@ -71,10 +71,6 @@ let routes: Routes = [
|
||||
path: 'mining/pool/:poolId',
|
||||
component: PoolComponent,
|
||||
},
|
||||
{
|
||||
path: 'mining/pool/:poolId/:interval',
|
||||
component: PoolComponent,
|
||||
},
|
||||
{
|
||||
path: 'graphs',
|
||||
component: StatisticsComponent,
|
||||
@ -167,10 +163,6 @@ let routes: Routes = [
|
||||
path: 'mining/pool/:poolId',
|
||||
component: PoolComponent,
|
||||
},
|
||||
{
|
||||
path: 'mining/pool/:poolId/:interval',
|
||||
component: PoolComponent,
|
||||
},
|
||||
{
|
||||
path: 'graphs',
|
||||
component: StatisticsComponent,
|
||||
@ -257,10 +249,6 @@ let routes: Routes = [
|
||||
path: 'mining/pool/:poolId',
|
||||
component: PoolComponent,
|
||||
},
|
||||
{
|
||||
path: 'mining/pool/:poolId/:interval',
|
||||
component: PoolComponent,
|
||||
},
|
||||
{
|
||||
path: 'graphs',
|
||||
component: StatisticsComponent,
|
||||
|
||||
@ -6,6 +6,46 @@
|
||||
</h1>
|
||||
|
||||
<div class="box">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card-header mb-0 mb-lg-4 pr-0">
|
||||
<form [formGroup]="radioGroupForm" class="formRadioGroup float-right">
|
||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'24h'"> 24h
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'3d'"> 3D
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'1w'"> 1W
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'1m'"> 1M
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'3m'"> 3M
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'6m'"> 6M
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'1y'"> 1Y
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'2y'"> 2Y
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'3y'"> 3Y
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'all'"> ALL
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<table class="table table-borderless table-striped">
|
||||
@ -47,9 +87,9 @@
|
||||
<th class="d-none d-lg-block" style="width: 15%;" i18n="latest-blocks.transactions">Transactions</th>
|
||||
<th style="width: 20%;" i18n="latest-blocks.size">Size</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody *ngIf="blocks$ | async as blocks">
|
||||
<tr *ngFor="let block of blocks">
|
||||
<td><a [routerLink]="['/block' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
|
||||
<td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
|
||||
<td class="d-none d-md-block">‎{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
|
||||
<td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
|
||||
<td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map, switchMap, tap } from 'rxjs/operators';
|
||||
import { once } from 'process';
|
||||
import { BehaviorSubject, combineLatest, from, merge, Observable } from 'rxjs';
|
||||
import { delay, distinctUntilChanged, map, scan, startWith, switchMap, tap } from 'rxjs/operators';
|
||||
import { BlockExtended, PoolStat } from 'src/app/interfaces/node-api.interface';
|
||||
import { ApiService } from 'src/app/services/api.service';
|
||||
import { StateService } from 'src/app/services/state.service';
|
||||
@ -13,51 +15,56 @@ import { StateService } from 'src/app/services/state.service';
|
||||
})
|
||||
export class PoolComponent implements OnInit {
|
||||
poolStats$: Observable<PoolStat>;
|
||||
blocks$: Observable<BlockExtended[]>;
|
||||
|
||||
fromHeight: number = -1;
|
||||
fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromHeight);
|
||||
|
||||
blocks: BlockExtended[] = [];
|
||||
poolId: number = undefined;
|
||||
isLoading = false;
|
||||
|
||||
poolId: number;
|
||||
interval: string;
|
||||
|
||||
blocks: any[] = [];
|
||||
radioGroupForm: FormGroup;
|
||||
|
||||
constructor(
|
||||
private apiService: ApiService,
|
||||
private route: ActivatedRoute,
|
||||
public stateService: StateService,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.poolStats$ = this.route.params
|
||||
.pipe(
|
||||
switchMap((params) => {
|
||||
this.poolId = params.poolId;
|
||||
this.interval = params.interval;
|
||||
this.loadMore(2);
|
||||
return this.apiService.getPoolStats$(params.poolId, params.interval ?? 'all');
|
||||
}),
|
||||
);
|
||||
private formBuilder: FormBuilder,
|
||||
) {
|
||||
this.radioGroupForm = this.formBuilder.group({ dateSpan: '1w' });
|
||||
this.radioGroupForm.controls.dateSpan.setValue('1w');
|
||||
}
|
||||
|
||||
loadMore(chunks = 0) {
|
||||
let fromHeight: number | undefined;
|
||||
if (this.blocks.length > 0) {
|
||||
fromHeight = this.blocks[this.blocks.length - 1].height - 1;
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.poolStats$ = combineLatest([
|
||||
this.route.params.pipe(map((params) => params.poolId)),
|
||||
this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith('1w')),
|
||||
])
|
||||
.pipe(
|
||||
switchMap((params: any) => {
|
||||
this.poolId = params[0];
|
||||
if (this.blocks.length === 0) {
|
||||
this.fromHeightSubject.next(undefined);
|
||||
}
|
||||
return this.apiService.getPoolStats$(this.poolId, params[1] ?? '1w');
|
||||
}),
|
||||
);
|
||||
|
||||
this.apiService.getPoolBlocks$(this.poolId, fromHeight)
|
||||
.subscribe((blocks) => {
|
||||
this.blocks = this.blocks.concat(blocks);
|
||||
this.blocks$ = this.fromHeightSubject
|
||||
.pipe(
|
||||
distinctUntilChanged(),
|
||||
switchMap((fromHeight) => {
|
||||
return this.apiService.getPoolBlocks$(this.poolId, fromHeight);
|
||||
}),
|
||||
tap((newBlocks) => {
|
||||
this.blocks = this.blocks.concat(newBlocks);
|
||||
}),
|
||||
map(() => this.blocks)
|
||||
)
|
||||
}
|
||||
|
||||
const chunksLeft = chunks - 1;
|
||||
if (chunksLeft > 0) {
|
||||
this.loadMore(chunksLeft);
|
||||
}
|
||||
// this.cd.markForCheck();
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
// this.cd.markForCheck();
|
||||
});
|
||||
loadMore() {
|
||||
this.fromHeightSubject.next(this.blocks[this.blocks.length - 1]?.height);
|
||||
}
|
||||
|
||||
trackByBlock(index: number, block: BlockExtended) {
|
||||
|
||||
@ -138,6 +138,10 @@ export class ApiService {
|
||||
}
|
||||
|
||||
getPoolBlocks$(poolId: number, fromHeight: number): Observable<BlockExtended[]> {
|
||||
return this.httpClient.get<BlockExtended[]>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool-blocks/${poolId}/${fromHeight}`);
|
||||
if (fromHeight !== undefined) {
|
||||
return this.httpClient.get<BlockExtended[]>(this.apiBaseUrl + this.apiBasePath +`/api/v1/mining/pool-blocks/${poolId}/${fromHeight}`);
|
||||
} else {
|
||||
return this.httpClient.get<BlockExtended[]>(this.apiBaseUrl + this.apiBasePath +`/api/v1/mining/pool-blocks/${poolId}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user