Renaming Mempool blocks to "next block" + ux fixes

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

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

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

@@ -28,6 +28,7 @@ export class FeeDistributionGraphComponent implements OnChanges {
       low: 0,
       axisY: {
         showLabel: false,
+        offset: 0
       },
       axisX: {
         showGrid: true,

frontend/src/app/components/mempool-block/mempool-block.component.html

@@ -1,11 +1,9 @@
 <div class="container-xl" *ngIf="mempoolBlock$ | async as mempoolBlock">
 
   <div class="title-block">
-    <h1>Mempool block</h1>
+    <h1>{{ getGetOrdinal() }}</h1>
   </div>
 
-  <br>
-
   <div class="box">
     <div class="row">
       <div class="col-sm">

frontend/src/app/components/mempool-block/mempool-block.component.ts

@@ -22,20 +22,20 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit(): void {
-    this.seoService.setTitle('Mempool block');
     this.mempoolBlock$ = this.route.paramMap
       .pipe(
         switchMap((params: ParamMap) => {
           this.mempoolBlockIndex = parseInt(params.get('id'), 10) || 0;
           return this.stateService.mempoolBlocks$
-            .pipe(
-              map((mempoolBlocks) => {
-                while (!mempoolBlocks[this.mempoolBlockIndex]) {
-                  this.mempoolBlockIndex--;
-                }
-                return mempoolBlocks[this.mempoolBlockIndex];
-              })
-            );
+          .pipe(
+            map((mempoolBlocks) => {
+              while (!mempoolBlocks[this.mempoolBlockIndex]) {
+                this.mempoolBlockIndex--;
+              }
+              this.seoService.setTitle(this.getGetOrdinal());
+              return mempoolBlocks[this.mempoolBlockIndex];
+            })
+          );
         }),
         tap(() => {
           this.stateService.markBlock$.next({ mempoolBlockIndex: this.mempoolBlockIndex });
@@ -47,4 +47,14 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
     this.stateService.markBlock$.next({});
   }
 
+  getGetOrdinal() {
+    if (this.mempoolBlockIndex === 0) {
+      return 'Next block';
+    }
+
+    const s = ['th', 'st', 'nd', 'rd'];
+    const v = this.mempoolBlockIndex + 1 % 100;
+    return this.mempoolBlockIndex + 1 + (s[(v - 20) % 10] || s[v] || s[0]) + ' next block';
+ }
+
 }

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -25,6 +25,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   markIndex: number;
   txFeePerVSize: number;
 
+  resetTransitionTimeout: number;
+
   constructor(
     private router: Router,
     private stateService: StateService,
@@ -133,10 +135,11 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
       this.arrowVisible = false;
       return;
     } else if (this.markIndex > -1) {
+      clearTimeout(this.resetTransitionTimeout);
       this.transition = 'inherit';
       this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
       this.arrowVisible = true;
-      setTimeout(() => this.transition = '1s');
+      this.resetTransitionTimeout = window.setTimeout(() => this.transition = '1s', 100);
       return;
     }
 

frontend/src/app/components/statistics/chartist.component.ts

@@ -636,7 +636,7 @@ Chartist.plugins.ctPointLabels = (options) => {
           labelClass: 'ct-point-label',
           labelOffset: {
               x: 0,
-              y: -10
+              y: -7
           },
           textAnchor: 'middle'
       };