Only show relevant hashrate in the pool page
This commit is contained in:
@@ -1,36 +1,11 @@
|
||||
<div class="container">
|
||||
|
||||
<div *ngIf="poolStats$ | async as poolStats">
|
||||
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
|
||||
<h1 class="m-0">
|
||||
<img width="50" src="{{ poolStats['logo'] }}" onError="this.src = './resources/mining-pools/default.svg'"
|
||||
class="mr-3">
|
||||
{{ poolStats.pool.name }}
|
||||
</h1>
|
||||
<div class="pl-0 bg-transparent">
|
||||
<div class="card-header mb-0 mb-lg-4 pr-0 pl-0">
|
||||
<form [formGroup]="radioGroupForm" class="formRadioGroup ml-0">
|
||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||
<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>
|
||||
<h1 class="m-0">
|
||||
<img width="50" src="{{ poolStats['logo'] }}" onError="this.src = './resources/mining-pools/default.svg'"
|
||||
class="mr-3">
|
||||
{{ poolStats.pool.name }}
|
||||
</h1>
|
||||
|
||||
<div class="box">
|
||||
<div class="row">
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { EChartsOption, graphic } from 'echarts';
|
||||
import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
|
||||
import { distinctUntilChanged, map, startWith, switchMap, tap, toArray } from 'rxjs/operators';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { distinctUntilChanged, map, switchMap, tap, toArray } 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';
|
||||
@@ -24,8 +23,6 @@ export class PoolComponent implements OnInit {
|
||||
blocks$: Observable<BlockExtended[]>;
|
||||
isLoading = true;
|
||||
|
||||
radioGroupForm: FormGroup;
|
||||
|
||||
chartOptions: EChartsOption = {};
|
||||
chartInitOptions = {
|
||||
renderer: 'svg',
|
||||
@@ -44,34 +41,27 @@ export class PoolComponent implements OnInit {
|
||||
private apiService: ApiService,
|
||||
private route: ActivatedRoute,
|
||||
public stateService: StateService,
|
||||
private formBuilder: FormBuilder,
|
||||
) {
|
||||
this.radioGroupForm = this.formBuilder.group({ dateSpan: 'all' });
|
||||
this.radioGroupForm.controls.dateSpan.setValue('all');
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.poolStats$ = combineLatest([
|
||||
this.route.params.pipe(map((params) => params.poolId)),
|
||||
this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith('all')),
|
||||
])
|
||||
this.poolStats$ = this.route.params.pipe(map((params) => params.poolId))
|
||||
.pipe(
|
||||
switchMap((params: any) => {
|
||||
this.poolId = params[0];
|
||||
return this.apiService.getPoolHashrate$(this.poolId, params[1] ?? 'all')
|
||||
switchMap((poolId: any) => {
|
||||
this.poolId = poolId;
|
||||
return this.apiService.getPoolHashrate$(this.poolId)
|
||||
.pipe(
|
||||
switchMap((data) => {
|
||||
this.prepareChartOptions(data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]));
|
||||
return params;
|
||||
return poolId;
|
||||
}),
|
||||
toArray(),
|
||||
)
|
||||
}),
|
||||
switchMap((params: any) => {
|
||||
switchMap(() => {
|
||||
if (this.blocks.length === 0) {
|
||||
this.fromHeightSubject.next(undefined);
|
||||
}
|
||||
return this.apiService.getPoolStats$(this.poolId, params[1] ?? '1w');
|
||||
return this.apiService.getPoolStats$(this.poolId);
|
||||
}),
|
||||
map((poolStats) => {
|
||||
let regexes = '"';
|
||||
|
||||
@@ -136,15 +136,12 @@ export class ApiService {
|
||||
);
|
||||
}
|
||||
|
||||
getPoolStats$(poolId: number, interval: string | undefined): Observable<PoolStat> {
|
||||
return this.httpClient.get<PoolStat>(
|
||||
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${poolId}` +
|
||||
(interval !== undefined ? `/${interval}` : '')
|
||||
);
|
||||
getPoolStats$(poolId: number): Observable<PoolStat> {
|
||||
return this.httpClient.get<PoolStat>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${poolId}`);
|
||||
}
|
||||
|
||||
getPoolHashrate$(poolId: number, interval: string | undefined): Observable<any> {
|
||||
return this.httpClient.get<any>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${poolId}/hashrate/${interval}`);
|
||||
getPoolHashrate$(poolId: number): Observable<any> {
|
||||
return this.httpClient.get<any>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${poolId}/hashrate`);
|
||||
}
|
||||
|
||||
getPoolBlocks$(poolId: number, fromHeight: number): Observable<BlockExtended[]> {
|
||||
|
||||
Reference in New Issue
Block a user