From 751c7d6e698770ce54088b7bbd21cd8f12379161 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Mon, 26 Jul 2021 16:00:40 -0300
Subject: [PATCH] Bugfix: Dashboard - Difficulty adjustment component. (#663)

* Add color to previous retarget.
Add absolute number pipe.
Change plus and minus signs to fa icons.
Change Fee Estimate title to Transactions Fees.
Set min and max difficulty adjustments.

* Add projectID to cypress conf.

* Change icon to fa-caret.

* Remove unecessary icons.
---
 frontend/cypress.json                         |  1 +
 frontend/src/app/app.module.ts                |  5 ++-
 .../app/dashboard/dashboard.component.html    | 25 +++++++++++---
 .../app/dashboard/dashboard.component.scss    | 12 +++++++
 .../src/app/dashboard/dashboard.component.ts  | 34 ++++++++++++++++---
 .../pipes/absolute/absolute.pipe.spec.ts      |  8 +++++
 .../shared/pipes/absolute/absolute.pipe.ts    |  8 +++++
 frontend/src/app/shared/shared.module.ts      |  3 ++
 8 files changed, 86 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/app/shared/pipes/absolute/absolute.pipe.spec.ts
 create mode 100644 frontend/src/app/shared/pipes/absolute/absolute.pipe.ts

diff --git a/frontend/cypress.json b/frontend/cypress.json
index 7e665aa0b..cb6859f5c 100644
--- a/frontend/cypress.json
+++ b/frontend/cypress.json
@@ -1,4 +1,5 @@
 {
+  "projectId": "ry4br7",
   "integrationFolder": "cypress/integration",
   "supportFile": "cypress/support/index.ts",
   "videosFolder": "cypress/videos",
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index f44c6d6ab..a5a732b3b 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -45,7 +45,7 @@ import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { CodeTemplateComponent } from './components/api-docs/code-template.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@@ -140,5 +140,8 @@ export class AppModule {
     library.addIcons(faRedoAlt);
     library.addIcons(faArrowAltCircleRight);
     library.addIcons(faExternalLinkAlt);
+    library.addIcons(faSortUp);
+    library.addIcons(faCaretUp);
+    library.addIcons(faCaretDown);
   }
 }
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 4a0eff8b9..804de5ffb 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -3,7 +3,7 @@
   <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 card-wrapper">
-        <div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
+        <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
         <div class="card">
           <div class="card-body">
             <app-fees-box class="d-block"></app-fees-box>
@@ -30,7 +30,7 @@
     </ng-template>
     <ng-template #expanded>
       <div class="col card-wrapper">
-        <div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
+        <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
         <div class="card">
           <div class="card-body">
             <app-fees-box class="d-block"></app-fees-box>
@@ -215,8 +215,25 @@
           </div>
           <div class="item">
             <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
