Use shared component in node ranking list

backend/src/api/explorer/nodes.api.ts

@@ -133,10 +133,13 @@ class NodesApi {
             CAST(COALESCE(nodes.capacity, 0) as INT) as capacity,
             CAST(COALESCE(nodes.channels, 0) as INT) as channels,
             UNIX_TIMESTAMP(nodes.first_seen) as firstSeen, UNIX_TIMESTAMP(nodes.updated_at) as updatedAt,
-            geo_names_city.names as city, geo_names_country.names as country
+            geo_names_city.names as city, geo_names_country.names as country,
+            geo_names_iso.names as iso_code, geo_names_subdivision.names as subdivision
           FROM nodes
           LEFT JOIN geo_names geo_names_country ON geo_names_country.id = nodes.country_id AND geo_names_country.type = 'country'
           LEFT JOIN geo_names geo_names_city ON geo_names_city.id = nodes.city_id AND geo_names_city.type = 'city'
+          LEFT JOIN geo_names geo_names_iso ON geo_names_iso.id = nodes.country_id AND geo_names_iso.type = 'country_iso_code'
+          LEFT JOIN geo_names geo_names_subdivision on geo_names_subdivision.id = nodes.subdivision_id AND geo_names_subdivision.type = 'division'
           ORDER BY capacity DESC
           LIMIT 100
         `;
@@ -175,10 +178,13 @@ class NodesApi {
             CAST(COALESCE(nodes.channels, 0) as INT) as channels,
             CAST(COALESCE(nodes.capacity, 0) as INT) as capacity,
             UNIX_TIMESTAMP(nodes.first_seen) as firstSeen, UNIX_TIMESTAMP(nodes.updated_at) as updatedAt,
-            geo_names_city.names as city, geo_names_country.names as country
+            geo_names_city.names as city, geo_names_country.names as country,
+            geo_names_iso.names as iso_code, geo_names_subdivision.names as subdivision
           FROM nodes
           LEFT JOIN geo_names geo_names_country ON geo_names_country.id = nodes.country_id AND geo_names_country.type = 'country'
           LEFT JOIN geo_names geo_names_city ON geo_names_city.id = nodes.city_id AND geo_names_city.type = 'city'
+          LEFT JOIN geo_names geo_names_iso ON geo_names_iso.id = nodes.country_id AND geo_names_iso.type = 'country_iso_code'
+          LEFT JOIN geo_names geo_names_subdivision on geo_names_subdivision.id = nodes.subdivision_id AND geo_names_subdivision.type = 'division'
           ORDER BY channels DESC
           LIMIT 100
         `;
@@ -221,11 +227,14 @@ class NodesApi {
             CAST(COALESCE(node_stats.channels, 0) as INT) as channels,
             CAST(COALESCE(node_stats.capacity, 0) as INT) as capacity,
             UNIX_TIMESTAMP(nodes.first_seen) as firstSeen, UNIX_TIMESTAMP(nodes.updated_at) as updatedAt,
-            geo_names_city.names as city, geo_names_country.names as country
+            geo_names_city.names as city, geo_names_country.names as country,
+            geo_names_iso.names as iso_code, geo_names_subdivision.names as subdivision
           FROM node_stats
           RIGHT JOIN nodes ON nodes.public_key = node_stats.public_key
           LEFT JOIN geo_names geo_names_country ON geo_names_country.id = nodes.country_id AND geo_names_country.type = 'country'
           LEFT JOIN geo_names geo_names_city ON geo_names_city.id = nodes.city_id AND geo_names_city.type = 'city'
+          LEFT JOIN geo_names geo_names_iso ON geo_names_iso.id = nodes.country_id AND geo_names_iso.type = 'country_iso_code'
+          LEFT JOIN geo_names geo_names_subdivision on geo_names_subdivision.id = nodes.subdivision_id AND geo_names_subdivision.type = 'division'
           WHERE added = FROM_UNIXTIME(${latestDate})
           ORDER BY first_seen
           LIMIT 100

frontend/src/app/interfaces/node-api.interface.ts

@@ -161,6 +161,9 @@ export interface ITopNodesPerChannels {
   updatedAt?: number,
   city?: any,
   country?: any,
+  subdivision?: any,
+  iso_code?: string,
+  geolocation?: any;
 }
 
 export interface ITopNodesPerCapacity {
@@ -172,6 +175,9 @@ export interface ITopNodesPerCapacity {
   updatedAt?: number,
   city?: any,
   country?: any,
+  subdivision?: any,
+  iso_code?: string,
+  geolocation?: any;
 }
 
 export interface INodesRanking {
@@ -188,6 +194,9 @@ export interface IOldestNodes {
   updatedAt?: number,
   city?: any,
   country?: any,
+  subdivision?: any,
+  iso_code?: string,
+  geolocation?: any;
 }
 
 export interface IChannel {

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