Delete variables and use observables in top nodes components

frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html

@@ -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">
+      <tbody *ngIf="topNodesPerCapacity$ | async as data">
-        <tr *ngFor="let node of nodes;">
+        <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">&nbsp;({{ (node.capacity / totalCapacity * 100) | number:'1.1-1' }}%)</span>
+            <span class="capacity-ratio">&nbsp;({{ (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">&nbsp;({{ (node?.channels / totalChannels * 100) | number:'1.1-1' }}%)</span>
+            <span class="capacity-ratio">&nbsp;({{ (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>

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<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(
+      this.topNodesPerCapacity$ = combineLatest([
-        map((ranking) => {
+        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(
+      this.topNodesPerCapacity$ = combineLatest([
-        map((ranking) => {
+        this.nodes$,
-          return ranking.topByCapacity.slice(0, 6);
+        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;
-    });
   }
 
 }

frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html

@@ -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">
+      <tbody *ngIf="topNodesPerChannels$ | async as data">
-        <tr *ngFor="let node of nodes;">
+        <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">&nbsp;({{ (node?.channels / totalChannels * 100) | number:'1.1-1' }}%)</span>
+            <span class="capacity-ratio">&nbsp;({{ (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">&nbsp;({{ (node.capacity / totalCapacity * 100) | number:'1.1-1' }}%)</span>
+            <span class="capacity-ratio">&nbsp;({{ (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>

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<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,
     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(
+      this.topNodesPerChannels$ = combineLatest([
-        map((ranking) => {
+        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(
+      this.topNodesPerChannels$ = combineLatest([
-        map((ranking) => {
+        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;
-    });
   }
 
 }