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

Merge branch 'master' into mobile-refinements

Browse Source
This commit is contained in:
wiz 2022-03-15 09:28:10 +00:00 committed by GitHub
commit d769226061
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 1079 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

555
frontend/cypress/fixtures/mainnet_mempoolInfo.json
View File

File diff suppressed because one or more lines are too long

138
frontend/src/app/app-routing.module.ts
View File

@ -31,6 +31,7 @@ import { MiningDashboardComponent } from './components/mining-dashboard/mining-d
import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
import { MiningStartComponent } from './components/mining-start/mining-start.component';
import { GraphsComponent } from './components/graphs/graphs.component';
import { BlocksList } from './components/blocks-list/blocks-list.component';
let routes: Routes = [
@ -80,18 +81,6 @@ let routes: Routes = [
path: 'blocks',
component: BlocksList,
},
{
path: 'hashrate',
component: HashrateChartComponent,
},
{
path: 'hashrate/pools',
component: HashrateChartPoolsComponent,
},
{
path: 'pools',
component: PoolRankingComponent,
},
{
path: 'pool',
children: [
@ -105,7 +94,30 @@ let routes: Routes = [
},
{
path: 'graphs',
component: StatisticsComponent,
component: GraphsComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'mempool',
},
{
path: 'mempool',
component: StatisticsComponent,
},
{
path: 'mining/hashrate-difficulty',
component: HashrateChartComponent,
},
{
path: 'mining/pools-dominance',
component: HashrateChartPoolsComponent,
},
{
path: 'mining/pools',
component: PoolRankingComponent,
},
],
},
{
path: 'about',
@ -224,7 +236,30 @@ let routes: Routes = [
},
{
path: 'graphs',
component: StatisticsComponent,
component: GraphsComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'mempool',
},
{
path: 'mempool',
component: StatisticsComponent,
},
{
path: 'mining/hashrate-difficulty',
component: HashrateChartComponent,
},
{
path: 'mining/pools-dominance',
component: HashrateChartPoolsComponent,
},
{
path: 'mining/pools',
component: PoolRankingComponent,
},
]
},
{
path: 'address/:id',
@ -337,7 +372,30 @@ let routes: Routes = [
},
{
path: 'graphs',
component: StatisticsComponent,
component: GraphsComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'mempool',
},
{
path: 'mempool',
component: StatisticsComponent,
},
{
path: 'mining/hashrate-difficulty',
component: HashrateChartComponent,
},
{
path: 'mining/pools-dominance',
component: HashrateChartPoolsComponent,
},
{
path: 'mining/pools',
component: PoolRankingComponent,
},
]
},
{
path: 'address/:id',
@ -439,7 +497,30 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
},
{
path: 'graphs',
component: StatisticsComponent,
component: GraphsComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'mempool',
},
{
path: 'mempool',
component: StatisticsComponent,
},
{
path: 'mining/hashrate-difficulty',
component: HashrateChartComponent,
},
{
path: 'mining/pools-dominance',
component: HashrateChartPoolsComponent,
},
{
path: 'mining/pools',
component: PoolRankingComponent,
},
]
},
{
path: 'address/:id',
@ -548,7 +629,30 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
},
{
path: 'graphs',
component: StatisticsComponent,
component: GraphsComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'mempool',
},
{
path: 'mempool',
component: StatisticsComponent,
},
{
path: 'mining/hashrate-difficulty',
component: HashrateChartComponent,
},
{
path: 'mining/pools-dominance',
component: HashrateChartPoolsComponent,
},
{
path: 'mining/pools',
component: PoolRankingComponent,
},
]
},
{
path: 'address/:id',

2
frontend/src/app/app.module.ts
View File

@ -75,6 +75,7 @@ import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/
import { MiningStartComponent } from './components/mining-start/mining-start.component';
import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
import { GraphsComponent } from './components/graphs/graphs.component';
import { DifficultyAdjustmentsTable } from './components/difficulty-adjustments-table/difficulty-adjustments-table.components';
import { BlocksList } from './components/blocks-list/blocks-list.component';
@ -133,6 +134,7 @@ import { BlocksList } from './components/blocks-list/blocks-list.component';
HashrateChartPoolsComponent,
MiningStartComponent,
AmountShortenerPipe,
GraphsComponent,
DifficultyAdjustmentsTable,
BlocksList,
],

