Update fee distribution graph and fix arrow.

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

@@ -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'"

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

@@ -1,7 +1,6 @@
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import * as Chartist from 'chartist';
 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 => {
+        showLabel: false,
-          return this.vbytesPipe.transform(value, 2);
       },
-        offset: 60
+      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)
     };
   }
 

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]) {

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';

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