mempool/frontend/src/app/components/mempool-graph/mempool-graph.component.ts

146 lines
4.3 KiB
TypeScript
Raw Normal View History

2020-03-29 18:59:04 +02:00
import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { formatDate } from '@angular/common';
import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
import * as Chartist from '@mempool/chartist';
2020-03-29 18:59:04 +02:00
import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
import { StateService } from 'src/app/services/state.service';
import { StorageService } from 'src/app/services/storage.service';
2020-03-29 18:59:04 +02:00
@Component({
selector: 'app-mempool-graph',
templateUrl: './mempool-graph.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MempoolGraphComponent implements OnInit, OnChanges {
@Input() data;
2020-05-10 12:44:19 +02:00
@Input() dateSpan = '2h';
2020-09-26 17:46:26 +02:00
@Input() showLegend = true;
@Input() offsetX = 40;
2020-09-27 21:51:01 +02:00
@Input() small = false;
2020-03-29 18:59:04 +02:00
mempoolVsizeFeesOptions: any;
mempoolVsizeFeesData: any;
2020-09-23 10:49:07 +02:00
isMobile = window.innerWidth <= 767.98;
inverted: boolean;
2020-09-23 10:49:07 +02:00
2020-03-29 18:59:04 +02:00
constructor(
private vbytesPipe: VbytesPipe,
private stateService: StateService,
2020-03-29 18:59:04 +02:00
@Inject(LOCALE_ID) private locale: string,
private storageService: StorageService,
2020-03-29 18:59:04 +02:00
) { }
ngOnInit(): void {
let labelHops = !this.showLegend ? 48 : 24;
2020-09-27 21:51:01 +02:00
if (this.small) {
labelHops = labelHops / 2;
}
if (this.isMobile) {
labelHops = 96;
2020-09-27 21:51:01 +02:00
}
2020-09-26 17:46:26 +02:00
2020-03-29 18:59:04 +02:00
const labelInterpolationFnc = (value: any, index: any) => {
2020-05-10 12:44:19 +02:00
switch (this.dateSpan) {
case '2h':
case '24h':
value = formatDate(value, 'HH:mm', this.locale);
break;
case '1w':
value = formatDate(value, 'dd/MM HH:mm', this.locale);
break;
case '1m':
case '3m':
case '6m':
case '1y':
value = formatDate(value, 'dd/MM', this.locale);
}
return index % labelHops === 0 ? value : null;
2020-03-29 18:59:04 +02:00
};
this.mempoolVsizeFeesOptions = {
showArea: true,
showLine: false,
fullWidth: true,
showPoint: false,
stackedLine: !this.inverted,
2020-03-29 18:59:04 +02:00
low: 0,
axisX: {
labelInterpolationFnc: labelInterpolationFnc,
2020-09-26 17:46:26 +02:00
offset: this.offsetX,
2020-03-29 18:59:04 +02:00
},
axisY: {
labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true),
2021-03-04 23:43:42 +01:00
offset: this.showLegend ? 160 : 60,
2020-03-29 18:59:04 +02:00
},
plugins: this.inverted ? [Chartist.plugins.ctTargetLine({ value: this.stateService.blockVSize })] : []
2020-09-26 17:46:26 +02:00
};
2021-03-04 23:43:42 +01:00
if (this.showLegend) {
const legendNames: string[] = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
2020-04-11 18:23:39 +02:00
250, 300, 350, 400].map((sat, i, arr) => {
if (sat === 400) {
return '350+';
2020-03-29 18:59:04 +02:00
}
if (i === 0) {
return '0 - 1';
2020-03-29 18:59:04 +02:00
}
2020-04-11 18:23:39 +02:00
return arr[i - 1] + ' - ' + sat;
});
// Only Liquid has lower than 1 sat/vb transactions
if (this.stateService.network !== 'liquid') {
legendNames.shift();
}
this.mempoolVsizeFeesOptions.plugins.push(
Chartist.plugins.legend({ legendNames: legendNames })
2020-09-26 17:46:26 +02:00
);
}
2020-03-29 18:59:04 +02:00
}
ngOnChanges() {
this.inverted = this.storageService.getValue('inverted-graph') === 'true';
2020-03-29 18:59:04 +02:00
this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
}
handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
mempoolStats.reverse();
const labels = mempoolStats.map(stats => stats.added);
const finalArrayVbyte = this.generateArray(mempoolStats);
// Only Liquid has lower than 1 sat/vb transactions
if (this.stateService.network !== 'liquid') {
2020-03-29 18:59:04 +02:00
finalArrayVbyte.shift();
}
return {
labels: labels,
series: finalArrayVbyte
};
}
generateArray(mempoolStats: OptimizedMempoolStats[]) {
const finalArray: number[][] = [];
let feesArray: number[] = [];
for (let index = 37; index > -1; index--) {
feesArray = [];
mempoolStats.forEach((stats) => {
const theFee = stats.vsizes[index].toString();
if (theFee) {
feesArray.push(parseInt(theFee, 10));
} else {
feesArray.push(0);
}
});
if (this.inverted && finalArray.length) {
feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
}
2020-03-29 18:59:04 +02:00
finalArray.push(feesArray);
}
finalArray.reverse();
return finalArray;
}
}