6
frontend/src/app/components/docs/code-template.component.html
View File

@ -12,7 +12,7 @@
<ng-template ngbNavContent>
<div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code)"></app-clipboard></div>
<div class="links">
<a [href]="npmGithubLink()" target="_blank">github repository</a>
<a [href]="npmGithubLink()" target="_blank">GitHub Repo</a>
</div>
<pre><code [innerText]="wrapCommonJS(code)"></code></pre>
</ng-template>
@ -22,8 +22,8 @@
<ng-template ngbNavContent>
<div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="wrapImportTemplate()"></app-clipboard></div>
<div class="links">
<a [href]="npmGithubLink()" target="_blank">github repository</a>
<a [href]="npmModuleLink()" target="_blank">npm package</a>
<a [href]="npmGithubLink()" target="_blank">GitHub Repo</a>
<a [href]="npmModuleLink()" target="_blank">NPM Package</a>
</div>
<pre><code [innerText]="wrapImportTemplate()"></code></pre>
<div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapEsModule(code)"></app-clipboard></div>

25
frontend/src/app/components/graphs/graphs.component.html Normal file
View File

@ -0,0 +1,25 @@
<ul ngbNav #nav="ngbNav" class="nav-pills mb-3" style="padding: 0px 35px">
<div class="d-inline-flex flex-wrap menu">
<li ngbNavItem class="menu-li">
<a routerLinkActive="active" [routerLink]="['/graphs/mempool' | relativeUrl]" ngbNavLink>Mempool</a>
</li>
<li ngbNavItem class="menu-li">
<a routerLinkActive="active" [routerLink]="['/graphs/mining/pools' | relativeUrl]" ngbNavLink i18n="mining.pools">
Pools ranking
</a>
</li>
<li ngbNavItem class="menu-li">
<a routerLinkActive="active" [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]" ngbNavLink i18n="mining.pools-dominance">
Pools dominance
</a>
</li>
<li ngbNavItem class="menu-li">
<a routerLinkActive="active" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" ngbNavLink
i18n="mining.hashrate-difficulty">
Hashrate & Difficulty
</a>
</li>
</div>
</ul>
<router-outlet></router-outlet>

9
frontend/src/app/components/graphs/graphs.component.scss Normal file
View File

@ -0,0 +1,9 @@
.menu {
flex-grow: 1;
max-width: 600px;
}
.menu-li {
flex-grow: 1;
text-align: center;
}

14
frontend/src/app/components/graphs/graphs.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component, OnInit } from "@angular/core";
@Component({
selector: 'app-graphs',
templateUrl: './graphs.component.html',
styleUrls: ['./graphs.component.scss'],
})
export class GraphsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

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

@ -1,6 +1,25 @@
<div [class]="widget === false ? 'full-container' : ''">
<div *ngIf="widget">
<div class="pool-distribution" *ngIf="(hashrateObservable$ | async) as hashrates; else loadingStats">
<div class="item">
<h5 class="card-title" i18n="mining.hashrate">Hashrate</h5>
<p class="card-text">
{{ hashrates.currentHashrate | amountShortener }}
<span class="symbol">hashes/sec</span>
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="master-page.blocks">Difficulty</h5>
<p class="card-text">
{{ hashrates.currentDifficulty | amountShortener }}
</p>
</div>
</div>
</div>
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
<span i18n="mining.mining-pool-share">Hashrate & Difficulty</span>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90">
@ -32,3 +51,20 @@
</div>
</div>
<ng-template #loadingStats>
<div class="pool-distribution">
<div class="item">
<h5 class="card-title" i18n="mining.miners-luck">Hashrate</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="master-page.blocks">Difficulty</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
</div>
</ng-template>

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

