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 a618a2b07..2f4404249 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
@@ -2,7 +2,7 @@ import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit }
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';
+import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
@Component({
selector: 'app-incoming-transactions-graph',
@@ -78,6 +78,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
type: 'slider',
brushSelect: false,
realtime: true,
+ bottom: 0,
selectedDataBackground: {
lineStyle: {
color: '#fff',
@@ -86,7 +87,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
areaStyle: {
opacity: 0,
}
- }
+ },
}],
tooltip: {
trigger: 'axis',
@@ -118,14 +119,24 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
return `
${itemFormatted}
`;
}
},
- xAxis: {
- type: 'time',
- axisLabel: {
- align: 'center',
- fontSize: 11,
- lineHeight: 12
- },
- },
+ xAxis: [
+ {
+ name: formatterXAxisLabel(this.locale, this.windowPreference),
+ nameLocation: 'middle',
+ nameTextStyle: {
+ padding: [20, 0, 0, 0],
+ },
+ type: 'time',
+ axisLabel: {
+ margin: 20,
+ align: 'center',
+ fontSize: 11,
+ lineHeight: 12,
+ hideOverlap: true,
+ padding: [0, 5],
+ },
+ }
+ ],
yAxis: {
type: 'value',
axisLabel: {
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 e6aec74c2..75175c1a5 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -6,7 +6,7 @@ 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';
+import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
@Component({
selector: 'app-mempool-graph',
@@ -113,7 +113,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
mountFeeChart() {
this.orderLevels();
- const { labels, series } = this.mempoolVsizeFeesData;
+ const { series } = this.mempoolVsizeFeesData;
const seriesGraph = [];
const newColors = [];
@@ -313,13 +313,21 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
},
xAxis: [
{
+ name: formatterXAxisLabel(this.locale, this.windowPreference),
+ nameLocation: 'middle',
+ nameTextStyle: {
+ padding: [20, 0, 0, 0],
+ },
type: 'time',
boundaryGap: false,
axisLine: { onZero: true },
axisLabel: {
+ margin: 20,
align: 'center',
fontSize: 11,
lineHeight: 12,
+ hideOverlap: true,
+ padding: [0, 5],
},
}
],
diff --git a/frontend/src/app/shared/graphs.utils.ts b/frontend/src/app/shared/graphs.utils.ts
index 9f5a5d79a..0380fa964 100644
--- a/frontend/src/app/shared/graphs.utils.ts
+++ b/frontend/src/app/shared/graphs.utils.ts
@@ -25,4 +25,26 @@ export const formatterXAxis = (
case '3y':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
}
+};
+
+export const formatterXAxisLabel = (
+ locale: string,
+ windowPreference: string,
+) => {
+ const date = new Date();
+ switch (windowPreference) {
+ case '2h':
+ case '24h':
+ return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+ case '1w':
+ return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
+ case '1m':
+ case '3m':
+ case '6m':
+ return date.toLocaleDateString(locale, { year: 'numeric' });
+ case '1y':
+ case '2y':
+ case '3y':
+ return null;
+ }
};
\ No newline at end of file