Delete variables and use observables in top nodes components
This commit is contained in:
natsee
parent
464cffb5c1
commit
3eb6241c98
@ -16,8 +16,8 @@
|
||||
<th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="lightning.last_update">Last update</th>
|
||||
<th *ngIf="!widget" class="d-none d-md-table-cell text-right" i18n="lightning.location">Location</th>
|
||||
</thead>
|
||||
<tbody *ngIf="topNodesPerCapacity$ | async as nodes">
|
||||
<tr *ngFor="let node of nodes;">
|
||||
<tbody *ngIf="topNodesPerCapacity$ | async as data">
|
||||
<tr *ngFor="let node of data.nodes;">
|
||||
<td class="pool text-left">
|
||||
<div class="tooltip-custom d-block w-100">
|
||||
<a class="link d-block w-100" [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">
|
||||
@ -27,14 +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>
|
||||
<span class="capacity-ratio"> ({{ (node?.capacity / data.statistics.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>
|
||||
<span class="capacity-ratio"> ({{ (node?.channels / data.statistics.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>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
|
||||
import { map, Observable } from 'rxjs';
|
||||
import { combineLatest, map, Observable } from 'rxjs';
|
||||
import { INodesRanking, INodesStatistics, ITopNodesPerCapacity } from '../../../interfaces/node-api.interface';
|
||||
import { SeoService } from '../../../services/seo.service';
|
||||
import { StateService } from '../../../services/state.service';
|
||||
@ -17,11 +17,9 @@ export class TopNodesPerCapacity implements OnInit {
|
||||
@Input() statistics$: Observable<INodesStatistics>;
|
||||
@Input() widget: boolean = false;
|
||||
|
||||
topNodesPerCapacity$: Observable<ITopNodesPerCapacity[]>;
|
||||
topNodesPerCapacity$: Observable<{ nodes: ITopNodesPerCapacity[]; statistics: { totalCapacity: number; totalChannels?: number; } }>;
|
||||
skeletonRows: number[] = [];
|
||||
currency$: Observable<string>;
|
||||
totalCapacity: number;
|
||||
totalChannels: number;
|
||||
|
||||
constructor(
|
||||
private apiService: LightningApiService,
|
||||
@ -42,8 +40,12 @@ export class TopNodesPerCapacity implements OnInit {
|
||||
}
|
||||
|
||||
if (this.widget === false) {
|
||||
this.topNodesPerCapacity$ = this.apiService.getTopNodesByCapacity$().pipe(
|
||||
map((ranking) => {
|
||||
this.topNodesPerCapacity$ = combineLatest([
|
||||
this.apiService.getTopNodesByCapacity$(),
|
||||
this.statistics$
|
||||
])
|
||||
.pipe(
|
||||
map(([ranking, statistics]) => {
|
||||
for (const i in ranking) {
|
||||
ranking[i].geolocation = <GeolocationData>{
|
||||
country: ranking[i].country?.en,
|
||||
@ -52,21 +54,31 @@ export class TopNodesPerCapacity implements OnInit {
|
||||
iso: ranking[i].iso_code,
|
||||
};
|
||||
}
|
||||
return ranking;
|
||||
return {
|
||||
nodes: ranking,
|
||||
statistics: {
|
||||
totalCapacity: statistics.latest.total_capacity,
|
||||
totalChannels: statistics.latest.channel_count,
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
} else {
|
||||
this.topNodesPerCapacity$ = this.nodes$.pipe(
|
||||
map((ranking) => {
|
||||
return ranking.topByCapacity.slice(0, 6);
|
||||
this.topNodesPerCapacity$ = combineLatest([
|
||||
this.nodes$,
|
||||
this.statistics$
|
||||
])
|
||||
.pipe(
|
||||
map(([ranking, statistics]) => {
|
||||
return {
|
||||
nodes: ranking.topByCapacity.slice(0, 6),
|
||||
statistics: {
|
||||
totalCapacity: statistics.latest.total_capacity,
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
this.statistics$?.subscribe((data) => {
|
||||
this.totalCapacity = data.latest.total_capacity;
|
||||
this.totalChannels = data.latest.channel_count;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -16,8 +16,8 @@
|
||||
<th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="lightning.last_update">Last update</th>
|
||||
<th class="geolocation d-table-cell text-right" i18n="lightning.location">Location</th>
|
||||
</thead>
|
||||
<tbody *ngIf="topNodesPerChannels$ | async as nodes">
|
||||
<tr *ngFor="let node of nodes;">
|
||||
<tbody *ngIf="topNodesPerChannels$ | async as data">
|
||||
<tr *ngFor="let node of data.nodes;">
|
||||
<td class="pool text-left">
|
||||
<div class="tooltip-custom d-block w-100">
|
||||
<a class="link d-block w-100" [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">
|
||||
@ -27,11 +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>
|
||||
<span class="capacity-ratio"> ({{ (node?.channels / data.statistics.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>
|
||||
<span class="capacity-ratio"> ({{ (node.capacity / data.statistics.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>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
|
||||
import { map, Observable } from 'rxjs';
|
||||
import { combineLatest, map, Observable } from 'rxjs';
|
||||
import { INodesRanking, INodesStatistics, ITopNodesPerChannels } from '../../../interfaces/node-api.interface';
|
||||
import { SeoService } from '../../../services/seo.service';
|
||||
import { StateService } from '../../../services/state.service';
|
||||
@ -17,11 +17,9 @@ export class TopNodesPerChannels implements OnInit {
|
||||
@Input() statistics$: Observable<INodesStatistics>;
|
||||
@Input() widget: boolean = false;
|
||||
|
||||
topNodesPerChannels$: Observable<ITopNodesPerChannels[]>;
|
||||
topNodesPerChannels$: Observable<{ nodes: ITopNodesPerChannels[]; statistics: { totalChannels: number; totalCapacity?: number; } }>;
|
||||
skeletonRows: number[] = [];
|
||||
currency$: Observable<string>;
|
||||
totalChannels: number;
|
||||
totalCapacity: number;
|
||||
|
||||
constructor(
|
||||
private apiService: LightningApiService,
|
||||
@ -40,8 +38,12 @@ export class TopNodesPerChannels implements OnInit {
|
||||
this.seoService.setTitle($localize`:@@c50bf442cf99f6fc5f8b687c460f33234b879869:Connectivity Ranking`);
|
||||
this.seoService.setDescription($localize`:@@meta.description.lightning.ranking.channels:See Lightning nodes with the most channels open along with high-level stats like total node capacity, node age, and more.`);
|
||||
|
||||
this.topNodesPerChannels$ = this.apiService.getTopNodesByChannels$().pipe(
|
||||
map((ranking) => {
|
||||
this.topNodesPerChannels$ = combineLatest([
|
||||
this.apiService.getTopNodesByChannels$(),
|
||||
this.statistics$
|
||||
])
|
||||
.pipe(
|
||||
map(([ranking, statistics]) => {
|
||||
for (const i in ranking) {
|
||||
ranking[i].geolocation = <GeolocationData>{
|
||||
country: ranking[i].country?.en,
|
||||
@ -50,12 +52,22 @@ export class TopNodesPerChannels implements OnInit {
|
||||
iso: ranking[i].iso_code,
|
||||
};
|
||||
}
|
||||
return ranking;
|
||||
return {
|
||||
nodes: ranking,
|
||||
statistics: {
|
||||
totalChannels: statistics.latest.channel_count,
|
||||
totalCapacity: statistics.latest.total_capacity,
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
} else {
|
||||
this.topNodesPerChannels$ = this.nodes$.pipe(
|
||||
map((ranking) => {
|
||||
this.topNodesPerChannels$ = combineLatest([
|
||||
this.nodes$,
|
||||
this.statistics$
|
||||
])
|
||||
.pipe(
|
||||
map(([ranking, statistics]) => {
|
||||
for (const i in ranking.topByChannels) {
|
||||
ranking.topByChannels[i].geolocation = <GeolocationData>{
|
||||
country: ranking.topByChannels[i].country?.en,
|
||||
@ -64,15 +76,15 @@ export class TopNodesPerChannels implements OnInit {
|
||||
iso: ranking.topByChannels[i].iso_code,
|
||||
};
|
||||
}
|
||||
return ranking.topByChannels.slice(0, 6);
|
||||
return {
|
||||
nodes: ranking.topByChannels.slice(0, 6),
|
||||
statistics: {
|
||||
totalChannels: statistics.latest.channel_count,
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
this.statistics$?.subscribe((data) => {
|
||||
this.totalChannels = data.latest.channel_count;
|
||||
this.totalCapacity = data.latest.total_capacity;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user