@ -1,3 +1,11 @@
.card-header {
border-bottom: 0;
font-size: 18px;
@media (min-width: 465px) {
font-size: 20px;
}
}
.main-title {
position: relative;
color: #ffffff91;
@ -10,13 +18,14 @@
}
.full-container {
padding: 0px 15px;
width: 100%;
height: calc(100% - 100px);
height: calc(100% - 170px);
@media (max-width: 992px) {
height: calc(100% - 140px);
height: calc(100% - 220px);
};
@media (max-width: 576px) {
height: calc(100% - 180px);
@media (max-width: 575px) {
height: calc(100% - 260px);
};
}
@ -24,18 +33,41 @@
width: 100%;
height: 100%;
padding-bottom: 20px;
padding-right: 20px;
padding-right: 10px;
@media (max-width: 992px) {
padding-bottom: 25px;
}
@media (max-width: 829px) {
padding-bottom: 50px;
}
@media (max-width: 767px) {
padding-bottom: 25px;
}
@media (max-width: 629px) {
padding-bottom: 55px;
}
@media (max-width: 567px) {
padding-bottom: 55px;
}
}
.chart-widget {
width: 100%;
height: 100%;
max-height: 293px;
max-height: 270px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 1130px) {
position: relative;
top: -65px;
}
@media (min-width: 830px) and (max-width: 1130px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
@ -48,3 +80,66 @@
}
}
}
.pool-distribution {
min-height: 56px;
display: block;
@media (min-width: 485px) {
display: flex;
flex-direction: row;
}
h5 {
margin-bottom: 10px;
}
.item {
width: 50%;
margin: 0px auto 10px;
display: inline-block;
@media (min-width: 485px) {
margin: 0px auto 10px;
}
@media (min-width: 785px) {
margin: 0px auto 0px;
}
&:last-child {
margin: 0px auto 0px;
}
&:nth-child(2) {
order: 2;
@media (min-width: 485px) {
order: 3;
}
}
&:nth-child(3) {
order: 3;
@media (min-width: 485px) {
order: 2;
display: block;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: block;
}
}
.card-title {
font-size: 1rem;
color: #4a68b9;
}
.card-text {
font-size: 18px;
span {
color: #ffffff66;
font-size: 12px;
}
}
}
}
.skeleton-loader {
width: 100%;
display: block;
max-width: 80px;
margin: 15px auto 3px;
}

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

