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

Update fee distribution graph and fix arrow.

Browse Source
This commit is contained in:
softsimon 2020-03-20 02:11:40 +07:00
parent e84ec7dd86
commit 4ae5576452
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
5 changed files with 59 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<div style="height: 400px;" *ngIf="mempoolVsizeFeesData; else loadingFees">
<div style="height: 350px;" *ngIf="mempoolVsizeFeesData; else loadingFees">
<app-chartist
[data]="mempoolVsizeFeesData"
[type]="'Line'"

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

@ -1,7 +1,6 @@
import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import * as Chartist from 'chartist';
import { Component, Input, OnChanges } from '@angular/core';
import { VbytesPipe } from 'src/app/pipes/bytes-pipe/vbytes.pipe';
import * as Chartist from 'chartist';
@Component({
selector: 'app-fee-distribution-graph',
@ -14,16 +13,10 @@ export class FeeDistributionGraphComponent implements OnChanges {
mempoolVsizeFeesData: any;
mempoolVsizeFeesOptions: any;
mempoolVsizeFeesPieData: any;
mempoolVsizeFeesPieOptions: any;
feeLevels = [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];
radioGroupForm: FormGroup;
constructor(
private vbytesPipe: VbytesPipe,
) { }
ngOnChanges() {
@ -31,14 +24,22 @@ export class FeeDistributionGraphComponent implements OnChanges {
showArea: true,
showLine: true,
fullWidth: true,
showPoint: false,
showPoint: true,
low: 0,
axisY: {
labelInterpolationFnc: (value: number): any => {
return this.vbytesPipe.transform(value, 2);
},
offset: 60
showLabel: false,
},
axisX: {
showGrid: true,
showLabel: false,
offset: 0
},
plugins: [
Chartist.plugins.ctPointLabels({
textAnchor: 'middle',
labelInterpolationFnc: (value) => Math.round(value)
})
]
};
const fees = this.feeRange;
@ -46,12 +47,13 @@ export class FeeDistributionGraphComponent implements OnChanges {
for (let i = 0; i < this.feeLevels.length; i++) {
let total = 0;
for (let j = 0; j < fees.length; j++) {
// for (let j = 0; j < fees.length; j++) {
for (const fee of fees) {
if (i === this.feeLevels.length - 1) {
if (fees[j] >= this.feeLevels[i]) {
if (fee >= this.feeLevels[i]) {
total += 1;
}
} else if (fees[j] >= this.feeLevels[i] && fees[j] < this.feeLevels[i + 1]) {
} else if (fee >= this.feeLevels[i] && fee < this.feeLevels[i + 1]) {
total += 1;
}
}
@ -59,7 +61,8 @@ export class FeeDistributionGraphComponent implements OnChanges {
}
this.mempoolVsizeFeesData = {
series: [fees]
series: [fees],
labels: fees.map((d, i) => i)
};
}

11
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -91,18 +91,17 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
calculateTransactionPosition() {
if ((!this.txFeePerVSize && this.markIndex === -1) || !this.mempoolBlocks) {
if ((!this.txFeePerVSize && (this.markIndex === undefined || this.markIndex === -1)) || !this.mempoolBlocks) {
this.arrowVisible = false;
return;
} else if (this.markIndex > -1) {
this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
this.arrowVisible = true;
return;
}
this.arrowVisible = true;
if (this.markIndex > -1) {
this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
return;
}
for (const block of this.mempoolBlocks) {
for (let i = 0; i < block.feeRange.length - 1; i++) {
if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {

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

@ -630,6 +630,32 @@ Chartist.plugins.tooltip = function (options: any) {
}
};
Chartist.plugins.ctPointLabels = (options) => {
return function ctPointLabels(chart) {
const defaultOptions2 = {
labelClass: 'ct-point-label',
labelOffset: {
x: 0,
y: -10
},
textAnchor: 'middle'
};
options = Chartist.extend({}, defaultOptions2, options);
if (chart instanceof Chartist.Line) {
chart.on('draw', (data) => {
if (data.type === 'point') {
data.group.elem('text', {
x: data.x + options.labelOffset.x,
y: data.y + options.labelOffset.y,
style: 'text-anchor: ' + options.textAnchor
}, options.labelClass).text(options.labelInterpolationFnc(data.value.y)); // 07.11.17 added ".y"
}
});
}
};
};
function show(element: any) {
if (!hasClass(element, 'tooltip-show')) {
element.className = element.className + ' tooltip-show';

6
frontend/src/styles.scss
View File

@ -223,6 +223,12 @@ $ct-series-colors: (
color: rgba(255, 255, 255, 0.4);
}
.ct-point-label {
fill: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1);
font-size: 14px;
}
.ct-grid {
stroke: rgba(255, 255, 255, 0.2);
}