Improve mining graphs timespan selection UX

frontend/src/app/services/mining.service.ts

@@ -4,6 +4,7 @@ import { map } from 'rxjs/operators';
 import { PoolsStats, SinglePoolStats } from '../interfaces/node-api.interface';
 import { ApiService } from '../services/api.service';
 import { StateService } from './state.service';
+import { StorageService } from './storage.service';
 
 export interface MiningUnits {
   hashrateDivider: number;
@@ -28,8 +29,12 @@ export class MiningService {
   constructor(
     private stateService: StateService,
     private apiService: ApiService,
+    private storageService: StorageService,
   ) { }
 
+  /**
+   * Generate pool ranking stats
+   */
   public getMiningStats(interval: string): Observable<MiningStats> {
     return this.apiService.listPools$(interval).pipe(
       map(pools => this.generateMiningStats(pools))
@@ -63,6 +68,20 @@ export class MiningService {
     };
   }
 
+  /**
+   * Get the default selection timespan, cap with `min`
+   */
+  public getDefaultTimespan(min: string): string {
+    const timespans = [
+      '24h', '3d', '1w', '1m', '3m', '6m', '1y', '2y', '3y', 'all'
+    ];
+    const preference = this.storageService.getValue('miningWindowPreference') ?? '1w';
+    if (timespans.indexOf(preference) < timespans.indexOf(min)) {
+      return min;
+    }
+    return preference;
+  }
+
   private generateMiningStats(stats: PoolsStats): MiningStats {
     const miningUnits = this.getMiningUnits();
     const hashrateDivider = miningUnits.hashrateDivider;

frontend/src/app/services/storage.service.ts

@@ -7,21 +7,21 @@ import { Router, ActivatedRoute } from '@angular/router';
 export class StorageService {
   constructor(private router: Router, private route: ActivatedRoute) {
     this.setDefaultValueIfNeeded('graphWindowPreference', '2h');
-    this.setDefaultValueIfNeeded('poolsWindowPreference', '1w');
+    this.setDefaultValueIfNeeded('miningWindowPreference', '1w');
   }
 
   setDefaultValueIfNeeded(key: string, defaultValue: string) {
-    let graphWindowPreference: string = this.getValue(key);
+    const graphWindowPreference: string = this.getValue(key);
     if (graphWindowPreference === null) { // First visit to mempool.space
       if (this.router.url.includes('graphs') && key === 'graphWindowPreference' ||
-        this.router.url.includes('pools') && key === 'poolsWindowPreference'
+        this.router.url.includes('pools') && key === 'miningWindowPreference'
       ) {
         this.setValue(key, this.route.snapshot.fragment ? this.route.snapshot.fragment : defaultValue);
       } else {
         this.setValue(key, defaultValue);
       }
     } else if (this.router.url.includes('graphs') && key === 'graphWindowPreference' ||
-      this.router.url.includes('pools') && key === 'poolsWindowPreference'
+      this.router.url.includes('pools') && key === 'miningWindowPreference'
     ) {
       // Visit a different graphs#fragment from last visit
       if (this.route.snapshot.fragment !== null && graphWindowPreference !== this.route.snapshot.fragment) {