Merge branch 'master' into ops/add-unfurl-install

2022-07-30 13:14:02 +00:00 · 2022-07-30 13:14:02 +00:00 · 2e891eb926
commit 2e891eb926
parent eaf7da9acb 63a22082bc
6 changed files with 59 additions and 57 deletions
--- a/backend/src/api/explorer/statistics.api.ts
+++ b/backend/src/api/explorer/statistics.api.ts
@ -6,7 +6,7 @@ class StatisticsApi {
  public async $getStatistics(interval: string | null = null): Promise<any> {
    interval = Common.getSqlInterval(interval);

-    let query = `SELECT UNIX_TIMESTAMP(added) AS added, channel_count, node_count, total_capacity, tor_nodes, clearnet_nodes, unannounced_nodes
+    let query = `SELECT UNIX_TIMESTAMP(added) AS added, channel_count, total_capacity, tor_nodes, clearnet_nodes, unannounced_nodes
      FROM lightning_stats`;

    if (interval) {
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@ -15,6 +15,11 @@ li.nav-item {
  margin: auto 10px;
  padding-left: 10px;
  padding-right: 10px;
+  @media (max-width: 992px) {
+    margin: auto 7px;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
 }

@media (min-width: 992px) {
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
@ -53,7 +53,7 @@
        <div class="card-body">
          <h5 class="card-title">Top Capacity Nodes</h5>
          <app-nodes-list [nodes$]="nodesByCapacity$"></app-nodes-list>
-          <div><a [routerLink]="['/lightning/nodes' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+          <!-- <div><a [routerLink]="['/lightning/nodes' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div> -->
        </div>
      </div>
    </div>
@ -63,7 +63,7 @@
        <div class="card-body">
          <h5 class="card-title">Most Connected Nodes</h5>
          <app-nodes-list [nodes$]="nodesByChannels$"></app-nodes-list>
-          <div><a [routerLink]="['/lightning/nodes' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+          <!-- <div><a [routerLink]="['/lightning/nodes' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div> -->
        </div>
      </div>
    </div>
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
@ -36,6 +36,7 @@

 .widget > .chart {
  -webkit-mask: linear-gradient(180deg, #11131f00 0%, #11131fff 20%);
+  min-height: 250px;
 }

 .chart {
@ -43,23 +44,18 @@
  width: 100%;
  height: 100%;
  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;
  }
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { SeoService } from 'src/app/services/seo.service';
 import { ApiService } from 'src/app/services/api.service';
 import { Observable, switchMap, tap, zip } from 'rxjs';
@ -26,7 +26,7 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
  chartOptions: EChartsOption = {};
  chartInitOptions = {
    renderer: 'canvas',
-  };
+  }; 

  constructor(
    private seoService: SeoService,
@ -98,6 +98,7 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
    }

    this.chartOptions = {
+      silent: true,
      title: title ?? undefined,
      geo3D: {
        map: 'world',
@ -110,9 +111,10 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
          }
        },
        viewControl: {
-          center: this.style === 'widget' ? [0, 0, -1] : undefined,
-          minDistance: 0.1,
-          distance: this.style === 'widget' ? 45 : 60,
+          center: this.style === 'widget' ? [0, 0, -10] : undefined,
+          minDistance: this.style === 'widget' ? 22 : 0.1,
+          maxDistance: this.style === 'widget' ? 22 : 60,
+          distance: this.style === 'widget' ? 22 : 60,
          alpha: 90,
          panMouseButton: 'left',
          rotateMouseButton: undefined,
@ -167,6 +169,14 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
    };
  }

+  @HostListener('window:wheel', ['$event'])
+  onWindowScroll(e): void {
+    // Not very smooth when using the mouse
+    if (this.style === 'widget' && e.target.tagName === 'CANVAS') {
+      window.scrollBy({left: 0, top: e.deltaY, behavior: 'auto'});
+    }
+  }
+
  onChartInit(ec) {
    if (this.chartInstance !== undefined) {
      return;
@ -174,6 +184,15 @@ export class NodesChannelsMap implements OnInit, OnDestroy {

    this.chartInstance = ec;

+    if (this.style === 'widget') {
+      this.chartInstance.getZr().on('click', (e) => {
+        this.zone.run(() => {
+          const url = new RelativeUrlPipe(this.stateService).transform(`/graphs/lightning/nodes-channels-map`);
+          this.router.navigate([url]);
+        });
+      });
+    }
+    
    this.chartInstance.on('click', (e) => {
      if (e.data && e.data.publicKey) {
        this.zone.run(() => {
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
@ -83,7 +83,6 @@ export class NodesNetworksChartComponent implements OnInit {
              tap((response) => {
                const data = response.body;
                this.prepareChartOptions({
-                  node_count: data.map(val => [val.added * 1000, val.node_count]), 
                  tor_nodes: data.map(val => [val.added * 1000, val.tor_nodes]),
                  clearnet_nodes: data.map(val => [val.added * 1000, val.clearnet_nodes]),
                  unannounced_nodes: data.map(val => [val.added * 1000, val.unannounced_nodes]),
@ -103,7 +102,7 @@ export class NodesNetworksChartComponent implements OnInit {

  prepareChartOptions(data) {
    let title: object;
-    if (data.node_count.length === 0) {
+    if (data.tor_nodes.length === 0) {
      title = {
        textStyle: {
          color: 'grey',
@ -145,33 +144,34 @@ export class NodesNetworksChartComponent implements OnInit {
        },
        borderColor: '#000',
        formatter: (ticks) => {
+          let total = 0;
          const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
          let tooltip = `<b style="color: white; margin-left: 2px">${date}</b><br>`;

-          for (const tick of ticks) {
-            if (tick.seriesIndex === 0) { // Total
+          for (const tick of ticks.reverse()) {
+            if (tick.seriesIndex === 0) { // Tor
              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
-            } else if (tick.seriesIndex === 1) { // Tor
+            } else if (tick.seriesIndex === 1) { // Clearnet
              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
-            } else if (tick.seriesIndex === 2) { // Clearnet
-              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
-            } else if (tick.seriesIndex === 3) { // Unannounced
+            } else if (tick.seriesIndex === 2) { // Unannounced
              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}`;
            }
            tooltip += `<br>`;
+            total += tick.data[1];
          }
