Include % ownership in statistics table on LN dashboard and on ranking pages

This commit is contained in:
ncois 2023-12-13 12:45:36 +01:00 committed by natsee
parent 14e440da6b
commit 39c5792e6f
No known key found for this signature in database
GPG key ID: 233CF3150A89BED8
9 changed files with 43 additions and 5 deletions

View file

@ -63,7 +63,7 @@
<span>&nbsp;</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>&nbsp;</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>

View file

@ -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>

View file

@ -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;
});

View file

@ -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">&nbsp;({{ (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">&nbsp;({{ (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>

View file

@ -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) {

View file

@ -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;
});
}
}

View file

@ -27,9 +27,11 @@
</td>
<td class="text-right">
{{ node.channels ? (node.channels | number) : '~' }}
<span class="capacity-ratio" *ngIf="totalChannels">&nbsp;({{ (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">&nbsp;({{ (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>

View file

@ -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;

View file

@ -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;
});
}
}