diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html index c9caa54ef..7da6e2d38 100644 --- a/frontend/src/app/components/television/television.component.html +++ b/frontend/src/app/components/television/television.component.html @@ -7,7 +7,7 @@ [height]="600" [left]="60" [right]="10" - [data]="mempoolStats && mempoolStats.length ? mempoolStats : null" + [data]="statsSubscription$ | async" [showZoom]="false" > diff --git a/frontend/src/app/components/television/television.component.ts b/frontend/src/app/components/television/television.component.ts index e219a0b51..f7cdcf074 100644 --- a/frontend/src/app/components/television/television.component.ts +++ b/frontend/src/app/components/television/television.component.ts @@ -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; + fragment: string; constructor( private websocketService: WebsocketService, @@ -25,36 +28,46 @@ export class TelevisionComponent implements OnInit { private route: ActivatedRoute ) { } + refreshStats(time: number, fn: Observable) { + 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.route.fragment - .pipe( - switchMap((fragment) => { - 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$(); - default: return this.apiService.list2HStatistics$(); - } - }) - ) - .subscribe((mempoolStats) => { - this.mempoolStats = mempoolStats; - }); - - this.stateService.live2Chart$ - .subscribe((mempoolStats) => { - this.mempoolStats.unshift(mempoolStats); - this.mempoolStats = this.mempoolStats.slice(0, this.mempoolStats.length - 1); - }); + 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.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$(); + } + }) + ) + ) + .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; + }) + ); } - }