warn on re-index - fix hash indexing state issue - cleanup ui mining

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -30,29 +30,5 @@
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
-  
-  <!-- <div class="mt-3" *ngIf="!widget">
-    <table class="table table-borderless table-sm text-center">
-      <thead>
-        <tr>
-          <th i18n="mining.rank">Block</th>
-          <th class="d-none d-md-block" i18n="block.timestamp">Timestamp</th>
-          <th i18n="mining.adjusted">Adjusted</th>
-          <th i18n="mining.difficulty">Difficulty</th>
-          <th i18n="mining.change">Change</th>
-        </tr>
-      </thead>
-      <tbody *ngIf="(hashrateObservable$ | async) as data">
-        <tr *ngFor="let diffChange of data.difficulty">
-          <td><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a></td>
-          <td class="d-none d-md-block">&lrm;{{ diffChange.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
-          <td><app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since></td>
-          <td class="d-none d-md-block">{{ formatNumber(diffChange.difficulty, locale, '1.2-2') }}</td>
-          <td class="d-block d-md-none">{{ diffChange.difficultyShorten }}</td>
-          <td [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
-        </tr>
-      </tbody>
-    </table>
-  </div> -->
 
 </div>

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss

@@ -11,12 +11,12 @@
 
 .full-container {
   width: 100%;
-  height: calc(100% - 50px);
+  height: calc(100% - 100px);
   @media (max-width: 992px) {
-    height: calc(100% - 110px);
+    height: calc(100% - 140px);
   };
   @media (max-width: 576px) {
-    height: calc(100% - 130px);
+    height: calc(100% - 180px);
   };
 }
 

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -1,10 +1,9 @@
-import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
 import { EChartsOption } from 'echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
-import { formatNumber } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { poolsColor } from 'src/app/app.constants';
 
@@ -15,11 +14,12 @@ import { poolsColor } from 'src/app/app.constants';
   styles: [`
     .loadingGraphs {
       position: absolute;
-      top: 38%;
+      top: 50%;
       left: calc(50% - 15px);
       z-index: 100;
     }
   `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HashrateChartPoolsComponent implements OnInit {
   @Input() widget: boolean = false;
@@ -37,7 +37,6 @@ export class HashrateChartPoolsComponent implements OnInit {
 
   hashrateObservable$: Observable<any>;
   isLoading = true;
-  formatNumber = formatNumber;
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
@@ -45,19 +44,24 @@ export class HashrateChartPoolsComponent implements OnInit {
     private apiService: ApiService,
     private formBuilder: FormBuilder,
   ) {
-    this.seoService.setTitle($localize`:@@mining.hashrate-difficulty:Hashrate and Difficulty`);
     this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
     this.radioGroupForm.controls.dateSpan.setValue('1y');
   }
 
   ngOnInit(): void {
+    if (!this.widget) {
+      this.seoService.setTitle($localize`:@@mining.pools-historical-dominance:Pools Historical Dominance`);
+    }
+
     this.hashrateObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
       .pipe(
         startWith('1y'),
         switchMap((timespan) => {
+          this.isLoading = true;
           return this.apiService.getHistoricalPoolsHashrate$(timespan)
             .pipe(
               tap((data: any) => {
+                // Prepare series (group all hashrates data point by pool)
                 const grouped = {};
                 for (const hashrate of data.hashrates) {
                   if (!grouped.hasOwnProperty(hashrate.poolName)) {
@@ -68,7 +72,6 @@ export class HashrateChartPoolsComponent implements OnInit {
 
                 const series = [];
                 const legends = [];
-
                 for (const name in grouped) {
                   series.push({
                     stack: 'Total',
@@ -76,12 +79,8 @@ export class HashrateChartPoolsComponent implements OnInit {
                     showSymbol: false,
                     data: grouped[name].map((val) => [val.timestamp * 1000, (val.share * 100).toFixed(2)]),
                     type: 'line',
-                    lineStyle: {
-                      width: 0,
-                    },
-                    areaStyle: {
-                      opacity: 1,
-                    },
+                    lineStyle: { width: 0 },
+                    areaStyle: { opacity: 1 },
                     smooth: true,
                     color: poolsColor[name.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()],
                     emphasis: {
@@ -115,7 +114,6 @@ export class HashrateChartPoolsComponent implements OnInit {
                 ) / 3600 / 24;
                 return {
                   availableTimespanDay: availableTimespanDay,
-                  hashrates: data
                 };
               }),
             );
@@ -129,7 +127,7 @@ export class HashrateChartPoolsComponent implements OnInit {
       grid: {
         right: this.right,
         left: this.left,
-        bottom: this.widget ? 30 : 60,
+        bottom: this.widget ? 30 : 20,
         top: this.widget ? 10 : 40,
       },
       tooltip: {