-            <div class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">{{epochData.change > 0 ? '+' : ''}}{{ epochData.change | number: '1.2-2' }} <span class="symbol">%</span></div>
-            <div class="symbol" i18n="difficulty-box.previous-retarget">Previous: {{epochData.previousRetarget > 0 ? '+' : ''}}{{ epochData.previousRetarget | number: '1.2-2' }} %</div>
+            <div class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">
+              <span *ngIf="epochData.change > 0; else arrowDownDifficulty" >
+                <fa-icon class="retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
+              </span>
+              <ng-template #arrowDownDifficulty >
+                <fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
+              </ng-template>
+              {{ epochData.change | absolute | number: '1.2-2' }} <span class="symbol">%</span>
+            </div>
+            <div class="symbol">
+              <span i18n="difficulty-box.previous">Previous</span>: 
+              <span [ngStyle]="{'color': epochData.colorPreviousAdjustments}">
+                <span *ngIf="epochData.previousRetarget > 0; else arrowDownPreviousDifficulty" >
+                  <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
+                </span>
+                <ng-template #arrowDownPreviousDifficulty >
+                  <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
+                </ng-template>
+                {{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %</div>
           </div>
           <div class="item">
             <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index de68f8af6..812a7c9d2 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -325,4 +325,16 @@
     justify-content: space-around;
     padding: 22px 20px;
   }
+}
+
+.retarget-sign {
+  margin-right: -3px;
+  font-size: 14px;
+  top: -2px;
+  position: relative;
+}
+
+.previous-retarget-sign {
+  margin-right: -2px;
+  font-size: 10px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index dd9890a6b..9e28e96ed 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -24,6 +24,7 @@ interface EpochProgress {
   remainingBlocks: number;
   newDifficultyHeight: number;
   colorAdjustments: string;
+  colorPreviousAdjustments: string;
   timeAvg: string;
   remainingTime: number;
   previousRetarget: number;
@@ -143,19 +144,41 @@ export class DashboardComponent implements OnInit {
             colorAdjustments = '#299435';
           }
 
+          let colorPreviousAdjustments = '#dc3545';
+          if(previousRetarget){
+            if (previousRetarget >= 0) {
+              colorPreviousAdjustments = '#299435';
+            }
+            if (previousRetarget === 0) {
+              colorPreviousAdjustments = '#ffffff66';
+            }
+          }else{
+            colorPreviousAdjustments = '#ffffff66';
+          }
+
+
           const timeAvgDiff = difficultyChange * 0.1;
 
           let timeAvgMins = 10;
-          if (timeAvgDiff > 0 ){
-            timeAvgMins -= Math.abs(timeAvgDiff);
-          } else {
-            timeAvgMins += Math.abs(timeAvgDiff);
+          if(timeAvgDiff > timeAvgDiff){
+            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;
 
+          if(difficultyChange > 300) {
+            difficultyChange = 300;
+          }
+          if(difficultyChange < -75){
+            difficultyChange = -75;
+          }
+
           return {
             base: base + '%',
             change: difficultyChange,
@@ -163,10 +186,11 @@ export class DashboardComponent implements OnInit {
             remainingBlocks,
             timeAvg: timeAvgMins.toFixed(0),
             colorAdjustments,
+            colorPreviousAdjustments,
             blocksInEpoch,
             newDifficultyHeight: block.height + remainingBlocks,
             remainingTime: remainingBlocsMilliseconds + nowMilliseconds,
-            previousRetarget
+            previousRetarget: previousRetarget ? previousRetarget : 0
           };
         })
       );
diff --git a/frontend/src/app/shared/pipes/absolute/absolute.pipe.spec.ts b/frontend/src/app/shared/pipes/absolute/absolute.pipe.spec.ts
new file mode 100644
index 000000000..d9ad3f3df
--- /dev/null
+++ b/frontend/src/app/shared/pipes/absolute/absolute.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { AbsolutePipe } from './absolute.pipe';
+
+describe('AbsolutePipe', () => {
+  it('create an instance', () => {
+    const pipe = new AbsolutePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/shared/pipes/absolute/absolute.pipe.ts b/frontend/src/app/shared/pipes/absolute/absolute.pipe.ts
new file mode 100644
index 000000000..4a5b8a462
--- /dev/null
+++ b/frontend/src/app/shared/pipes/absolute/absolute.pipe.ts
@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'absolute' })
+export class AbsolutePipe implements PipeTransform {
+  transform(nr: number) {
+    return Math.abs(nr);
+  }
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 0d7d9bc32..c95e28a4f 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -6,6 +6,7 @@ import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe';
 import { Hex2asciiPipe } from './pipes/hex2ascii/hex2ascii.pipe';
 import { Decimal2HexPipe } from './pipes/decimal2hex/decimal2hex.pipe';
 import { AsmStylerPipe } from './pipes/asm-styler/asm-styler.pipe';
+import { AbsolutePipe } from './pipes/absolute/absolute.pipe';
 import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
 import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
 import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
@@ -36,6 +37,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
     RelativeUrlPipe,
     Hex2asciiPipe,
     AsmStylerPipe,
+    AbsolutePipe,
     BytesPipe,
     VbytesPipe,
     WuBytesPipe,
@@ -78,6 +80,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
     RelativeUrlPipe,
     Hex2asciiPipe,
     AsmStylerPipe,
+    AbsolutePipe,
     BytesPipe,
     VbytesPipe,
     WuBytesPipe,