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

Create basic layout for mining dashboard page - Show miner in blocks

Browse Source
This commit is contained in:
nymkappa
2022-02-16 17:32:12 +09:00
parent 0c8d8aa85a
commit ead9fb98f4
12 changed files with 161 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,49 +1,48 @@
<div class="container-xl">
<!-- <app-difficulty [showProgress]=false [showHalving]=true></app-difficulty> -->
<div [class]="widget === false ? 'container-xl' : ''">
<div class="hashrate-pie" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
<div class="card-header mb-0 mb-lg-4">
<div class="card-header mb-0 mb-lg-4" [style]="widget === true ? 'display:none' : ''">
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(miningStatsObservable$ | async) as miningStats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1">
<input ngbButton type="radio" [value]="'24h'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="24h"> 24h
<input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 3">
<input ngbButton type="radio" [value]="'3d'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="3d"> 3D
<input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 7">
<input ngbButton type="radio" [value]="'1w'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="1w"> 1W
<input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 30">
<input ngbButton type="radio" [value]="'1m'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="1m"> 1M
<input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 90">
<input ngbButton type="radio" [value]="'3m'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="3m"> 3M
<input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 180">
<input ngbButton type="radio" [value]="'6m'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="6m"> 6M
<input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 365">
<input ngbButton type="radio" [value]="'1y'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="1y"> 1Y
<input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 730">
<input ngbButton type="radio" [value]="'2y'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="2y"> 2Y
<input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1095">
<input ngbButton type="radio" [value]="'3y'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="3y"> 3Y
<input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'all'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="all"> ALL
<input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
</label>
</div>
</form>
</div>
<table class="table table-borderless text-center pools-table">
<table *ngIf="widget === false" class="table table-borderless text-center pools-table">
<thead>
<tr>
<th class="d-none d-md-block" i18n="mining.rank">Rank</th>
@@ -64,8 +63,8 @@
<td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
</tr>
<tr style="border-top: 1px solid #555">
<td class="d-none d-md-block">-</td>
<td class="text-right"><img width="25" height="25" src="./resources/mining-pools/default.svg"></td>
<td class="d-none d-md-block"></td>
<td class="text-right"></td>
<td class="" i18n="mining.all-miners"><b>All miners</b></td>
<td class="" *ngIf="this.poolsWindowPreference === '24h'"><b>{{ miningStats.lastEstimatedHashrate}} {{ miningStats.miningUnits.hashrateUnit }}</b></td>
<td class=""><b>{{ miningStats.blockCount }}</b></td>

21
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { EChartsOption, PieSeriesOption } from 'echarts';
@@ -25,6 +25,8 @@ import { chartColors } from 'src/app/app.constants';
`],
})
export class PoolRankingComponent implements OnInit {
@Input() widget: boolean = false;
poolsWindowPreference: string;
radioGroupForm: FormGroup;
@@ -46,12 +48,17 @@ export class PoolRankingComponent implements OnInit {
private router: Router,
) {
this.seoService.setTitle($localize`:@@mining.mining-pools:Mining Pools`);
this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w';
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.poolsWindowPreference });
this.radioGroupForm.controls.dateSpan.setValue(this.poolsWindowPreference);
}
ngOnInit(): void {
if (this.widget) {
this.poolsWindowPreference = '1w';
} else {
this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w';
}
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.poolsWindowPreference });
this.radioGroupForm.controls.dateSpan.setValue(this.poolsWindowPreference);
// When...
this.miningStatsObservable$ = combineLatest([
// ...a new block is mined
@@ -65,7 +72,9 @@ export class PoolRankingComponent implements OnInit {
.pipe(
startWith(this.poolsWindowPreference), // (trigger when the page loads)
tap((value) => {
this.storageService.setValue('poolsWindowPreference', value);
if (!this.widget) {
this.storageService.setValue('poolsWindowPreference', value);
}
this.poolsWindowPreference = value;
})
)
@@ -147,7 +156,7 @@ export class PoolRankingComponent implements OnInit {
this.chartOptions = {
title: {
text: $localize`:@@mining.pool-chart-title:${network}:NETWORK: mining pools share`,
subtext: $localize`:@@mining.pool-chart-sub-title:Estimated from the # of blocks mined`,
subtext: $localize`:@@mining.pool-chart-sub-title:Estimated from the # of blocks mined (${this.poolsWindowPreference})`,
left: 'center',
textStyle: {
color: '#FFF',