machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Add timespan toggle to acceleration dashboard
This commit is contained in:
softsimon 2024-04-10 18:00:25 +09:00 committed by GitHub
commit 5611f57e9e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 67 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) {

11
frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts
View File

@ -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 });
}
}

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

@ -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>

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

@ -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;
}

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

@ -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) {

4
frontend/src/app/services/services-api.service.ts
View File

@ -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> {
return this.httpClient.get<AccelerationStats>(`${SERVICES_API_PREFIX}/accelerator/accelerations/stats`);
getAccelerationStats$(params: AccelerationHistoryParams): Observable<AccelerationStats> {
return this.httpClient.get<AccelerationStats>(`${SERVICES_API_PREFIX}/accelerator/accelerations/stats`, { params: { ...params } });
}
setupSquare$(): Observable<{squareAppId: string, squareLocationId: string}> {