From 9e8a741d9712c5efd8372f0340b05a48a52a601c Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Sat, 11 Dec 2021 15:26:59 +0900
Subject: [PATCH] Apply proper datetime format according to choosen time scale
 and force 2h windowPreference in the dashboard

---
 .../incoming-transactions-graph.component.ts  | 60 ++++++++++---------
 .../mempool-graph/mempool-graph.component.ts  | 35 +++++++++--
 .../app/dashboard/dashboard.component.html    |  2 +
 3 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
index b1c2399e1..cb441bac4 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -25,6 +25,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
   @Input() top: number | string = '20';
   @Input() left: number | string = '0';
   @Input() template: ('widget' | 'advanced') = 'widget';
+  @Input() windowPreferenceOverride: string;
 
   isLoading = true;
   mempoolStatsChartOption: EChartsOption = {};
@@ -46,7 +47,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
     if (!this.data) {
       return;
     }
-    this.windowPreference = this.storageService.getValue('graphWindowPreference');
+    this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
     this.mountChart();
   }
 
@@ -102,14 +103,41 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
+          // Todo - Refactor
+          let axisValueLabel: string = "";
+          switch (this.windowPreference) {
+            case "2h":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'h:mm a', this.locale)}`;
+              break;
+            case "24h":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'EEE HH:mm', this.locale)}`
+              break;
+            case "1w":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d HH:mm', this.locale)}`
+              break;
+            case "1m":
+            case "3m":
+            case "6m":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d HH:00', this.locale)}`
+              break;
+            case "1y":
+            case "2y":                
+            case "3y":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d y', this.locale)}`
+              break;
+            default:
+              axisValueLabel = `${formatDate(params[0].axisValue, 'M/d', this.locale)}\n${formatDate(params[0].axisValue, 'H:mm', this.locale)}`
+              break;
+          }
+
           const colorSpan = (color: string) => `<span class="indicator" style="background-color: ` + color + `"></span>`;
-          let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
+          let itemFormatted = '<div class="title">' + axisValueLabel + '</div>';
           params.map((item: any, index: number) => {
             if (index < 26) {
               itemFormatted += `<div class="item">
                 <div class="indicator-container">${colorSpan(item.color)}</div>
                 <div class="grow"></div>
-                <div class="value">${item.value} <span class="symbol">vB/s</span></div>
+                <div class="value">${item.value[1]} <span class="symbol">vB/s</span></div>
               </div>`;
             }
           });
@@ -117,36 +145,12 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
         }
       },
       xAxis: {
-        type: 'category',
+        type: 'time',
         axisLabel: {
           align: 'center',
           fontSize: 11,
           lineHeight: 12
         },
-        data: this.data.labels.map((value: any) => {
-          switch (this.windowPreference) {
-            case "2h":
-              return `${formatDate(value, 'h:mm a', this.locale)}`
-            case "24h":
-              return `${formatDate(value, 'h a', this.locale)}`
-            case "1w":
-              return `${formatDate(value, 'EEE, MMM d', this.locale)}`
-            case "1m":
-              return `${formatDate(value, 'EEE, MMM d', this.locale)}`
-            case "3m":
-              return `${formatDate(value, 'MMM d', this.locale)}`
-            case "6m":
-              return `${formatDate(value, 'MMM d', this.locale)}`
-            case "1y":
-              return `${formatDate(value, 'MMM y', this.locale)}`
-            case "2y":                
-              return `${formatDate(value, 'MMM y', this.locale)}`
-            case "3y":
-              return `${formatDate(value, 'MMM y', this.locale)}`
-            default:
-              return `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`
-          }
-        }),
       },
       yAxis: {
         type: 'value',
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 77aa5f97f..fb02cd1f2 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
-import { formatDate } from '@angular/common';
 import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
-import { formatNumber } from "@angular/common";
+import { formatDate, formatNumber } from "@angular/common";
 
 import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
@@ -32,6 +31,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   @Input() left: number | string = 75;
   @Input() template: ('widget' | 'advanced') = 'widget';
   @Input() showZoom = true;
+  @Input() windowPreferenceOverride: string;
 
   isLoading = true;
   mempoolVsizeFeesData: any;
@@ -62,7 +62,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
     if (!this.data) {
       return;
     }
-    this.windowPreference = this.storageService.getValue('graphWindowPreference');
+    this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
     this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
     this.mountFeeChart();
   }
@@ -186,6 +186,33 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
+          // Todo - Refactor
+          let axisValueLabel: string = "";
+          switch (this.windowPreference) {
+            case "2h":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'h:mm a', this.locale)}`;
+              break;
+            case "24h":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'EEE HH:mm', this.locale)}`
+              break;
+            case "1w":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d HH:mm', this.locale)}`
+              break;
+            case "1m":
+            case "3m":
+            case "6m":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d HH:00', this.locale)}`
+              break;
+            case "1y":
+            case "2y":                
+            case "3y":
+              axisValueLabel = `${formatDate(params[0].axisValue, 'MMM d y', this.locale)}`
+              break;
+            default:
+              axisValueLabel = `${formatDate(params[0].axisValue, 'M/d', this.locale)}\n${formatDate(params[0].axisValue, 'H:mm', this.locale)}`
+              break;
+          }
+          
           const { totalValue, totalValueArray } = this.getTotalValues(params);
           const itemFormatted = [];
           let totalParcial = 0;
@@ -257,7 +284,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           const titleSum = $localize`Sum`;
           return `<div class="fees-wrapper-tooltip-chart ${classActive}">
             <div class="title">
-              ${params[0].axisValueLabel}
+              ${axisValueLabel}
               <span class="total-value">
                 ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
               </span>
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 530c365a0..36c018761 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -54,6 +54,7 @@
                 [limitFee]="150"
                 [limitFilterFee]="1"
                 [data]="mempoolStats.value?.mempool"
+                [windowPreferenceOverride]="'2h'"
                 ></app-mempool-graph>
               </div>
             </ng-container>
@@ -73,6 +74,7 @@
                 <app-incoming-transactions-graph
                   [left]="50"
                   [data]="mempoolStats.value?.weightPerSecond"
+                  [windowPreferenceOverride]="'2h'"
                   ></app-incoming-transactions-graph>
               </div>
             </ng-template>