Add new component incoming-transactions-graph;
Refactor component mempool-graph; Refactor component fee-distribution-graph; Add incoming-transactions-graph to dashboard; Add incoming-transactions-graph to statistics; Add incoming-transactions-graph to television; Add mempool-graph to dashboard; Add mempool-graph to statistics; Add mempool-graph to television; Remove chartist.component;
This commit is contained in:
Miguel Medeiros
@@ -1,6 +1 @@
|
||||
<app-chartist
|
||||
*ngIf="mempoolVsizeFeesData"
|
||||
[data]="mempoolVsizeFeesData"
|
||||
[type]="'Line'"
|
||||
[options]="mempoolVsizeFeesOptions">
|
||||
</app-chartist>
|
||||
<div class="echarts" echarts [options]="mempoolVsizeFeesOptions"></div>
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
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';
|
||||
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';
|
||||
import { EChartsOption } from 'echarts';
|
||||
import { feeLevels, chartColors } from 'src/app/app.constants';
|
||||
|
||||
interface AxisObject {
|
||||
axisDimension: string;
|
||||
axisIndex: number;
|
||||
seriesData: any;
|
||||
value: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-mempool-graph',
|
||||
@@ -12,111 +20,50 @@ import { StorageService } from 'src/app/services/storage.service';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
@Input() data;
|
||||
@Input() data: any[];
|
||||
@Input() limitFee = 300;
|
||||
@Input() height: number | string = 200;
|
||||
@Input() top: number | string = 20;
|
||||
@Input() right: number | string = 10;
|
||||
@Input() left: number | string = 75;
|
||||
@Input() dateSpan = '2h';
|
||||
@Input() showLegend = true;
|
||||
@Input() offsetX = 40;
|
||||
@Input() small = false;
|
||||
|
||||
mempoolVsizeFeesOptions: any;
|
||||
mempoolVsizeFeesData: any;
|
||||
mempoolVsizeFeesOptions: EChartsOption;
|
||||
|
||||
isMobile = window.innerWidth <= 767.98;
|
||||
inverted: boolean;
|
||||
|
||||
constructor(
|
||||
private vbytesPipe: VbytesPipe,
|
||||
private stateService: StateService,
|
||||
@Inject(LOCALE_ID) private locale: string,
|
||||
private storageService: StorageService,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
let labelHops = !this.showLegend ? 48 : 24;
|
||||
if (this.small) {
|
||||
labelHops = labelHops / 2;
|
||||
}
|
||||
|
||||
if (this.isMobile) {
|
||||
labelHops = 96;
|
||||
}
|
||||
|
||||
const labelInterpolationFnc = (value: any, index: any) => {
|
||||
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;
|
||||
};
|
||||
|
||||
this.mempoolVsizeFeesOptions = {
|
||||
showArea: true,
|
||||
showLine: false,
|
||||
fullWidth: true,
|
||||
showPoint: false,
|
||||
stackedLine: !this.inverted,
|
||||
low: 0,
|
||||
axisX: {
|
||||
labelInterpolationFnc: labelInterpolationFnc,
|
||||
offset: this.offsetX,
|
||||
},
|
||||
axisY: {
|
||||
labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true),
|
||||
offset: this.showLegend ? 160 : 60,
|
||||
},
|
||||
plugins: this.inverted ? [Chartist.plugins.ctTargetLine({ value: this.stateService.blockVSize })] : []
|
||||
};
|
||||
|
||||
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,
|
||||
250, 300, 350, 400].map((sat, i, arr) => {
|
||||
if (sat === 400) {
|
||||
return '350+';
|
||||
}
|
||||
if (i === 0) {
|
||||
return '0 - 1';
|
||||
}
|
||||
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 })
|
||||
);
|
||||
}
|
||||
this.mountFeeChart();
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
this.inverted = this.storageService.getValue('inverted-graph') === 'true';
|
||||
// this.inverted = this.storageService.getValue('inverted-graph') === 'true';
|
||||
this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
|
||||
this.mountFeeChart();
|
||||
}
|
||||
|
||||
handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
|
||||
mempoolStats.reverse();
|
||||
const labels = mempoolStats.map(stats => stats.added);
|
||||
|
||||
const finalArrayVbyte = this.generateArray(mempoolStats);
|
||||
const finalArrayVByte = this.generateArray(mempoolStats);
|
||||
|
||||
// Only Liquid has lower than 1 sat/vb transactions
|
||||
if (this.stateService.network !== 'liquid') {
|
||||
finalArrayVbyte.shift();
|
||||
finalArrayVByte.shift();
|
||||
}
|
||||
|
||||
return {
|
||||
labels: labels,
|
||||
series: finalArrayVbyte
|
||||
series: finalArrayVByte
|
||||
};
|
||||
}
|
||||
|
||||
@@ -134,12 +81,128 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
feesArray.push(0);
|
||||
}
|
||||
});
|
||||
if (this.inverted && finalArray.length) {
|
||||
feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
|
||||
}
|
||||
// if (this.inverted && finalArray.length) {
|
||||
// feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
|
||||
// }
|
||||
finalArray.push(feesArray);
|
||||
}
|
||||
finalArray.reverse();
|
||||
return finalArray;
|
||||
}
|
||||
|
||||
mountFeeChart(){
|
||||
const { labels, series } = this.mempoolVsizeFeesData;
|
||||
|
||||
const legendNames: string[] = feeLevels.map((sat, i, arr) => {
|
||||
if (sat > this.limitFee) { return `${this.limitFee}+`; }
|
||||
if (i === 0) { return '0 - 1'; }
|
||||
return arr[i - 1] + ' - ' + sat;
|
||||
});
|
||||
|
||||
const yAxisSeries = series.map((value: Array<number>, index: number) => {
|
||||
return {
|
||||
name: labels[index].name,
|
||||
type: 'line',
|
||||
stack: 'total',
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 1,
|
||||
color: chartColors[index],
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
borderColor: 'none',
|
||||
color: '#fff',
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
opacity: 0.75,
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
data: this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true)
|
||||
};
|
||||
});
|
||||
|
||||
this.mempoolVsizeFeesOptions = {
|
||||
color: chartColors,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
position: (pos, params, el, elRect, size) => {
|
||||
const positions = { top: -20 };
|
||||
positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 80;
|
||||
return positions;
|
||||
},
|
||||
extraCssText: `width: 150px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;`,
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
formatter: (axis: AxisObject) => {
|
||||
if (axis.axisDimension === 'y') {
|
||||
return `${this.vbytesPipe.transform(axis.value, 2, 'vB', 'MvB', true)}`;
|
||||
}
|
||||
if (axis.axisDimension === 'x') {
|
||||
return axis.value;
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
formatter: (params: any) => {
|
||||
const colorSpan = (index: number) => `<div class="indicator" style="background-color: ` + chartColors[index] + `"></div>`;
|
||||
const legendName = (index: number) => legendNames[index];
|
||||
let itemFormatted = '<div>' + params[0].axisValue + '</div>';
|
||||
params.map((item: any, index: number) => {
|
||||
if (feeLevels[index - 1] < this.limitFee) {
|
||||
itemFormatted += `<div class="item">
|
||||
${colorSpan(index - 1)} ${legendName(index)}
|
||||
<div class="grow"></div>
|
||||
<div class="value">${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', true)}</div>
|
||||
</div>`;
|
||||
}
|
||||
});
|
||||
return `<div class="fees-wrapper-tooltip-chart">${itemFormatted}</div>`;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
height: this.height,
|
||||
right: this.right,
|
||||
top: this.top,
|
||||
left: this.left,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: labels.map((value: any) => formatDate(value, 'HH:mm', this.locale)),
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: (value: number) => (`${this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true)}`),
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: '#ffffff66',
|
||||
opacity: 0.25,
|
||||
}
|
||||
}
|
||||
},
|
||||
series: yAxisSeries
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user