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); }