Merge pull request #2158 from mempool/nymkappa/feature/ln-map-dashboard

Show LN map on the LN dashboard

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html

@@ -1,3 +1,5 @@
+<app-nodes-channels-map [widget]=true></app-nodes-channels-map>
+
 <div class="container-xl dashboard-container">
 
   <div class="row row-cols-1 row-cols-md-2">

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

@@ -1,6 +1,6 @@
-<div class="full-container">
+<div [class]="widget ? 'widget' : 'full-container'">
 
-  <div class="card-header">
+  <div class="card-header" *ngIf="!widget">
     <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">

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

@@ -1,6 +1,7 @@
 .card-header {
   border-bottom: 0;
   font-size: 18px;
+
   @media (min-width: 465px) {
     font-size: 20px;
   }
@@ -11,30 +12,45 @@
   width: 100%;
   min-height: 500px;
   height: calc(100% - 150px);
+
   @media (max-width: 992px) {
     height: 100%;
     padding-bottom: 100px;
-  };
+  }
+}
+
+.widget {
+  width: 99vw;
+  height: 250px;
+  -webkit-mask: linear-gradient(0deg, #11131f00 5%, #11131fff 25%);
+}
+
+.widget > .chart {
+  -webkit-mask: linear-gradient(180deg, #11131f00 0%, #11131fff 20%);
 }
 
 .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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, 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';
@@ -9,7 +9,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.
 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',
@@ -18,10 +17,11 @@ import { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } from 'constants';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NodesChannelsMap implements OnInit, OnDestroy {
+  @Input() widget = false;
   observable$: Observable<any>;
 
   chartInstance = undefined;
-  chartOptions: EChartsOption = {color: 'dark'};
+  chartOptions: EChartsOption = {};
   chartInitOptions = {
     renderer: 'canvas',
   };
@@ -93,18 +93,19 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
           }
         },
         viewControl: {
-          minDistance: 1,
+          center: this.widget ? [2, 0, -10] : undefined,
-          distance: 60,
+          minDistance: 0.1,
-          alpha: 89,
+          distance: this.widget ? 20 : 60,
+          alpha: 90,
           panMouseButton: 'left',
-          rotateMouseButton: 'right',
+          rotateMouseButton: 'none',
           zoomSensivity: 0.5,
         },
         itemStyle: {
           color: '#FFFFFF',
           opacity: 0.02,
           borderWidth: 1,
-          borderColor: 'black',
+          borderColor: '#00000050',
         },
         regionHeight: 0.01,
       },
@@ -136,11 +137,8 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
           emphasis: {
             label: {
               position: 'top',
-              // @ts-ignore
+              color: 'white',
-              textStyle: {
+              fontSize: 16,
-                color: 'white',
-                fontSize: 16,
-              },
               formatter: function(value) {
                 return value.name;
               },