From bd19b88f119a88cc69537d8873e13e833afc31a8 Mon Sep 17 00:00:00 2001 From: Simon Lindh Date: Thu, 15 Aug 2019 14:50:05 +0300 Subject: [PATCH] TV view button. Updated stats bar. Removed tx/second graph. CSS fixes. --- .../app/blockchain/blockchain.component.scss | 1 + frontend/src/app/footer/footer.component.html | 4 ++-- frontend/src/app/footer/footer.component.scss | 6 +++-- frontend/src/app/footer/footer.component.ts | 12 +++++++--- .../master-page/master-page.component.html | 3 +++ .../app/statistics/statistics.component.html | 17 -------------- .../app/statistics/statistics.component.ts | 22 ------------------ .../app/television/television.component.scss | 16 ++++++++++--- .../app/television/television.component.ts | 5 +++- frontend/src/assets/expand.png | Bin 0 -> 15298 bytes 10 files changed, 36 insertions(+), 50 deletions(-) create mode 100644 frontend/src/assets/expand.png 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 0000000000000000000000000000000000000000..a47c329b4df8a076c57062e52782fc43b2f1ed3e GIT binary patch literal 15298 zcmeI3ZEPDw8pp@6n>yhFZmV(;m}upe7Fz6G+i_yAY}dWGO#*Q#Nf2p)!g{?)mfGHB zchfkjC{EC|Y2k7ds?rzKe(33r)AhpjO3@vWcu}A!f;-eAoqE-AO1XUDMHC816t&9D z+KxSToDLv9j#suH&-|a~nfc8##*WeZkA%df<`+4k`ITsrtGVC&U1nWgFe{(eWl+aW1EwA1JF(Tt0Bx$ID3 zR|k?Bm$E0-W!WIJal(SiE26B4Qj*f+a#5*I3)pOWqWmj2uY{aWlvH!U-YD2(Cun=Za<^Mk1*DoX}y3@6-27E_CcihDO}y zguYi1;aSJU5sg0jADf~~m^rChL={%(08+WIelw?8hwylD>ug6{%$!Oxr>KIy=K{9b zO_x8$@~4#Uli9m0$Lr@=kk_|_5cAVTt%YIbJ#%j2PhG%le8heJ9R0mQ@_HL88!Drk zKZq)IYyF%etnGm{@xyj|Hg2(FX#zj3{{zIu;-$#87O&83&CXp>zkaZ>uo~dVxXdaz z{q&r+LguW#OJCJ^Uq;{PV&IE*>Yq7Rw7b-G)Ae1^?o!u+=lw}h3%YXIN}3Tb{q)Tq z3?1-BK?pW@JZ_JlE^RLL*eIricvo12J6P505>7DZRN7P4bJM(@NKei)yI9DddS)%N zt?-rs-mTF2+m+&F&TodF*(gluXAX>pBS}yiSexL&B0>cO7fJ(b6I@tCsDR)?X<%)F z3yTO95L_q?tW9uX5upNt3#Eaz2`(%mR6uZ{G_W?og++u42riTc)+V^Hh)@B+h0?&< z1Q!+&Dj>K}8d#g)!XiQi1Q$vJYZF{pM5ut^LTO-af(wfX6%bq~4XjOYVG*GMf(xaA zwFxdPB2++dp){~I!G%SH3J5Ng2G%CHu!v9r!G+Sm+5{IC5h@_KP#Rd9;KCw81q2sL z18WmpSVX9R;6iC&ZGsDn2o(@qC=INAU0l_L2LOd6eCn?sKHg^@I`9wpXduP6v_}9K zyd8k_Qvh67xL!2LSk`^xPxwtOvljxHY`CGj-wf|C}8iW-OumdM0LO zE`Rsx?)8>m{Q6b(i<9Gbe|WOvxp&UIzw37&T-#JpWhuQ{(=D^twWa%~{#!XvxAISH zSNy)EJHPsbomh0w_J+2bU*8t$-0|4wn~fpU>4uzA0q%mmg=uqZF)d#&j=4cWwJrvrweiRtrys|-yYSTreKy2)%^F?qTVR7@WC ze*DbQ1*Xx1E1R!=`S&ebE{zXdd`UjOhyLv3_g4%<$Ib;NFMjap$bwzBDxs;g(c*aW2o&WFBme8t{7PH(TT@iSyO8mS@rRmr(PbP-fTTFRr~FM zgK6{V;k|GuFL@nR7VrAWz3JWt>x9W{b?<{SU-I_Ookq*4f1ihds;ucyMRVhoM~?5< zySz4SPOCSszHrwI%l4Z_N-uP6^R@x5Zt+!GRQhjNSj`XKa`m6D9M2U=v5Wpomo2?> zb4Ar>s}EAHz>do39`h)@#I*RWum1Jd%fGKXe7{&bBkg~8czVUd72)D*F;#q>`zBxj eU}nY$hF1+9+p_=bmHJb*t?M>~$A0zb@c#kd)2#6T literal 0 HcmV?d00001