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

Improve hashrate chart and mining dashboard design

Browse Source
This commit is contained in:
nymkappa 2022-02-22 20:15:15 +09:00
parent dcd84680fc
commit 3f0bf81726
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
8 changed files with 81 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View File

@ -25,13 +25,14 @@
</form>
</div>
<div *ngIf="hashrateObservable$ | async" [class]="widget === false ? 'chart' : ''" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
<div class="container-xl mt-3">
<table class="table table-borderless table-sm text-center" *ngIf="!widget">
<div class="mt-3" *ngIf="!widget">
<table class="table table-borderless table-sm text-center">
<thead>
<tr>
<th i18n="mining.rank">Block</th>

5
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View File

@ -26,6 +26,11 @@
padding-bottom: 20px;
padding-right: 20px;
}
.chart-widget {
width: 100%;
height: 100%;
max-height: 275px;
}
.formRadioGroup {
margin-top: 6px;

34
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View File

@ -69,7 +69,7 @@ export class HashrateChartComponent implements OnInit {
timestamp: data.hashrates[hashIndex].timestamp,
difficulty: data.difficulty[data.difficulty.length - 1].difficulty
});
++hashIndex;
++hashIndex;
}
break;
}
@ -121,7 +121,7 @@ export class HashrateChartComponent implements OnInit {
prepareChartOptions(data) {
this.chartOptions = {
color: [
new graphic.LinearGradient(0, 0, 0, 0.65, [
new graphic.LinearGradient(0, 0, 0, 0.65, [
{ offset: 0, color: '#F4511E' },
{ offset: 0.25, color: '#FB8C00' },
{ offset: 0.5, color: '#FFB300' },
@ -133,6 +133,7 @@ export class HashrateChartComponent implements OnInit {
grid: {
right: this.right,
left: this.left,
bottom: 30,
},
tooltip: {
trigger: 'axis',
@ -146,6 +147,25 @@ export class HashrateChartComponent implements OnInit {
color: '#b1b1b1',
},
borderColor: '#000',
formatter: function (data) {
let hashratePowerOfTen: any = selectPowerOfTen(1);
let hashrate = data[0].data[1];
let difficultyPowerOfTen = hashratePowerOfTen;
let difficulty = data[1].data[1];
if (this.isMobile()) {
hashratePowerOfTen = selectPowerOfTen(data[0].data[1]);
hashrate = Math.round(data[0].data[1] / hashratePowerOfTen.divider);
difficultyPowerOfTen = selectPowerOfTen(data[1].data[1]);
difficulty = Math.round(data[1].data[1] / difficultyPowerOfTen.divider);
}
return `
<b style="color: white; margin-left: 18px">${data[0].axisValueLabel}</b><br>
<span>${data[0].marker} ${data[0].seriesName}: ${formatNumber(hashrate, this.locale, '1.0-0')} ${hashratePowerOfTen.unit}H/s</span><br>
<span>${data[1].marker} ${data[1].seriesName}: ${formatNumber(difficulty, this.locale, '1.0-0')} ${difficultyPowerOfTen.unit}</span>
`;
}.bind(this)
},
xAxis: {
type: 'time',
@ -179,13 +199,16 @@ export class HashrateChartComponent implements OnInit {
},
yAxis: [
{
min: function (value) {
return value.min * 0.9;
},
type: 'value',
name: 'Hashrate',
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
const selectedPowerOfTen: any = selectPowerOfTen(val);
const newVal = val / selectedPowerOfTen.divider;
const newVal = Math.round(val / selectedPowerOfTen.divider);
return `${newVal} ${selectedPowerOfTen.unit}H/s`
}
},
@ -194,6 +217,9 @@ export class HashrateChartComponent implements OnInit {
}
},
{
min: function (value) {
return value.min * 0.9;
},
type: 'value',
name: 'Difficulty',
position: 'right',
@ -201,7 +227,7 @@ export class HashrateChartComponent implements OnInit {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
const selectedPowerOfTen: any = selectPowerOfTen(val);
const newVal = val / selectedPowerOfTen.divider;
const newVal = Math.round(val / selectedPowerOfTen.divider);
return `${newVal} ${selectedPowerOfTen.unit}`
}
},

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

@ -5,11 +5,13 @@
<!-- pool distribution -->
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title" i18n="mining.pool-share">Mining Pools Share (1w)</h5>
<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 class="text-center"><a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
</div>
@ -18,10 +20,12 @@
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title" i18n="mining.hashrate">Hashrate (1y)</h5>
<h5 class="card-title">
<a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate">
Hashrate (1y)
</a>
</h5>
<app-hashrate-chart [widget]=true></app-hashrate-chart>
<div class="text-center"><a href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
</div>

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

@ -16,22 +16,17 @@
}
.card-title {
color: #4a68b9;
font-size: 1rem;
}
.card-title > a {
color: #4a68b9;
}
.card-wrapper {
.card {
height: auto !important;
}
.card-body {
display: flex;
flex: inherit;
text-align: center;
flex-direction: column;
justify-content: space-around;
padding: 22px 20px;
}
.card-body {
padding: 1.25rem 1rem 0.75rem 1rem;
}
.card-body.pool-ranking {
padding: 1.25rem 0.25rem 0.75rem 0.25rem;
}
#blockchain-container {

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

@ -1,11 +1,12 @@
<div [class]="widget === false ? 'container-xl' : ''">
<div class="hashrate-pie" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
<div [class]="widget ? 'chart-widget' : 'chart'"
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" [style]="widget === true ? 'display:none' : ''">
<div class="card-header mb-0 mb-lg-4 mt-md-3" [style]="widget ? '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">

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

@ -1,10 +1,14 @@
.hashrate-pie {
height: 100%;
min-height: 400px;
.chart {
max-height: 400px;
@media (max-width: 767.98px) {
min-height: 300px;
max-height: 300px;
}
}
.chart-widget {
width: 100%;
height: 100%;
max-height: 275px;
}
.formRadioGroup {
margin-top: 6px;

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

@ -33,7 +33,9 @@ export class PoolRankingComponent implements OnInit {
isLoading = true;
chartOptions: EChartsOption = {};
chartInitOptions = {
renderer: 'svg'
renderer: 'svg',
width: 'auto',
height: 'auto',
};
chartInstance: any = undefined;
@ -156,6 +158,11 @@ export class PoolRankingComponent implements OnInit {
}
network = network.charAt(0).toUpperCase() + network.slice(1);
let radius: any[] = ['20%', '70%'];
if (this.isMobile() || this.widget) {
radius = ['20%', '65%'];
}
this.chartOptions = {
title: {
text: this.widget ? '' : $localize`:@@mining.pool-chart-title:${network}:NETWORK: mining pools share`,
@ -173,13 +180,14 @@ export class PoolRankingComponent implements OnInit {
},
series: [
{
top: this.widget ? '0%' : (this.isMobile() ? '5%' : '10%'),
bottom: this.widget ? '0%' : (this.isMobile() ? '0%' : '5%'),
top: this.widget ? 0 : 35,
name: 'Mining pool',
type: 'pie',
radius: this.widget ? ['20%', '60%'] : (this.isMobile() ? ['10%', '50%'] : ['20%', '70%']),
radius: radius,
data: this.generatePoolsChartSerieData(miningStats),
labelLine: {
length: this.isMobile() ? 10 : 15,
length2: this.isMobile() ? 0 : 15,
lineStyle: {
width: 2,
},