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

Flip mempool chart by using patched chartist package by @techmix

Browse Source
This commit is contained in:
softsimon 2020-11-10 21:05:54 +07:00
parent b89a549a75
commit ff8f2fafe8
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
7 changed files with 14190 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14208
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
frontend/package.json
View File

@ -45,10 +45,10 @@
"@fortawesome/fontawesome-common-types": "^0.2.30", "@fortawesome/fontawesome-common-types": "^0.2.30",
"@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0", "@fortawesome/free-solid-svg-icons": "^5.14.0",
"@mempool/chartist": "^0.11.4",
"@ng-bootstrap/ng-bootstrap": "^7.0.0", "@ng-bootstrap/ng-bootstrap": "^7.0.0",
"@types/qrcode": "^1.3.4", "@types/qrcode": "^1.3.4",
"bootstrap": "4.5.0", "bootstrap": "4.5.0",
"chartist": "^0.11.4",
"clipboard": "^2.0.4", "clipboard": "^2.0.4",
"ngx-bootrap-multiselect": "^2.0.0", "ngx-bootrap-multiselect": "^2.0.0",
"ngx-infinite-scroll": "^9.0.0", "ngx-infinite-scroll": "^9.0.0",

2
frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core'; import { Component, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
import * as Chartist from 'chartist'; import * as Chartist from '@mempool/chartist';
@Component({ @Component({
selector: 'app-fee-distribution-graph', selector: 'app-fee-distribution-graph',

12
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@ -1,7 +1,7 @@
import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core'; import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { formatDate } from '@angular/common'; import { formatDate } from '@angular/common';
import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe'; import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
import * as Chartist from 'chartist'; import * as Chartist from '@mempool/chartist';
import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface'; import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
@ -62,6 +62,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
showLine: false, showLine: false,
fullWidth: true, fullWidth: true,
showPoint: false, showPoint: false,
stackedLine: true,
low: 0, low: 0,
axisX: { axisX: {
labelInterpolationFnc: labelInterpolationFnc, labelInterpolationFnc: labelInterpolationFnc,
@ -71,11 +72,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2), labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2),
offset: showLegend ? 160 : 60, offset: showLegend ? 160 : 60,
}, },
plugins: [ plugins: []
Chartist.plugins.ctTargetLine({
value: 1000000
}),
]
}; };
if (showLegend) { if (showLegend) {
@ -134,9 +131,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
feesArray.push(0); feesArray.push(0);
} }
}); });
if (finalArray.length) {
feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
}
finalArray.push(feesArray); finalArray.push(feesArray);
} }
finalArray.reverse(); finalArray.reverse();

2
frontend/src/app/components/statistics/chartist.component.ts
View File

@ -9,7 +9,7 @@ import {
ViewEncapsulation ViewEncapsulation
} from '@angular/core'; } from '@angular/core';
import * as Chartist from 'chartist'; import * as Chartist from '@mempool/chartist';
/** /**
* Possible chart types * Possible chart types

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

@ -9,7 +9,7 @@ import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
import { WebsocketService } from '../../services/websocket.service'; import { WebsocketService } from '../../services/websocket.service';
import { ApiService } from '../../services/api.service'; import { ApiService } from '../../services/api.service';
import * as Chartist from 'chartist'; import * as Chartist from '@mempool/chartist';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
import { SeoService } from 'src/app/services/seo.service'; import { SeoService } from 'src/app/services/seo.service';
@ -30,7 +30,6 @@ export class StatisticsComponent implements OnInit {
mempoolUnconfirmedTransactionsData: any; mempoolUnconfirmedTransactionsData: any;
mempoolTransactionsWeightPerSecondData: any; mempoolTransactionsWeightPerSecondData: any;
mempoolVsizeFeesOptions: any;
transactionsWeightPerSecondOptions: any; transactionsWeightPerSecondOptions: any;
radioGroupForm: FormGroup; radioGroupForm: FormGroup;

2
frontend/src/app/dashboard/dashboard.component.ts
View File

@ -6,7 +6,7 @@ import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface'; import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
import { ApiService } from '../services/api.service'; import { ApiService } from '../services/api.service';
import { StateService } from '../services/state.service'; import { StateService } from '../services/state.service';
import * as Chartist from 'chartist'; import * as Chartist from '@mempool/chartist';
import { formatDate } from '@angular/common'; import { formatDate } from '@angular/common';
import { WebsocketService } from '../services/websocket.service'; import { WebsocketService } from '../services/websocket.service';
import { SeoService } from '../services/seo.service'; import { SeoService } from '../services/seo.service';