mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-01-03 20:24:28 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1192 from nymkappa/feature/tv-view-timespan-switch

Browse Source 
Allow TV view time span switch through url fragment
This commit is contained in:
softsimon 2022-02-10 11:52:07 +04:00 committed by GitHub
commit 11e6602315
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 15 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" [height]="600"
[left]="60" [left]="60"
[right]="10" [right]="10"
[data]="mempoolStats && mempoolStats.length ? mempoolStats : null" [data]="statsSubscription$ | async"
[showZoom]="false" [showZoom]="false"
></app-mempool-graph> ></app-mempool-graph>
</div> </div>

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

@ -4,39 +4,70 @@ import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
import { ApiService } from 'src/app/services/api.service'; import { ApiService } from 'src/app/services/api.service';
import { SeoService } from 'src/app/services/seo.service'; import { SeoService } from 'src/app/services/seo.service';
import { Observable } from 'rxjs'; import { ActivatedRoute } from '@angular/router';
import { map, scan, startWith, switchMap, tap } from 'rxjs/operators';
import { interval, merge, Observable } from 'rxjs';
import { ChangeDetectionStrategy } from '@angular/core';
@Component({ @Component({
selector: 'app-television', selector: 'app-television',
templateUrl: './television.component.html', templateUrl: './television.component.html',
styleUrls: ['./television.component.scss'] styleUrls: ['./television.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class TelevisionComponent implements OnInit { export class TelevisionComponent implements OnInit {
mempoolStats: OptimizedMempoolStats[] = []; mempoolStats: OptimizedMempoolStats[] = [];
mempoolVsizeFeesData: any; statsSubscription$: Observable<OptimizedMempoolStats[]>;
fragment: string;
constructor( constructor(
private websocketService: WebsocketService, private websocketService: WebsocketService,
private apiService: ApiService, private apiService: ApiService,
private stateService: StateService, private stateService: StateService,
private seoService: SeoService, private seoService: SeoService,
private route: ActivatedRoute
) { } ) { }
refreshStats(time: number, fn: Observable<OptimizedMempoolStats[]>) {
return interval(time).pipe(startWith(0), switchMap(() => fn));
}
ngOnInit() { ngOnInit() {
this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`); this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`);
this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']); this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']);
this.apiService.list2HStatistics$() this.statsSubscription$ = merge(
.subscribe((mempoolStats) => { this.stateService.live2Chart$.pipe(map(stats => [stats])),
this.mempoolStats = mempoolStats; this.route.fragment
}); .pipe(
tap(fragment => { this.fragment = fragment ?? '2h'; }),
this.stateService.live2Chart$ switchMap((fragment) => {
.subscribe((mempoolStats) => { const minute = 60000; const hour = 3600000;
this.mempoolStats.unshift(mempoolStats); switch (fragment) {
this.mempoolStats = this.mempoolStats.slice(0, this.mempoolStats.length - 1); 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 /* 2h */: return this.apiService.list2HStatistics$();
}
})
)
)
.pipe(
scan((mempoolStats, newStats) => {
if (newStats.length > 1) {
mempoolStats = newStats;
} else if (['2h', '24h'].includes(this.fragment)) {
mempoolStats.unshift(newStats[0]);
mempoolStats = mempoolStats.slice(0, mempoolStats.length - 1);
}
return mempoolStats;
})
);
} }
} }