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

Refactor TV component subscription

Browse Source
This commit is contained in:
nymkappa 2022-02-09 10:18:51 +09:00
parent aa77faf314
commit cd9eaf816b
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
2 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/television/television.component.html
View File

@ -7,7 +7,7 @@
[height]="600"
[left]="60"
[right]="10"
[data]="mempoolStats && mempoolStats.length ? mempoolStats : null"
[data]="statsSubscription$ | async"
[showZoom]="false"
></app-mempool-graph>
</div>

49
frontend/src/app/components/television/television.component.ts
View File

@ -5,7 +5,9 @@ import { StateService } from 'src/app/services/state.service';
import { ApiService } from 'src/app/services/api.service';
import { SeoService } from 'src/app/services/seo.service';
import { ActivatedRoute } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { map, startWith, switchMap, tap } from 'rxjs/operators';
import { interval, merge, Observable } from 'rxjs';
import { isArray } from 'src/app/shared/pipes/bytes-pipe/utils';
@Component({
selector: 'app-television',
@ -15,7 +17,8 @@ import { switchMap } from 'rxjs/operators';
export class TelevisionComponent implements OnInit {
mempoolStats: OptimizedMempoolStats[] = [];
mempoolVsizeFeesData: any;
statsSubscription$: Observable<any>;
fragment: string;
constructor(
private websocketService: WebsocketService,
@ -25,36 +28,46 @@ export class TelevisionComponent implements OnInit {
private route: ActivatedRoute
) { }
refreshStats(time: number, fn: Observable<OptimizedMempoolStats[]>) {
return interval(time).pipe(startWith(0), switchMap(() => fn));
}
ngOnInit() {
this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`);
this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']);
this.statsSubscription$ = merge(
this.stateService.live2Chart$,
this.route.fragment
.pipe(
tap(fragment => { this.fragment = fragment; }),
switchMap((fragment) => {
const minute = 60000; const hour = 3600000;
switch (fragment) {
case '2h': return this.apiService.list2HStatistics$();
case '24h': return this.apiService.list24HStatistics$();
case '1w': return this.apiService.list1WStatistics$();
case '1m': return this.apiService.list1MStatistics$();
case '3m': return this.apiService.list3MStatistics$();
case '6m': return this.apiService.list6MStatistics$();
case '1y': return this.apiService.list1YStatistics$();
case '2y': return this.apiService.list2YStatistics$();
case '3y': return this.apiService.list3YStatistics$();
case '1w': return this.refreshStats(5 * minute, this.apiService.list1WStatistics$());
case '1m': return this.refreshStats(30 * minute, this.apiService.list1MStatistics$());
case '3m': return this.refreshStats(2 * hour, this.apiService.list3MStatistics$());
case '6m': return this.refreshStats(3 * hour, this.apiService.list6MStatistics$());
case '1y': return this.refreshStats(8 * hour, this.apiService.list1YStatistics$());
case '2y': return this.refreshStats(8 * hour, this.apiService.list2YStatistics$());
case '3y': return this.refreshStats(12 * hour, this.apiService.list3YStatistics$());
default: return this.apiService.list2HStatistics$();
}
})
)
.subscribe((mempoolStats) => {
this.mempoolStats = mempoolStats;
});
this.stateService.live2Chart$
.subscribe((mempoolStats) => {
this.mempoolStats.unshift(mempoolStats);
)
.pipe(
map(stats => {
if (isArray(stats)) {
this.mempoolStats = stats as OptimizedMempoolStats[];
} else if (['2h', '24h'].includes(this.fragment)) {
this.mempoolStats.unshift(stats as OptimizedMempoolStats);
this.mempoolStats = this.mempoolStats.slice(0, this.mempoolStats.length - 1);
});
}
return this.mempoolStats;
})
);
}
}