From 39c5792e6f4904b93b37de23da2cdabc53a01f2e Mon Sep 17 00:00:00 2001
From: ncois <nat.coisne@gmail.com>
Date: Wed, 13 Dec 2023 12:45:36 +0100
Subject: [PATCH] Include % ownership in statistics table on LN dashboard and
 on ranking pages

---
 .../lightning-dashboard.component.html                 |  4 ++--
 .../nodes-ranking/nodes-ranking.component.html         |  4 ++--
 .../lightning/nodes-ranking/nodes-ranking.component.ts | 10 +++++++++-
 .../top-nodes-per-capacity.component.html              |  2 ++
 .../top-nodes-per-capacity.component.scss              |  5 +++++
 .../top-nodes-per-capacity.component.ts                |  8 ++++++++
 .../top-nodes-per-channels.component.html              |  2 ++
 .../top-nodes-per-channels.component.scss              |  5 +++++
 .../top-nodes-per-channels.component.ts                |  8 ++++++++
 9 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
index f7d318073..89059185e 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
@@ -63,7 +63,7 @@
             <span>&nbsp;</span>
             <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
           </a>
-          <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
+          <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-capacity>
         </div>
       </div>
     </div>
@@ -77,7 +77,7 @@
             <span>&nbsp;</span>
             <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
           </a>
-          <app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
+          <app-top-nodes-per-channels [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-channels>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.html b/frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.html
index 5bd03941e..51836880d 100644
--- a/frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.html
+++ b/frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.html
@@ -1,7 +1,7 @@
-<app-top-nodes-per-capacity [nodes$]="null" [widget]="false" *ngIf="type === 'capacity'">
+<app-top-nodes-per-capacity [nodes$]="null" [statistics$]="statistics$" [widget]="false" *ngIf="type === 'capacity'">
 </app-top-nodes-per-capacity>
 
-<app-top-nodes-per-channels [nodes$]="null" [widget]="false" *ngIf="type === 'channels'">
+<app-top-nodes-per-channels [nodes$]="null" [statistics$]="statistics$" [widget]="false" *ngIf="type === 'channels'">
 </app-top-nodes-per-channels>
 
 <app-oldest-nodes [widget]="false" *ngIf="type === 'oldest'"></app-oldest-nodes>
diff --git a/frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.ts b/frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.ts
index 373751be9..e59e89786 100644
--- a/frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.ts
+++ b/frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.ts
@@ -1,5 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { LightningApiService } from '../lightning-api.service';
+import { share } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-nodes-ranking',
@@ -9,10 +12,15 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class NodesRanking implements OnInit {
   type: string;
+  statistics$: Observable<any>;
 
-  constructor(private route: ActivatedRoute) {}
+  constructor(
+    private route: ActivatedRoute,
+    private lightningApiService: LightningApiService,
+  ) {}
 
   ngOnInit(): void {
+    this.statistics$ = this.lightningApiService.getLatestStatistics$().pipe(share());
     this.route.data.subscribe(data => {
       this.type = data.type;
     });
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html
index 3efbc8594..56fb091ee 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html
@@ -27,12 +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>
           </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>
           </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>
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss
index 3547c447f..89f144135 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss
@@ -41,6 +41,11 @@ tr, td, th {
   }
 }
 
+.capacity-ratio {
+  font-size: 12px;
+  color: darkgrey;
+}
+
 .fiat {
   width: 15%;
   @media (min-width: 768px) and (max-width: 991px) {
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts
index 054fa2f3c..780b9d1cd 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts
@@ -14,11 +14,14 @@ import { LightningApiService } from '../../lightning-api.service';
 })
 export class TopNodesPerCapacity implements OnInit {
   @Input() nodes$: Observable<INodesRanking>;
+  @Input() statistics$: Observable<any>;
   @Input() widget: boolean = false;
 
   topNodesPerCapacity$: Observable<ITopNodesPerCapacity[]>;
   skeletonRows: number[] = [];
   currency$: Observable<string>;
+  totalCapacity: number;
+  totalChannels: number;
 
   constructor(
     private apiService: LightningApiService,
@@ -59,6 +62,11 @@ export class TopNodesPerCapacity implements OnInit {
         })
       );
     }
+
+    this.statistics$?.subscribe((data) => {
+      this.totalCapacity = data.latest.total_capacity;
+      this.totalChannels = data.latest.channel_count;
+    });
   }
 
 }
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
index 94a887bb3..76b032552 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
@@ -27,9 +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>
           </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>
           </td>
           <td *ngIf="!widget" class="fiat d-none d-md-table-cell text-right">
             <app-fiat [value]="node.capacity"></app-fiat>
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss
index a42599d69..63d65bcf8 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss
@@ -44,6 +44,11 @@ tr, td, th {
   }
 }
 
+.capacity-ratio {
+  font-size: 12px;
+  color: darkgrey;
+}
+
 .geolocation {
   @media (min-width: 768px) and (max-width: 991px) {
     display: none !important;
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
index 3de177cc7..f2d00f6f0 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
@@ -14,11 +14,14 @@ import { LightningApiService } from '../../lightning-api.service';
 })
 export class TopNodesPerChannels implements OnInit {
   @Input() nodes$: Observable<INodesRanking>;
+  @Input() statistics$: Observable<any>;
   @Input() widget: boolean = false;
   
   topNodesPerChannels$: Observable<ITopNodesPerChannels[]>;
   skeletonRows: number[] = [];
   currency$: Observable<string>;
+  totalChannels: number;
+  totalCapacity: number;
 
   constructor(
     private apiService: LightningApiService,
@@ -65,6 +68,11 @@ export class TopNodesPerChannels implements OnInit {
         })
       );
     }
+
+    this.statistics$?.subscribe((data) => {
+      this.totalChannels = data.latest.channel_count;
+      this.totalCapacity = data.latest.total_capacity;
+    });
   }
 
 }