machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize statistics.

Browse Source
This commit is contained in:
Simon Lindh
2020-02-17 00:26:57 +07:00
committed by wiz
parent ac95c09ea6
commit acd658a0e7
11 changed files with 148 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/statistics/statistics.component.html
View File

@@ -49,7 +49,7 @@
<input ngbButton type="radio" [value]="'6m'" [routerLink]="['/graphs']" fragment="6m"> 6M
</label>
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'1y'"> 1Y
<input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs']" fragment="1y"> 1Y
</label>
</div>
</form>

28
frontend/src/app/components/statistics/statistics.component.ts
View File

@@ -6,7 +6,7 @@ import { of, merge} from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';
import { VbytesPipe } from '../../pipes/bytes-pipe/vbytes.pipe';
import { MempoolStats } from '../../interfaces/node-api.interface';
import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
import { WebsocketService } from '../../services/websocket.service';
import { ApiService } from '../../services/api.service';
@@ -22,7 +22,7 @@ export class StatisticsComponent implements OnInit {
loading = true;
spinnerLoading = false;
mempoolStats: MempoolStats[] = [];
mempoolStats: OptimizedMempoolStats[] = [];
mempoolVsizeFeesData: any;
mempoolUnconfirmedTransactionsData: any;
@@ -62,6 +62,7 @@ export class StatisticsComponent implements OnInit {
case '1m':
case '3m':
case '6m':
case '1y':
value = formatDate(value, 'dd/MM', this.locale);
}
@@ -124,7 +125,7 @@ export class StatisticsComponent implements OnInit {
this.route
.fragment
.subscribe((fragment) => {
if (['2h', '24h', '1w', '1m', '3m', '6m'].indexOf(fragment) > -1) {
if (['2h', '24h', '1w', '1m', '3m', '6m', '1y'].indexOf(fragment) > -1) {
this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
}
});
@@ -158,7 +159,10 @@ export class StatisticsComponent implements OnInit {
if (this.radioGroupForm.controls.dateSpan.value === '3m') {
return this.apiService.list3MStatistics$();
}
return this.apiService.list6MStatistics$();
if (this.radioGroupForm.controls.dateSpan.value === '6m') {
return this.apiService.list6MStatistics$();
}
return this.apiService.list1YStatistics$();
})
)
.subscribe((mempoolStats: any) => {
@@ -176,7 +180,7 @@ export class StatisticsComponent implements OnInit {
});
}
handleNewMempoolData(mempoolStats: MempoolStats[]) {
handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
mempoolStats.reverse();
const labels = mempoolStats.map(stats => stats.added);
@@ -196,20 +200,14 @@ export class StatisticsComponent implements OnInit {
};
}
generateArray(mempoolStats: MempoolStats[]) {
const logFees = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];
logFees.reverse();
generateArray(mempoolStats: OptimizedMempoolStats[]) {
const finalArray: number[][] = [];
let feesArray: number[] = [];
logFees.forEach((fee) => {
for (let index = 37; index > -1; index--) {
feesArray = [];
mempoolStats.forEach((stats) => {
// @ts-ignore
const theFee = stats['vsize_' + fee];
const theFee = stats.vsizes[index].toString();
if (theFee) {
feesArray.push(parseInt(theFee, 10));
} else {
@@ -220,7 +218,7 @@ export class StatisticsComponent implements OnInit {
feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
}
finalArray.push(feesArray);
});
}
finalArray.reverse();
return finalArray;
}

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

@@ -4,7 +4,7 @@ import { VbytesPipe } from '../../pipes/bytes-pipe/vbytes.pipe';
import * as Chartist from 'chartist';
import { WebsocketService } from 'src/app/services/websocket.service';
import { MempoolStats } from '../../interfaces/node-api.interface';
import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
import { StateService } from 'src/app/services/state.service';
import { ApiService } from 'src/app/services/api.service';
@@ -16,7 +16,7 @@ import { ApiService } from 'src/app/services/api.service';
export class TelevisionComponent implements OnInit {
loading = true;
mempoolStats: MempoolStats[] = [];
mempoolStats: OptimizedMempoolStats[] = [];
mempoolVsizeFeesData: any;
mempoolVsizeFeesOptions: any;
@@ -88,7 +88,7 @@ export class TelevisionComponent implements OnInit {
});
}
handleNewMempoolData(mempoolStats: MempoolStats[]) {
handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
mempoolStats.reverse();
const labels = mempoolStats.map(stats => stats.added);
@@ -103,20 +103,14 @@ export class TelevisionComponent implements OnInit {
};
}
generateArray(mempoolStats: MempoolStats[]) {
const logFees = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];
logFees.reverse();
generateArray(mempoolStats: OptimizedMempoolStats[]) {
const finalArray: number[][] = [];
let feesArray: number[] = [];
logFees.forEach((fee) => {
for (let index = 37; index > -1; index--) {
feesArray = [];
mempoolStats.forEach((stats) => {
// @ts-ignore
const theFee = stats['vsize_' + fee];
const theFee = stats.vsizes[index].toString();
if (theFee) {
feesArray.push(parseInt(theFee, 10));
} else {
@@ -127,7 +121,7 @@ export class TelevisionComponent implements OnInit {
feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
}
finalArray.push(feesArray);
});
}
finalArray.reverse();
return finalArray;
}

44
frontend/src/app/interfaces/node-api.interface.ts
View File

@@ -3,51 +3,15 @@ export interface BlockTransaction {
f: number;
}
export interface MempoolStats {
export interface OptimizedMempoolStats {
id: number;
added: string;
unconfirmed_transactions: number;
tx_per_second: number;
vbytes_per_second: number;
total_fee: number;
mempool_byte_weight: number;
fee_data: FeeData;
vsize_1: number;
vsize_2: number;
vsize_3: number;
vsize_4: number;
vsize_5: number;
vsize_6: number;
vsize_8: number;
vsize_10: number;
vsize_12: number;
vsize_15: number;
vsize_20: number;
vsize_30: number;
vsize_40: number;
vsize_50: number;
vsize_60: number;
vsize_70: number;
vsize_80: number;
vsize_90: number;
vsize_100: number;
vsize_125: number;
vsize_150: number;
vsize_175: number;
vsize_200: number;
vsize_250: number;
vsize_300: number;
vsize_350: number;
vsize_400: number;
vsize_500: number;
vsize_600: number;
vsize_700: number;
vsize_800: number;
vsize_900: number;
vsize_1000: number;
vsize_1200: number;
vsize_1400: number;
vsize_1600: number;
vsize_1800: number;
vsize_2000: number;
vsizes: number[] | string[];
}
interface FeeData {

30
frontend/src/app/services/api.service.ts
View File

@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MempoolStats, BlockTransaction } from '../interfaces/node-api.interface';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { Observable } from 'rxjs';
const API_BASE_URL = '/api/v1';
@@ -13,27 +13,31 @@ export class ApiService {
private httpClient: HttpClient,
) { }
list2HStatistics$(): Observable<MempoolStats[]> {
return this.httpClient.get<MempoolStats[]>(API_BASE_URL + '/statistics/2h');
list2HStatistics$(): Observable<OptimizedMempoolStats[]> {
return this.httpClient.get<OptimizedMempoolStats[]>(API_BASE_URL + '/statistics/2h');
}
list24HStatistics$(): Observable<MempoolStats[]> {
return this.httpClient.get<MempoolStats[]>(API_BASE_URL + '/statistics/24h');
list24HStatistics$(): Observable<OptimizedMempoolStats[]> {
return this.httpClient.get<OptimizedMempoolStats[]>(API_BASE_URL + '/statistics/24h');
}
list1WStatistics$(): Observable<MempoolStats[]> {
return this.httpClient.get<MempoolStats[]>(API_BASE_URL + '/statistics/1w');
list1WStatistics$(): Observable<OptimizedMempoolStats[]> {
return this.httpClient.get<OptimizedMempoolStats[]>(API_BASE_URL + '/statistics/1w');
}
list1MStatistics$(): Observable<MempoolStats[]> {
return this.httpClient.get<MempoolStats[]>(API_BASE_URL + '/statistics/1m');
list1MStatistics$(): Observable<OptimizedMempoolStats[]> {
return this.httpClient.get<OptimizedMempoolStats[]>(API_BASE_URL + '/statistics/1m');
}
list3MStatistics$(): Observable<MempoolStats[]> {
return this.httpClient.get<MempoolStats[]>(API_BASE_URL + '/statistics/3m');
list3MStatistics$(): Observable<OptimizedMempoolStats[]> {
return this.httpClient.get<OptimizedMempoolStats[]>(API_BASE_URL + '/statistics/3m');
}
list6MStatistics$(): Observable<MempoolStats[]> {
return this.httpClient.get<MempoolStats[]>(API_BASE_URL + '/statistics/6m');
list6MStatistics$(): Observable<OptimizedMempoolStats[]> {
return this.httpClient.get<OptimizedMempoolStats[]>(API_BASE_URL + '/statistics/6m');
}
list1YStatistics$(): Observable<OptimizedMempoolStats[]> {
return this.httpClient.get<OptimizedMempoolStats[]>(API_BASE_URL + '/statistics/1y');
}
}

4
frontend/src/app/services/state.service.ts
View File

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { ReplaySubject, BehaviorSubject, Subject } from 'rxjs';
import { Block } from '../interfaces/electrs.interface';
import { MempoolBlock } from '../interfaces/websocket.interface';
import { MempoolStats } from '../interfaces/node-api.interface';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
@Injectable({
providedIn: 'root'
@@ -13,7 +13,7 @@ export class StateService {
conversions$ = new ReplaySubject<any>(1);
mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
txConfirmed = new Subject<Block>();
live2Chart$ = new Subject<MempoolStats>();
live2Chart$ = new Subject<OptimizedMempoolStats>();
viewFiat$ = new BehaviorSubject<boolean>(false);
isOffline$ = new BehaviorSubject<boolean>(false);

4
frontend/src/styles.scss
View File

@@ -18,6 +18,10 @@ $link-hover-decoration: underline !default;
@import "~bootstrap/scss/bootstrap";
@import '~tlite/tlite.css';
html, body {
height: 100%;
}
body {
background-color: #11131f;
}