@ -61,6 +61,7 @@ export class HashrateChartComponent implements OnInit {
.pipe(
startWith('1y'),
switchMap((timespan) => {
this.isLoading = true;
return this.apiService.getHistoricalHashrate$(timespan)
.pipe(
tap((data: any) => {
@ -109,21 +110,10 @@ export class HashrateChartComponent implements OnInit {
(new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
) / 3600 / 24;
const tableData = [];
for (let i = data.difficulty.length - 1; i > 0; --i) {
const selectedPowerOfTen: any = selectPowerOfTen(data.difficulty[i].difficulty);
const change = (data.difficulty[i].difficulty / data.difficulty[i - 1].difficulty - 1) * 100;
tableData.push(Object.assign(data.difficulty[i], {
change: change,
difficultyShorten: formatNumber(
data.difficulty[i].difficulty / selectedPowerOfTen.divider,
this.locale, '1.2-2') + selectedPowerOfTen.unit
}));
}
return {
availableTimespanDay: availableTimespanDay,
difficulty: this.tableOnly ? tableData.slice(0, 5) : tableData,
currentDifficulty: Math.round(data.difficulty[data.difficulty.length - 1].difficulty * 100) / 100,
currentHashrate: data.hashrates[data.hashrates.length - 1].avgHashrate,
};
}),
retryWhen((errors) => errors.pipe(
@ -155,6 +145,7 @@ export class HashrateChartComponent implements OnInit {
this.chartOptions = {
title: title,
animation: false,
color: [
new graphic.LinearGradient(0, 0, 0, 0.65, [
{ offset: 0, color: '#F4511E' },
@ -166,9 +157,10 @@ export class HashrateChartComponent implements OnInit {
'#D81B60',
],
grid: {
top: 30,
right: this.right,
left: this.left,
bottom: this.widget ? 30 : 60,
bottom: this.widget ? 30 : this.isMobile() ? 90 : 60,
},
tooltip: {
show: !this.isMobile() || !this.widget,
@ -209,7 +201,7 @@ export class HashrateChartComponent implements OnInit {
type: 'time',
splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
},
legend: data.hashrates.length === 0 ? undefined : {
legend: (this.widget || data.hashrates.length === 0) ? undefined : {
data: [
{
name: 'Hashrate',
@ -241,7 +233,6 @@ export class HashrateChartComponent implements OnInit {
return value.min * 0.9;
},
type: 'value',
name: 'Hashrate',
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
@ -259,7 +250,6 @@ export class HashrateChartComponent implements OnInit {
return value.min * 0.9;
},
type: 'value',
name: 'Difficulty',
position: 'right',
axisLabel: {
color: 'rgb(110, 112, 121)',
@ -301,17 +291,18 @@ export class HashrateChartComponent implements OnInit {
type: 'inside',
realtime: true,
zoomLock: true,
zoomOnMouseWheel: true,
moveOnMouseMove: true,
maxSpan: 100,
minSpan: 10,
moveOnMouseMove: false,
}, {
showDetail: false,
show: true,
type: 'slider',
brushSelect: false,
realtime: true,
bottom: 0,
bottom: this.isMobile() ? 30 : 0,
left: 20,
right: 15,
selectedDataBackground: {
lineStyle: {
color: '#fff',

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

@ -1,6 +1,7 @@
<div [class]="widget === false ? 'full-container' : ''">
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
<div class="card-header" [style]="widget ? 'display:none' : ''">
<span *ngIf="!widget" i18n="mining.pools-dominance">Mining pools dominance</span>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90">

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

@ -1,3 +1,11 @@
.card-header {
border-bottom: 0;
font-size: 18px;
@media (min-width: 465px) {
font-size: 20px;
}
}
.main-title {
position: relative;
color: #ffffff91;
@ -10,21 +18,37 @@
}
.full-container {
padding: 0px 15px;
width: 100%;
height: calc(100% - 100px);
@media (max-width: 992px) {
height: calc(100% - 140px);
height: calc(100% - 140px);
@media (max-width: 991px) {
height: calc(100% - 190px);
};
@media (max-width: 576px) {
height: calc(100% - 180px);
@media (max-width: 575px) {
height: calc(100% - 235px);
};
}
.chart {
width: 100%;
height: 100%;
padding-bottom: 20px;
padding-right: 20px;
padding-bottom: 25px;
padding-right: 10px;
@media (max-width: 992px) {
padding-bottom: 25px;
}
@media (max-width: 829px) {
padding-bottom: 50px;
}
@media (max-width: 767px) {
padding-bottom: 50px;
}
@media (max-width: 629px) {
padding-bottom: 85px;
}
@media (max-width: 567px) {
padding-bottom: 85px;
}
}
.chart-widget {
width: 100%;
@ -36,6 +60,14 @@
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 1130px) {
position: relative;
top: -65px;
}
@media (min-width: 830px) and (max-width: 1130px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;

33
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
View File

@ -23,7 +23,7 @@ import { poolsColor } from 'src/app/app.constants';
})
export class HashrateChartPoolsComponent implements OnInit {
@Input() widget = false;
@Input() right: number | string = 40;
@Input() right: number | string = 45;
@Input() left: number | string = 25;
radioGroupForm: FormGroup;
@ -153,11 +153,12 @@ export class HashrateChartPoolsComponent implements OnInit {
this.chartOptions = {
title: title,
animation: false,
grid: {
right: this.right,
left: this.left,
bottom: this.widget ? 30 : 20,
top: this.widget ? 10 : 40,
bottom: this.widget ? 30 : 60,
top: this.widget || this.isMobile() ? 10 : 50,
},
tooltip: {
show: !this.isMobile() || !this.widget,
@ -206,6 +207,32 @@ export class HashrateChartPoolsComponent implements OnInit {
min: 0,
},
series: data.series,
dataZoom: this.widget ? null : [{
type: 'inside',
realtime: true,
zoomLock: true,
maxSpan: 100,
minSpan: 10,
moveOnMouseMove: false,
}, {
showDetail: false,
show: true,
type: 'slider',
brushSelect: false,
realtime: true,
bottom: 0,
left: 20,
right: 15,
selectedDataBackground: {
lineStyle: {
color: '#fff',
opacity: 0.45,
},
areaStyle: {
opacity: 0,
}
},
}],
};
}

2
frontend/src/app/components/master-page/master-page.component.html
View File

@ -38,7 +38,7 @@
<a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
</li>
<li class="nav-item" routerLinkActive="active" id="btn-graphs">
<a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
<a class="nav-link" [routerLink]="['/graphs/mempool' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
</li>
<li class="nav-item d-none d-lg-block" routerLinkActive="active" id="btn-tv">
<a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>

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

@ -76,7 +76,7 @@
<div class="card" style="height: 385px">
<div class="card-body">
<app-pool-ranking [widget]=true></app-pool-ranking>
<div class="mt-1"><a [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
<div class="mt-1"><a [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
@ -86,30 +86,13 @@
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<h5 class="card-title">
Hashrate (1y)
</h5>
<app-hashrate-chart [widget]=true></app-hashrate-chart>
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
<div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
</div>
<!-- pool dominance -->
<!-- <div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<h5 class="card-title">
Mining Pools Dominance (1y)
</h5>
<app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
<div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View
more &raquo;</a></div>
</div>
</div>
</div> -->
<!-- Latest blocks -->
<div class="col">
<div class="card" style="height: 385px">
@ -124,6 +107,7 @@
</div>
</div>
<!-- Difficult adjustments -->
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
@ -131,11 +115,11 @@
Adjustments
</h5>
<app-difficulty-adjustments-table></app-difficulty-adjustments-table>
<div><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
<div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -125,3 +125,7 @@
max-width: 55px;
}
}
.card-text {
font-size: 22px;
}

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

@ -1,7 +1,8 @@
import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { SeoService } from 'src/app/services/seo.service';
import { StateService } from 'src/app/services/state.service';
import { formatNumber } from '@angular/common';
import { Observable } from 'rxjs';
@Component({

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

@ -1,4 +1,4 @@
<div [class]="widget === false ? 'container-xl' : ''">
<div [class]="widget === false ? 'full-container' : ''">
<div *ngIf="widget">
<div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward">
@ -23,14 +23,10 @@
</div>
</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 mt-md-3" [style]="widget ? 'display:none' : ''">
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(miningStatsObservable$ | async) as miningStats">
<div class="card-header" *ngIf="!widget">
<span i18n="mining.mining-pool-share">Mining pools share</span>
<form [formGroup]="radioGroupForm" class="formRadioGroup"
*ngIf="!widget && (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'" fragment="24h"> 24h
@ -66,36 +62,48 @@
</form>
</div>
<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>
<th class=""></th>
<th class="" i18n="mining.pool-name">Pool</th>
<th class="" *ngIf="this.poolsWindowPreference === '24h'" i18n="mining.hashrate">Hashrate</th>
<th class="" i18n="master-page.blocks">Blocks</th>
<th class="d-none d-md-block" i18n="mining.empty-blocks">Empty Blocks</th>
</tr>
</thead>
<tbody *ngIf="(miningStatsObservable$ | async) as miningStats">
<tr *ngFor="let pool of miningStats.pools">
<td class="d-none d-md-block">{{ pool.rank }}</td>
<td class="text-right"><img width="25" height="25" src="{{ pool.logo }}" onError="this.src = './resources/mining-pools/default.svg'"></td>
<td class=""><a [routerLink]="[('/mining/pool/' + pool.poolId) | relativeUrl]">{{ pool.name }}</a></td>
<td class="" *ngIf="this.poolsWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td>
<td class="">{{ pool['blockText'] }}</td>
<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"></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>
<td class="d-none d-md-block"><b>{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio }}%)</b></td>
</tr>
</tbody>
</table>
<div [class]="!widget ? 'bottom-padding' : 'pb-0'" class="container pb-lg-0">
<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>
<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>
<th class=""></th>
<th class="" i18n="mining.pool-name">Pool</th>
<th class="" *ngIf="this.poolsWindowPreference === '24h'" i18n="mining.hashrate">Hashrate</th>
<th class="" i18n="master-page.blocks">Blocks</th>
<th class="d-none d-md-block" i18n="mining.empty-blocks">Empty Blocks</th>
</tr>
</thead>
<tbody *ngIf="(miningStatsObservable$ | async) as miningStats">
<tr *ngFor="let pool of miningStats.pools">
<td class="d-none d-md-block">{{ pool.rank }}</td>
<td class="text-right"><img width="25" height="25" src="{{ pool.logo }}"
onError="this.src = './resources/mining-pools/default.svg'"></td>
<td class=""><a [routerLink]="[('/mining/pool/' + pool.poolId) | relativeUrl]">{{ pool.name }}</a></td>
<td class="" *ngIf="this.poolsWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{
miningStats.miningUnits.hashrateUnit }}</td>
<td class="">{{ pool['blockText'] }}</td>
<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"></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>
<td class="d-none d-md-block"><b>{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio
}}%)</b></td>
</tr>
</tbody>
</table>
</div>
</div>
@ -121,4 +129,4 @@
</p>
</div>
</div>
</ng-template>
</ng-template>

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

@ -1,7 +1,27 @@
.card-header {
border-bottom: 0;
font-size: 18px;
@media (min-width: 465px) {
font-size: 20px;
}
}
.full-container {
padding: 0px 15px;
width: 100%;
height: calc(100% - 140px);
@media (max-width: 992px) {
height: calc(100% - 190px);
};
@media (max-width: 575px) {
height: calc(100% - 230px);
};
}
.chart {
max-height: 400px;
@media (max-width: 767.98px) {
max-height: 270px;
max-height: 230px;
}
}
.chart-widget {
@ -17,10 +37,17 @@
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 1130px) {
position: relative;
top: -65px;
}
@media (min-width: 830px) and (max-width: 1130px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
margin-left: 2%;
flex-direction: row;
float: left;
float: right;
margin-top: 0px;
}
.btn-sm {
@ -31,12 +58,21 @@
}
}
@media (max-width: 767.98px) {
.bottom-padding {
@media (max-width: 992px) {
padding-bottom: 65px
};
@media (max-width: 576px) {
padding-bottom: 65px
};
}
@media (max-width: 767.98px) {
.pools-table th,
.pools-table td {
padding: .3em !important;
}
}
padding: .3em !important;
}
}
.loadingGraphs {
position: absolute;
@ -44,9 +80,6 @@
left: calc(50% - 15px);
z-index: 100;
}
.loadingGraphs.widget {
top: 25%;
}
.pool-distribution {
min-height: 56px;

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

@ -117,7 +117,7 @@ export class PoolRankingComponent implements OnInit {
if (this.isMobile() && this.widget) {
edgeDistance = 0;
} else if (this.isMobile() && !this.widget || this.widget) {
edgeDistance = 35;
edgeDistance = 10;
}
miningStats.pools.forEach((pool) => {
@ -209,13 +209,13 @@ export class PoolRankingComponent implements OnInit {
network = network.charAt(0).toUpperCase() + network.slice(1);
let radius: any[] = ['20%', '80%'];
let top: any = undefined; let bottom = undefined; let height = undefined;
let top: number = 0; let height = undefined;
if (this.isMobile() && this.widget) {
top = -30;
height = 270;
radius = ['10%', '50%'];
} else if (this.isMobile() && !this.widget) {
top = 0;
top = -40;
height = 300;
radius = ['10%', '50%'];
} else if (this.widget) {
@ -223,22 +223,12 @@ export class PoolRankingComponent implements OnInit {
top = -20;
height = 330;
} else {
top = 35;
top = 0;
}
this.chartOptions = {
animation: false,
color: chartColors,
title: {
text: this.widget ? '' : $localize`:@@mining.pool-chart-title:${network}:NETWORK: mining pools share`,
left: 'center',
textStyle: {
color: '#FFF',
},
subtextStyle: {
color: '#CCC',
fontStyle: 'italic',
}
},
tooltip: {
trigger: 'item',
textStyle: {
@ -249,7 +239,6 @@ export class PoolRankingComponent implements OnInit {
{
minShowLabelAngle: 3.6,
top: top,
bottom: bottom,
height: height,
name: 'Mining pool',
type: 'pie',

3
frontend/src/app/components/start/start.component.ts
View File

@ -1,5 +1,4 @@
import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
import { WebsocketService } from 'src/app/services/websocket.service';
import { StateService } from 'src/app/services/state.service';
import { specialBlocks } from 'src/app/app.constants';
@ -20,12 +19,10 @@ export class StartComponent implements OnInit {
@ViewChild('blockchainContainer') blockchainContainer: ElementRef;
constructor(
private websocketService: WebsocketService,
private stateService: StateService,
) { }
ngOnInit() {
this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
this.stateService.blocks$
.subscribe((blocks: any) => {
if (this.stateService.network !== '') {

8
frontend/src/app/components/statistics/statistics.component.scss
View File

@ -40,6 +40,14 @@
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 1130px) {
position: relative;
top: -65px;
}
@media (min-width: 830px) and (max-width: 1130px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;

45
frontend/src/app/shared/pipes/amount-shortener.pipe.ts
View File

@ -1,39 +1,26 @@
import { Pipe, PipeTransform } from '@angular/core';
// https://medium.com/@thunderroid/angular-short-number-suffix-pipe-1k-2m-3b-dded4af82fb4
@Pipe({
name: 'amountShortener'
})
export class AmountShortenerPipe implements PipeTransform {
transform(number: number, args?: any): any {
if (isNaN(number)) return null; // will only work value is a number
if (number === null) return null;
if (number === 0) return null;
let abs = Math.abs(number);
const rounder = Math.pow(10, 1);
const isNegative = number < 0; // will also work for Negetive numbers
let key = '';
const powers = [
{ key: 'E', value: 10e18 },
{ key: 'P', value: 10e15 },
{ key: 'T', value: 10e12 },
{ key: 'B', value: 10e9 },
{ key: 'M', value: 10e6 },
{ key: 'K', value: 1000 }
];
for (let i = 0; i < powers.length; i++) {
let reduced = abs / powers[i].value;
reduced = Math.round(reduced * rounder) / rounder;
if (reduced >= 1) {
abs = reduced;
key = powers[i].key;
break;
}
transform(num: number, ...args: number[]): unknown {
if (num < 1000) {
return num;
}
return (isNegative ? '-' : '') + abs + key;
const digits = args[0] || 1;
const lookup = [
{ value: 1, symbol: '' },
{ value: 1e3, symbol: 'k' },
{ value: 1e6, symbol: 'M' },
{ value: 1e9, symbol: 'G' },
{ value: 1e12, symbol: 'T' },
{ value: 1e15, symbol: 'P' },
{ value: 1e18, symbol: 'E' }
];
const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
var item = lookup.slice().reverse().find((item) => num >= item.value);
return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0';
}
}