From 21e985202d9d8e2e757227a2b15699be9af77279 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 22 Sep 2020 03:31:19 +0700
Subject: [PATCH] Add difficulty percent change indicator.

---
 frontend/src/app/dashboard/dashboard.component.html | 2 +-
 frontend/src/app/dashboard/dashboard.component.ts   | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 133b7b798..040a7ae88 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -39,7 +39,7 @@
         <div class="card-body">
           <h5 class="card-title txPerSecond">Difficulty Epoch</h5>
           <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData">
-            <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"></div>
+            <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.2-2' }}%</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>
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 12fb8153e..d9d88bf4d 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -13,6 +13,7 @@ interface EpochProgress {
   base: string;
   green: string;
   red: string;
+  change: number;
 }
 
 interface MempoolInfoData {
@@ -77,6 +78,7 @@ export class DashboardComponent implements OnInit {
         const diff = now - DATime;
         const blocksInEpoch = block.height % 2016;
         const estimatedBlocks = Math.round(diff / 60 / 10);
+        const difficultyChange = blocksInEpoch / (diff / 60 / 10) - 1;
 
         let base = 0;
         let green = 0;
@@ -94,6 +96,7 @@ export class DashboardComponent implements OnInit {
           base: base + '%',
           green: green + '%',
           red: red + '%',
+          change: difficultyChange,
         };
       })
     );