+          tooltip += `<b>Total:</b> ${formatNumber(total, this.locale, '1.0-0')} nodes`;

          return tooltip;
        }
      },
-      xAxis: data.node_count.length === 0 ? undefined : {
+      xAxis: data.tor_nodes.length === 0 ? undefined : {
        type: 'time',
        splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
        axisLabel: {
          hideOverlap: true,
        }
      },
-      legend: data.node_count.length === 0 ? undefined : {
+      legend: data.tor_nodes.length === 0 ? undefined : {
        padding: 10,
        data: [
          {
@ -214,7 +214,7 @@ export class NodesNetworksChartComponent implements OnInit {
          'Unannounced': true,
        }
      },
-      yAxis: data.node_count.length === 0 ? undefined : [
+      yAxis: data.tor_nodes.length === 0 ? undefined : [
        {
          type: 'value',
          position: 'left',
@ -236,45 +236,23 @@ export class NodesNetworksChartComponent implements OnInit {
          },
        }
      ],
-      series: data.node_count.length === 0 ? [] : [
-        {
-          zlevel: 1,
-          name: $localize`Total`,
-          showSymbol: false,
-          symbol: 'none',
-          data: data.node_count,
-          type: 'line',
-          lineStyle: {
-            width: 2,
-          },
-          markLine: {
-            silent: true,
-            symbol: 'none',
-            lineStyle: {
-              type: 'solid',
-              color: '#ffffff66',
-              opacity: 1,
-              width: 1,
-            },
-          },
-          areaStyle: {
-            opacity: 0.25,
-          },
-        },
+      series: data.tor_nodes.length === 0 ? [] : [
        {
          zlevel: 1,
          yAxisIndex: 0,
-          name: $localize`Tor`,
+          name: $localize`Unannounced`,
          showSymbol: false,
          symbol: 'none',
-          data: data.tor_nodes,
+          data: data.unannounced_nodes,
          type: 'line',
          lineStyle: {
            width: 2,
          },
          areaStyle: {
-            opacity: 0.25,
+            opacity: 0.5,
          },
+          stack: 'Total',
+          color: '#FDD835',
        },
        {
          zlevel: 1,
@ -288,24 +266,28 @@ export class NodesNetworksChartComponent implements OnInit {
            width: 2,
          },
          areaStyle: {
-            opacity: 0.25,
+            opacity: 0.5,
          },
+          stack: 'Total',
+          color: '#00ACC1',
        },
        {
          zlevel: 1,
          yAxisIndex: 0,
-          name: $localize`Unannounced`,
+          name: $localize`Tor`,
          showSymbol: false,
          symbol: 'none',
-          data: data.unannounced_nodes,
+          data: data.tor_nodes,
          type: 'line',
          lineStyle: {
            width: 2,
          },
          areaStyle: {
-            opacity: 0.25,
+            opacity: 0.5,
          },
-        } 
+          stack: 'Total',
+          color: '#7D4698',
+        },
      ],
      dataZoom: this.widget ? null : [{
        type: 'inside',