Show summary stats and world map in isp and country node list page

frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html

@@ -1,5 +1,54 @@
 <div class="container-xl full-height" style="min-height: 335px">
-  <h1 class="float-left" i18n="lightning.nodes-for-isp">Lightning nodes on ISP: {{ isp?.name }} [AS {{isp?.id}}]</h1>
+  <h1 i18n="lightning.nodes-for-isp">Lightning nodes on ISP: {{ isp?.name }}</h1>
+
+  <div class="box">
+    <div class="row" *ngIf="nodes$ | async as ispNodes">
+      <div class="col-12 col-md-6">
+        <table class="table table-borderless table-striped">
+          <tbody>
+            <tr>
+              <td i18n="lightning.asn">ASN</td>
+              <td>{{ isp?.id }}</td>
+            </tr>
+            <tr>
+              <td i18n="lightning.node-count">Nodes</td>
+              <td>{{ ispNodes.nodes.length }}</td>
+            </tr>
+            <tr>
+              <td i18n="lightning.liquidity">Liquidity</td>
+              <td>
+                <app-amount *ngIf="ispNodes.sumLiquidity > 100000000; else smallnode" [satoshis]="ispNodes.sumLiquidity" [digitsInfo]="'1.2-2'" [noFiat]="false"></app-amount>
+                <ng-template #smallnode>
+                  {{ ispNodes.sumLiquidity | amountShortener: 1 }}
+                  <span class="sats" i18n="shared.sats">sats</span>
+                </ng-template>
+                <span class="d-none d-md-inline-block">&nbsp;</span>
+                <span class="d-block d-md-none"></span>
+                <app-fiat [value]="ispNodes.sumLiquidity" digitsInfo="1.0-0"></app-fiat>
+              </td>
+            </tr>
+            <tr>
+              <td i18n="lightning.channels">Channels</td>
+              <td>{{ ispNodes.sumChannels }}</td>
+            </tr>
+            <tr>
+              <td i18n="lightning.top-country">Top country</td>
+              <td class="text-truncate">
+                <a class="d-block text-wrap" [routerLink]="['/lightning/nodes/country' | relativeUrl, ispNodes.topCountry.iso]">
+                  <span class="">{{ ispNodes.topCountry.country }} {{ ispNodes.topCountry.flag }}</span>
+                </a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
+        <div style="background-color: #181b2d">
+          <app-nodes-map [widget]="true" [nodes]="ispNodes.nodes" type="isp"></app-nodes-map>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <div style="min-height: 295px">
     <table class="table table-borderless">
@@ -12,9 +61,8 @@
         <th class="channels text-right" i18n="lightning.channels">Channels</th>
         <th class="city text-right" i18n="lightning.location">Location</th>
       </thead>
-
-      <tbody *ngIf="nodes$ | async as nodes; else skeleton">
-        <tr *ngFor="let node of nodes; let i= index; trackBy: trackByPublicKey">
+      <tbody *ngIf="nodes$ | async as ispNodes; else skeleton">
+        <tr *ngFor="let node of ispNodes.nodes; let i= index; trackBy: trackByPublicKey">
           <td class="alias text-left text-truncate">
             <a [routerLink]="['/lightning/node/' | relativeUrl, node.public_key]">{{ node.alias }}</a>
           </td>

frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss

@@ -59,4 +59,4 @@
   @media (max-width: 576px) {
     display: none
   }
-}
+}

frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts

@@ -1,8 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { map, Observable } from 'rxjs';
+import { map, Observable, share } from 'rxjs';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { getFlagEmoji } from 'src/app/shared/common.utils';
 import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 
 @Component({
@@ -33,7 +34,7 @@ export class NodesPerISP implements OnInit {
         map(response => {
           this.isp = {
             name: response.isp,
-            id: this.route.snapshot.params.isp
+            id: this.route.snapshot.params.isp.split(',').join(', ')
           };
           this.seoService.setTitle($localize`Lightning nodes on ISP: ${response.isp} [AS${this.route.snapshot.params.isp}]`);
 
@@ -46,12 +47,40 @@ export class NodesPerISP implements OnInit {
             };
           }
 
-          return response.nodes;
-        })
+          const sumLiquidity = response.nodes.reduce((partialSum, a) => partialSum + a.capacity, 0);
+          const sumChannels = response.nodes.reduce((partialSum, a) => partialSum + a.channels, 0);
+          const countries = {};
+          const topCountry = {
+            count: 0,
+            country: '',
+            iso: '',
+            flag: '',
+          };
+          for (const node of response.nodes) {
+            if (!node.geolocation.iso) {
+              continue;
+            }
+            countries[node.geolocation.iso] = countries[node.geolocation.iso] ?? 0 + 1;
+            if (countries[node.geolocation.iso] > topCountry.count) {
+              topCountry.count = countries[node.geolocation.iso];
+              topCountry.country = node.geolocation.country;
+              topCountry.iso = node.geolocation.iso;
+            }
+          }
+          topCountry.flag = getFlagEmoji(topCountry.iso);
+          
+          return {
+            nodes: response.nodes,
+            sumLiquidity: sumLiquidity,
+            sumChannels: sumChannels,
+            topCountry: topCountry,
+          };
+        }),
+        share()
       );
   }
 
-  trackByPublicKey(index: number, node: any) {
+  trackByPublicKey(index: number, node: any): string {
     return node.public_key;
   }
 }