From 80c7754e48304583251c2d2471de68cdc345599a Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 10 Apr 2024 06:27:48 +0000 Subject: [PATCH] Add timespan toggle to acceleration dashboard --- .../acceleration-fees-graph.component.ts | 24 ++++++++++++++----- .../acceleration-stats.component.ts | 11 ++++++--- .../accelerator-dashboard.component.html | 19 +++++++++++++-- .../accelerator-dashboard.component.scss | 16 +++++++++++++ .../accelerator-dashboard.component.ts | 6 +++++ .../src/app/services/services-api.service.ts | 4 ++-- 6 files changed, 67 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts index df13df75d..ce56f8de4 100644 --- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts +++ b/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; 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([ - this.radioGroupForm.get('dateSpan').valueChanges.pipe( - startWith(this.radioGroupForm.controls.dateSpan.value), + 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) { diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts index 29909ff39..2176bb751 100644 --- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts +++ b/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; 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 }); } } diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html index 39abfa461..94ddf5f98 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html @@ -22,12 +22,26 @@
Acceleration stats  - (3 months) + @switch (timespan) { + @case ('1w') { + (1 week) + } + @case ('1m') { + (1 month) + } + }
- + +
+ 1w + | + 1m +
@@ -59,6 +73,7 @@ [height]="graphHeight" [attr.data-cy]="'acceleration-fees'" [widget]=true + [period]="timespan" >
View more »
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss index e14f53dfb..563e189cf 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss @@ -172,4 +172,20 @@ max-height: 430px; 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; } \ No newline at end of file diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts index acaff9170..dc53d8f95 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts @@ -37,6 +37,7 @@ export class AcceleratorDashboardComponent implements OnInit { webGlEnabled = true; seen: Set = 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) { diff --git a/frontend/src/app/services/services-api.service.ts b/frontend/src/app/services/services-api.service.ts index 4cc05294f..44d253efa 100644 --- a/frontend/src/app/services/services-api.service.ts +++ b/frontend/src/app/services/services-api.service.ts @@ -152,8 +152,8 @@ export class ServicesApiServices { return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params }, observe: 'response'}); } - getAccelerationStats$(): Observable { - return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/stats`); + getAccelerationStats$(params: AccelerationHistoryParams): Observable { + return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/stats`, { params: { ...params } }); } setupSquare$(): Observable<{squareAppId: string, squareLocationId: string}> {