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
8 changed files with 81 additions and 37 deletions
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}`
}
},