From 42604cc6be84735b09940f2ec74e9d1a53fab770 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 18 Aug 2022 15:09:03 +0200
Subject: [PATCH] Fix "indexing in progress" message in ln dashboard

---
 .../nodes-networks-chart.component.ts         | 29 +++++++--------
 .../lightning-statistics-chart.component.html |  6 ++++
 .../lightning-statistics-chart.component.scss |  9 +++++
 .../lightning-statistics-chart.component.ts   | 36 +++++++++----------
 4 files changed, 46 insertions(+), 34 deletions(-)

diff --git 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
index dbbb49483..ecbf92f39 100644
--- 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();
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
index 22774a16f..a4401147d 100644
--- 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>
\ No newline at end of file
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
index 760e782ca..c2e00e520 100644
--- 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;
 }
\ No newline at end of file
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
index d889dd254..bd210b09a 100644
--- 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();