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 cb441bac4..a618a2b07 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
@@ -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
- 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 axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);
const colorSpan = (color: string) => ``;
let itemFormatted = '
' + axisValueLabel + '
';
params.map((item: any, index: number) => {
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 fb02cd1f2..e6aec74c2 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/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
- 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 axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);
const { totalValue, totalValueArray } = this.getTotalValues(params);
const itemFormatted = [];
let totalParcial = 0;
diff --git a/frontend/src/app/shared/graphs.utils.ts b/frontend/src/app/shared/graphs.utils.ts
new file mode 100644
index 000000000..9f5a5d79a
--- /dev/null
+++ b/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' });
+ }
+};
\ No newline at end of file
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index afc16ec52..e870f32e8 100644
--- a/frontend/src/styles.scss
+++ b/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;