UI/UX - New component for difficult adjustment. (#602)

* Add next difficulty blocks.
Add next difficulty target date.
Add next difficulty total progress.
Add ajustment difficulty avg min per block.

* Fix typo.

* Trigger difficulty calculation every 5 seconds.

* Add rxjs timer to difficultyEpoch.

* Fix pipe.

* Fix small bar position.

* Change i18n strings.

* Fix typo.

* Add time-until component.

* Speed up difficultyEpoch timer to 1000 ms.

* Fix values to 2 decimal places.

* Add title to fee and difficulty adjustment cards.

* Add title outside the card.

* Fix title to center position.

* Add other titles.

* Add new transalations strings.
Refactor time span component.

* Fix difficulty adjustment i18n string.
Fix duplicated i18n strings.

frontend/src/app/dashboard/dashboard.component.html

@@ -1,9 +1,9 @@
 
 <div class="container-xl dashboard-container">
-
   <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
     <ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
-      <div class="col">
+      <div class="col card-wrapper">
+        <div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
         <div class="card">
           <div class="card-body">
             <app-fees-box class="d-block"></app-fees-box>
@@ -29,7 +29,8 @@
       </div>
     </ng-template>
     <ng-template #expanded>
-      <div class="col">
+      <div class="col card-wrapper">
+        <div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
         <div class="card">
           <div class="card-body">
             <app-fees-box class="d-block"></app-fees-box>
@@ -198,14 +199,61 @@
 </ng-template>
 
 <ng-template #difficultyEpoch>
-  <div class="card">
-    <div class="card-body more-padding">
-      <h5 class="card-title" i18n="dashboard.difficulty-adjustment">Difficulty adjustment</h5>
-      <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
-        <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
-        <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
-        <div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
-        <div class="progress-text"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
+  <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+  <div class="card-wrapper">
+    <div class="card">
+      <div class="card-body more-padding">
+        <div class="difficulty-adjustment-container" *ngIf="(difficultyEpoch$ | async) as epochData; else loadingDifficulty">
+          <div class="item">
+            <h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
+            <div class="card-text">
+              <ng-container *ngTemplateOutlet="epochData.remainingBlocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.remainingBlocks }"></ng-container>
+              <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+              <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
+            </div>
+            <div class="symbol"><app-time-until [time]="epochData.remainingTime" [fastRender]="true"></app-time-until></div>
+          </div>
+          <div class="item">
+            <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
+            <div class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">{{ epochData.change | number: '1.2-2' }} <span class="symbol">%</span></div>
+            <div class="symbol">~{{ epochData.timeAvg }} <span i18n="difficulty-box.mins-per-block">mins per block</span></div>
+          </div>
+          <div class="item">
+            <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
+            <div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
+            <div class="progress small-bar">
+              <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
+              <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
+
+<ng-template #loadingDifficulty>
+  <div class="difficulty-skeleton loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
       </div>
     </div>
   </div>

frontend/src/app/dashboard/dashboard.component.scss

@@ -42,7 +42,7 @@
 }
 
 .more-padding {
-  padding: 1.25rem 2rem 1.25rem 2rem;
+  padding: 18px;
 }
 
 .graph-card {
@@ -212,4 +212,116 @@
 
 .terms-of-service {
   margin-top: 1rem;
+}
+
+.small-bar {
+  height: 8px;
+  top: -4px;
+}
+
+.difficulty-adjustment-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 76px;
+  .shared-block {
+    color: #ffffff66;
+    font-size: 12px;
+  }
+  .item {    
+    max-width: 130px;
+    padding: 0 5px;
+    width: 100%;
+    &:nth-child(1){
+      display: none;
+      @media (min-width: 485px) {
+        display: table-cell;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: table-cell;
+      }
+    }
+  }
+  .card-text {
+    font-size: 22px;
+    margin-top: -9px;
+    position: relative;
+  }
+}
+
+
+.difficulty-skeleton {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }    
+    &:first-child{
+      display: none;
+      @media (min-width: 485px) {
+        display: block;
+      }    
+      @media (min-width: 768px) {
+        display: none;
+      }    
+      @media (min-width: 992px) {
+        display: block;
+      }    
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.loading-container{
+  min-height: 76px;
+}
+
+.card-text {
+  .skeleton-loader {
+    width: 100%;
+    display: block;
+    margin: 7px auto;
+    &:first-child {
+      max-width: 80px;
+    }
+    &:last-child {
+      max-width: 110px;
+    }
+  }
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+.card-wrapper {
+  .card {
+    height: auto !important;
+  }
+  .card-body {
+    display: flex;
+    flex: inherit;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 22px 20px;
+  }
 }

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
-import { combineLatest, merge, Observable, of } from 'rxjs';
+import { combineLatest, merge, Observable, of, timer } from 'rxjs';
 import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
 import { Block } from '../interfaces/electrs.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
@@ -22,6 +22,12 @@ interface EpochProgress {
   green: string;
   red: string;
   change: number;
+  progress: string;
+  remainingBlocks: number;
+  newDifficultyHeight: number;
+  colorAdjustments: string;
+  timeAvg: string;
+  remainingTime: number;
 }
 
 interface MempoolInfoData {
@@ -108,38 +114,67 @@ export class DashboardComponent implements OnInit {
       })
     );
 
-    this.difficultyEpoch$ = combineLatest([
-      this.stateService.blocks$.pipe(map(([block]) => block)),
-      this.stateService.lastDifficultyAdjustment$
-    ])
-    .pipe(
-      map(([block, DATime]) => {
-        const now = new Date().getTime() / 1000;
-        const diff = now - DATime;
-        const blocksInEpoch = block.height % 2016;
-        const estimatedBlocks = Math.round(diff / 60 / 10);
-        const difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+    this.difficultyEpoch$ = timer(0, 1000)
+      .pipe(
+        switchMap(() => combineLatest([
+          this.stateService.blocks$.pipe(map(([block]) => block)),
+          this.stateService.lastDifficultyAdjustment$
+        ])),
+        map(([block, DATime]) => {
+          const now = new Date().getTime() / 1000;
+          const diff = now - DATime;
+          const blocksInEpoch = block.height % 2016;
+          const estimatedBlocks = Math.round(diff / 60 / 10);
+          let difficultyChange = 0;
+          if (blocksInEpoch > 0) {
+            difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+          }
 
-        let base = 0;
-        let green = 0;
-        let red = 0;
+          let base = 0;
+          let green = 0;
+          let red = 0;
 
-        if (blocksInEpoch >= estimatedBlocks) {
-          base = estimatedBlocks / 2016 * 100;
-          green = (blocksInEpoch - estimatedBlocks) / 2016 * 100;
-        } else {
-          base = blocksInEpoch / 2016 * 100;
-          red = Math.min((estimatedBlocks - blocksInEpoch) / 2016 * 100, 100 - base);
-        }
+          if (blocksInEpoch >= estimatedBlocks) {
+            base = estimatedBlocks / 2016 * 100;
+            green = (blocksInEpoch - estimatedBlocks) / 2016 * 100;
+          } else {
+            base = blocksInEpoch / 2016 * 100;
+            red = Math.min((estimatedBlocks - blocksInEpoch) / 2016 * 100, 100 - base);
+          }
 
-        return {
-          base: base + '%',
-          green: green + '%',
-          red: red + '%',
-          change: difficultyChange,
-        };
-      })
-    );
+          let colorAdjustments = '#dc3545';
+          if (difficultyChange >= 0) {
+            colorAdjustments = '#299435';
+          }
+
+          const timeAvgDiff = difficultyChange * 0.1;
+
+          let timeAvgMins = 10;
+          if (timeAvgDiff > 0 ){
+            timeAvgMins -= Math.abs(timeAvgDiff);
+          } else {
+            timeAvgMins += Math.abs(timeAvgDiff);
+          }
+          const remainingBlocks = 2016 - blocksInEpoch;
+          const nowMilliseconds = now * 1000;
+          const timeAvgMilliseconds = timeAvgMins * 60 * 1000;
+          const remainingBlocsMilliseconds = remainingBlocks * timeAvgMilliseconds;
+
+          return {
+            base: base + '%',
+            green: green + '%',
+            red: red + '%',
+            change: difficultyChange,
+            progress: base.toFixed(2),
+            remainingBlocks,
+            timeAvg: timeAvgMins.toFixed(0),
+            colorAdjustments,
+            blocksInEpoch,
+            newDifficultyHeight: block.height + remainingBlocks,
+            remainingTime: remainingBlocsMilliseconds + nowMilliseconds
+          };
+        })
+      );
 
     this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
       .pipe(