mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-29 01:34:28 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1288 from nymkappa/feature/merge-hashrate-pool-ranking

Browse Source 
Merge pool share and dominance into one widget
This commit is contained in:
wiz 2022-02-25 21:44:05 +09:00 committed by GitHub
commit 5f19b6dd07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
View File

@ -27,7 +27,7 @@
<div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'" <div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div> echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading"> <div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>

10
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
View File

@ -48,3 +48,13 @@
} }
} }
} }
.loadingGraphs {
position: absolute;
top: 50%;
left: calc(50% - 15px);
z-index: 100;
}
.loadingGraphs.widget {
top: 75%;
}

31
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View File

@ -1,25 +1,28 @@
<div class="container-xl dashboard-container"> <div class="container-xl dashboard-container">
<div class="row row-cols-1 row-cols-md-2"> <div class="row row-cols-1 row-cols-md-2">
<!-- pools hashrate -->
<div class="col"> <div class="col">
<div class="card"> <div class="card double">
<div class="card-body"> <div class="card-body">
<!-- pool distribution -->
<h5 class="card-title"> <h5 class="card-title">
<a class="link" href="" [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="mining.pools-hashrate"> <a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share">
Mining Pools Dominance (1y) Mining Pools Share (1w)
</a> </a>
</h5> </h5>
<app-pool-ranking [widget]=true></app-pool-ranking>
<!-- pools hashrate -->
<app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools> <app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
</div> </div>
</div> </div>
</div> </div>
<!-- hashrate -->
<div class="col"> <div class="col">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<!-- hashrate -->
<h5 class="card-title"> <h5 class="card-title">
<a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate"> <a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate">
Hashrate (1y) Hashrate (1y)
@ -28,21 +31,7 @@
<app-hashrate-chart [widget]=true></app-hashrate-chart> <app-hashrate-chart [widget]=true></app-hashrate-chart>
</div> </div>
</div> </div>
</div> </div>
<!-- pool distribution -->
<div class="col">
<div class="card">
<div class="card-body pool-ranking">
<h5 class="card-title">
<a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share">
Mining Pools Share (1w)
</a>
</h5>
<app-pool-ranking [widget]=true></app-pool-ranking>
</div>
</div>
</div>
</div> </div>
</div> </div>

3
frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
View File

@ -14,6 +14,9 @@
background-color: #1d1f31; background-color: #1d1f31;
height: 340px; height: 340px;
} }
.card.double {
height: 620px;
}
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;

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

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

10
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

@ -34,3 +34,13 @@
padding: .3em !important; padding: .3em !important;
} }
} }
.loadingGraphs {
position: absolute;
top: 50%;
left: calc(50% - 15px);
z-index: 100;
}
.loadingGraphs.widget {
top: 25%;
}

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

@ -15,14 +15,6 @@ import { chartColors, poolsColor } from 'src/app/app.constants';
selector: 'app-pool-ranking', selector: 'app-pool-ranking',
templateUrl: './pool-ranking.component.html', templateUrl: './pool-ranking.component.html',
styleUrls: ['./pool-ranking.component.scss'], styleUrls: ['./pool-ranking.component.scss'],
styles: [`
.loadingGraphs {
position: absolute;
top: 50%;
left: calc(50% - 15px);
z-index: 100;
}
`],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class PoolRankingComponent implements OnInit { export class PoolRankingComponent implements OnInit {
@ -164,7 +156,7 @@ export class PoolRankingComponent implements OnInit {
let radius: any[] = ['20%', '70%']; let radius: any[] = ['20%', '70%'];
if (this.isMobile() || this.widget) { if (this.isMobile() || this.widget) {
radius = ['20%', '65%']; radius = ['20%', '60%'];
} }
this.chartOptions = { this.chartOptions = {