mirror of
https://github.com/mempool/mempool.git
synced 2025-04-05 02:20:37 +02:00
Deprecating the tv view
This commit is contained in:
softsimon
parent
f7d0d7a882
commit
6ec1cc3fd5
frontend
cypress/e2e
src/app
components
liquid-master-page
statistics
television
graphs
@ -57,11 +57,6 @@ describe('Liquid', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('loads the tv page - desktop', () => {
|
||||
cy.visit(`${basePath}/tv`);
|
||||
cy.waitForSkeletonGone();
|
||||
});
|
||||
|
||||
it('loads the graphs page - mobile', () => {
|
||||
cy.visit(`${basePath}`)
|
||||
cy.waitForSkeletonGone();
|
||||
|
||||
@ -57,11 +57,6 @@ describe('Liquid Testnet', () => {
|
||||
cy.waitForSkeletonGone();
|
||||
});
|
||||
|
||||
it('loads the tv page - desktop', () => {
|
||||
cy.visit(`${basePath}/tv`);
|
||||
cy.waitForSkeletonGone();
|
||||
});
|
||||
|
||||
it('loads the graphs page - mobile', () => {
|
||||
cy.visit(`${basePath}`)
|
||||
cy.waitForSkeletonGone();
|
||||
|
||||
@ -415,26 +415,6 @@ describe('Mainnet', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('loads the tv screen - desktop', () => {
|
||||
cy.viewport('macbook-16');
|
||||
cy.visit('/graphs/mempool');
|
||||
cy.waitForSkeletonGone();
|
||||
cy.get('#btn-tv').click().then(() => {
|
||||
cy.viewport('macbook-16');
|
||||
cy.get('.chart-holder');
|
||||
cy.get('.blockchain-wrapper').should('be.visible');
|
||||
cy.get('#mempool-block-0').should('be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
it('loads the tv screen - mobile', () => {
|
||||
cy.viewport('iphone-6');
|
||||
cy.visit('/tv');
|
||||
cy.waitForSkeletonGone();
|
||||
cy.get('.chart-holder');
|
||||
cy.get('.blockchain-wrapper').should('not.visible');
|
||||
});
|
||||
|
||||
it('loads the api screen', () => {
|
||||
cy.visit('/');
|
||||
cy.waitForSkeletonGone();
|
||||
|
||||
@ -70,11 +70,6 @@
|
||||
<li class="nav-item" routerLinkActive="active" id="btn-graphs">
|
||||
<a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
|
||||
</li>
|
||||
<!--
|
||||
<li class="nav-item d-none d-lg-block" routerLinkActive="active">
|
||||
<a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>
|
||||
</li>
|
||||
-->
|
||||
<li class="nav-item" routerLinkActive="active" id="btn-assets">
|
||||
<a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
|
||||
</li>
|
||||
|
||||
@ -16,9 +16,6 @@
|
||||
<a class="btn btn-primary btn-sm mb-0" [routerLink]="['/clock/mempool/0' | relativeUrl]" style="color: white" id="btn-clock">
|
||||
<fa-icon [icon]="['fas', 'clock']" [fixedWidth]="true" i18n-title="master-page.clockview" i18n-title="footer.clock-mempool" title="Clock (Mempool)"></fa-icon>
|
||||
</a>
|
||||
<a *ngIf="!isMobile()" class="btn btn-primary btn-sm mb-0" [routerLink]="['/tv' | relativeUrl]" style="color: white" id="btn-tv">
|
||||
<fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-toggle-rows" name="radioBasic">
|
||||
<div class="btn-group btn-group-toggle">
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
<div id="tv-wrapper">
|
||||
<div class="tv-container">
|
||||
<div class="chart-holder">
|
||||
<app-mempool-graph
|
||||
[template]="'advanced'"
|
||||
[height]="600"
|
||||
[left]="60"
|
||||
[right]="10"
|
||||
[data]="statsSubscription$ | async"
|
||||
[showZoom]="false"
|
||||
></app-mempool-graph>
|
||||
</div>
|
||||
<div class="blockchain-wrapper" [dir]="timeLtr ? 'rtl' : 'ltr'" [class.time-ltr]="timeLtr">
|
||||
<div class="position-container">
|
||||
<span>
|
||||
<div class="blocks-wrapper">
|
||||
<app-mempool-blocks></app-mempool-blocks>
|
||||
<app-blockchain-blocks></app-blockchain-blocks>
|
||||
</div>
|
||||
<div id="divider"></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,80 +0,0 @@
|
||||
|
||||
.loading {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#tv-wrapper {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-holder {
|
||||
position: relative;
|
||||
height: 655px;
|
||||
width: 100%;
|
||||
margin: 30px auto 0;
|
||||
}
|
||||
|
||||
.blockchain-wrapper {
|
||||
display: block;
|
||||
height: 100%;
|
||||
min-height: 240px;
|
||||
position: relative;
|
||||
top: 30px;
|
||||
|
||||
.position-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 170px;
|
||||
transform: translateX(50vw);
|
||||
}
|
||||
|
||||
#divider {
|
||||
width: 2px;
|
||||
height: 175px;
|
||||
left: 0;
|
||||
top: -40px;
|
||||
position: absolute;
|
||||
img {
|
||||
position: absolute;
|
||||
left: -100px;
|
||||
top: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
&.time-ltr {
|
||||
.blocks-wrapper {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.ltr-layout) {
|
||||
.blockchain-wrapper.time-ltr .blocks-wrapper,
|
||||
.blockchain-wrapper .blocks-wrapper {
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.rtl-layout) {
|
||||
.blockchain-wrapper.time-ltr .blocks-wrapper,
|
||||
.blockchain-wrapper .blocks-wrapper {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
.tv-container {
|
||||
display: flex;
|
||||
margin-top: 0px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { WebsocketService } from '@app/services/websocket.service';
|
||||
import { OptimizedMempoolStats } from '@interfaces/node-api.interface';
|
||||
import { StateService } from '@app/services/state.service';
|
||||
import { ApiService } from '@app/services/api.service';
|
||||
import { SeoService } from '@app/services/seo.service';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { map, scan, startWith, switchMap, tap } from 'rxjs/operators';
|
||||
import { interval, merge, Observable, Subscription } from 'rxjs';
|
||||
import { ChangeDetectionStrategy } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-television',
|
||||
templateUrl: './television.component.html',
|
||||
styleUrls: ['./television.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class TelevisionComponent implements OnInit, OnDestroy {
|
||||
|
||||
mempoolStats: OptimizedMempoolStats[] = [];
|
||||
statsSubscription$: Observable<OptimizedMempoolStats[]>;
|
||||
fragment: string;
|
||||
timeLtrSubscription: Subscription;
|
||||
timeLtr: boolean = this.stateService.timeLtr.value;
|
||||
|
||||
constructor(
|
||||
private websocketService: WebsocketService,
|
||||
private apiService: ApiService,
|
||||
private stateService: StateService,
|
||||
private seoService: SeoService,
|
||||
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.seoService.setDescription($localize`:@@meta.description.tv:See Bitcoin blocks and mempool congestion in real-time in a simplified format perfect for a TV.`);
|
||||
this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']);
|
||||
|
||||
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
|
||||
this.timeLtr = !!ltr;
|
||||
});
|
||||
|
||||
this.statsSubscription$ = merge(
|
||||
this.stateService.live2Chart$.pipe(map(stats => [stats])),
|
||||
this.route.fragment
|
||||
.pipe(
|
||||
tap(fragment => { this.fragment = fragment ?? '2h'; }),
|
||||
switchMap((fragment) => {
|
||||
const minute = 60000; const hour = 3600000;
|
||||
switch (fragment) {
|
||||
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]);
|
||||
const now = Date.now() / 1000;
|
||||
const start = now - (this.fragment === '2h' ? (2 * 60 * 60) : (24 * 60 * 60) );
|
||||
mempoolStats = mempoolStats.filter(p => p.added >= start);
|
||||
}
|
||||
return mempoolStats;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.timeLtrSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
@ -26,7 +26,6 @@ import { StatisticsComponent } from '@components/statistics/statistics.component
|
||||
import { MempoolBlockComponent } from '@components/mempool-block/mempool-block.component';
|
||||
import { PoolRankingComponent } from '@components/pool-ranking/pool-ranking.component';
|
||||
import { PoolComponent } from '@components/pool/pool.component';
|
||||
import { TelevisionComponent } from '@components/television/television.component';
|
||||
import { DashboardComponent } from '@app/dashboard/dashboard.component';
|
||||
import { CustomDashboardComponent } from '@components/custom-dashboard/custom-dashboard.component';
|
||||
import { MiningDashboardComponent } from '@components/mining-dashboard/mining-dashboard.component';
|
||||
@ -56,7 +55,6 @@ import { CommonModule } from '@angular/common';
|
||||
AcceleratorDashboardComponent,
|
||||
PoolComponent,
|
||||
PoolRankingComponent,
|
||||
TelevisionComponent,
|
||||
|
||||
StatisticsComponent,
|
||||
GraphsComponent,
|
||||
|
||||
@ -16,7 +16,6 @@ import { PoolRankingComponent } from '@components/pool-ranking/pool-ranking.comp
|
||||
import { PoolComponent } from '@components/pool/pool.component';
|
||||
import { StartComponent } from '@components/start/start.component';
|
||||
import { StatisticsComponent } from '@components/statistics/statistics.component';
|
||||
import { TelevisionComponent } from '@components/television/television.component';
|
||||
import { DashboardComponent } from '@app/dashboard/dashboard.component';
|
||||
import { CustomDashboardComponent } from '@components/custom-dashboard/custom-dashboard.component';
|
||||
import { AccelerationFeesGraphComponent } from '@components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component';
|
||||
@ -180,11 +179,6 @@ const routes: Routes = [
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'tv',
|
||||
data: { networks: ['bitcoin', 'liquid'] },
|
||||
component: TelevisionComponent
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user