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

Updated pool summary page to display more info on hashrate and blocks

Browse Source
This commit is contained in:
nymkappa 2022-04-05 00:36:00 +09:00
parent ba92284e44
commit c4db7ec5f6
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
7 changed files with 387 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
backend/src/api/mining.ts
View File

@ -45,8 +45,8 @@ class Mining {
const blockCount: number = await BlocksRepository.$blockCount(null, interval); const blockCount: number = await BlocksRepository.$blockCount(null, interval);
poolsStatistics['blockCount'] = blockCount; poolsStatistics['blockCount'] = blockCount;
const blockHeightTip = await bitcoinClient.getBlockCount(); const totalBlock24h: number = await BlocksRepository.$blockCount(null, '24h');
const lastBlockHashrate = await bitcoinClient.getNetworkHashPs(144, blockHeightTip); const lastBlockHashrate = await bitcoinClient.getNetworkHashPs(totalBlock24h);
poolsStatistics['lastEstimatedHashrate'] = lastBlockHashrate; poolsStatistics['lastEstimatedHashrate'] = lastBlockHashrate;
return poolsStatistics; return poolsStatistics;
@ -62,12 +62,30 @@ class Mining {
} }
const blockCount: number = await BlocksRepository.$blockCount(pool.id); const blockCount: number = await BlocksRepository.$blockCount(pool.id);
const emptyBlocksCount = await BlocksRepository.$countEmptyBlocks(pool.id); const totalBlock: number = await BlocksRepository.$blockCount(null, null);
const blockCount24h: number = await BlocksRepository.$blockCount(pool.id, '24h');
const totalBlock24h: number = await BlocksRepository.$blockCount(null, '24h');
const blockCount1w: number = await BlocksRepository.$blockCount(pool.id, '1w');
const totalBlock1w: number = await BlocksRepository.$blockCount(null, '1w');
const currentEstimatedkHashrate = await bitcoinClient.getNetworkHashPs(totalBlock24h);
return { return {
pool: pool, pool: pool,
blockCount: blockCount, blockCount: {
emptyBlocks: emptyBlocksCount.length > 0 ? emptyBlocksCount[0]['count'] : 0, 'all': blockCount,
'24h': blockCount24h,
'1w': blockCount1w,
},
blockShare: {
'all': blockCount / totalBlock,
'24h': blockCount24h / totalBlock24h,
'1w': blockCount1w / totalBlock1w,
},
estimatedHashrate: currentEstimatedkHashrate * (blockCount24h / totalBlock24h),
reportedHashrate: null,
}; };
} }

17
backend/src/repositories/BlocksRepository.ts
View File

@ -360,23 +360,6 @@ class BlocksRepository {
} }
} }
/**
* Return oldest blocks height
*/
public async $getOldestIndexedBlockHeight(): Promise<number> {
const connection = await DB.getConnection();
try {
const [rows]: any[] = await connection.query(`SELECT MIN(height) as minHeight FROM blocks`);
connection.release();
return rows[0].minHeight;
} catch (e) {
connection.release();
logger.err('$getOldestIndexedBlockHeight() error' + (e instanceof Error ? e.message : e));
throw e;
}
}
/** /**
* Get general block stats * Get general block stats
*/ */

393
frontend/src/app/components/pool/pool.component.html
View File

