Use time for xAxis type and fix the mempool tooltip accordingly

backend/src/api/statistics.ts

@@ -268,7 +268,7 @@ class Statistics {
   }
 
   private getQueryForDays(div: number, limit: number) {
-    return `SELECT id, added, unconfirmed_transactions,
+    return `SELECT id, UNIX_TIMESTAMP(added) as added, unconfirmed_transactions,
       tx_per_second,
       vbytes_per_second,
       vsize_1,
@@ -314,7 +314,7 @@ class Statistics {
   public async $get(id: number): Promise<OptimizedStatistic | undefined> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = `SELECT * FROM statistics WHERE id = ?`;
+      const query = `SELECT *, UNIX_TIMESTAMP(added) as added FROM statistics WHERE id = ?`;
       const [rows] = await connection.query<any>(query, [id]);
       connection.release();
       if (rows[0]) {
@@ -328,7 +328,7 @@ class Statistics {
   public async $list2H(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = `SELECT * FROM statistics ORDER BY id DESC LIMIT 120`;
+      const query = `SELECT *, UNIX_TIMESTAMP(added) as added FROM statistics ORDER BY id DESC LIMIT 120`;
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -97,13 +97,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   }
 
   generateArray(mempoolStats: OptimizedMempoolStats[]) {
-    const finalArray: number[][] = [];
-    let feesArray: number[] = [];
+    const finalArray: number[][][] = [];
+    let feesArray: number[][] = [];
     let limitFeesTemplate = this.template === 'advanced' ? 26 : 20;
     for (let index = limitFeesTemplate; index > -1; index--) {
       feesArray = [];
       mempoolStats.forEach((stats) => {
-        feesArray.push(stats.vsizes[index] ? stats.vsizes[index] : 0);
+        feesArray.push([stats.added * 1000, stats.vsizes[index] ? stats.vsizes[index] : 0]);
       });
       finalArray.push(feesArray);
     }
@@ -192,8 +192,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           let progressPercentageText = '';
           const items = this.inverted ? [...params].reverse() : params;
           items.map((item: any, index: number) => {
-            totalParcial += item.value;
-            const progressPercentage = (item.value / totalValue) * 100;
+            totalParcial += item.value[1];
+            const progressPercentage = (item.value[1] / totalValue) * 100;
             const progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
             let activeItemClass = '';
             let hoverActive = 0;
@@ -233,7 +233,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
               </td>
               <td class="total-progress-sum">
                 <span>
-                  ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
+                  ${this.vbytesPipe.transform(item.value[1], 2, 'vB', 'MvB', false)}
                 </span>
               </td>
               <td class="total-progress-sum">
@@ -257,7 +257,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           const titleSum = $localize`Sum`;
           return `<div class="fees-wrapper-tooltip-chart ${classActive}">
             <div class="title">
-              ${params[0].axisValue}
+              ${params[0].axisValueLabel}
               <span class="total-value">
                 ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
               </span>
@@ -312,7 +312,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
       },
       xAxis: [
         {
-          type: 'category',
+          type: 'time',
           boundaryGap: false,
           axisLine: { onZero: true },
           axisLabel: {
@@ -320,30 +320,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
             fontSize: 11,
             lineHeight: 12,
           },
-          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: {
@@ -369,7 +345,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
     const totalValueArray = [];
     const valuesInverted = this.inverted ? values : [...values].reverse();
     for (const item of valuesInverted) {
-      totalValueTemp += item.value;
+      totalValueTemp += item.value[1];
       totalValueArray.push(totalValueTemp);
     }
     return {

frontend/src/app/interfaces/node-api.interface.ts

@@ -1,6 +1,6 @@
 export interface OptimizedMempoolStats {
   id: number;
-  added: string;
+  added: number;
   unconfirmed_transactions: number;
   tx_per_second: number;
   vbytes_per_second: number;