mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-22 22:25:34 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into unfurler-refactor

Browse source
This commit is contained in:
wiz 2022-08-30 13:49:02 +02:00 • committed by GitHub
commit 25c5ca731d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 65 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/src/api/explorer/statistics.api.ts
View file

@ -27,7 +27,7 @@ class StatisticsApi {
public async $getLatestStatistics(): Promise<any> { public async $getLatestStatistics(): Promise<any> {
try { try {
const [rows]: any = await DB.query(`SELECT * FROM lightning_stats ORDER BY added DESC LIMIT 1`); const [rows]: any = await DB.query(`SELECT * FROM lightning_stats ORDER BY added DESC LIMIT 1`);
const [rows2]: any = await DB.query(`SELECT * FROM lightning_stats ORDER BY added DESC LIMIT 1 OFFSET 7`); const [rows2]: any = await DB.query(`SELECT * FROM lightning_stats WHERE DATE(added) = DATE(NOW() - INTERVAL 7 DAY)`);
return { return {
latest: rows[0], latest: rows[0],
previous: rows2[0], previous: rows2[0],

40
frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
View file

@ -9,44 +9,44 @@
<div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward"> <div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
<div class="fee-estimation-container" *ngIf="mode === 'avg'"> <div class="fee-estimation-container" *ngIf="mode === 'avg'">
<div class="item"> <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5> <h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5>
<div class="card-text"> <div class="card-text">
<div class="fee-text"> <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.avg_capacity || 0 | number: '1.0-0' }} {{ statistics.latest?.avg_capacity || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">sats</span> <span i18n="shared.sat-vbyte|sat/vB">sats</span>
</div> </div>
<span class="fiat"> <span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.avg_capacity" [previous]="statistics.previous?.avg_capacity"></app-change> <app-change [current]="statistics.latest?.avg_capacity" [previous]="statistics.previous?.avg_capacity"></app-change>
</span> </span>
</div> </div>
</div> </div>
<div class="item"> <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5> <h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5>
<div class="card-text" i18n-ngbTooltip="ln.average-feerate-desc" <div class="card-text" i18n-ngbTooltip="ln.average-feerate-desc"
ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm" ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
placement="bottom"> placement="bottom">
<div class="fee-text"> <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.avg_fee_rate || 0 | number: '1.0-0' }} {{ statistics.latest?.avg_fee_rate || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">ppm</span> <span i18n="shared.sat-vbyte|sat/vB">ppm</span>
</div> </div>
<span class="fiat"> <span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.avg_fee_rate" [previous]="statistics.previous?.avg_fee_rate"></app-change> <app-change [current]="statistics.latest?.avg_fee_rate" [previous]="statistics.previous?.avg_fee_rate"></app-change>
</span> </span>
</div> </div>
</div> </div>
<div class="item"> <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5> <h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5>
<div class="card-text" i18n-ngbTooltip="ln.average-basefee-desc" <div class="card-text" i18n-ngbTooltip="ln.average-basefee-desc"
ngbTooltip="The average base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom"> ngbTooltip="The average base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
<div class="card-text"> <div class="card-text">
<div class="fee-text"> <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.avg_base_fee_mtokens || 0 | number: '1.0-0' }} {{ statistics.latest?.avg_base_fee_mtokens || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">msats</span> <span i18n="shared.sat-vbyte|sat/vB">msats</span>
</div> </div>
<span class="fiat"> <span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.avg_base_fee_mtokens" [previous]="statistics.previous?.avg_base_fee_mtokens"></app-change> <app-change [current]="statistics.latest?.avg_base_fee_mtokens" [previous]="statistics.previous?.avg_base_fee_mtokens"></app-change>
</span> </span>
</div> </div>
@ -55,43 +55,45 @@
</div> </div>
<div class="fee-estimation-container" *ngIf="mode === 'med'"> <div class="fee-estimation-container" *ngIf="mode === 'med'">
<div class="item"> <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.median-capacity">Med Capacity</h5> <h5 class="card-title" i18n="ln.median-capacity">Med Capacity</h5>
<div class="card-text"> <div class="card-text">
<div class="fee-text"> <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.med_capacity || 0 | number: '1.0-0' }} {{ statistics.latest?.med_capacity || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">sats</span> <span i18n="shared.sat-vbyte|sat/vB">sats</span>
</div> </div>
<span class="fiat"> <span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.med_capacity" [previous]="statistics.previous?.med_capacity"></app-change> <app-change [current]="statistics.latest?.med_capacity" [previous]="statistics.previous?.med_capacity"></app-change>
</span> </span>
</div> </div>
</div> </div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-feerate">Med Fee Rate</h5> <h5 class="card-title" i18n="ln.average-feerate">Med Fee Rate</h5>
<div class="card-text" i18n-ngbTooltip="ln.median-feerate-desc" <div class="card-text" i18n-ngbTooltip="ln.median-feerate-desc"
ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm" ngbTooltip="The median fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
placement="bottom"> placement="bottom">
<div class="fee-text"> <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.med_fee_rate || 0 | number: '1.0-0' }} {{ statistics.latest?.med_fee_rate || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">ppm</span> <span i18n="shared.sat-vbyte|sat/vB">ppm</span>
</div> </div>
<span class="fiat"> <span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.med_fee_rate" [previous]="statistics.previous?.med_fee_rate"></app-change> <app-change [current]="statistics.latest?.med_fee_rate" [previous]="statistics.previous?.med_fee_rate"></app-change>
</span> </span>
</div> </div>
</div> </div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.median-basefee">Med Base Fee</h5> <h5 class="card-title" i18n="ln.median-basefee">Med Base Fee</h5>
<div class="card-text" i18n-ngbTooltip="ln.median-basefee-desc" <div class="card-text" i18n-ngbTooltip="ln.median-basefee-desc"
ngbTooltip="The median base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom"> ngbTooltip="The median base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
<div class="card-text"> <div class="card-text">
<div class="fee-text"> <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.med_base_fee_mtokens || 0 | number: '1.0-0' }} {{ statistics.latest?.med_base_fee_mtokens || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">msats</span> <span i18n="shared.sat-vbyte|sat/vB">msats</span>
</div> </div>
</div> </div>
<span class="fiat"> <span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.med_base_fee_mtokens" [previous]="statistics.previous?.med_base_fee_mtokens"></app-change> <app-change [current]="statistics.latest?.med_base_fee_mtokens" [previous]="statistics.previous?.med_base_fee_mtokens"></app-change>
</span> </span>
</div> </div>

12
frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
View file

@ -18,6 +18,10 @@
} }
} }
.fee-estimation-wrapper {
min-height: 77px;
}
.fee-estimation-container { .fee-estimation-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -30,7 +34,10 @@
width: -webkit-fill-available; width: -webkit-fill-available;
@media (min-width: 376px) { @media (min-width: 376px) {
margin: 0 auto 0px; margin: 0 auto 0px;
} }
&.more-padding {
padding-top: 10px;
}
&:first-child{ &:first-child{
display: none; display: none;
@media (min-width: 485px) { @media (min-width: 485px) {
@ -57,6 +64,9 @@
margin: auto; margin: auto;
line-height: 1.45; line-height: 1.45;
padding: 0px 2px; padding: 0px 2px;
&.no-border {
border-bottom: none;
}
} }
.fiat { .fiat {
display: block; display: block;

54
frontend/src/app/lightning/node-statistics/node-statistics.component.html
View file

@ -1,76 +1,64 @@
<div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward"> <div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
<div class="fee-estimation-container"> <div class="fee-estimation-container">
<div class="item"> <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="mining.average-fee">Capacity</h5> <h5 class="card-title" i18n="lightning.capacity">Capacity</h5>
<div class="card-text" i18n-ngbTooltip="mining.average-fee" ngbTooltip="Percentage change past week" <div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
placement="bottom"> [disableTooltip]="!statistics.previous" placement="bottom">
<div class="fee-text"> <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
<app-amount [satoshis]="statistics.latest?.total_capacity" digitsInfo="1.2-2"></app-amount> <app-amount [satoshis]="statistics.latest?.total_capacity" digitsInfo="1.2-2"></app-amount>
</div> </div>
<span class="fiat"> <span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.total_capacity" [previous]="statistics.previous?.total_capacity"> <app-change [current]="statistics.latest?.total_capacity" [previous]="statistics.previous?.total_capacity">
</app-change> </app-change>
</span> </span>
</div> </div>
</div> </div>
<div class="item"> <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="mining.rewards">Nodes</h5> <h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
<div class="card-text" i18n-ngbTooltip="mining.rewards-desc" ngbTooltip="Percentage change past week" <div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
placement="bottom"> [disableTooltip]="!statistics.previous">
<div class="fee-text"> <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.node_count || 0 | number }} {{ statistics.latest?.node_count || 0 | number }}
</div> </div>
<span class="fiat"> <span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.node_count" [previous]="statistics.previous?.node_count"></app-change> <app-change [current]="statistics.latest?.node_count" [previous]="statistics.previous?.node_count"></app-change>
</span> </span>
</div> </div>
</div> </div>
<div class="item"> <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5> <h5 class="card-title" i18n="lightning.channels">Channels</h5>
<div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc" ngbTooltip="Percentage change past week" <div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
placement="bottom"> [disableTooltip]="!statistics.previous">
<div class="fee-text"> <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.channel_count || 0 | number }} {{ statistics.latest?.channel_count || 0 | number }}
</div> </div>
<span class="fiat"> <span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.channel_count" [previous]="statistics.previous?.channel_count"> <app-change [current]="statistics.latest?.channel_count" [previous]="statistics.previous?.channel_count">
</app-change> </app-change>
</span> </span>
</div> </div>
</div> </div>
<!--
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
<div class="card-text" i18n-ngbTooltip="mining.average-fee"
ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
<app-amount [satoshis]="statistics.latest.average_channel_size" digitsInfo="1.2-3"></app-amount>
<span class="fiat">
<app-change [current]="statistics.latest.average_channel_size" [previous]="statistics.previous.average_channel_size"></app-change>
</span>
</div>
</div>
-->
</div> </div>
</div> </div>
<ng-template #loadingReward> <ng-template #loadingReward>
<div class="fee-estimation-container loading-container"> <div class="fee-estimation-container loading-container">
<div class="item"> <div class="item">
<h5 class="card-title" i18n="mining.rewards">Nodes</h5> <h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
<div class="card-text"> <div class="card-text">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5> <h5 class="card-title" i18n="lightning.channels">Channels</h5>
<div class="card-text"> <div class="card-text">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Channel</h5> <h5 class="card-title" i18n="lightning.average-channels">Average Channel</h5>
<div class="card-text"> <div class="card-text">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>

12
frontend/src/app/lightning/node-statistics/node-statistics.component.scss
View file

@ -18,6 +18,10 @@
} }
} }
.fee-estimation-wrapper {
min-height: 77px;
}
.fee-estimation-container { .fee-estimation-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -30,7 +34,10 @@
width: -webkit-fill-available; width: -webkit-fill-available;
@media (min-width: 376px) { @media (min-width: 376px) {
margin: 0 auto 0px; margin: 0 auto 0px;
} }
&.more-padding {
padding-top: 10px;
}
&:first-child{ &:first-child{
display: none; display: none;
@media (min-width: 485px) { @media (min-width: 485px) {
@ -57,6 +64,9 @@
margin: auto; margin: auto;
line-height: 1.45; line-height: 1.45;
padding: 0px 2px; padding: 0px 2px;
&.no-border {
border-bottom: none;
}
} }
.fiat { .fiat {
display: block; display: block;