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) => ``;
- let itemFormatted = '
' + params[0].axisValue + '
';
+ let itemFormatted = '' + axisValueLabel + '
';
params.map((item: any, index: number) => {
if (index < 26) {
itemFormatted += `
${colorSpan(item.color)}
-
${item.value} vB/s
+
${item.value[1]} vB/s
`;
}
});
@@ -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 `