diff --git a/frontend/src/app/blockchain/blockchain.component.scss b/frontend/src/app/blockchain/blockchain.component.scss index 9158efbc0..517a890b3 100644 --- a/frontend/src/app/blockchain/blockchain.component.scss +++ b/frontend/src/app/blockchain/blockchain.component.scss @@ -28,6 +28,7 @@ @media (max-width: 767.98px) { #divider { top: -50px; + height: 1300px; } .position-container { top: 100px; diff --git a/frontend/src/app/footer/footer.component.html b/frontend/src/app/footer/footer.component.html index 8cc174093..13a303a68 100644 --- a/frontend/src/app/footer/footer.component.html +++ b/frontend/src/app/footer/footer.component.html @@ -2,9 +2,9 @@
- Unconfirmed transactions: {{ memPoolInfo?.memPoolInfo?.size | number }} ({{ mempoolBlocks }} blocks) + Unconfirmed transactions: {{ memPoolInfo?.memPoolInfo?.size | number }}
- Tx per second: {{ memPoolInfo?.txPerSecond | number : '1.2-2' }} tx/s + Mempool size: {{ mempoolSize | bytes }} ({{ mempoolBlocks }} blocks)
Tx weight per second:  diff --git a/frontend/src/app/footer/footer.component.scss b/frontend/src/app/footer/footer.component.scss index cc37ebdbe..6cb20d2ad 100644 --- a/frontend/src/app/footer/footer.component.scss +++ b/frontend/src/app/footer/footer.component.scss @@ -23,12 +23,14 @@ } .info-block { - float:left; + float: left; + width: 350px; + line-height: 25px; } .progress { display: inline-flex; - width: 150px; + width: 160px; background-color: #2d3348; height: 1.1rem; } diff --git a/frontend/src/app/footer/footer.component.ts b/frontend/src/app/footer/footer.component.ts index e5bcfd100..81589b326 100644 --- a/frontend/src/app/footer/footer.component.ts +++ b/frontend/src/app/footer/footer.component.ts @@ -11,6 +11,7 @@ export class FooterComponent implements OnInit { mempoolBlocks = 0; progressWidth = ''; progressClass: string; + mempoolSize = 0; constructor( private memPoolService: MemPoolService @@ -22,9 +23,14 @@ export class FooterComponent implements OnInit { this.memPoolInfo = mempoolState; this.updateProgress(); }); - this.memPoolService.mempoolWeight$ - .subscribe((mempoolWeight) => { - this.mempoolBlocks = Math.ceil(mempoolWeight / 4000000); + + this.memPoolService.projectedBlocks$ + .subscribe((projectedblocks) => { + if (!projectedblocks.length) { return; } + const size = projectedblocks.map((m) => m.blockSize).reduce((a, b) => a + b); + const weight = projectedblocks.map((m) => m.blockWeight).reduce((a, b) => a + b); + this.mempoolSize = size; + this.mempoolBlocks = Math.ceil(weight / 4000000); }); } diff --git a/frontend/src/app/master-page/master-page.component.html b/frontend/src/app/master-page/master-page.component.html index aeba9e2bc..da882113d 100644 --- a/frontend/src/app/master-page/master-page.component.html +++ b/frontend/src/app/master-page/master-page.component.html @@ -15,6 +15,9 @@
  • Graphs
    • +
  • + TV view   +
  • About
    • diff --git a/frontend/src/app/statistics/statistics.component.html b/frontend/src/app/statistics/statistics.component.html index 5ec8ede1a..89af7bc30 100644 --- a/frontend/src/app/statistics/statistics.component.html +++ b/frontend/src/app/statistics/statistics.component.html @@ -86,23 +86,6 @@
    -
    -
    -
    - Transactions per second (tx/s)
    -
    -
    - - -
    - -
    -
    -
    -
    diff --git a/frontend/src/app/statistics/statistics.component.ts b/frontend/src/app/statistics/statistics.component.ts index 75c5e67c7..6b39d1aae 100644 --- a/frontend/src/app/statistics/statistics.component.ts +++ b/frontend/src/app/statistics/statistics.component.ts @@ -24,11 +24,9 @@ export class StatisticsComponent implements OnInit { mempoolVsizeFeesData: any; mempoolUnconfirmedTransactionsData: any; - mempoolTransactionsPerSecondData: any; mempoolTransactionsWeightPerSecondData: any; mempoolVsizeFeesOptions: any; - transactionsPerSecondOptions: any; transactionsWeightPerSecondOptions: any; radioGroupForm: FormGroup; @@ -120,19 +118,6 @@ export class StatisticsComponent implements OnInit { ] }; - this.transactionsPerSecondOptions = { - showArea: false, - showLine: true, - showPoint: false, - low: 0, - axisY: { - offset: 40 - }, - axisX: { - labelInterpolationFnc: labelInterpolationFnc - }, - }; - this.route .fragment .subscribe((fragment) => { @@ -192,13 +177,6 @@ export class StatisticsComponent implements OnInit { mempoolStats.reverse(); const labels = mempoolStats.map(stats => stats.added); - /** Active admins summed up */ - - this.mempoolTransactionsPerSecondData = { - labels: labels, - series: [mempoolStats.map((stats) => stats.tx_per_second)], - }; - this.mempoolTransactionsWeightPerSecondData = { labels: labels, series: [mempoolStats.map((stats) => stats.vbytes_per_second)], diff --git a/frontend/src/app/television/television.component.scss b/frontend/src/app/television/television.component.scss index b510145c3..27f2d99f6 100644 --- a/frontend/src/app/television/television.component.scss +++ b/frontend/src/app/television/television.component.scss @@ -14,6 +14,10 @@ bottom: 150px; } +.chart-holder { + height: calc(100% - 220px); +} + #divider { width: 3px; height: 175px; @@ -30,6 +34,12 @@ top: -28px; } -.chart-holder { - height: calc(100% - 220px); -} \ No newline at end of file +@media (min-width: 1920px) { + .position-container { + transform: scale(1.3); + bottom: 190px; + } + .chart-holder { + height: calc(100% - 280px); + } +} diff --git a/frontend/src/app/television/television.component.ts b/frontend/src/app/television/television.component.ts index 094f0fd5e..924f596cc 100644 --- a/frontend/src/app/television/television.component.ts +++ b/frontend/src/app/television/television.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, LOCALE_ID, Inject } from '@angular/core'; +import { Component, OnInit, LOCALE_ID, Inject, Renderer2 } from '@angular/core'; import { ApiService } from '../services/api.service'; import { formatDate } from '@angular/common'; import { BytesPipe } from '../shared/pipes/bytes-pipe/bytes.pipe'; @@ -24,11 +24,14 @@ export class TelevisionComponent implements OnInit { @Inject(LOCALE_ID) private locale: string, private bytesPipe: BytesPipe, private memPoolService: MemPoolService, + private renderer: Renderer2, ) { } ngOnInit() { this.apiService.webSocketWant(['projected-blocks', 'live-2h-chart']); + this.renderer.addClass(document.body, 'disable-scroll'); + const labelInterpolationFnc = (value: any, index: any) => { return index % 6 === 0 ? formatDate(value, 'HH:mm', this.locale) : null; }; diff --git a/frontend/src/assets/expand.png b/frontend/src/assets/expand.png new file mode 100644 index 000000000..a47c329b4 Binary files /dev/null and b/frontend/src/assets/expand.png differ