Use shared component in node ranking list

frontend/src/app/lightning/nodes-ranking/oldest-nodes/oldest-nodes.component.html

@@ -35,7 +35,7 @@
             <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="location text-right text-truncate">
-            {{ node?.city?.en ?? '-' }}
+            <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
           </td>
         </tr>
       </tbody>

frontend/src/app/lightning/nodes-ranking/oldest-nodes/oldest-nodes.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { map, Observable } from 'rxjs';
+import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 import { IOldestNodes } from '../../../interfaces/node-api.interface';
 import { LightningApiService } from '../../lightning-api.service';
 
@@ -23,11 +24,23 @@ export class OldestNodes implements OnInit {
     }
 
     if (this.widget === false) {
-      this.oldestNodes$ = this.apiService.getOldestNodes$();
+      this.oldestNodes$ = this.apiService.getOldestNodes$().pipe(
+        map((ranking) => {
+          for (const i in ranking) {
+            ranking[i].geolocation = <GeolocationData>{
+              country: ranking[i].country?.en,
+              city: ranking[i].city?.en,
+              subdivision: ranking[i].subdivision?.en,
+              iso: ranking[i].iso_code,
+            };
+          }
+          return ranking;
+        })
+      );
     } else {
       this.oldestNodes$ = this.apiService.getOldestNodes$().pipe(
         map((nodes: IOldestNodes[]) => {
-          return nodes.slice(0, 10);
+          return nodes.slice(0, 7);
         })
       );
     }

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

@@ -35,7 +35,7 @@
             <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="location text-right text-truncate">
-            {{ node?.city?.en ?? '-' }}
+            <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
           </td>
         </tr>
       </tbody>

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

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { map, Observable } from 'rxjs';
 import { INodesRanking, ITopNodesPerCapacity } from 'src/app/interfaces/node-api.interface';
 import { isMobile } from 'src/app/shared/common.utils';
+import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 import { LightningApiService } from '../../lightning-api.service';
 
 @Component({
@@ -25,7 +26,19 @@ export class TopNodesPerCapacity implements OnInit {
     }
 
     if (this.widget === false) {
-      this.topNodesPerCapacity$ = this.apiService.getTopNodesByCapacity$();
+      this.topNodesPerCapacity$ = this.apiService.getTopNodesByCapacity$().pipe(
+        map((ranking) => {
+          for (const i in ranking) {
+            ranking[i].geolocation = <GeolocationData>{
+              country: ranking[i].country?.en,
+              city: ranking[i].city?.en,
+              subdivision: ranking[i].subdivision?.en,
+              iso: ranking[i].iso_code,
+            };
+          }
+          return ranking;
+        })
+      );
     } else {
       this.topNodesPerCapacity$ = this.nodes$.pipe(
         map((ranking) => {

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

@@ -35,9 +35,9 @@
             <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="location text-right text-truncate">
-            {{ node?.city?.en ?? '-' }}
+            <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
           </td>
-        </tr>
+      </tr>
       </tbody>
       <ng-template #skeleton>
         <tbody>

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

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { map, Observable } from 'rxjs';
 import { INodesRanking, ITopNodesPerChannels } from 'src/app/interfaces/node-api.interface';
 import { isMobile } from 'src/app/shared/common.utils';
+import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 import { LightningApiService } from '../../lightning-api.service';
 
 @Component({
@@ -25,7 +26,19 @@ export class TopNodesPerChannels implements OnInit {
     }
 
     if (this.widget === false) {
-      this.topNodesPerChannels$ = this.apiService.getTopNodesByChannels$();
+      this.topNodesPerChannels$ = this.apiService.getTopNodesByChannels$().pipe(
+        map((ranking) => {
+          for (const i in ranking) {
+            ranking[i].geolocation = <GeolocationData>{
+              country: ranking[i].country?.en,
+              city: ranking[i].city?.en,
+              subdivision: ranking[i].subdivision?.en,
+              iso: ranking[i].iso_code,
+            };
+          }
+          return ranking;
+        })
+      );
     } else {
       this.topNodesPerChannels$ = this.nodes$.pipe(
         map((ranking) => {