Merge pull request #4945 from mempool/mononaut/acc-dash-times

Add timespan toggle to acceleration dashboard

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

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { EChartsOption } from '../../../graphs/echarts';
-import { Observable, Subscription, combineLatest, fromEvent, share } from 'rxjs';
+import { Observable, Subject, Subscription, combineLatest, fromEvent, merge, share } from 'rxjs';
 import { startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../../services/seo.service';
 import { formatNumber } from '@angular/common';
@@ -27,11 +27,12 @@ import { StateService } from '../../../services/state.service';
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
+export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDestroy {
   @Input() widget: boolean = false;
   @Input() height: number = 300;
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
+  @Input() period: '3d' | '1w' | '1m' = '1w';
   @Input() accelerations$: Observable<Acceleration[]>;
 
   miningWindowPreference: string;
@@ -47,6 +48,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
   isLoading = true;
   formatNumber = formatNumber;
   timespan = '';
+  periodSubject$: Subject<'3d' | '1w' | '1m'> = new Subject();
   chartInstance: any = undefined;
   daysAvailable: number = 0;
 
@@ -67,7 +69,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     if (this.widget) {
-      this.miningWindowPreference = '1w';
+      this.miningWindowPreference = this.period;
     } else {
       this.seoService.setTitle($localize`:@@bcf34abc2d9ed8f45a2f65dd464c46694e9a181e:Acceleration Fees`);
       this.miningWindowPreference = this.miningService.getDefaultTimespan('1w');
@@ -81,8 +83,12 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
       }
     });
     this.aggregatedHistory$ = combineLatest([
+      merge(
         this.radioGroupForm.get('dateSpan').valueChanges.pipe(
           startWith(this.radioGroupForm.controls.dateSpan.value),
+        ),
+        this.periodSubject$
+      ).pipe(
         switchMap((timespan) => {
           if (!this.widget) {
             this.storageService.setValue('miningWindowPreference', timespan);
@@ -107,6 +113,12 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
     this.aggregatedHistory$.subscribe();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.period) {
+      this.periodSubject$.next(this.period);
+    }
+  }
+
   prepareChartOptions(data) {
     let title: object;
     if (data.length === 0) {

frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ServicesApiServices } from '../../../services/services-api.service';
 
@@ -14,7 +14,8 @@ export type AccelerationStats = {
   styleUrls: ['./acceleration-stats.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccelerationStatsComponent implements OnInit {
+export class AccelerationStatsComponent implements OnInit, OnChanges {
+  @Input() timespan: '3d' | '1w' | '1m' = '1w';
   accelerationStats$: Observable<AccelerationStats>;
 
   constructor(
@@ -22,6 +23,10 @@ export class AccelerationStatsComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.accelerationStats$ = this.servicesApiService.getAccelerationStats$();
+    this.accelerationStats$ = this.servicesApiService.getAccelerationStats$({ timeframe: this.timespan });
+  }
+
+  ngOnChanges(): void {
+    this.accelerationStats$ = this.servicesApiService.getAccelerationStats$({ timeframe: this.timespan });
   }
 }

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html

@@ -22,12 +22,26 @@
     <div class="col">
       <div class="main-title">
         <span [attr.data-cy]="'acceleration-stats'" i18n="accelerator.acceleration-stats">Acceleration stats</span>&nbsp;
-        <span style="font-size: xx-small" i18n="mining.3-months">(3 months)</span>
+        @switch (timespan) {
+          @case ('1w') {
+            <span style="font-size: xx-small" i18n="mining.1-week">(1 week)</span>
+          }
+          @case ('1m') {
+            <span style="font-size: xx-small" i18n="mining.1-month">(1 month)</span>
+          }
+        }
       </div>
       <div class="card-wrapper">
         <div class="card">
           <div class="card-body more-padding">
-            <app-acceleration-stats></app-acceleration-stats>
+            <app-acceleration-stats [timespan]="timespan"></app-acceleration-stats>
+            <div class="widget-toggler">
+              <a href="" (click)="setTimespan('1w')" class="toggler-option"
+                [ngClass]="{'inactive': timespan === '1w'}"><small>1w</small></a>
+              <span style="color: #ffffff66; font-size: 8px"> | </span>
+              <a href="" (click)="setTimespan('1m')" class="toggler-option"
+              [ngClass]="{'inactive': timespan === '1m'}"><small>1m</small></a>
+            </div>
           </div>
         </div>
       </div>
@@ -59,6 +73,7 @@
               [height]="graphHeight"
               [attr.data-cy]="'acceleration-fees'"
               [widget]=true
+              [period]="timespan"
             ></app-acceleration-fees-graph>
           </div>
           <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss

@@ -173,3 +173,19 @@
     max-width: 430px;
   }
 }
+
+.widget-toggler {
+  font-size: 12px;
+  position: absolute;
+  top: -20px;
+  right: 3px;
+  text-align: right;
+}
+
+.toggler-option {
+  text-decoration: none;
+}
+
+.inactive {
+  color: #ffffff66;
+}

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -37,6 +37,7 @@ export class AcceleratorDashboardComponent implements OnInit {
   webGlEnabled = true;
   seen: Set<string> = new Set();
   firstLoad = true;
+  timespan: '3d' | '1w' | '1m' = '1w';
 
   graphHeight: number = 300;
   theme: ThemeService;
@@ -148,6 +149,11 @@ export class AcceleratorDashboardComponent implements OnInit {
     }
   }
 
+  setTimespan(timespan): boolean {
+    this.timespan = timespan;
+    return false;
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {

frontend/src/app/services/services-api.service.ts

@@ -152,8 +152,8 @@ export class ServicesApiServices {
     return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params }, observe: 'response'});
   }
 
-  getAccelerationStats$(): Observable<AccelerationStats> {
+  getAccelerationStats$(params: AccelerationHistoryParams): Observable<AccelerationStats> {
-    return this.httpClient.get<AccelerationStats>(`${SERVICES_API_PREFIX}/accelerator/accelerations/stats`);
+    return this.httpClient.get<AccelerationStats>(`${SERVICES_API_PREFIX}/accelerator/accelerations/stats`, { params: { ...params } });
   }
 
   setupSquare$(): Observable<{squareAppId: string, squareLocationId: string}> {