Use relative dates (#1020)

frontend/src/GenericComponents/BasicTable.tsx

@@ -24,6 +24,7 @@ export enum CellAlign {
 
 export enum CellDataType {
   DATE = "date",
+  DATE_RELATIVE = "date_relative",
   NUMBER = "number",
   PER_CENT = "per_cent",
   STRING = "string",
@@ -83,7 +84,9 @@ function getCellValue(
   }
 
   if (columnSetting.dataType === CellDataType.DATE) {
-    return formatDate(extractedValue);
+    return formatDate(extractedValue, false);
+  } else if (columnSetting.dataType === CellDataType.DATE_RELATIVE) {
+    return formatDate(extractedValue, true);
   } else if (columnSetting.dataType === CellDataType.NUMBER) {
     return formatNumber(extractedValue, columnSetting.noDecimal ?? 1, false);
   } else if (columnSetting.dataType === CellDataType.PER_CENT) {

frontend/src/Utils/date.tsx

@@ -1,17 +1,31 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
 /**
  * Formats a given date as a string in the format of "yyyy-mm-dd".
  * If the input is `undefined`, returns `null`.
  * @param dateInput - The date to format, or `undefined`.
+ * @param isRelative - If `true`, returns the relative time from now.
  * @returns The formatted date as "yyyy-mm-dd", or `null` if input is `undefined`.
  */
-export function formatDate(dateInput: Date | undefined): string | null {
+export function formatDate(
+  dateInput: Date | undefined,
+  isRelative: boolean = false,
+): string | null {
   if (!dateInput) {
     return null;
   }
 
   const date = new Date(dateInput);
+  if (isRelative) {
+    return dayjs(date).fromNow();
+  }
+
   const year = date.getFullYear();
   const month = (date.getMonth() + 1).toString().padStart(2, "0");
   const day = date.getDate().toString().padStart(2, "0");
+
   return `${year}-${month}-${day}`;
 }

frontend/src/components/TableMarketDataOverview.tsx

@@ -24,7 +24,7 @@ const columnSettings = [
     headerName: "End",
     fieldPath: "lastDate",
     align: CellAlign.RIGHT,
-    dataType: CellDataType.DATE,
+    dataType: CellDataType.DATE_RELATIVE,
     description: "The last date of the market data",
   },
 ];