@ -1,5 +1,6 @@
<div class="container-xl"> <div class="container-xl">
<!-- Pool overview -->
<div *ngIf="poolStats$ | async as poolStats; else loadingMain"> <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
<div style="display:flex" class="mb-3"> <div style="display:flex" class="mb-3">
<img width="50" height="50" src="{{ poolStats['logo'] }}" <img width="50" height="50" src="{{ poolStats['logo'] }}"
@ -10,22 +11,21 @@
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col-lg-9"> <div class="col-lg-6">
<table class="table table-borderless table-striped" style="table-layout: fixed;"> <table class="table table-borderless table-striped taller" style="table-layout: fixed;">
<tbody> <tbody>
<!-- Regexes desktop --> <!-- Regexes desktop -->
<tr *ngIf="!isMobile()"> <tr *ngIf="!isMobile()" class="taller-row">
<td class="label" i18n="mining.tags">Tags</td> <td class="label" i18n="mining.tags">Tags</td>
<td *ngIf="poolStats.pool.regexes.length else nodata"> <td *ngIf="poolStats.pool.regexes.length else nodata" style="vertical-align: middle">
{{ poolStats.pool.regexes }} <div class="scrollable">{{ poolStats.pool.regexes }}</div>
</td> </td>
</tr> </tr>
<!-- Regexes mobile --> <!-- Regexes mobile -->
<tr *ngIf="isMobile()"> <tr *ngIf="isMobile()">
<td colspan=2> <td colspan=2>
<span i18n="mining.tags" class="label">Tags</span> <span class="label" i18n="mining.tags">Tags</span>
<div *ngIf="poolStats.pool.regexes.length else nodatamobile" class="overflow-auto"> <div *ngIf="poolStats.pool.regexes.length else nodatamobile" class="overflow-auto">
{{ poolStats.pool.regexes }} {{ poolStats.pool.regexes }}
</div> </div>
@ -33,17 +33,17 @@
</tr> </tr>
<!-- Addresses desktop --> <!-- Addresses desktop -->
<tr *ngIf="!isMobile()"> <tr *ngIf="!isMobile()" class="taller-row">
<td class="label" i18n="mining.addresses">Addresses</td> <td class="label addresses" i18n="mining.addresses">Addresses</td>
<td *ngIf="poolStats.pool.addresses.length else nodata" style="padding-bottom: 0;"> <td *ngIf="poolStats.pool.addresses.length else nodata" style="padding-top: 25px">
<a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]" class="first-address"> <button *ngIf="poolStats.pool.addresses.length >= 2" type="button"
{{ poolStats.pool.addresses[0] }} class="btn btn-outline-info btn-sm float-right small-button" (click)="collapse.toggle()"
</a>
<button *ngIf="poolStats.pool.addresses.length >= 2" style="transform: translateY(-3px);"
type="button" class="btn btn-outline-info btn-sm float-right" (click)="collapse.toggle()"
[attr.aria-expanded]="!gfg" aria-controls="collapseExample"> [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
<span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }}) <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
</button> </button>
<a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]" class="first-address">
{{ poolStats.pool.addresses[0] }}
</a>
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg"> <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
<a *ngFor="let address of poolStats.pool.addresses | slice: 1" <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
[routerLink]="['/address' | relativeUrl, address]">{{ [routerLink]="['/address' | relativeUrl, address]">{{
@ -51,7 +51,6 @@
</div> </div>
</td> </td>
</tr> </tr>
<!-- Addresses mobile --> <!-- Addresses mobile -->
<tr *ngIf="isMobile()"> <tr *ngIf="isMobile()">
<td colspan=2> <td colspan=2>
@ -77,105 +76,192 @@
</table> </table>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-6">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<!-- Mined blocks desktop --> <!-- Hashrate desktop -->
<tr *ngIf="!isMobile()"> <tr *ngIf="!isMobile()" class="taller-row">
<td class="label" i18n="mining.mined-blocks">Mined Blocks</td> <td class="label" i18n="mining.hashrate-24h">Hashrate (24h)</td>
<td class="data">{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</td> <td class="data">
<table class="table table-xs table-data">
<thead>
<tr>
<th scope="col" class="block-count-title" style="width: 37%" i18n="mining.estimated">Estimated
</th>
<th scope="col" class="block-count-title" style="width: 37%" i18n="mining.reported">Reported
</th>
<th scope="col" class="block-count-title" style="width: 26%" i18n="mining.luck">Luck</th>
</tr>
</thead>
<tbody>
<td>{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</td>
<ng-template *ngIf="poolStats.luck; else noreported">
<td>{{ poolStats.reportedHashrate | amountShortener : 1 : 'H/s' }}</td>
<td>{{ formatNumber(poolStats.luck, this.locale, '1.2-2') }}%</td>
</ng-template>
</tbody>
</table>
</td>
</tr> </tr>
<!-- Mined blocks desktop --> <!-- Hashrate mobile -->
<tr *ngIf="isMobile()"> <tr *ngIf="isMobile()">
<td colspan=2> <td colspan="2">
<span class="label" i18n="mining.mined-blocks">Mined Blocks</span> <span class="label" i18n="mining.hashrate-24h">Hashrate (24h)</span>
<div>{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</div> <table class="table table-xs table-data">
<thead>
<tr>
<th scope="col" class="block-count-title" style="width: 33%" i18n="mining.estimated">Estimated
</th>
<th scope="col" class="block-count-title" style="width: 37%" i18n="mining.reported">Reported
</th>
<th scope="col" class="block-count-title" style="width: 30%" i18n="mining.luck">Luck</th>
</tr>
</thead>
<tbody>
<td>{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</td>
<ng-template *ngIf="poolStats.luck; else noreported">
<td>{{ poolStats.reportedHashrate | amountShortener : 1 : 'H/s' }}</td>
<td>{{ formatNumber(poolStats.luck, this.locale, '1.2-2') }}%</td>
</ng-template>
</tbody>
</table>
</td> </td>
</tr> </tr>
<!-- Empty blocks desktop --> <ng-template #noreported>
<tr *ngIf="!isMobile()"> <td>~</td>
<td class="label" i18n="mining.empty-blocks">Empty Blocks</td> <td>~</td>
<td class="data">{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</td> </ng-template>
<!-- Mined blocks desktop -->
<tr *ngIf="!isMobile()" class="taller-row">
<td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
<td class="data">
<table class="table table-xs table-data">
<thead>
<tr>
<th scope="col" class="block-count-title" style="width: 37%" i18n="24h">24h</th>
<th scope="col" class="block-count-title" style="width: 37%" i18n="1w">1w</th>
<th scope="col" class="block-count-title" style="width: 26%" i18n="all">All</th>
</tr>
</thead>
<tbody>
<td>{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['24h'], this.locale, '1.0-0') }}%)</td>
<td>{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['1w'], this.locale, '1.0-0') }}%)</td>
<td>{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['all'], this.locale, '1.0-0') }}%)</td>
</tbody>
</table>
</td>
</tr> </tr>
<!-- Empty blocks mobile --> <!-- Mined blocks mobile -->
<tr *ngIf="isMobile()"> <tr *ngIf="isMobile()">
<td colspan="2"> <td colspan=2>
<span class="label" i18n="mining.empty-blocks">Empty Blocks</span> <span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
<div>{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</div> <table class="table table-xs table-data">
<thead>
<tr>
<th scope="col" class="block-count-title" style="width: 33%" i18n="24h">24h</th>
<th scope="col" class="block-count-title" style="width: 37%" i18n="1w">1w</th>
<th scope="col" class="block-count-title" style="width: 30%" i18n="all">All</th>
</tr>
</thead>
<tbody>
<td>{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['24h'], this.locale, '1.0-0') }}%)</td>
<td>{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['1w'], this.locale, '1.0-0') }}%)</td>
<td>{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['all'], this.locale, '1.0-0') }}%)</td>
</tbody>
</table>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<ng-template #nodata> <ng-template #nodata>
<td>~</td> <td class="taller-row" style="vertical-align: middle">~</td>
</ng-template> </ng-template>
<ng-template #nodatamobile> <ng-template #nodatamobile>
<div>~</div> <div>~</div>
</ng-template> </ng-template>
<!-- Hashrate chart -->
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div> <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading"> <div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
<!-- Blocks list -->
<table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
[infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()"> [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
<thead> <ng-container *ngIf="blocks$ | async as blocks; else skeleton">
<th class="height" i18n="latest-blocks.height">Height</th> <thead *ngIf="blocks.length > 0">
<th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th> <th class="height" i18n="latest-blocks.height">Height</th>
<th class="mined" i18n="latest-blocks.mined">Mined</th> <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
<th class="coinbase text-left" i18n="latest-blocks.coinbasetag"> <th class="mined" i18n="latest-blocks.mined">Mined</th>
Coinbase Tag</th> <th class="coinbase text-left" i18n="latest-blocks.coinbasetag">
<th class="reward text-right" i18n="latest-blocks.reward"> Coinbase Tag</th>
Reward</th> <th class="reward text-right" i18n="latest-blocks.reward">
<th class="fees text-right" i18n="latest-blocks.fees">Fees</th> Reward</th>
<th class="txs text-right" i18n="latest-blocks.transactions">Txs</th> <th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
<th class="size" i18n="latest-blocks.size">Size</th> <th class="txs text-right" i18n="latest-blocks.transactions">Txs</th>
</thead> <th class="size" i18n="latest-blocks.size">Size</th>
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''"> </thead>
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock"> <tbody [style]="isLoading ? 'opacity: 0.75' : ''">
<td class="height"> <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height <td class="height">
}}</a> <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
</td> }}</a>
<td class="timestamp"> </td>
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} <td class="timestamp">
</td> &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
<td class="mined"> </td>
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> <td class="mined">
</td> <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
<td class="coinbase"> </td>
<span class="badge badge-secondary scriptmessage longer"> <td class="coinbase">
{{ block.extras.coinbaseRaw | hex2ascii }} <span class="badge badge-secondary scriptmessage longer">
</span> {{ block.extras.coinbaseRaw | hex2ascii }}
</td> </span>
<td class="reward text-right"> </td>
<app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount> <td class="reward text-right">
</td> <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
<td class="fees text-right"> </td>
<app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2"></app-amount> <td class="fees text-right">
</td> <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2"></app-amount>
<td class="txs text-right"> </td>
{{ block.tx_count | number }} <td class="txs text-right">
</td> {{ block.tx_count | number }}
<td class="size"> </td>
<div class="progress"> <td class="size">
<div class="progress-bar progress-mempool" role="progressbar" <div class="progress">
[ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div> <div class="progress-bar progress-mempool" role="progressbar"
<div class="progress-text" [innerHTML]="block.size | bytes: 2"></div> [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
</div> <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
</td> </div>
</tr> </td>
</tbody> </tr>
</tbody>
</ng-container>
<ng-template #skeleton> <ng-template #skeleton>
<thead>
<th class="height" i18n="latest-blocks.height">Height</th>
<th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
<th class="mined" i18n="latest-blocks.mined">Mined</th>
<th class="coinbase text-left" i18n="latest-blocks.coinbasetag">
Coinbase Tag</th>
<th class="reward text-right" i18n="latest-blocks.reward">
Reward</th>
<th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
<th class="txs text-right" i18n="latest-blocks.transactions">Txs</th>
<th class="size" i18n="latest-blocks.size">Size</th>
</thead>
<tbody> <tbody>
<tr *ngFor="let item of [1,2,3,4,5]"> <tr *ngFor="let item of [1,2,3,4,5]">
<td class="height"> <td class="height">
@ -209,6 +295,7 @@
</div> </div>
<!-- Main table skeleton -->
<ng-template #loadingMain> <ng-template #loadingMain>
<div> <div>
<div class="mb-3" style="display:flex; position: relative"> <div class="mb-3" style="display:flex; position: relative">
@ -220,18 +307,18 @@
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col-lg-9">
<table class="table table-borderless table-striped"> <div class="col-lg-6">
<table class="table table-borderless table-striped taller" style="table-layout: fixed;">
<tbody> <tbody>
<!-- Regexes desktop --> <!-- Regexes desktop -->
<tr *ngIf="!isMobile()"> <tr *ngIf="!isMobile()" class="taller-row">
<td class="label" i18n="mining.tags">Tags</td> <td class="label" i18n="mining.tags">Tags</td>
<td> <td style="vertical-align: middle">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</td> </td>
</tr> </tr>
<!-- Regexes mobile --> <!-- Regexes mobile -->
<tr *ngIf="isMobile()"> <tr *ngIf="isMobile()">
<td colspan=2> <td colspan=2>
@ -243,71 +330,149 @@
</tr> </tr>
<!-- Addresses desktop --> <!-- Addresses desktop -->
<tr *ngIf="!isMobile()"> <tr *ngIf="!isMobile()" class="taller-row">
<td class="label" i18n="mining.addresses">Addresses</td> <td class="label" i18n="mining.addresses">Addresses</td>
<td> <td style="vertical-align: middle;">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
<div class="skeleton-loader"></div>
</div>
</td> </td>
<ng-template #nodata>
<td>~</td>
</ng-template>
</tr> </tr>
<!-- Addresses mobile --> <!-- Addresses mobile -->
<tr *ngIf="isMobile()"> <tr *ngIf="isMobile()">
<td colspan=2> <td colspan=2>
<span class="label" i18n="mining.addresses">Addresses</span> <span class="label" i18n="mining.addresses">Addresses</span>
<div> <div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" style="width: 100%">
<div class="skeleton-loader"></div>
</div>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-6">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<!-- Mined blocks desktop --> <!-- Hashrate desktop -->
<tr *ngIf="!isMobile()"> <tr *ngIf="!isMobile()" class="taller-row">
<td class="label" i18n="mining.mined-blocks">Mined Blocks</td> <td class="label" i18n="mining.hashrate-24h">Hashrate (24h)</td>
<td class="data"> <td class="data">
<div class="skeleton-loader"></div> <table class="table table-xs table-data text-center">
<thead>
<tr>
<th scope="col" class="block-count-title" style="width: 37%" i18n="mining.estimated">Estimated
</th>
<th scope="col" class="block-count-title" style="width: 37%" i18n="mining.reported">Reported
</th>
<th scope="col" class="block-count-title" style="width: 26%" i18n="mining.luck">Luck</th>
</tr>
</thead>
<tbody>
<td>
<div class="skeleton-loader data"></div>
</td>
<td>
<div class="skeleton-loader data"></div>
</td>
<td>
<div class="skeleton-loader data"></div>
</td>
</tbody>
</table>
</td> </td>
</tr> </tr>
<!-- Mined blocks desktop --> <!-- Hashrate mobile -->
<tr *ngIf="isMobile()"> <tr *ngIf="isMobile()">
<td colspan=2> <td colspan="2">
<span class="label" i18n="mining.mined-blocks">Mined Blocks</span> <span class="label" i18n="mining.hashrate-24h">Hashrate (24h)</span>
<div> <table class="table table-xs table-data text-center">
<div class="skeleton-loader"></div> <thead>
</div> <tr>
<th scope="col" class="block-count-title" style="width: 33%" i18n="mining.estimated">Estimated
</th>
<th scope="col" class="block-count-title" style="width: 37%" i18n="mining.reported">Reported
</th>
<th scope="col" class="block-count-title" style="width: 30%" i18n="mining.luck">Luck</th>
</tr>
</thead>
<tbody>
<td>
<div class="skeleton-loader data"></div>
</td>
<td>
<div class="skeleton-loader data"></div>
</td>
<td>
<div class="skeleton-loader data"></div>
</td>
</tbody>
</table>
</td> </td>
</tr> </tr>
<!-- Empty blocks desktop --> <!-- Mined blocks desktop -->
<tr *ngIf="!isMobile()"> <tr *ngIf="!isMobile()" class="taller-row">
<td class="label" i18n="mining.empty-blocks">Empty Blocks</td> <td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
<td class="data"> <td class="data">
<div class="skeleton-loader"></div> <table class="table table-xs table-data text-center">
<thead>
<tr>
<th scope="col" class="block-count-title" style="width: 37%" i18n="24h">24h</th>
<th scope="col" class="block-count-title" style="width: 37%" i18n="1w">1w</th>
<th scope="col" class="block-count-title" style="width: 26%" i18n="all">All</th>
</tr>
</thead>
<tbody>
<td>
<div class="skeleton-loader data"></div>
</td>
<td>
<div class="skeleton-loader data"></div>
</td>
<td>
<div class="skeleton-loader data"></div>
</td>
</tbody>
</table>
</td> </td>
</tr> </tr>
<!-- Empty blocks mobile --> <!-- Mined blocks mobile -->
<tr *ngIf="isMobile()"> <tr *ngIf="isMobile()">
<td colspan="2"> <td colspan=2>
<span class="label" i18n="mining.empty-blocks">Empty Blocks</span> <span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
<div> <table class="table table-xs table-data text-center">
<div class="skeleton-loader"></div> <thead>
</div> <tr>
<th scope="col" class="block-count-title" style="width: 33%" i18n="24h">24h</th>
<th scope="col" class="block-count-title" style="width: 37%" i18n="1w">1w</th>
<th scope="col" class="block-count-title" style="width: 30%" i18n="all">All</th>
</tr>
</thead>
<tbody>
<td>
<div class="skeleton-loader data"></div>
</td>
<td>
<div class="skeleton-loader data"></div>
</td>
<td>
<div class="skeleton-loader data"></div>
</td>
</tbody>
</table>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

48
frontend/src/app/components/pool/pool.component.scss
View File

@ -36,6 +36,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
margin-bottom: 10px; margin-bottom: 10px;
} }
height: 400px;
} }
div.scrollable { div.scrollable {
@ -52,15 +53,22 @@ div.scrollable {
} }
.label { .label {
width: 30%; width: 25%;
@media (min-width: 767.98px) {
vertical-align: middle;
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
font-weight: bold; font-weight: bold;
} }
} }
.label.addresses {
vertical-align: top;
padding-top: 25px;
}
.data { .data {
text-align: right; text-align: right;
padding-left: 25%; padding-left: 5%;
@media (max-width: 992px) { @media (max-width: 992px) {
text-align: left; text-align: left;
padding-left: 12px; padding-left: 12px;
@ -114,10 +122,6 @@ div.scrollable {
} }
} }
.fees {
width: 0%;
}
.size { .size {
width: 12%; width: 12%;
@media (max-width: 1000px) { @media (max-width: 1000px) {
@ -146,6 +150,10 @@ div.scrollable {
.skeleton-loader { .skeleton-loader {
max-width: 200px; max-width: 200px;
} }
.skeleton-loader.data {
max-width: 70px;
}
.loadingGraphs { .loadingGraphs {
position: absolute; position: absolute;
@ -159,8 +167,34 @@ div.scrollable {
.small-button { .small-button {
height: 20px; height: 20px;
transform: translateY(-20px);
font-size: 10px; font-size: 10px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
transform: translateY(-20px);
@media (min-width: 767.98px) {
transform: translateY(-17px);
}
}
.block-count-title {
color: #4a68b9;
font-size: 14px;
text-align: left;
@media (max-width: 767.98px) {
text-align: center;
}
}
.table-data tr {
background-color: transparent;
}
.table-data td {
text-align: left;
@media (max-width: 767.98px) {
text-align: center;
}
}
.taller-row {
height: 75px;
} }

23
frontend/src/app/components/pool/pool.component.ts
View File

@ -8,6 +8,7 @@ import { ApiService } from 'src/app/services/api.service';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
import { selectPowerOfTen } from 'src/app/bitcoin.utils'; import { selectPowerOfTen } from 'src/app/bitcoin.utils';
import { formatNumber } from '@angular/common'; import { formatNumber } from '@angular/common';
import { SeoService } from 'src/app/services/seo.service';
@Component({ @Component({
selector: 'app-pool', selector: 'app-pool',
@ -41,6 +42,7 @@ export class PoolComponent implements OnInit {
private apiService: ApiService, private apiService: ApiService,
private route: ActivatedRoute, private route: ActivatedRoute,
public stateService: StateService, public stateService: StateService,
private seoService: SeoService,
) { ) {
} }
@ -66,6 +68,7 @@ export class PoolComponent implements OnInit {
this.loadMoreSubject.next(this.blocks[this.blocks.length - 1]?.height); this.loadMoreSubject.next(this.blocks[this.blocks.length - 1]?.height);
}), }),
map((poolStats) => { map((poolStats) => {
this.seoService.setTitle(poolStats.pool.name);
let regexes = '"'; let regexes = '"';
for (const regex of poolStats.pool.regexes) { for (const regex of poolStats.pool.regexes) {
regexes += regex + '", "'; regexes += regex + '", "';
@ -73,6 +76,10 @@ export class PoolComponent implements OnInit {
poolStats.pool.regexes = regexes.slice(0, -3); poolStats.pool.regexes = regexes.slice(0, -3);
poolStats.pool.addresses = poolStats.pool.addresses; poolStats.pool.addresses = poolStats.pool.addresses;
if (poolStats.reportedHashrate) {
poolStats.luck = poolStats.estimatedHashrate / poolStats.reportedHashrate * 100;
}
return Object.assign({ return Object.assign({
logo: `./resources/mining-pools/` + poolStats.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg' logo: `./resources/mining-pools/` + poolStats.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg'
}, poolStats); }, poolStats);
@ -97,7 +104,21 @@ export class PoolComponent implements OnInit {
} }
prepareChartOptions(data) { prepareChartOptions(data) {
let title: object;
if (data.length === 0) {
title = {
textStyle: {
color: 'grey',
fontSize: 15
},
text: `No data`,
left: 'center',
top: 'center'
};
}
this.chartOptions = { this.chartOptions = {
title: title,
animation: false, animation: false,
color: [ color: [
new graphic.LinearGradient(0, 0, 0, 0.65, [ new graphic.LinearGradient(0, 0, 0, 0.65, [
@ -178,7 +199,7 @@ export class PoolComponent implements OnInit {
}, },
}, },
], ],
dataZoom: [{ dataZoom: data.length === 0 ? undefined : [{
type: 'inside', type: 'inside',
realtime: true, realtime: true,
zoomLock: true, zoomLock: true,

15
frontend/src/app/interfaces/node-api.interface.ts
View File

@ -93,8 +93,19 @@ export interface PoolInfo {
} }
export interface PoolStat { export interface PoolStat {
pool: PoolInfo; pool: PoolInfo;
blockCount: number; blockCount: {
emptyBlocks: number; all: number,
'24h': number,
'1w': number,
};
blockShare: {
all: number,
'24h': number,
'1w': number,
};
estimatedHashrate: number;
reportedHashrate: number;
luck?: number;
} }
export interface BlockExtension { export interface BlockExtension {

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

@ -4,8 +4,9 @@ import { Pipe, PipeTransform } from '@angular/core';
name: 'amountShortener' name: 'amountShortener'
}) })
export class AmountShortenerPipe implements PipeTransform { export class AmountShortenerPipe implements PipeTransform {
transform(num: number, ...args: number[]): unknown { transform(num: number, ...args: any[]): unknown {
const digits = args[0] || 1; const digits = args[0] || 1;
const unit = args[1] || undefined;
if (num < 1000) { if (num < 1000) {
return num.toFixed(digits); return num.toFixed(digits);
@ -21,7 +22,12 @@ export class AmountShortenerPipe implements PipeTransform {
{ value: 1e18, symbol: 'E' } { value: 1e18, symbol: 'E' }
]; ];
const rx = /\.0+$|(\.[0-9]*[1-9])0+$/; const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
var item = lookup.slice().reverse().find((item) => num >= item.value); const item = lookup.slice().reverse().find((item) => num >= item.value);
return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0';
if (unit !== undefined) {
return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + ' ' + item.symbol + unit : '0';
} else {
return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0';
}
} }
} }