mirror of
https://github.com/mempool/mempool.git
synced 2025-02-22 22:25:34 +01:00
Include % ownership in statistics table on LN dashboard and on ranking pages
This commit is contained in:
parent
14e440da6b
commit
39c5792e6f
9 changed files with 43 additions and 5 deletions
|
@ -63,7 +63,7 @@
|
|||
<span> </span>
|
||||
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
|
||||
</a>
|
||||
<app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
|
||||
<app-top-nodes-per-capacity [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-capacity>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -77,7 +77,7 @@
|
|||
<span> </span>
|
||||
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
|
||||
</a>
|
||||
<app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
|
||||
<app-top-nodes-per-channels [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-channels>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<app-top-nodes-per-capacity [nodes$]="null" [widget]="false" *ngIf="type === 'capacity'">
|
||||
<app-top-nodes-per-capacity [nodes$]="null" [statistics$]="statistics$" [widget]="false" *ngIf="type === 'capacity'">
|
||||
</app-top-nodes-per-capacity>
|
||||
|
||||
<app-top-nodes-per-channels [nodes$]="null" [widget]="false" *ngIf="type === 'channels'">
|
||||
<app-top-nodes-per-channels [nodes$]="null" [statistics$]="statistics$" [widget]="false" *ngIf="type === 'channels'">
|
||||
</app-top-nodes-per-channels>
|
||||
|
||||
<app-oldest-nodes [widget]="false" *ngIf="type === 'oldest'"></app-oldest-nodes>
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { LightningApiService } from '../lightning-api.service';
|
||||
import { share } from 'rxjs/operators';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nodes-ranking',
|
||||
|
@ -9,10 +12,15 @@ import { ActivatedRoute } from '@angular/router';
|
|||
})
|
||||
export class NodesRanking implements OnInit {
|
||||
type: string;
|
||||
statistics$: Observable<any>;
|
||||
|
||||
constructor(private route: ActivatedRoute) {}
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private lightningApiService: LightningApiService,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.statistics$ = this.lightningApiService.getLatestStatistics$().pipe(share());
|
||||
this.route.data.subscribe(data => {
|
||||
this.type = data.type;
|
||||
});
|
||||
|
|
|
@ -27,12 +27,14 @@
|
|||
</td>
|
||||
<td class="text-right">
|
||||
<app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
|
||||
<span class="capacity-ratio" *ngIf="totalCapacity"> ({{ (node.capacity / totalCapacity * 100) | number:'1.1-1' }}%)</span>
|
||||
</td>
|
||||
<td class="d-table-cell fiat text-right" [ngClass]="{'widget': widget}">
|
||||
<app-fiat [value]="node.capacity"></app-fiat>
|
||||
</td>
|
||||
<td *ngIf="!widget" class="d-none d-md-table-cell text-right">
|
||||
{{ node.channels | number }}
|
||||
<span class="capacity-ratio" *ngIf="totalChannels"> ({{ (node?.channels / totalChannels * 100) | number:'1.1-1' }}%)</span>
|
||||
</td>
|
||||
<td *ngIf="!widget" class="d-none d-md-table-cell text-right">
|
||||
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen" [hideTimeSince]="true"></app-timestamp>
|
||||
|
|
|
@ -41,6 +41,11 @@ tr, td, th {
|
|||
}
|
||||
}
|
||||
|
||||
.capacity-ratio {
|
||||
font-size: 12px;
|
||||
color: darkgrey;
|
||||
}
|
||||
|
||||
.fiat {
|
||||
width: 15%;
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
|
|
|
@ -14,11 +14,14 @@ import { LightningApiService } from '../../lightning-api.service';
|
|||
})
|
||||
export class TopNodesPerCapacity implements OnInit {
|
||||
@Input() nodes$: Observable<INodesRanking>;
|
||||
@Input() statistics$: Observable<any>;
|
||||
@Input() widget: boolean = false;
|
||||
|
||||
topNodesPerCapacity$: Observable<ITopNodesPerCapacity[]>;
|
||||
skeletonRows: number[] = [];
|
||||
currency$: Observable<string>;
|
||||
totalCapacity: number;
|
||||
totalChannels: number;
|
||||
|
||||
constructor(
|
||||
private apiService: LightningApiService,
|
||||
|
@ -59,6 +62,11 @@ export class TopNodesPerCapacity implements OnInit {
|
|||
})
|
||||
);
|
||||
}
|
||||
|
||||
this.statistics$?.subscribe((data) => {
|
||||
this.totalCapacity = data.latest.total_capacity;
|
||||
this.totalChannels = data.latest.channel_count;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -27,9 +27,11 @@
|
|||
</td>
|
||||
<td class="text-right">
|
||||
{{ node.channels ? (node.channels | number) : '~' }}
|
||||
<span class="capacity-ratio" *ngIf="totalChannels"> ({{ (node?.channels / totalChannels * 100) | number:'1.1-1' }}%)</span>
|
||||
</td>
|
||||
<td *ngIf="!widget" class="d-none d-md-table-cell capacity text-right">
|
||||
<app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
|
||||
<span class="capacity-ratio" *ngIf="totalCapacity"> ({{ (node.capacity / totalCapacity * 100) | number:'1.1-1' }}%)</span>
|
||||
</td>
|
||||
<td *ngIf="!widget" class="fiat d-none d-md-table-cell text-right">
|
||||
<app-fiat [value]="node.capacity"></app-fiat>
|
||||
|
|
|
@ -44,6 +44,11 @@ tr, td, th {
|
|||
}
|
||||
}
|
||||
|
||||
.capacity-ratio {
|
||||
font-size: 12px;
|
||||
color: darkgrey;
|
||||
}
|
||||
|
||||
.geolocation {
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
display: none !important;
|
||||
|
|
|
@ -14,11 +14,14 @@ import { LightningApiService } from '../../lightning-api.service';
|
|||
})
|
||||
export class TopNodesPerChannels implements OnInit {
|
||||
@Input() nodes$: Observable<INodesRanking>;
|
||||
@Input() statistics$: Observable<any>;
|
||||
@Input() widget: boolean = false;
|
||||
|
||||
topNodesPerChannels$: Observable<ITopNodesPerChannels[]>;
|
||||
skeletonRows: number[] = [];
|
||||
currency$: Observable<string>;
|
||||
totalChannels: number;
|
||||
totalCapacity: number;
|
||||
|
||||
constructor(
|
||||
private apiService: LightningApiService,
|
||||
|
@ -65,6 +68,11 @@ export class TopNodesPerChannels implements OnInit {
|
|||
})
|
||||
);
|
||||
}
|
||||
|
||||
this.statistics$?.subscribe((data) => {
|
||||
this.totalChannels = data.latest.channel_count;
|
||||
this.totalCapacity = data.latest.total_capacity;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue