Refactor tooltip formatting into common file and switch to native js localization

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { formatDate } from '@angular/common';
 import { EChartsOption } from 'echarts';
 import { OnChanges } from '@angular/core';
 import { StorageService } from 'src/app/services/storage.service';
+import { formatterXAxis } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-incoming-transactions-graph',
@@ -103,33 +103,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
-          // Todo - Refactor
+          const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);         
-          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">' + axisValueLabel + '</div>';
           params.map((item: any, index: number) => {

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
 import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
-import { formatDate, formatNumber } from "@angular/common";
+import { formatNumber } from "@angular/common";
-
 import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
 import { StorageService } from 'src/app/services/storage.service';
 import { EChartsOption } from 'echarts';
 import { feeLevels, chartColors } from 'src/app/app.constants';
+import { formatterXAxis } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-mempool-graph',
@@ -186,33 +186,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
-          // Todo - Refactor
+          const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);         
-          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;

frontend/src/app/shared/graphs.utils.ts

@@ -0,0 +1,28 @@
+export const formatterXAxis = (
+  locale: string,
+  windowPreference: string,
+  value: string
+) => {
+
+  if(value.length === 0){
+    return null;
+  }
+
+  const date = new Date(value);
+  switch (windowPreference) {
+    case '2h':
+      return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
+    case '24h':
+      return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric', minute: 'numeric' });
+    case '1w':
+      return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' });
+    case '1m':
+    case '3m':
+    case '6m':
+      return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric' });
+    case '1y':
+    case '2y':
+    case '3y':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+  }
+};

frontend/src/styles.scss

@@ -555,7 +555,7 @@ html:lang(ru) .card-title {
 }
 
 .tx-wrapper-tooltip-chart-advanced {
-  width: 115px;
+  width: 140px;
   .indicator-container {
     .indicator {
       margin-right: 5px;