Fix "indexing in progress" message in ln dashboard

2022-08-18 15:09:03 +02:00 · 2022-08-18 15:09:03 +02:00 · 42604cc6be
commit 42604cc6be
parent 50d99634f7
4 changed files with 46 additions and 34 deletions
--- 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
@ -10,6 +10,7 @@ import { download } from 'src/app/shared/graphs.utils';
 import { SeoService } from 'src/app/services/seo.service';
 import { LightningApiService } from '../lightning-api.service';
 import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
+import { isMobile } from 'src/app/shared/common.utils';

@Component({
  selector: 'app-nodes-networks-chart',
@ -108,19 +109,19 @@ export class NodesNetworksChartComponent implements OnInit {
      );
  }

-  prepareChartOptions(data, maxYAxis) {
+  prepareChartOptions(data, maxYAxis): void {
    let title: object;
-    if (data.tor_nodes.length === 0) {
+    if (!this.widget && data.tor_nodes.length === 0) {
      title = {
        textStyle: {
          color: 'grey',
          fontSize: 15
        },
-        text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`,
+        text: $localize`Indexing in progess`,
        left: 'center',
-        top: 'top',
+        top: 'center',
      };
-    } else if (this.widget) {
+    } else if (data.tor_nodes.length > 0) {
      title = {
        textStyle: {
          color: 'grey',
@ -140,11 +141,11 @@ export class NodesNetworksChartComponent implements OnInit {
        height: this.widget ? 100 : undefined,
        top: this.widget ? 10 : 40,
        bottom: this.widget ? 0 : 70,
-        right: (this.isMobile() && this.widget) ? 35 : this.right,
-        left: (this.isMobile() && this.widget) ? 40 :this.left,
+        right: (isMobile() && this.widget) ? 35 : this.right,
+        left: (isMobile() && this.widget) ? 40 :this.left,
      },
      tooltip: {
-        show: !this.isMobile() || !this.widget,
+        show: !isMobile() || !this.widget,
        trigger: 'axis',
        axisPointer: {
          type: 'line'
@ -157,7 +158,7 @@ export class NodesNetworksChartComponent implements OnInit {
          align: 'left',
        },
        borderColor: '#000',
-        formatter: (ticks) => {
+        formatter: (ticks): string => {
          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>`;
@ -180,7 +181,7 @@ export class NodesNetworksChartComponent implements OnInit {
      },
      xAxis: data.tor_nodes.length === 0 ? undefined : {
        type: 'time',
-        splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
+        splitNumber: (isMobile() || this.widget) ? 5 : 10,
        axisLabel: {
          hideOverlap: true,
        }
@ -372,7 +373,7 @@ export class NodesNetworksChartComponent implements OnInit {
    };
  }

-  onChartInit(ec) {
+  onChartInit(ec): void {
    if (this.chartInstance !== undefined) {
      return;
    }
@ -384,11 +385,7 @@ export class NodesNetworksChartComponent implements OnInit {
    });
  }

-  isMobile() {
-    return (window.innerWidth <= 767.98);
-  }
-
-  onSaveChart() {
+  onSaveChart(): void {
    // @ts-ignore
    const prevBottom = this.chartOptions.grid.bottom;
    const now = new Date();
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
@ -48,4 +48,10 @@
    <div class="spinner-border text-light"></div>
  </div>

+  <div *ngIf="widget && (capacityObservable$ | async) as stats">
+    <div *ngIf="stats.days === 0" class="indexing-message d-flex" i18n="lightning.indexing-in-progress">
+      Indexing in progress
+    </div>
+  </div>
+
 </div>
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@ -131,4 +131,13 @@
  display: block;
  max-width: 80px;
  margin: 15px auto 3px;
+}
+
+.indexing-message {
+  position: absolute;
+  font-size: 15px;
+  color: grey;
+  font-weight: bold;
+  margin-left: calc(50% - 85px);
+  margin-top: -10px;
 }
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
@ -1,7 +1,7 @@
 import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
 import { EChartsOption, graphic } from 'echarts';
 import { Observable } from 'rxjs';
-import { map, startWith, switchMap, tap } from 'rxjs/operators';
+import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
@ -10,6 +10,7 @@ import { MiningService } from 'src/app/services/mining.service';
 import { download } from 'src/app/shared/graphs.utils';
 import { LightningApiService } from '../lightning-api.service';
 import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
+import { isMobile } from 'src/app/shared/common.utils';

@Component({
  selector: 'app-lightning-statistics-chart',
@ -96,12 +97,13 @@ export class LightningStatisticsChartComponent implements OnInit {
              }),
            );
        }),
-      )
+        share(),
+      );
  }

-  prepareChartOptions(data) {
+  prepareChartOptions(data): void {
    let title: object;
-    if (data.channel_count.length === 0) {
+    if (!this.widget && data.channel_count.length === 0) {
      title = {
        textStyle: {
          color: 'grey',
@ -111,7 +113,7 @@ export class LightningStatisticsChartComponent implements OnInit {
        left: 'center',
        top: 'center'
      };
-    } else if (this.widget) {
+    } else if (data.channel_count.length > 0) {
      title = {
        textStyle: {
          color: 'grey',
@ -138,11 +140,11 @@ export class LightningStatisticsChartComponent implements OnInit {
        height: this.widget ? 100 : undefined,
        top: this.widget ? 10 : 40,
        bottom: this.widget ? 0 : 70,
-        right: (this.isMobile() && this.widget) ? 35 : this.right,
-        left: (this.isMobile() && this.widget) ? 40 :this.left,
+        right: (isMobile() && this.widget) ? 35 : this.right,
+        left: (isMobile() && this.widget) ? 40 :this.left,
      },
      tooltip: {
-        show: !this.isMobile(),
+        show: !isMobile(),
        trigger: 'axis',
        axisPointer: {
          type: 'line'
@ -155,7 +157,7 @@ export class LightningStatisticsChartComponent implements OnInit {
          align: 'left',
        },
        borderColor: '#000',
-        formatter: (ticks) => {
+        formatter: (ticks): string => {
          let sizeString = '';
          let weightString = '';

@ -169,16 +171,18 @@ export class LightningStatisticsChartComponent implements OnInit {

          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: 18px">${date}</b><br>
+          const tooltip = `
+            <b style="color: white; margin-left: 18px">${date}</b><br>
            <span>${sizeString}</span><br>
-            <span>${weightString}</span>`;
+            <span>${weightString}</span>
+          `;

          return tooltip;
        }
      },
      xAxis: data.channel_count.length === 0 ? undefined : {
        type: 'time',
-        splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
+        splitNumber: (isMobile() || this.widget) ? 5 : 10,
        axisLabel: {
          hideOverlap: true,
        }
@ -315,7 +319,7 @@ export class LightningStatisticsChartComponent implements OnInit {
    };
  }

-  onChartInit(ec) {
+  onChartInit(ec): void {
    if (this.chartInstance !== undefined) {
      return;
    }
@ -327,11 +331,7 @@ export class LightningStatisticsChartComponent implements OnInit {
    });
  }

-  isMobile() {
-    return (window.innerWidth <= 767.98);
-  }
-
-  onSaveChart() {
+  onSaveChart(): void {
    // @ts-ignore
    const prevBottom = this.chartOptions.grid.bottom;
    const now = new Date();