|
|
- ({{ (node.capacity / totalCapacity * 100) | number:'1.1-1' }}%)
+ ({{ (node?.capacity / data.statistics.totalCapacity * 100) | number:'1.1-1' }}%)
|
|
{{ node.channels | number }}
- ({{ (node?.channels / totalChannels * 100) | number:'1.1-1' }}%)
+ ({{ (node?.channels / data.statistics.totalChannels * 100) | number:'1.1-1' }}%)
|
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts
index a52ba9398..0b8c03bbd 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts
@@ -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;
@Input() widget: boolean = false;
- topNodesPerCapacity$: Observable;
+ topNodesPerCapacity$: Observable<{ nodes: ITopNodesPerCapacity[]; statistics: { totalCapacity: number; totalChannels?: number; } }>;
skeletonRows: number[] = [];
currency$: Observable;
- 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 = {
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;
- });
}
}
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
index 76b032552..87f7f1ad2 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
@@ -16,8 +16,8 @@
| Last update |
Location |
-
-
+
+
|
|
{{ node.channels ? (node.channels | number) : '~' }}
- ({{ (node?.channels / totalChannels * 100) | number:'1.1-1' }}%)
+ ({{ (node?.channels / data.statistics.totalChannels * 100) | number:'1.1-1' }}%)
|
- ({{ (node.capacity / totalCapacity * 100) | number:'1.1-1' }}%)
+ ({{ (node.capacity / data.statistics.totalCapacity * 100) | number:'1.1-1' }}%)
|
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
index ca1b6d6a4..56d55a5d3 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
@@ -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,12 +17,10 @@ export class TopNodesPerChannels implements OnInit {
@Input() statistics$: Observable;
@Input() widget: boolean = false;
- topNodesPerChannels$: Observable;
+ topNodesPerChannels$: Observable<{ nodes: ITopNodesPerChannels[]; statistics: { totalChannels: number; totalCapacity?: number; } }>;
skeletonRows: number[] = [];
currency$: Observable;
- totalChannels: number;
- totalCapacity: number;
-
+
constructor(
private apiService: LightningApiService,
private stateService: StateService,
@@ -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 = {
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 = {
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;
- });
}
}
| |