Merge branch 'master' into nymkappa/feature/tv-to-graph

backend/src/api/database-migration.ts

@@ -4,7 +4,7 @@ import logger from '../logger';
 import { Common } from './common';
 
 class DatabaseMigration {
-  private static currentVersion = 32;
+  private static currentVersion = 33;
   private queryTimeout = 120000;
   private statisticsAddedIndexed = false;
   private uniqueLogs: string[] = [];
@@ -302,6 +302,10 @@ class DatabaseMigration {
     if (databaseSchemaVersion < 32 && isBitcoin == true) {
       await this.$executeQuery('ALTER TABLE `blocks_summaries` ADD `template` JSON DEFAULT "[]"');
     }
+
+    if (databaseSchemaVersion < 33 && isBitcoin == true) {
+      await this.$executeQuery('ALTER TABLE `geo_names` CHANGE `type` `type` enum("city","country","division","continent","as_organization", "country_iso_code") NOT NULL');
+    }
   }
 
   /**

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

@@ -93,6 +93,132 @@ class NodesApi {
       throw e;
     }
   }
+
+  public async $getNodesISP() {
+    try {
+      let query = `SELECT nodes.as_number as ispId, geo_names.names as names, COUNT(DISTINCT nodes.public_key) as nodesCount, SUM(capacity) as capacity
+        FROM nodes
+        JOIN geo_names ON geo_names.id = nodes.as_number
+        JOIN channels ON channels.node1_public_key = nodes.public_key OR channels.node2_public_key = nodes.public_key
+        GROUP BY as_number
+        ORDER BY COUNT(DISTINCT nodes.public_key) DESC
+      `;
+      const [nodesCountPerAS]: any = await DB.query(query);
+
+      query = `SELECT COUNT(*) as total FROM nodes WHERE as_number IS NOT NULL`;
+      const [nodesWithAS]: any = await DB.query(query);
+
+      const nodesPerAs: any[] = [];
+      for (const as of nodesCountPerAS) {
+        nodesPerAs.push({
+          ispId: as.ispId,
+          name: JSON.parse(as.names),
+          count: as.nodesCount,
+          share: Math.floor(as.nodesCount / nodesWithAS[0].total * 10000) / 100,
+          capacity: as.capacity,
+        })
+      }
+
+      return nodesPerAs;
+    } catch (e) {
+      logger.err(`Cannot get nodes grouped by AS. Reason: ${e instanceof Error ? e.message : e}`);
+      throw e;
+    }
+  }
+
+  public async $getNodesPerCountry(countryId: string) {
+    try {
+      const query = `
+        SELECT DISTINCT   node_stats.public_key, node_stats.capacity, node_stats.channels, nodes.alias,
+          UNIX_TIMESTAMP(nodes.first_seen) as first_seen, UNIX_TIMESTAMP(nodes.updated_at) as updated_at,
+          geo_names_city.names as city
+        FROM node_stats
+        JOIN (
+          SELECT public_key, MAX(added) as last_added
+          FROM node_stats
+          GROUP BY public_key
+        ) as b ON b.public_key = node_stats.public_key AND b.last_added = node_stats.added
+        JOIN nodes ON nodes.public_key = node_stats.public_key
+        JOIN geo_names geo_names_country ON geo_names_country.id = nodes.country_id
+        LEFT JOIN geo_names geo_names_city ON geo_names_city.id = nodes.city_id
+        WHERE geo_names_country.id = ?
+        ORDER BY capacity DESC
+      `;
+
+      const [rows]: any = await DB.query(query, [countryId]);
+      for (let i = 0; i < rows.length; ++i) {
+        rows[i].city = JSON.parse(rows[i].city);
+      }
+      return rows;
+    } catch (e) {
+      logger.err(`Cannot get nodes for country id ${countryId}. Reason: ${e instanceof Error ? e.message : e}`);
+      throw e;
+    }
+  }
+
+  public async $getNodesPerISP(ISPId: string) {
+    try {
+      const query = `
+        SELECT node_stats.public_key, node_stats.capacity, node_stats.channels, nodes.alias,
+          UNIX_TIMESTAMP(nodes.first_seen) as first_seen, UNIX_TIMESTAMP(nodes.updated_at) as updated_at,
+          geo_names_city.names as city, geo_names_country.names as country
+        FROM node_stats
+        JOIN (
+          SELECT public_key, MAX(added) as last_added
+          FROM node_stats
+          GROUP BY public_key
+        ) as b ON b.public_key = node_stats.public_key AND b.last_added = node_stats.added
+        JOIN nodes ON nodes.public_key = node_stats.public_key
+        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'
+        WHERE nodes.as_number = ?
+        ORDER BY capacity DESC
+      `;
+
+      const [rows]: any = await DB.query(query, [ISPId]);
+      for (let i = 0; i < rows.length; ++i) {
+        rows[i].country = JSON.parse(rows[i].country);
+        rows[i].city = JSON.parse(rows[i].city);
+      }
+      return rows;
+    } catch (e) {
+      logger.err(`Cannot get nodes for ISP id ${ISPId}. Reason: ${e instanceof Error ? e.message : e}`);
+      throw e;
+    }
+  }
+
+  public async $getNodesCountries() {
+    try {
+      let query = `SELECT geo_names.names as names, geo_names_iso.names as iso_code, COUNT(DISTINCT nodes.public_key) as nodesCount, SUM(capacity) as capacity
+        FROM nodes
+        JOIN geo_names ON geo_names.id = nodes.country_id AND geo_names.type = 'country'
+        JOIN geo_names geo_names_iso ON geo_names_iso.id = nodes.country_id AND geo_names_iso.type = 'country_iso_code'
+        JOIN channels ON channels.node1_public_key = nodes.public_key OR channels.node2_public_key = nodes.public_key
+        GROUP BY country_id
+        ORDER BY COUNT(DISTINCT nodes.public_key) DESC
+      `;
+      const [nodesCountPerCountry]: any = await DB.query(query);
+
+      query = `SELECT COUNT(*) as total FROM nodes WHERE country_id IS NOT NULL`;
+      const [nodesWithAS]: any = await DB.query(query);
+
+      const nodesPerCountry: any[] = [];
+      for (const country of nodesCountPerCountry) {
+        nodesPerCountry.push({
+          name: JSON.parse(country.names),
+          iso: country.iso_code, 
+          count: country.nodesCount,
+          share: Math.floor(country.nodesCount / nodesWithAS[0].total * 10000) / 100,
+          capacity: country.capacity,
+        })
+      }
+
+      return nodesPerCountry;
+    } catch (e) {
+      logger.err(`Cannot get nodes grouped by AS. Reason: ${e instanceof Error ? e.message : e}`);
+      throw e;
+    }
+  }
 }
 
 export default new NodesApi();

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

@@ -1,13 +1,19 @@
 import config from '../../config';
 import { Application, Request, Response } from 'express';
 import nodesApi from './nodes.api';
+import DB from '../../database';
+
 class NodesRoutes {
   constructor() { }
 
   public initRoutes(app: Application) {
     app
+      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/country/:country', this.$getNodesPerCountry)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/isp/:isp', this.$getNodesPerISP)
       .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/search/:search', this.$searchNode)
       .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/top', this.$getTopNodes)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/isp', this.$getNodesISP)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/countries', this.$getNodesCountries)
       .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/:public_key/statistics', this.$getHistoricalNodeStats)
       .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/:public_key', this.$getNode)
     ;
@@ -56,6 +62,85 @@ class NodesRoutes {
       res.status(500).send(e instanceof Error ? e.message : e);
     }
   }
+
+  private async $getNodesISP(req: Request, res: Response) {
+    try {
+      const nodesPerAs = await nodesApi.$getNodesISP();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 600).toUTCString());
+      res.json(nodesPerAs);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getNodesPerCountry(req: Request, res: Response) {
+    try {
+      const [country]: any[] = await DB.query(
+        `SELECT geo_names.id, geo_names_country.names as country_names
+        FROM geo_names
+        JOIN geo_names geo_names_country on geo_names.id = geo_names_country.id AND geo_names_country.type = 'country'
+        WHERE geo_names.type = 'country_iso_code' AND geo_names.names = ?`,
+        [req.params.country]
+      );
+
+      if (country.length === 0) {
+        res.status(404).send(`This country does not exist or does not host any lightning nodes on clearnet`);
+        return;
+      }
+
+      const nodes = await nodesApi.$getNodesPerCountry(country[0].id);
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
+      res.json({
+        country: JSON.parse(country[0].country_names),
+        nodes: nodes,
+      });
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getNodesPerISP(req: Request, res: Response) {
+    try {
+      const [isp]: any[] = await DB.query(
+        `SELECT geo_names.names as isp_name
+        FROM geo_names
+        WHERE geo_names.type = 'as_organization' AND geo_names.id = ?`,
+        [req.params.isp]
+      );
+
+      if (isp.length === 0) {
+        res.status(404).send(`This ISP does not exist or does not host any lightning nodes on clearnet`);
+        return;
+      }
+
+      const nodes = await nodesApi.$getNodesPerISP(req.params.isp);
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
+      res.json({
+        isp: JSON.parse(isp[0].isp_name),
+        nodes: nodes,
+      });
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getNodesCountries(req: Request, res: Response) {
+    try {
+      const nodesPerAs = await nodesApi.$getNodesCountries();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 600).toUTCString());
+      res.json(nodesPerAs);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
 }
 
 export default new NodesRoutes();

backend/src/tasks/lightning/sync-tasks/node-locations.ts

@@ -39,6 +39,13 @@ export async function $lookupNodeLocation(): Promise<void> {
                 [city.country?.geoname_id, JSON.stringify(city.country?.names)]);
              }
 
+            // Store Country ISO code
+            if (city.country?.iso_code) {
+              await DB.query(
+               `INSERT IGNORE INTO geo_names (id, type, names) VALUES (?, 'country_iso_code', ?)`,
+               [city.country?.geoname_id, city.country?.iso_code]);
+            }
+
             // Store Division
             if (city.subdivisions && city.subdivisions[0]) {
               await DB.query(

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html

@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-fee-rates">Block Fee Rates</span>
+    <div class="d-flex d-md-block align-items-baseline">
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.block-fee-rates">Block Fee Rates</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">

frontend/src/app/components/block-fees-graph/block-fees-graph.component.html

@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-fees">Block Fees</span>
+    <div class="d-flex d-md-block align-items-baseline">
-      <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.block-fees">Block Fees</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html

@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span>
+    <div class="d-flex d-md-block align-items-baseline">
-      <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html

@@ -3,10 +3,13 @@
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
-  <span i18n="mining.block-rewards">Block Rewards</span>
+    <div class="d-flex d-md-block align-items-baseline">
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.block-rewards">Block Rewards</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+  
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html

@@ -1,10 +1,12 @@
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-sizes-weights">Block Sizes and Weights</span>
+    <div class="d-flex d-md-block align-items-baseline">
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.block-sizes-weights">Block Sizes and Weights</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/components/graphs/graphs.component.html

@@ -34,6 +34,10 @@
         i18n="lightning.nodes-networks">Nodes per network</a>
       <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/capacity' | relativeUrl]"
         i18n="lightning.capacity">Network capacity</a>
+      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-per-isp' | relativeUrl]"
+        i18n="lightning.nodes-per-isp">Lightning nodes per ISP</a>
+      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-per-country' | relativeUrl]"
+        i18n="lightning.nodes-per-isp">Lightning nodes per country</a>
     </div>
   </div>
 </div>

frontend/src/app/components/hashrate-chart/hashrate-chart.component.html

@@ -23,10 +23,12 @@
   </div>
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
-    <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
+    <div class="d-flex d-md-block align-items-baseline">
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -2,11 +2,14 @@
 
 <div class="full-container">
 
-  <div class="card-header  mb-0 mb-md-4">
+  <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.pools-dominance">Pools Dominance</span>
+    <div class="d-flex d-md-block align-items-baseline">
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.pools-dominance">Pools Dominance</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -32,10 +32,12 @@
   </div>
 
   <div class="card-header" *ngIf="!widget">
-    <span i18n="mining.pools">Pools Ranking</span>
+    <div class="d-flex d-md-block align-items-baseline">
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.pools">Pools Ranking</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
     <form [formGroup]="radioGroupForm" class="formRadioGroup"
       *ngIf="!widget && (miningStatsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/components/statistics/statistics.component.html

@@ -3,11 +3,12 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <i class="fa fa-area-chart"></i>
+          <div class="d-flex d-md-block align-items-baseline">
-          <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
+            <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
-          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
+            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
-            <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+              <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-          </button>
+            </button>
+          </div>  
 
           <form [formGroup]="radioGroupForm" class="formRadioGroup"
             [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
@@ -91,11 +92,12 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <i class="fa fa-area-chart"></i>
+          <div class="d-flex d-md-block align-items-baseline">
-          <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
+            <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
-          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
+            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
-            <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+              <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-          </button>
+            </button>
+          </div>  
         </div>
 
         <div class="card-body">

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

@@ -20,6 +20,8 @@ import { TelevisionComponent } from '../components/television/television.compone
 import { DashboardComponent } from '../dashboard/dashboard.component';
 import { NodesNetworksChartComponent } from '../lightning/nodes-networks-chart/nodes-networks-chart.component';
 import { LightningStatisticsChartComponent } from '../lightning/statistics-chart/lightning-statistics-chart.component';
+import { NodesPerISPChartComponent } from '../lightning/nodes-per-isp-chart/nodes-per-isp-chart.component';
+import { NodesPerCountryChartComponent } from '../lightning/nodes-per-country-chart/nodes-per-country-chart.component';
 
 const browserWindow = window || {};
 // @ts-ignore
@@ -99,6 +101,14 @@ const routes: Routes = [
             path: 'lightning/capacity',
             component: LightningStatisticsChartComponent,
           },
+          {
+            path: 'lightning/nodes-per-isp',
+            component: NodesPerISPChartComponent,
+          },
+          {
+            path: 'lightning/nodes-per-country',
+            component: NodesPerCountryChartComponent,
+          },
           {
             path: '',
             redirectTo: 'mempool',

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

@@ -18,6 +18,10 @@ import { NodeStatisticsChartComponent } from './node-statistics-chart/node-stati
 import { GraphsModule } from '../graphs/graphs.module';
 import { NodesNetworksChartComponent } from './nodes-networks-chart/nodes-networks-chart.component';
 import { ChannelsStatisticsComponent } from './channels-statistics/channels-statistics.component';
+import { NodesPerISPChartComponent } from './nodes-per-isp-chart/nodes-per-isp-chart.component';
+import { NodesPerCountry } from './nodes-per-country/nodes-per-country.component';
+import { NodesPerISP } from './nodes-per-isp/nodes-per-isp.component';
+import { NodesPerCountryChartComponent } from '../lightning/nodes-per-country-chart/nodes-per-country-chart.component';
 @NgModule({
   declarations: [
     LightningDashboardComponent,
@@ -33,6 +37,10 @@ import { ChannelsStatisticsComponent } from './channels-statistics/channels-stat
     LightningStatisticsChartComponent,
     NodesNetworksChartComponent,
     ChannelsStatisticsComponent,
+    NodesPerISPChartComponent,
+    NodesPerCountry,
+    NodesPerISP,
+    NodesPerCountryChartComponent,
   ],
   imports: [
     CommonModule,

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

@@ -4,6 +4,8 @@ import { LightningDashboardComponent } from './lightning-dashboard/lightning-das
 import { LightningWrapperComponent } from './lightning-wrapper/lightning-wrapper.component';
 import { NodeComponent } from './node/node.component';
 import { ChannelComponent } from './channel/channel.component';
+import { NodesPerCountry } from './nodes-per-country/nodes-per-country.component';
+import { NodesPerISP } from './nodes-per-isp/nodes-per-isp.component';
 
 const routes: Routes = [
     {
@@ -22,6 +24,14 @@ const routes: Routes = [
           path: 'channel/:short_id',
           component: ChannelComponent,
         },
+        {
+          path: 'nodes/country/:country',
+          component: NodesPerCountry,
+        },
+        {
+          path: 'nodes/isp/:isp',
+          component: NodesPerISP,
+        },
         {
           path: '**',
           redirectTo: ''

frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html

@@ -1,10 +1,12 @@
 <div [class]="widget === false ? 'full-container' : ''">
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
-    <span i18n="mining.nodes-networks">Nodes count by network</span>
+    <div class="d-flex d-md-block align-items-baseline">
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.nodes-networks">Nodes count by network</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(nodesNetworkObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html

@@ -0,0 +1,58 @@
+<div class="full-container h-100">
+
+  <div class="card-header">
+    <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
+      <span i18n="lightning.nodes-per-country">Lightning nodes per country</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>
+    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+  </div>
+
+  <div class="container pb-lg-0 bottom-padding">
+    <div class="pb-lg-5">
+      <div class="chart w-100" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+        (chartInit)="onChartInit($event)">
+      </div>
+    </div>
+
+    <div class="text-center loadingGraphs" *ngIf="isLoading">
+      <div class="spinner-border text-light"></div>
+    </div>
+
+    <table class="table table-borderless text-center m-auto" style="max-width: 900px">
+      <thead>
+        <tr>
+          <th class="text-left rank" i18n="mining.rank">Rank</th>
+          <th class="text-left name" i18n="lightning.as-name">Name</th>
+          <th class="text-right share" i18n="lightning.share">Share</th>
+          <th class="text-right nodes" i18n="lightning.nodes-count">Nodes</th>
+          <th class="text-right capacity" i18n="lightning.capacity">Capacity</th>
+        </tr>
+      </thead>
+      <tbody [attr.data-cy]="'pools-table'" *ngIf="(nodesPerCountryObservable$ | async) as countries">
+        <tr *ngFor="let country of countries">
+          <td class="text-left rank">{{ country.rank }}</td>
+          <td class="text-left text-truncate name">
+            <div class="d-flex">
+              <span style="font-size: 20px">{{ country.flag }}</span>
+              &nbsp;
+              <a class="mt-auto mb-auto" [routerLink]="['/lightning/nodes/country' | relativeUrl, country.iso]">{{ country.name.en }}</a>
+            </div>
+          </td>
+          <td class="text-right share">{{ country.share }}%</td>
+          <td class="text-right nodes">{{ country.count }}</td>
+          <td class="text-right capacity">
+            <app-amount *ngIf="country.capacity > 100000000; else smallchannel" [satoshis]="country.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
+            <ng-template #smallchannel>
+              {{ country.capacity | amountShortener: 1 }}
+              <span class="sats" i18n="shared.sats">sats</span>
+            </ng-template>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</div>

frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss

@@ -0,0 +1,81 @@
+.sats {
+  color: #ffffff66;
+  font-size: 12px;
+  top: 0px;
+}
+
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+}
+
+.full-container {
+  padding: 0px 15px;
+  width: 100%;
+  height: calc(100% - 140px);
+  @media (max-width: 992px) {
+    height: calc(100% - 190px);
+  };
+  @media (max-width: 575px) {
+    height: calc(100% - 230px);
+  };
+}
+
+.chart {
+  max-height: 400px;
+  @media (max-width: 767.98px) {
+    max-height: 230px;
+    margin-top: -35px;
+  }
+}
+
+.bottom-padding {
+  @media (max-width: 992px) {
+    padding-bottom: 65px
+  };
+  @media (max-width: 576px) {
+    padding-bottom: 65px
+  };
+}
+
+.rank {
+  width: 20%;
+  @media (max-width: 576px) {
+    display: none
+  }
+}
+
+.name {
+  width: 20%;
+  @media (max-width: 576px) {
+    width: 80%;
+    max-width: 150px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.share {
+  width: 20%;
+  @media (max-width: 576px) {
+    display: none
+  }
+}
+
+.nodes {
+  width: 20%;
+  @media (max-width: 576px) {
+    width: 10%;
+  }
+}
+
+.capacity {
+  width: 20%;
+  @media (max-width: 576px) {
+    width: 10%;
+    max-width: 100px;
+  }
+}

frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts

@@ -0,0 +1,235 @@
+import { ChangeDetectionStrategy, Component, OnInit, HostBinding, NgZone } from '@angular/core';
+import { Router } from '@angular/router';
+import { EChartsOption, PieSeriesOption } from 'echarts';
+import { map, Observable, share, tap } from 'rxjs';
+import { chartColors } from 'src/app/app.constants';
+import { ApiService } from 'src/app/services/api.service';
+import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
+import { download } from 'src/app/shared/graphs.utils';
+import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
+import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { getFlagEmoji } from 'src/app/shared/graphs.utils';
+
+@Component({
+  selector: 'app-nodes-per-country-chart',
+  templateUrl: './nodes-per-country-chart.component.html',
+  styleUrls: ['./nodes-per-country-chart.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodesPerCountryChartComponent implements OnInit {
+  miningWindowPreference: string;
+
+  isLoading = true;
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+  timespan = '';
+  chartInstance: any = undefined;
+
+  @HostBinding('attr.dir') dir = 'ltr';
+
+  nodesPerCountryObservable$: Observable<any>;
+
+  constructor(
+    private apiService: ApiService,
+    private seoService: SeoService,
+    private amountShortenerPipe: AmountShortenerPipe,
+    private zone: NgZone,
+    private stateService: StateService,
+    private router: Router,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`Lightning nodes per country`);
+
+    this.nodesPerCountryObservable$ = this.apiService.getNodesPerCountry()
+      .pipe(
+        map(data => {
+          for (let i = 0; i < data.length; ++i) {
+            data[i].rank = i + 1;
+            data[i].iso = data[i].iso.toLowerCase();
+            data[i].flag = getFlagEmoji(data[i].iso);
+          }
+          return data.slice(0, 100);
+        }),
+        tap(data => {
+          this.isLoading = false;
+          this.prepareChartOptions(data);
+        }),
+        share()
+      );
+  }
+
+  generateChartSerieData(country) {
+    const shareThreshold = this.isMobile() ? 2 : 1;
+    const data: object[] = [];
+    let totalShareOther = 0;
+    let totalNodeOther = 0;
+
+    let edgeDistance: string | number = '10%';
+    if (this.isMobile()) {
+      edgeDistance = 0;
+    }
+
+    country.forEach((country) => {
+      if (country.share < shareThreshold) {
+        totalShareOther += country.share;
+        totalNodeOther += country.count;
+        return;
+      }
+      data.push({
+        value: country.share,
+        name: country.name.en + (this.isMobile() ? `` : ` (${country.share}%)`),
+        label: {
+          overflow: 'truncate',
+          color: '#b1b1b1',
+          alignTo: 'edge',
+          edgeDistance: edgeDistance,
+        },
+        tooltip: {
+          show: !this.isMobile(),
+          backgroundColor: 'rgba(17, 19, 31, 1)',
+          borderRadius: 4,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+          textStyle: {
+            color: '#b1b1b1',
+          },
+          borderColor: '#000',
+          formatter: () => {
+            return `<b style="color: white">${country.name.en} (${country.share}%)</b><br>` +
+              $localize`${country.count.toString()} nodes<br>` +
+              $localize`${this.amountShortenerPipe.transform(country.capacity / 100000000, 2)} BTC capacity`
+            ;
+          }
+        },
+        data: country.iso,
+      } as PieSeriesOption);
+    });
+
+    // 'Other'
+    data.push({
+      itemStyle: {
+        color: 'grey',
+      },
+      value: totalShareOther,
+      name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
+      label: {
+        overflow: 'truncate',
+        color: '#b1b1b1',
+        alignTo: 'edge',
+        edgeDistance: edgeDistance
+      },
+      tooltip: {
+        backgroundColor: 'rgba(17, 19, 31, 1)',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+        textStyle: {
+          color: '#b1b1b1',
+        },
+        borderColor: '#000',
+        formatter: () => {
+          return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
+            totalNodeOther.toString() + ` nodes`;
+        },
+      },
+      data: 9999 as any
+    } as PieSeriesOption);
+
+    return data;
+  }
+
+  prepareChartOptions(country) {
+    let pieSize = ['20%', '80%']; // Desktop
+    if (this.isMobile()) {
+      pieSize = ['15%', '60%'];
+    }
+
+    this.chartOptions = {
+      animation: false,
+      color: chartColors,
+      tooltip: {
+        trigger: 'item',
+        textStyle: {
+          align: 'left',
+        }
+      },
+      series: [
+        {
+          zlevel: 0,
+          minShowLabelAngle: 3.6,
+          name: 'Mining pool',
+          type: 'pie',
+          radius: pieSize,
+          data: this.generateChartSerieData(country),
+          labelLine: {
+            lineStyle: {
+              width: 2,
+            },
+            length: this.isMobile() ? 1 : 20,
+            length2: this.isMobile() ? 1 : undefined,
+          },
+          label: {
+            fontSize: 14,
+          },
+          itemStyle: {
+            borderRadius: 1,
+            borderWidth: 1,
+            borderColor: '#000',
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 40,
+              shadowColor: 'rgba(0, 0, 0, 0.75)',
+            },
+            labelLine: {
+              lineStyle: {
+                width: 4,
+              }
+            }
+          }
+        }
+      ],
+    };
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
+
+  onChartInit(ec) {
+    if (this.chartInstance !== undefined) {
+      return;
+    }
+    this.chartInstance = ec;
+
+    this.chartInstance.on('click', (e) => {
+      if (e.data.data === 9999) { // "Other"
+        return;
+      }
+      this.zone.run(() => {
+        const url = new RelativeUrlPipe(this.stateService).transform(`/lightning/nodes/country/${e.data.data}`);
+        this.router.navigate([url]);
+      });
+    });
+  }
+
+  onSaveChart() {
+    const now = new Date();
+    this.chartOptions.backgroundColor = '#11131f';
+    this.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `lightning-nodes-per-country-${Math.round(now.getTime() / 1000)}.svg`);
+    this.chartOptions.backgroundColor = 'none';
+    this.chartInstance.setOption(this.chartOptions);
+  }
+
+  isEllipsisActive(e) {
+    return (e.offsetWidth < e.scrollWidth);
+  }
+}
+

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

@@ -0,0 +1,45 @@
+<div class="container-xl full-height" style="min-height: 335px">
+  <h1 class="float-left" i18n="lightning.nodes-in-country">
+    <span>Lightning nodes in {{ country?.name }}</span>
+    <span style="font-size: 50px; vertical-align:sub;"> {{ country?.flag }}</span>
+  </h1>
+
+  <div style="min-height: 295px">
+    <table class="table table-borderless">
+      <thead>
+        <th class="alias text-left" i18n="lightning.alias">Alias</th>
+        <th class="timestamp-first text-left" i18n="lightning.first_seen">First seen</th>
+        <th class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
+        <th class="capacity text-right" i18n="lightning.capacity">Capacity</th>
+        <th class="channels text-right" i18n="lightning.channels">Channels</th>
+        <th class="city text-right" i18n="lightning.city">City</th>
+      </thead>
+      <tbody *ngIf="nodes$ | async as nodes">
+        <tr *ngFor="let node of 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>
+          <td class="timestamp-first text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.first_seen"></app-timestamp>
+          </td>
+          <td class="timestamp-update text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updated_at"></app-timestamp>
+          </td>
+          <td class="capacity text-right">
+            <app-amount *ngIf="node.capacity > 100000000; else smallchannel" [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
+            <ng-template #smallchannel>
+              {{ node.capacity | amountShortener: 1 }}
+              <span class="sats" i18n="shared.sats">sats</span>
+            </ng-template>
+          </td>
+          <td class="channels text-right">
+            {{ node.channels }}
+          </td>
+          <td class="city text-right text-truncate">
+            {{ node?.city?.en ?? '-' }}
+          </td>
+      </tbody>
+    </table>
+  </div>
+
+</div>

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

@@ -0,0 +1,56 @@
+.container-xl {
+  max-width: 1400px;
+  padding-bottom: 100px;
+}
+
+.sats {
+  color: #ffffff66;
+  font-size: 12px;
+  top: 0px;
+}
+
+.alias {
+  width: 30%;
+  max-width: 400px;
+  padding-right: 70px;
+  @media (max-width: 576px) {
+    width: 50%;
+    max-width: 150px;
+    padding-right: 0px;
+  }
+}
+
+.timestamp-first {
+  width: 20%;
+  @media (max-width: 576px) {
+    display: none
+  }
+}
+
+.timestamp-update {
+  width: 16%;
+  @media (max-width: 576px) {
+    display: none
+  }
+}
+
+.capacity {
+  width: 10%;
+  @media (max-width: 576px) {
+    width: 25%;
+  }
+}
+
+.channels {
+  width: 10%;
+  @media (max-width: 576px) {
+    width: 25%;
+  }
+}
+
+.city {
+  max-width: 150px;
+  @media (max-width: 576px) {
+    display: none
+  }
+}

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

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map, Observable } from 'rxjs';
+import { ApiService } from 'src/app/services/api.service';
+import { SeoService } from 'src/app/services/seo.service';
+import { getFlagEmoji } from 'src/app/shared/graphs.utils';
+
+@Component({
+  selector: 'app-nodes-per-country',
+  templateUrl: './nodes-per-country.component.html',
+  styleUrls: ['./nodes-per-country.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodesPerCountry implements OnInit {
+  nodes$: Observable<any>;
+  country: {name: string, flag: string};
+
+  constructor(
+    private apiService: ApiService,
+    private seoService: SeoService,
+    private route: ActivatedRoute,
+  ) { }
+
+  ngOnInit(): void {
+    this.nodes$ = this.apiService.getNodeForCountry$(this.route.snapshot.params.country)
+      .pipe(
+        map(response => {
+          this.country = {
+            name: response.country.en,
+            flag: getFlagEmoji(this.route.snapshot.params.country)
+          };
+          this.seoService.setTitle($localize`Lightning nodes in ${this.country.name}`);
+          return response.nodes;
+        })
+      );
+  }
+
+  trackByPublicKey(index: number, node: any) {
+    return node.public_key;
+  }
+}

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

@@ -0,0 +1,48 @@
+<div class="full-container h-100">
+
+  <div class="card-header">
+    <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
+      <span i18n="lightning.nodes-per-isp">Lightning nodes per ISP</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>
+    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+  </div>
+
+  <div class="container pb-lg-0 bottom-padding">
+    <div class="pb-lg-5" *ngIf="nodesPerAsObservable$ | async">
+      <div class="chart w-100" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+        (chartInit)="onChartInit($event)">
+      </div>
+    </div>
+
+    <div class="text-center loadingGraphs" *ngIf="isLoading">
+      <div class="spinner-border text-light"></div>
+    </div>
+
+    <table class="table table-borderless text-center">
+      <thead>
+        <tr>
+          <th *ngIf="!isMobile()" i18n="mining.rank">Rank</th>
+          <th i18n="lightning.isp">ISP</th>
+          <th *ngIf="!isMobile()" i18n="lightning.share">Share</th>
+          <th i18n="lightning.nodes-count">Nodes</th>
+          <th i18n="lightning.capacity">Capacity</th>
+        </tr>
+      </thead>
+      <tbody [attr.data-cy]="'pools-table'" *ngIf="(nodesPerAsObservable$ | async) as asList">
+        <tr *ngFor="let asEntry of asList">
+          <td *ngIf="!isMobile()">{{ asEntry.rank }}</td>
+          <td class="text-truncate" style="max-width: 100px">
+            <a [routerLink]="[('/lightning/nodes/isp/' + asEntry.ispId) | relativeUrl]">{{ asEntry.name }}</a>
+          </td>
+          <td *ngIf="!isMobile()">{{ asEntry.share }}%</td>
+          <td>{{ asEntry.count }}</td>
+          <td><app-amount [satoshis]="asEntry.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</div>

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

@@ -0,0 +1,36 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+}
+
+.full-container {
+  padding: 0px 15px;
+  width: 100%;
+  height: calc(100% - 140px);
+  @media (max-width: 992px) {
+    height: calc(100% - 190px);
+  };
+  @media (max-width: 575px) {
+    height: calc(100% - 230px);
+  };
+}
+
+.chart {
+  max-height: 400px;
+  @media (max-width: 767.98px) {
+    max-height: 230px;
+    margin-top: -35px;
+  }
+}
+
+.bottom-padding {
+  @media (max-width: 992px) {
+    padding-bottom: 65px
+  };
+  @media (max-width: 576px) {
+    padding-bottom: 65px
+  };
+}

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

@@ -0,0 +1,231 @@
+import { ChangeDetectionStrategy, Component, OnInit, HostBinding, NgZone } from '@angular/core';
+import { Router } from '@angular/router';
+import { EChartsOption, PieSeriesOption } from 'echarts';
+import { map, Observable, share, tap } from 'rxjs';
+import { chartColors } from 'src/app/app.constants';
+import { ApiService } from 'src/app/services/api.service';
+import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
+import { download } from 'src/app/shared/graphs.utils';
+import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
+import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+
+@Component({
+  selector: 'app-nodes-per-isp-chart',
+  templateUrl: './nodes-per-isp-chart.component.html',
+  styleUrls: ['./nodes-per-isp-chart.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodesPerISPChartComponent implements OnInit {
+  miningWindowPreference: string;
+
+  isLoading = true;
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+  timespan = '';
+  chartInstance: any = undefined;
+
+  @HostBinding('attr.dir') dir = 'ltr';
+
+  nodesPerAsObservable$: Observable<any>;
+
+  constructor(
+    private apiService: ApiService,
+    private seoService: SeoService,
+    private amountShortenerPipe: AmountShortenerPipe,
+    private router: Router,
+    private zone: NgZone,
+    private stateService: StateService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`Lightning nodes per ISP`);
+
+    this.nodesPerAsObservable$ = this.apiService.getNodesPerAs()
+      .pipe(
+        tap(data => {
+          this.isLoading = false;
+          this.prepareChartOptions(data);
+        }),
+        map(data => {
+          for (let i = 0; i < data.length; ++i) {
+            data[i].rank = i + 1;
+          }
+          return data.slice(0, 100);
+        }),
+        share()
+      );
+  }
+
+  generateChartSerieData(as) {
+    const shareThreshold = this.isMobile() ? 2 : 1;
+    const data: object[] = [];
+    let totalShareOther = 0;
+    let totalNodeOther = 0;
+
+    let edgeDistance: string | number = '10%';
+    if (this.isMobile()) {
+      edgeDistance = 0;
+    }
+
+    as.forEach((as) => {
+      if (as.share < shareThreshold) {
+        totalShareOther += as.share;
+        totalNodeOther += as.count;
+        return;
+      }
+      data.push({
+        value: as.share,
+        name: as.name + (this.isMobile() ? `` : ` (${as.share}%)`),
+        label: {
+          overflow: 'truncate',
+          color: '#b1b1b1',
+          alignTo: 'edge',
+          edgeDistance: edgeDistance,
+        },
+        tooltip: {
+          show: !this.isMobile(),
+          backgroundColor: 'rgba(17, 19, 31, 1)',
+          borderRadius: 4,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+          textStyle: {
+            color: '#b1b1b1',
+          },
+          borderColor: '#000',
+          formatter: () => {
+            return `<b style="color: white">${as.name} (${as.share}%)</b><br>` +
+              $localize`${as.count.toString()} nodes<br>` +
+              $localize`${this.amountShortenerPipe.transform(as.capacity / 100000000, 2)} BTC capacity`
+            ;
+          }
+        },
+        data: as.ispId,
+      } as PieSeriesOption);
+    });
+
+    // 'Other'
+    data.push({
+      itemStyle: {
+        color: 'grey',
+      },
+      value: totalShareOther,
+      name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
+      label: {
+        overflow: 'truncate',
+        color: '#b1b1b1',
+        alignTo: 'edge',
+        edgeDistance: edgeDistance
+      },
+      tooltip: {
+        backgroundColor: 'rgba(17, 19, 31, 1)',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+        textStyle: {
+          color: '#b1b1b1',
+        },
+        borderColor: '#000',
+        formatter: () => {
+          return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
+            totalNodeOther.toString() + ` nodes`;
+        }
+      },
+      data: 9999 as any,
+    } as PieSeriesOption);
+
+    return data;
+  }
+
+  prepareChartOptions(as) {
+    let pieSize = ['20%', '80%']; // Desktop
+    if (this.isMobile()) {
+      pieSize = ['15%', '60%'];
+    }
+
+    this.chartOptions = {
+      color: chartColors,
+      tooltip: {
+        trigger: 'item',
+        textStyle: {
+          align: 'left',
+        }
+      },
+      series: [
+        {
+          zlevel: 0,
+          minShowLabelAngle: 3.6,
+          name: 'Lightning nodes',
+          type: 'pie',
+          radius: pieSize,
+          data: this.generateChartSerieData(as),
+          labelLine: {
+            lineStyle: {
+              width: 2,
+            },
+            length: this.isMobile() ? 1 : 20,
+            length2: this.isMobile() ? 1 : undefined,
+          },
+          label: {
+            fontSize: 14,
+          },
+          itemStyle: {
+            borderRadius: 1,
+            borderWidth: 1,
+            borderColor: '#000',
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 40,
+              shadowColor: 'rgba(0, 0, 0, 0.75)',
+            },
+            labelLine: {
+              lineStyle: {
+                width: 4,
+              }
+            }
+          }
+        }
+      ],
+    };
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
+
+  onChartInit(ec) {
+    if (this.chartInstance !== undefined) {
+      return;
+    }
+    this.chartInstance = ec;
+
+    this.chartInstance.on('click', (e) => {
+      if (e.data.data === 9999) { // "Other"
+        return;
+      }
+      this.zone.run(() => {
+        const url = new RelativeUrlPipe(this.stateService).transform(`/lightning/nodes/isp/${e.data.data}`);
+        this.router.navigate([url]);
+      });
+    });
+  }
+
+  onSaveChart() {
+    const now = new Date();
+    this.chartOptions.backgroundColor = '#11131f';
+    this.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `ln-nodes-per-as-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
+    this.chartOptions.backgroundColor = 'none';
+    this.chartInstance.setOption(this.chartOptions);
+  }
+
+  isEllipsisActive(e) {
+    return (e.offsetWidth < e.scrollWidth);
+  }
+}
+

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

@@ -0,0 +1,42 @@
+<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>
+
+  <div style="min-height: 295px">
+    <table class="table table-borderless">
+      <thead>
+        <th class="alias text-left" i18n="lightning.alias">Alias</th>
+        <th class="timestamp-first text-left" i18n="lightning.first_seen">First seen</th>
+        <th class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
+        <th class="capacity text-right" i18n="lightning.capacity">Capacity</th>
+        <th class="channels text-right" i18n="lightning.channels">Channels</th>
+        <th class="city text-right" i18n="lightning.city">City</th>
+      </thead>
+      <tbody *ngIf="nodes$ | async as nodes">
+        <tr *ngFor="let node of 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>
+          <td class="timestamp-first text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.first_seen"></app-timestamp>
+          </td>
+          <td class="timestamp-update text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updated_at"></app-timestamp>
+          </td>
+          <td class="capacity text-right">
+            <app-amount *ngIf="node.capacity > 100000000; else smallchannel" [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
+            <ng-template #smallchannel>
+              {{ node.capacity | amountShortener: 1 }}
+              <span class="sats" i18n="shared.sats">sats</span>
+            </ng-template>
+          </td>
+          <td class="channels text-right">
+            {{ node.channels }}
+          </td>
+          <td class="city text-right text-truncate">
+            {{ node?.city?.en ?? '-' }}
+          </td>
+      </tbody>
+    </table>
+  </div>
+
+</div>

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

@@ -0,0 +1,62 @@
+.container-xl {
+  max-width: 1400px;
+  padding-bottom: 100px;
+}
+
+.sats {
+  color: #ffffff66;
+  font-size: 12px;
+  top: 0px;
+}
+
+.alias {
+  width: 30%;
+  max-width: 400px;
+  padding-right: 70px;
+
+  @media (max-width: 576px) {
+    width: 50%;
+    max-width: 150px;
+    padding-right: 0px;
+  }
+}
+
+.timestamp-first {
+  width: 20%;
+
+  @media (max-width: 576px) {
+    display: none
+  }
+}
+
+.timestamp-update {
+  width: 16%;
+
+  @media (max-width: 576px) {
+    display: none
+  }
+}
+
+.capacity {
+  width: 10%;
+
+  @media (max-width: 576px) {
+    width: 25%;
+  }
+}
+
+.channels {
+  width: 10%;
+
+  @media (max-width: 576px) {
+    width: 25%;
+  }
+}
+
+.city {
+  max-width: 150px;
+
+  @media (max-width: 576px) {
+    display: none
+  }
+}

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

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map, Observable } from 'rxjs';
+import { ApiService } from 'src/app/services/api.service';
+import { SeoService } from 'src/app/services/seo.service';
+
+@Component({
+  selector: 'app-nodes-per-isp',
+  templateUrl: './nodes-per-isp.component.html',
+  styleUrls: ['./nodes-per-isp.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodesPerISP implements OnInit {
+  nodes$: Observable<any>;
+  isp: {name: string, id: number};
+
+  constructor(
+    private apiService: ApiService,
+    private seoService: SeoService,
+    private route: ActivatedRoute,
+  ) { }
+
+  ngOnInit(): void {
+    this.nodes$ = this.apiService.getNodeForISP$(this.route.snapshot.params.isp)
+      .pipe(
+        map(response => {
+          this.isp = {
+            name: response.isp,
+            id: this.route.snapshot.params.isp
+          };
+          this.seoService.setTitle($localize`Lightning nodes on ISP: ${response.isp} [AS${this.route.snapshot.params.isp}]`);
+          return response.nodes;
+        })
+      );
+  }
+
+  trackByPublicKey(index: number, node: any) {
+    return node.public_key;
+  }
+}

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html

@@ -1,10 +1,12 @@
 <div [class]="widget === false ? 'full-container' : ''">
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
-    <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
+    <div class="d-flex d-md-block align-items-baseline">
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.channels-and-capacity">Channels & Capacity</span>
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-    </button>
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(capacityObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/services/api.service.ts

@@ -251,4 +251,19 @@ export class ApiService {
     return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/search', { params });
   }
 
+  getNodesPerAs(): Observable<any> {
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/isp');
+  }
+
+  getNodeForCountry$(country: string): Observable<any> {
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/country/' + country);
+  }
+
+  getNodeForISP$(isp: string): Observable<any> {
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/isp/' + isp);
+  }
+
+  getNodesPerCountry(): Observable<any> {
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/countries');
+  }
 }

frontend/src/app/shared/components/timestamp/timestamp.component.html

@@ -1,4 +1,4 @@
-‎{{ seconds * 1000 | date:'yyyy-MM-dd HH:mm' }}
+‎{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }}
 <div class="lg-inline">
   <i class="symbol">(<app-time-since [time]="seconds" [fastRender]="true"></app-time-since>)</i>
 </div>

frontend/src/app/shared/components/timestamp/timestamp.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
 export class TimestampComponent implements OnChanges {
   @Input() unixTime: number;
   @Input() dateString: string;
+  @Input() customFormat: string;
 
   seconds: number;
 

frontend/src/app/shared/graphs.utils.ts

@@ -90,3 +90,11 @@ export function detectWebGL() {
   const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
   return (gl && gl instanceof WebGLRenderingContext);
 }
+
+export function getFlagEmoji(countryCode) {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char =>  127397 + char.charCodeAt());
+  return String.fromCodePoint(...codePoints);
+}