Merge pull request #3099 from mempool/nymkappa/bugfix/chart-all

Fix timespan UX in mining charts

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" formControlName="dateSpan"> 24h
         </label>

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/block-fees-graph/block-fees-graph.component.html

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
           <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]" formControlName="dateSpan"> 1M
         </label>

frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts

@@ -4,9 +4,9 @@ import { Observable, Subscription } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
-import { formatCurrency, formatNumber, getCurrencySymbol } from '@angular/common';
+import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
+import { download, formatterXAxis } from '../../shared/graphs.utils';
 import { StateService } from '../../services/state.service';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
@@ -92,6 +92,7 @@ export class BlockFeesGraphComponent implements OnInit {
       .pipe(
         startWith(this.radioGroupForm.controls.dateSpan.value),
         switchMap((timespan) => {
+          this.isLoading = true;
           this.storageService.setValue('miningWindowPreference', timespan);
           this.timespan = timespan;
           this.isLoading = true;

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 24h
         </label>

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html

@@ -11,7 +11,7 @@
     </div>  
   
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
           <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> 1M
         </label>
@@ -31,7 +31,7 @@
           <input type="radio" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> 3Y
         </label>
         <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === 'all'">
-          <input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]"> ALL
+          <input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> ALL
         </label>
       </div>
     </form>

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts

@@ -80,7 +80,7 @@ export class BlockRewardsGraphComponent implements OnInit {
     this.route
       .fragment
       .subscribe((fragment) => {
-        if (['3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
+        if (['1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
           this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
         }
       });

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html

@@ -9,7 +9,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-sizes-weights' | relativeUrl]" formControlName="dateSpan"> 24h
         </label>

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

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

@@ -31,7 +31,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 12960" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
           <input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" [attr.data-cy]="'3m'" formControlName="dateSpan"> 3M
         </label>

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

@@ -132,3 +132,8 @@
   max-width: 80px;
   margin: 15px auto 3px;
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

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

@@ -11,7 +11,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 25920" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
           <input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]" [attr.data-cy]="'6m'" formControlName="dateSpan"> 6M
         </label>

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

@@ -82,3 +82,8 @@
 .loadingGraphs.widget {
   top: 75%;
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -40,7 +40,7 @@
     </div>  
     <form [formGroup]="radioGroupForm" class="formRadioGroup"
       *ngIf="!widget && (miningStatsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/pools' | relativeUrl]" [attr.data-cy]="'24h'" formControlName="dateSpan"> 24h
         </label>
@@ -104,7 +104,7 @@
             <img width="25" height="25" src="{{ pool.logo }}" [alt]="pool.name + ' mining pool logo'" onError="this.src = '/resources/mining-pools/default.svg'">
           </td>
           <td class=""><a [routerLink]="[('/mining/pool/' + pool.slug) | relativeUrl]">{{ pool.name }}</a></td>
-          <td class="" *ngIf="this.miningWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{
+          <td class="" *ngIf="this.miningWindowPreference === '24h'">{{ pool.lastEstimatedHashrate }} {{
             miningStats.miningUnits.hashrateUnit }}</td>
           <td class="d-flex justify-content-center">
             {{ pool.blockCount }}<span class="d-none d-md-block">&nbsp;({{ pool.share }}%)</span>

frontend/src/app/components/pool-ranking/pool-ranking.component.scss

@@ -139,3 +139,8 @@
   max-width: 80px;
   margin: 15px auto 3px;
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -79,6 +79,7 @@ export class PoolRankingComponent implements OnInit {
         .pipe(
           startWith(this.radioGroupForm.controls.dateSpan.value), // (trigger when the page loads)
           tap((value) => {
+            this.isLoading = true;
             this.timespan = value;
             if (!this.widget) {
               this.storageService.setValue('miningWindowPreference', value);