Show all difficulty adjustment in a table - Need pagination

backend/src/repositories/BlocksRepository.ts

@@ -232,7 +232,7 @@ class BlocksRepository {
 
     const connection = await DB.pool.getConnection();
 
-    let query = `SELECT MIN(blockTimestamp) as timestamp, difficulty
+    let query = `SELECT MIN(blockTimestamp) as timestamp, difficulty, height
       FROM blocks`;
 
     if (interval) {

frontend/src/app/components/difficulty-chart/difficulty-chart.component.html

@@ -5,4 +5,23 @@
     <div class="spinner-border text-light"></div>
   </div>
 
+  <table class="table table-borderless table-sm text-center">
+    <thead>
+      <tr>
+        <th i18n="mining.rank">Block</th>
+        <th i18n="block.timestamp">Timestamp</th>
+        <th i18n="mining.difficulty">Difficulty</th>
+        <th i18n="mining.change">Change</th>
+      </tr>
+    </thead>
+    <tbody *ngIf="(difficultyObservable$ | async) as diffChange">
+      <tr *ngFor="let change of diffChange">
+        <td><a [routerLink]="['/block' | relativeUrl, change[2]]">{{ change[2] }}</a></td>
+        <td>&lrm;{{ change[0] | date:'yyyy-MM-dd HH:mm' }}</td>
+        <td>{{ formatNumber(change[1], locale, '1.2-2') }}</td>
+        <td [style]="change[3] >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(change[3], locale, '1.2-2') }}%</td>
+      </tr>
+    </tbody>
+  </table>
+
 </div>

frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
 import { EChartsOption } from 'echarts';
 import { Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map, share, tap } from 'rxjs/operators';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { formatNumber } from "@angular/common";
 
 @Component({
   selector: 'app-difficulty-chart',
@@ -26,8 +27,10 @@ export class DifficultyChartComponent implements OnInit {
 
   difficultyObservable$: Observable<any>;
   isLoading = true;
+  formatNumber = formatNumber;
 
   constructor(
+    @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
   ) {
@@ -38,12 +41,25 @@ export class DifficultyChartComponent implements OnInit {
     this.difficultyObservable$ = this.apiService.getHistoricalDifficulty$(undefined)
       .pipe(
         map(data => {
-          return data.map(val => [val.timestamp, val.difficulty])
+          let formatted = [];
+          for (let i = 0; i < data.length - 1; ++i) {
+            const change = (data[i].difficulty / data[i + 1].difficulty - 1) * 100;
+            formatted.push([
+              data[i].timestamp,
+              data[i].difficulty,
+              data[i].height,
+              formatNumber(change, this.locale, '1.2-2'),
+              change,
+              formatNumber(data[i].difficulty, this.locale, '1.2-2'),
+            ]);
+          }
+          return formatted;
         }),
         tap(data => {
           this.prepareChartOptions(data);
           this.isLoading = false;
-        })
+        }),
+        share()
       )
   }
 

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -43,7 +43,7 @@
     </form>
   </div>
 
-  <table class="table table-borderless text-center pools-table" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50">
+  <table class="table table-borderless text-center pools-table">
     <thead>
       <tr>
         <th class="d-none d-md-block" i18n="mining.rank">Rank</th>