Move difficulty adjustment table in the merged hashrate component

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

@@ -30,4 +30,28 @@
     <div class="spinner-border text-light"></div>
   </div>
   
+  <div class="container-xl mt-3">
+    <table class="table table-borderless table-sm text-center" *ngIf="!widget">
+      <thead>
+        <tr>
+          <th i18n="mining.rank">Block</th>
+          <th class="d-none d-md-block" i18n="block.timestamp">Timestamp</th>
+          <th i18n="mining.adjusted">Adjusted</th>
+          <th i18n="mining.difficulty">Difficulty</th>
+          <th i18n="mining.change">Change</th>
+        </tr>
+      </thead>
+      <tbody *ngIf="(hashrateObservable$ | async) as data">
+        <tr *ngFor="let diffChange of data.difficulty">
+          <td><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a></td>
+          <td class="d-none d-md-block">&lrm;{{ diffChange.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
+          <td><app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since></td>
+          <td class="d-none d-md-block">{{ formatNumber(diffChange.difficulty, locale, '1.2-2') }}</td>
+          <td class="d-block d-md-none">{{ diffChange.difficultyShorten }}</td>
+          <td [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
 </div>

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

@@ -57,16 +57,11 @@ export class HashrateChartComponent implements OnInit {
         switchMap((timespan) => {
           return this.apiService.getHistoricalHashrate$(timespan)
             .pipe(
-              map((data: any) => {
+              tap((data: any) => {
+                // We generate duplicated data point so the tooltip works nicely
                 const diffFixed = [];
-                diffFixed.push({
+                let diffIndex = 0;
-                  timestamp: data.hashrates[0].timestamp,
-                  difficulty: data.difficulty[0].difficulty
-                });
-
-                let diffIndex = 1;
                 let hashIndex = 0;
-
                 while (hashIndex < data.hashrates.length) {
                   if (diffIndex >= data.difficulty.length) {
                     while (hashIndex < data.hashrates.length) {
@@ -89,13 +84,9 @@ export class HashrateChartComponent implements OnInit {
                   ++diffIndex;
                 }
 
-                data.difficulty = diffFixed;
-                return data;
-              }),
-              tap((data: any) => {
                 this.prepareChartOptions({
                   hashrates: data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]),
-                  difficulty: data.difficulty.map(val => [val.timestamp * 1000, val.difficulty])
+                  difficulty: diffFixed.map(val => [val.timestamp * 1000, val.difficulty])
                 });
                 this.isLoading = false;
               }),
@@ -103,8 +94,22 @@ export class HashrateChartComponent implements OnInit {
                 const availableTimespanDay = (
                   (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
                 ) / 3600 / 24;
+
+                const tableData = [];
+                for (let i = data.difficulty.length - 1; i > 0; --i) {
+                  const selectedPowerOfTen: any = selectPowerOfTen(data.difficulty[i].difficulty);
+                  const change = (data.difficulty[i].difficulty / data.difficulty[i - 1].difficulty - 1) * 100;
+
+                  tableData.push(Object.assign(data.difficulty[i], {
+                    change: change,
+                    difficultyShorten: formatNumber(
+                      data.difficulty[i].difficulty / selectedPowerOfTen.divider,
+                      this.locale, '1.2-2') + selectedPowerOfTen.unit
+                  }));
+                }
                 return {
                   availableTimespanDay: availableTimespanDay,
+                  difficulty: tableData
                 };
               }),
             );