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;