From 7848481d8fc10b5b80f757fd7cf557f377b88e1b Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 28 Sep 2020 02:51:01 +0700
Subject: [PATCH] Dashboard ux fixes.

---
 .../mempool-graph/mempool-graph.component.ts       | 11 ++++++-----
 .../src/app/dashboard/dashboard.component.html     | 14 ++++++++------
 frontend/src/app/dashboard/dashboard.component.ts  |  2 +-
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index 650e5ac10..d09c130ba 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -15,7 +15,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   @Input() dateSpan = '2h';
   @Input() showLegend = true;
   @Input() offsetX = 40;
-  @Input() offsetY = 40;
+  @Input() small = false;
 
   mempoolVsizeFeesOptions: any;
   mempoolVsizeFeesData: any;
@@ -30,7 +30,10 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
 
   ngOnInit(): void {
     const showLegend = !this.isMobile && this.showLegend;
-    const labelHops = this.isMobile || !this.showLegend ? 12 : 6;
+    let labelHops = !this.showLegend ? 12 : 6;
+    if (this.small) {
+      labelHops = labelHops * 2;
+    }
 
     const labelInterpolationFnc = (value: any, index: any) => {
       switch (this.dateSpan) {
@@ -61,9 +64,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         offset: this.offsetX,
       },
       axisY: {
-        labelInterpolationFnc: (value: number): any => {
-          return this.vbytesPipe.transform(value, 2);
-        },
+        labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2),
         offset: showLegend ? 160 : 80,
       },
       plugins: [
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index e9d0de27e..6b803feb8 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -36,7 +36,7 @@
                 <td>
                   <h5 class="card-title">Unconfirmed</h5>
                   <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
-                    {{ mempoolInfoData.value.memPoolInfo.size | number }} txs
+                    {{ mempoolInfoData.value.memPoolInfo.size | number }} TXs
                   </p>
                 </td>
               </tr>
@@ -44,7 +44,7 @@
             <hr>
           </div>
           <div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats">
-            <app-mempool-graph [data]="mempoolStats.mempool" [showLegend]="false" [offsetX]="10"></app-mempool-graph>
+            <app-mempool-graph [data]="mempoolStats.mempool" [showLegend]="false" [offsetX]="10" [small]="true"></app-mempool-graph>
           </div>
         </div>
       </div>
@@ -110,14 +110,16 @@
           <h5 class="card-title">Latest transactions</h5>
           <table class="table table-borderless text-left">
             <thead>
-              <th style="width: 25%;">TXID</th>
-              <th style="width: 50%;" class="text-right d-none d-lg-table-cell">Amount (BTC)</th>
+              <th style="width: 20%;">TXID</th>
+              <th style="width: 35%;" class="text-right d-none d-lg-table-cell">Amount (BTC)</th>
+              <th style="width: 20%;" class="text-right d-none d-lg-table-cell">USD</th>
               <th style="width: 25%;" class="text-right">Fee</th>
             </thead>
             <tbody>
               <tr *ngFor="let transaction of transactions$ | async; let i = index;">
-                <td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 12 }}</a></td>
-                <td class="text-right d-none d-lg-table-cell"><app-amount [satoshis]="transaction.value" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat>)</td>
+                <td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
+                <td class="text-right d-none d-lg-table-cell"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td>
+                <td class="text-right d-none d-lg-table-cell"><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
                 <td class="text-right">{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB</td>
               </tr>
             </tbody>
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 26460d754..60fb229ec 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -189,7 +189,7 @@ export class DashboardComponent implements OnInit {
           offset: 40
         },
         axisX: {
-          labelInterpolationFnc: (value: any, index: any) => index % 12  === 0 ? formatDate(value, 'HH:mm', this.locale) : null,
+          labelInterpolationFnc: (value: any, index: any) => index % 24 === 0 ? formatDate(value, 'HH:mm', this.locale) : null,
           offset: 10
         },
         plugins: [