diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
index 5ae87fc39..8551bcd2a 100644
--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
@@ -1,4 +1,4 @@
-
+
{
- 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)
};
}
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index d39d91f26..73824996d 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -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]) {
diff --git a/frontend/src/app/components/statistics/chartist.component.ts b/frontend/src/app/components/statistics/chartist.component.ts
index f37bb2a8b..da0f53a5e 100644
--- a/frontend/src/app/components/statistics/chartist.component.ts
+++ b/frontend/src/app/components/statistics/chartist.component.ts
@@ -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';
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 2f2574cb8..ee98672b3 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -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);
}