Split difficult adjustment table - Update indexing progress every 60sec

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html

@@ -0,0 +1,33 @@
+<div>
+  <table class="table latest-transactions" style="min-height: 295px">
+    <thead>
+      <tr>
+        <th class="d-none d-md-block" i18n="block.height">Height</th>
+        <th i18n="mining.adjusted" class="text-left">Adjusted</th>
+        <th i18n="mining.difficulty" class="text-right">Difficulty</th>
+        <th i18n="mining.change" class="text-right">Change</th>
+      </tr>
+    </thead>
+    <tbody *ngIf="(hashrateObservable$ | async) as data">
+      <tr *ngFor="let diffChange of data.difficulty">
+        <td class="d-none d-md-block"><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height
+            }}</a></td>
+        <td class="text-left">
+          <app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since>
+        </td>
+        <td class="text-right">{{ diffChange.difficultyShorten }}</td>
+        <td class="text-right" [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">
+          {{ diffChange.change >= 0 ? '+' : '' }}{{ formatNumber(diffChange.change, locale, '1.2-2') }}%
+        </td>
+      </tr>
+    </tbody>
+    <tbody *ngIf="isLoading">
+      <tr *ngFor="let item of [1,2,3,4,5]">
+        <td class="d-none d-md-block w-75"><span class="skeleton-loader"></span></td>
+        <td class="text-left"><span class="skeleton-loader w-75"></span></td>
+        <td class="text-right"><span class="skeleton-loader w-75"></span></td>
+        <td class="text-right"><span class="skeleton-loader w-75"></span></td>
+      </tr>
+    </tbody>
+  </table>
+</div>

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.scss

@@ -0,0 +1,40 @@
+.latest-transactions {
+  width: 100%;
+  text-align: left;
+  table-layout:fixed;
+  tr, td, th {
+    border: 0px;
+  }
+  td {
+    width: 25%;
+  }
+  .table-cell-satoshis {
+    display: none;
+    text-align: right;
+    @media (min-width: 576px) {
+      display: table-cell;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+    @media (min-width: 1100px) {
+      display: table-cell;
+    }
+  }
+  .table-cell-fiat {
+    display: none;
+    text-align: right;
+    @media (min-width: 485px) {
+      display: table-cell;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+    @media (min-width: 992px) {
+      display: table-cell;
+    }
+  }
+  .table-cell-fees {
+    text-align: right;
+  }
+}

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.components.ts

@@ -0,0 +1,65 @@
+import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ApiService } from 'src/app/services/api.service';
+import { formatNumber } from '@angular/common';
+import { selectPowerOfTen } from 'src/app/bitcoin.utils';
+
+@Component({
+  selector: 'app-difficulty-adjustments-table',
+  templateUrl: './difficulty-adjustments-table.component.html',
+  styleUrls: ['./difficulty-adjustments-table.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
+})
+export class DifficultyAdjustmentsTable implements OnInit {
+  hashrateObservable$: Observable<any>;
+  isLoading = true;
+  formatNumber = formatNumber;
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private apiService: ApiService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.hashrateObservable$ = this.apiService.getHistoricalHashrate$('1y')
+      .pipe(
+        map((data: any) => {
+          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
+            }));
+          }
+          this.isLoading = false;
+
+          return {
+            availableTimespanDay: availableTimespanDay,
+            difficulty: tableData.slice(0, 5),
+          };
+        }),
+      );
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
+}