Create top 100 node per channel count component

frontend/src/app/lightning/lightning-api.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { StateService } from '../services/state.service';
-import { INodesRanking, ITopNodesPerCapacity } from '../interfaces/node-api.interface';
+import { INodesRanking, ITopNodesPerCapacity, ITopNodesPerChannels } from '../interfaces/node-api.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -69,4 +69,10 @@ export class LightningApiService {
       this.apiBasePath + '/api/v1/lightning/nodes/rankings/capacity'
     );
   }
+
+  getTopNodesByChannels$(): Observable<ITopNodesPerChannels[]> {
+    return this.httpClient.get<ITopNodesPerChannels[]>(
+      this.apiBasePath + '/api/v1/lightning/nodes/rankings/channels'
+    );
+  }
 }

frontend/src/app/lightning/lightning.routing.module.ts

@@ -40,6 +40,13 @@ const routes: Routes = [
             type: 'capacity'
           },
         },
+        {
+          path: 'nodes/top-channels',
+          component: NodesRanking,
+          data: {
+            type: 'channels'
+          },
+        },
         {
           path: '**',
           redirectTo: ''

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

@@ -1,2 +1,5 @@
 <app-top-nodes-per-capacity [nodes$]="null" [widget]="false" *ngIf="type === 'capacity'">
-</app-top-nodes-per-capacity>
+</app-top-nodes-per-capacity>
+
+<app-top-nodes-per-channels [nodes$]="null" [widget]="false" *ngIf="type === 'channels'">
+</app-top-nodes-per-channels>

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

@@ -51,6 +51,18 @@
             <td class="capacity text-right">
               <span class="skeleton-loader"></span>
             </td>
+            <td *ngIf="!widget" class="channels text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="timestamp-first text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="timestamp-update text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="location text-right text-truncate">
+              <span class="skeleton-loader"></span>
+            </td>
           </tr>
         </tbody>
       </ng-template>

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

@@ -23,8 +23,6 @@ export class TopNodesPerCapacity implements OnInit {
       this.skeletonRows.push(i);
     }
 
-    console.log(this.widget);
-
     if (this.widget === false) {
       this.topNodesPerCapacity$ = this.apiService.getTopNodesByCapacity$();
     } else {

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

@@ -1,37 +1,71 @@
-<div>
-  <table class="table table-borderless">
-    <thead>
-      <th class="rank"></th>
-      <th class="alias text-left" i18n="nodes.alias">Alias</th>
-      <th class="channels text-right" i18n="node.channels">Channels</th>
-    </thead>
-    <tbody *ngIf="topNodesPerChannels$ | async as nodes; else skeleton">
-      <tr *ngFor="let node of nodes; let i = index;">
-        <td class="rank text-left">
-          {{ i + 1 }}
-        </td>
-        <td class="alias text-left">
-          <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">{{ node.alias }}</a>
-        </td>
-          <td class="channels text-right">
-          {{ node.channels | number }}
-        </td>
-      </tr>
-    </tbody>
-    <ng-template #skeleton>
-      <tbody>
-        <tr *ngFor="let item of skeletonRows">
+<div [class]="!widget ? 'container-xl full-height' : ''">
+  <h1 *ngIf="!widget" class="float-left" i18n="lightning.top-100-channel">
+    <span>Top 100 nodes by channel count</span>
+  </h1>
+
+  <div [class]="widget ? 'widget' : 'full'">
+    <table class="table table-borderless">
+      <thead>
+        <th class="rank"></th>
+        <th class="alias text-left" i18n="nodes.alias">Alias</th>
+        <th class="channels text-right" i18n="node.channels">Channels</th>
+        <th *ngIf="!widget" class="capacity text-right" i18n="lightning.capacity">Capacity</th>
+        <th *ngIf="!widget" class="timestamp-first text-left" i18n="lightning.first_seen">First seen</th>
+        <th *ngIf="!widget" class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
+        <th *ngIf="!widget" class="location text-right" i18n="lightning.location">Location</th>
+      </thead>
+      <tbody *ngIf="topNodesPerChannels$ | async as nodes; else skeleton">
+        <tr *ngFor="let node of nodes; let i = index;">
           <td class="rank text-left">
-            <span class="skeleton-loader"></span>
+            {{ i + 1 }}
           </td>
           <td class="alias text-left">
-            <span class="skeleton-loader"></span>
+            <a [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">{{ node.alias }}</a>
           </td>
           <td class="channels text-right">
-            <span class="skeleton-loader"></span>
+            {{ node.channels | number }}
+          </td>
+          <td *ngIf="!widget" class="capacity text-right">
+            <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
+          </td>
+          <td *ngIf="!widget" class="timestamp-first text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen"></app-timestamp>
+          </td>
+          <td *ngIf="!widget" class="timestamp-update text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
+          </td>
+          <td *ngIf="!widget" class="location text-right text-truncate">
+            {{ node?.city?.en ?? '-' }}
           </td>
         </tr>
       </tbody>
-    </ng-template>
-  </table>
+      <ng-template #skeleton>
+        <tbody>
+          <tr *ngFor="let item of skeletonRows">
+            <td class="rank text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="alias text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="channels text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="capacity text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="timestamp-first text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="timestamp-update text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="location text-right text-truncate">
+              <span class="skeleton-loader"></span>
+            </td>
+          </tr>
+        </tbody>
+      </ng-template>
+    </table>
+  </div>
 </div>

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

@@ -1,8 +1,20 @@
+.container-xl {
+  max-width: 1400px;
+  padding-bottom: 100px;
+  @media (min-width: 767.98px) {
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+}
+
 .table td, .table th {
   padding: 0.5rem;
 }
 
-.rank {
+.full .rank {
+  width: 5%;
+}
+.widget .rank {
   @media (min-width: 767.98px) {
     width: 13%;
   }
@@ -12,8 +24,8 @@
   }
 }
 
-.alias {
-  width: 60%;
+.full .alias {
+  width: 10%;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;
@@ -21,10 +33,52 @@
     max-width: 175px;
   }
 }
-.channels {
-  width: 27%;
+.widget .alias {
+  width: 55%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+  @media (max-width: 767.98px) {
+    max-width: 175px;
+  }
+}
+
+.full .channels {
+  width: 10%;
+}
+.widget .channels {
+  width: 32%;
   @media (max-width: 767.98px) {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
+
+.full .capacity {
+  width: 15%;
+  padding-right: 50px;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}
+
+.full .timestamp-first {
+  width: 15%;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}
+
+.full .timestamp-update {
+  width: 15%;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}
+
+.full .location {
+  width: 10%;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}

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

@@ -1,6 +1,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 { LightningApiService } from '../../lightning-api.service';
 
 @Component({
   selector: 'app-top-nodes-per-channels',
@@ -15,20 +16,22 @@ export class TopNodesPerChannels implements OnInit {
   topNodesPerChannels$: Observable<ITopNodesPerChannels[]>;
   skeletonRows: number[] = [];
 
+  constructor(private apiService: LightningApiService) {}
+
   ngOnInit(): void {
     for (let i = 1; i <= (this.widget ? 10 : 100); ++i) {
       this.skeletonRows.push(i);
     }
 
-    this.topNodesPerChannels$ = this.nodes$.pipe(
-      map((ranking) => {
-        if (this.widget === true) {
+    if (this.widget === false) {
+      this.topNodesPerChannels$ = this.apiService.getTopNodesByChannels$();
+    } else {
+      this.topNodesPerChannels$ = this.nodes$.pipe(
+        map((ranking) => {
           return ranking.topByChannels.slice(0, 10);
-        } else {
-          return ranking.topByChannels;
-        }
-      })
-    )
+        })
+      );
+    }
   }
 
 }