Hide xaxis label overlapping - Show current day/month/year below the chart for self better self containing overview

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 `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}">${itemFormatted}</div>`;
         }
       },
-      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: {

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],
           },
         }
       ],

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;
+  }
 };