Merge pull request #4424 from mempool/nymkappa/channel-map-larger

[lightning] enlarge channel map

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

@@ -1,22 +1,28 @@
-<div class="map-wrapper" [class]="style">
+<div class="map-wrapper" [class]="style" *ngIf="style !== 'graph'">
   <ng-container *ngIf="channelsObservable | async">
     <div *ngIf="chartOptions" [class]="'full-container ' + style + (fitContainer ? ' fit-container' : '')">
-      <div *ngIf="style === 'graph'" class="card-header">
+      <div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+        (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
+      </div>
+      <div *ngIf="!chartOptions && style === 'nodepage'" style="padding-top: 30px"></div>
+    </div>
+    <div class="text-center loading-spinner" [class]="style" *ngIf="isLoading && !disableSpinner">
+      <div class="spinner-border text-light"></div>
+    </div>
+  </ng-container>
+</div>
+
+<div class="full-container-graph" *ngIf="style === 'graph'">
+
+  <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>
     </div>
     <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
   </div>
 
-      <div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div *ngIf="channelsObservable | async" class="chart-graph" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
   </div>
 
-      <div *ngIf="!chartOptions && style === 'nodepage'" style="padding-top: 30px"></div>
-    </div>
-
-    <div class="text-center loading-spinner" [class]="style" *ngIf="isLoading && !disableSpinner">
-      <div class="spinner-border text-light"></div>
-    </div>
-  </ng-container>
 </div>

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

@@ -143,3 +143,55 @@
   text-align: center;
   margin-top: 100px;
 }
+
+.full-container-graph {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 15px;
+  width: 100%;
+  height: calc(100vh - 225px);
+  min-height: 400px;
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
+}
+.full-container-graph.widget {
+  min-height: 240px;
+  height: 240px;
+  padding: 0px;
+}
+.full-container-graph.fit-container {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  min-height: 100px;
+
+  .chart {
+    padding: 0;
+    min-height: 100px;
+  }
+}
+
+.chart-graph {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  padding-top: 30px;
+  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

@@ -65,6 +65,7 @@ export class NodesChannelsMap implements OnInit {
     }
 
     if (this.style === 'graph') {
+      this.center = [0, 5];
       this.seoService.setTitle($localize`Lightning Nodes Channels World Map`);
       this.seoService.setDescription($localize`:@@meta.description.lightning.node-map:See the channels of non-Tor Lightning network nodes visualized on a world map. Hover/tap on points on the map for node names and details.`);
     }
@@ -238,7 +239,6 @@ export class NodesChannelsMap implements OnInit {
       title: title ?? undefined,
       tooltip: {},
       geo: {
-        top: 75,
         animation: false,
         silent: true,
         center: this.center,