Create world map of clearnet LN nodes and channels

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

@@ -23,6 +23,7 @@ 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';
 import { NodesMap } from '../lightning/nodes-map/nodes-map.component';
+import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels-map.component';
 @NgModule({
   declarations: [
     LightningDashboardComponent,
@@ -43,6 +44,7 @@ import { NodesMap } from '../lightning/nodes-map/nodes-map.component';
     NodesPerISP,
     NodesPerCountryChartComponent,
     NodesMap,
+    NodesChannelsMap,
   ],
   imports: [
     CommonModule,

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html

@@ -0,0 +1,17 @@
+<div class="full-container">
+
+  <div class="card-header">
+    <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
+      <span i18n="lightning.nodes-channels-world-map">Lightning nodes channels world map</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true" (click)="onSaveChart()"></fa-icon>
+      </button>
+    </div>
+    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+  </div>
+
+  <div *ngIf="observable$ | async" class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    (chartInit)="onChartInit($event)">
+  </div>
+
+</div>

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss

@@ -0,0 +1,40 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+}
+
+.full-container {
+  padding: 0px 15px;
+  width: 100%;
+  min-height: 500px;
+  height: calc(100% - 150px);
+  @media (max-width: 992px) {
+    height: 100%;
+    padding-bottom: 100px;
+  };
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 20px;
+  padding-right: 10px;
+  @media (max-width: 992px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 829px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 767px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 629px) {
+    padding-bottom: 55px;
+  }
+  @media (max-width: 567px) {
+    padding-bottom: 55px;
+  }
+}

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts

@@ -0,0 +1,190 @@
+import { ChangeDetectionStrategy, Component, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { SeoService } from 'src/app/services/seo.service';
+import { ApiService } from 'src/app/services/api.service';
+import { Observable, tap, zip } from 'rxjs';
+import { AssetsService } from 'src/app/services/assets.service';
+import { download } from 'src/app/shared/graphs.utils';
+import { Router } from '@angular/router';
+import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from 'src/app/services/state.service';
+import { EChartsOption, registerMap } from 'echarts';
+import 'echarts-gl';
+import { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } from 'constants';
+
+@Component({
+  selector: 'app-nodes-channels-map',
+  templateUrl: './nodes-channels-map.component.html',
+  styleUrls: ['./nodes-channels-map.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodesChannelsMap implements OnInit, OnDestroy {
+  observable$: Observable<any>;
+
+  chartInstance = undefined;
+  chartOptions: EChartsOption = {color: 'dark'};
+  chartInitOptions = {
+    renderer: 'canvas',
+  };
+
+  constructor(
+    private seoService: SeoService,
+    private apiService: ApiService,
+    private stateService: StateService,
+    private assetsService: AssetsService,
+    private router: Router,
+    private zone: NgZone,
+  ) {
+  }
+
+  ngOnDestroy(): void {}
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`Lightning nodes channels world map`);
+
+    this.observable$ = zip(
+      this.assetsService.getWorldMapJson$,
+      this.apiService.getChannelsGeo$(),
+    ).pipe(tap((data) => {
+      registerMap('world', data[0]);
+
+      const channelsLoc = [];
+      const nodes = [];
+      for (const channel of data[1]) {
+        channelsLoc.push([[channel[2], channel[3]], [channel[6], channel[7]]]);
+        nodes.push({
+          publicKey: channel[0],
+          name: channel[1],
+          value: [channel[2], channel[3]],
+        });
+        nodes.push({
+          publicKey: channel[4],
+          name: channel[5],
+          value: [channel[6], channel[7]],
+        });
+      }
+
+      this.prepareChartOptions(nodes, channelsLoc);
+    }));
+  }
+
+  prepareChartOptions(nodes, channels) {
+    let title: object;
+    if (channels.length === 0) {
+      title = {
+        textStyle: {
+          color: 'grey',
+          fontSize: 15
+        },
+        text: $localize`No data to display yet`,
+        left: 'center',
+        top: 'center'
+      };
+    }
+
+    this.chartOptions = {
+      geo3D: {
+        map: 'world',
+        shading: 'color',
+        silent: true,
+        environment: '#000',
+        postEffect: {
+          enable: true,
+          bloom: {
+            intensity: 0.01,
+          }
+        },
+        viewControl: {
+          minDistance: 1,
+          distance: 60,
+          alpha: 89,
+          panMouseButton: 'left',
+          rotateMouseButton: 'right',
+          zoomSensivity: 0.5,
+        },
+        itemStyle: {
+          color: '#FFFFFF',
+          opacity: 0.02,
+          borderWidth: 1,
+          borderColor: 'black',
+        },
+        regionHeight: 0.01,
+      },
+      series: [
+        {
+          // @ts-ignore
+          type: 'lines3D',
+          coordinateSystem: 'geo3D',
+          blendMode: 'lighter',
+          lineStyle: {
+            width: 1,
+            opacity: 0.025,
+          },
+          data: channels
+        },
+        {
+          // @ts-ignore
+          type: 'scatter3D',
+          symbol: 'circle',
+          blendMode: 'lighter',
+          coordinateSystem: 'geo3D',
+          symbolSize: 3,
+          itemStyle: {
+            color: '#BBFFFF',
+            opacity: 1,
+            borderColor: '#FFFFFF00',
+          },
+          data: nodes,
+          emphasis: {
+            label: {
+              position: 'top',
+              // @ts-ignore
+              textStyle: {
+                color: 'white',
+                fontSize: 16,
+              },
+              formatter: function(value) {
+                return value.name;
+              },
+              show: true,
+            }
+          }
+        },
+      ]
+    };
+  }
+
+  onChartInit(ec) {
+    if (this.chartInstance !== undefined) {
+      return;
+    }
+
+    this.chartInstance = ec;
+
+    this.chartInstance.on('click', (e) => {
+      if (e.data && e.data.publicKey) {
+        this.zone.run(() => {
+          const url = new RelativeUrlPipe(this.stateService).transform(`/lightning/node/${e.data.publicKey}`);
+          this.router.navigate([url]);
+        });
+      }
+    });
+  }
+
+  onSaveChart() {
+    // @ts-ignore
+    const prevBottom = this.chartOptions.grid.bottom;
+    const now = new Date();
+    // @ts-ignore
+    this.chartOptions.grid.bottom = 30;
+    this.chartOptions.backgroundColor = '#11131f';
+    this.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `lightning-nodes-heatmap-clearnet-${Math.round(now.getTime() / 1000)}.svg`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartOptions.backgroundColor = 'none';
+    this.chartInstance.setOption(this.chartOptions);
+  }
+}

frontend/src/app/lightning/nodes-map/nodes-map.component.ts

@@ -4,7 +4,7 @@ import { SeoService } from 'src/app/services/seo.service';
 import { ApiService } from 'src/app/services/api.service';
 import { combineLatest, Observable, tap } from 'rxjs';
 import { AssetsService } from 'src/app/services/assets.service';
-import { EChartsOption, MapSeriesOption, registerMap } from 'echarts';
+import { EChartsOption, registerMap } from 'echarts';
 import { download } from 'src/app/shared/graphs.utils';
 import { Router } from '@angular/router';
 import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';