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.
2025-03-03 09:39:17 +01:00 · 2021-07-26 16:00:40 -03:00 · 2021-07-26 16:00:40 -03:00 · 751c7d6e69
commit 751c7d6e69
parent 60d8697b09
8 changed files with 86 additions and 10 deletions
--- 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",
--- 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);
  }
 }
--- 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>
--- 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;
 }
--- 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
          };
        })
      );
--- a/frontend/src/app/shared/pipes/absolute/absolute.pipe.spec.ts
+++ 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();
+  });
+});
--- a/frontend/src/app/shared/pipes/absolute/absolute.pipe.ts
+++ 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);
+  }
+}
--- 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,