Add match rate to blocks list page

This commit is contained in:
Mononaut 2022-10-28 10:33:15 -06:00
parent f3eb403c17
commit b657eb4e7d
No known key found for this signature in database
GPG Key ID: 61B952CAF4838F94
3 changed files with 81 additions and 9 deletions

View File

@ -14,6 +14,8 @@
i18n-ngbTooltip="mining.pool-name" ngbTooltip="Pool" placement="bottom" #miningpool [disableTooltip]="!isEllipsisActive(miningpool)">Pool</th> i18n-ngbTooltip="mining.pool-name" ngbTooltip="Pool" placement="bottom" #miningpool [disableTooltip]="!isEllipsisActive(miningpool)">Pool</th>
<th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th> <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
<th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th> <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
<th *ngIf="indexingAvailable" class="health text-left" i18n="latest-blocks.health" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
i18n-ngbTooltip="latest-blocks.health" ngbTooltip="Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Health</th>
<th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th> i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th>
<th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th> <th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th>
@ -37,12 +39,30 @@
<span *ngIf="!widget" class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span> <span *ngIf="!widget" class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
</div> </div>
</td> </td>
<td class="timestamp" *ngIf="!widget"> <td class="timestamp" *ngIf="!widget" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td> </td>
<td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'"> <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td> </td>
<td *ngIf="indexingAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<a *ngIf="block.extras?.matchRate != null" class="clear-link" [routerLink]="['/block-audit/' | relativeUrl, block.id]">
<div class="progress progress-health">
<div class="progress-bar progress-bar-health" role="progressbar"
[ngStyle]="{'width': (100 - (block.extras?.matchRate || 0)) + '%' }"></div>
<div class="progress-text">
<span>{{ block.extras.matchRate }}%</span>
</div>
</div>
</a>
<div *ngIf="block.extras?.matchRate == null" class="progress progress-health">
<div class="progress-bar progress-bar-health" role="progressbar"
[ngStyle]="{'width': '100%' }"></div>
<div class="progress-text">
<span>~</span>
</div>
</div>
</td>
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"> <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount> <app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
</td> </td>
@ -77,6 +97,9 @@
<td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'"> <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
<span class="skeleton-loader" style="max-width: 125px"></span> <span class="skeleton-loader" style="max-width: 125px"></span>
</td> </td>
<td *ngIf="indexingAvailable" class="health text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"> <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<span class="skeleton-loader" style="max-width: 75px"></span> <span class="skeleton-loader" style="max-width: 75px"></span>
</td> </td>

View File

@ -63,7 +63,7 @@ tr, td, th {
} }
.height { .height {
width: 10%; width: 8%;
} }
.height.widget { .height.widget {
width: 15%; width: 15%;
@ -77,12 +77,18 @@ tr, td, th {
.timestamp { .timestamp {
width: 18%; width: 18%;
@media (max-width: 900px) { @media (max-width: 1100px) {
display: none; display: none;
} }
} }
.timestamp.legacy { .timestamp.legacy {
width: 20%; width: 20%;
@media (max-width: 1100px) {
display: table-cell;
}
@media (max-width: 850px) {
display: none;
}
} }
.mined { .mined {
@ -93,6 +99,10 @@ tr, td, th {
} }
.mined.legacy { .mined.legacy {
width: 15%; width: 15%;
@media (max-width: 1000px) {
padding-right: 20px;
width: 20%;
}
@media (max-width: 576px) { @media (max-width: 576px) {
display: table-cell; display: table-cell;
} }
@ -100,6 +110,7 @@ tr, td, th {
.txs { .txs {
padding-right: 40px; padding-right: 40px;
width: 8%;
@media (max-width: 1100px) { @media (max-width: 1100px) {
padding-right: 10px; padding-right: 10px;
} }
@ -113,17 +124,21 @@ tr, td, th {
} }
.txs.widget { .txs.widget {
padding-right: 0; padding-right: 0;
display: none;
@media (max-width: 650px) { @media (max-width: 650px) {
display: none; display: none;
} }
} }
.txs.legacy { .txs.legacy {
padding-right: 80px; width: 18%;
width: 10%; display: table-cell;
@media (max-width: 1000px) {
padding-right: 20px;
}
} }
.fees { .fees {
width: 10%; width: 8%;
@media (max-width: 650px) { @media (max-width: 650px) {
display: none; display: none;
} }
@ -133,7 +148,7 @@ tr, td, th {
} }
.reward { .reward {
width: 10%; width: 8%;
@media (max-width: 576px) { @media (max-width: 576px) {
width: 7%; width: 7%;
padding-right: 30px; padding-right: 30px;
@ -152,8 +167,11 @@ tr, td, th {
} }
.size { .size {
width: 12%; width: 10%;
@media (max-width: 1000px) { @media (max-width: 1000px) {
width: 13%;
}
@media (max-width: 950px) {
width: 15%; width: 15%;
} }
@media (max-width: 650px) { @media (max-width: 650px) {
@ -164,12 +182,34 @@ tr, td, th {
} }
} }
.size.legacy { .size.legacy {
width: 20%; width: 30%;
@media (max-width: 576px) { @media (max-width: 576px) {
display: table-cell; display: table-cell;
} }
} }
.health {
width: 10%;
@media (max-width: 1000px) {
width: 13%;
}
@media (max-width: 950px) {
display: none;
}
}
.health.widget {
width: 25%;
@media (max-width: 1000px) {
display: none;
}
@media (max-width: 767px) {
display: table-cell;
}
@media (max-width: 500px) {
display: none;
}
}
/* Tooltip text */ /* Tooltip text */
.tooltip-custom { .tooltip-custom {
position: relative; position: relative;

View File

@ -668,6 +668,15 @@ h1, h2, h3 {
background-color: #2e324e; background-color: #2e324e;
} }
.progress.progress-health {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #1a9436 100%);
justify-content: flex-end;
}
.progress-bar.progress-bar-health {
background: #2d3348;
}
.mt-2-5, .my-2-5 { .mt-2-5, .my-2-5 {
margin-top: 0.75rem !important; margin-top: 0.75rem !important;
} }