From 1f41bbed201cc3144711f459713577924f5ed334 Mon Sep 17 00:00:00 2001
From: Brandon Fergerson <bfergerson@apache.org>
Date: Mon, 2 May 2022 15:52:26 +0400
Subject: [PATCH] twelve hour time

---
 src/store/modules/app.ts            |  3 ++-
 src/utils/dateFormat.ts             | 29 ++++++++++++++++++++++++-----
 src/views/dashboard/graphs/Line.vue |  4 ++++
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 8e3de407..44f11863 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -97,7 +97,8 @@ export const appStore = defineStore({
       for (let i = 0; i <= endUnix - startUnix; i += interval) {
         const temp: string = dateFormatTime(
           new Date(startUnix + i - utcSpace),
-          this.duration.step
+          this.duration.step,
+          false
         );
         timeIntervals.push(temp);
       }
diff --git a/src/utils/dateFormat.ts b/src/utils/dateFormat.ts
index 568d0712..db91f58a 100644
--- a/src/utils/dateFormat.ts
+++ b/src/utils/dateFormat.ts
@@ -63,7 +63,11 @@ export default function dateFormatStep(
   return "";
 }
 
-export const dateFormatTime = (date: Date, step: string): string => {
+export const dateFormatTime = (
+  date: Date,
+  step: string,
+  twentyFourHourTime: boolean
+): string => {
   const year = date.getFullYear();
   const monthTemp = date.getMonth() + 1;
   let month = `${monthTemp}`;
@@ -83,11 +87,26 @@ export const dateFormatTime = (date: Date, step: string): string => {
   }
   const hourTemp = date.getHours();
   let hour = `${hourTemp}`;
-  if (hourTemp < 10) {
-    hour = `0${hourTemp}`;
+  let hourSuffix = "AM";
+  if (twentyFourHourTime) {
+    if (hourTemp < 10) {
+      hour = `0${hourTemp}`;
+    }
+  } else {
+    if (hourTemp === 0) {
+      hour = "12";
+    } else if (hourTemp === 12) {
+      hour = "12";
+      hourSuffix = "PM";
+    } else if (hourTemp > 12) {
+      hour = `${hourTemp - 12}`;
+      hourSuffix = "PM";
+    } else {
+      hour = `${hourTemp}`;
+    }
   }
   if (step === "HOUR") {
-    return `${month}-${day} ${hour}`;
+    return `${month}-${day} ${hour} ${hourSuffix}`;
   }
   const minuteTemp = date.getMinutes();
   let minute = `${minuteTemp}`;
@@ -95,7 +114,7 @@ export const dateFormatTime = (date: Date, step: string): string => {
     minute = `0${minuteTemp}`;
   }
   if (step === "MINUTE") {
-    return `${hour}:${minute}\n${month}-${day}`;
+    return `${hour}:${minute} ${hourSuffix}\n${month}-${day}`;
   }
   return "";
 };
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 60d90a8a..20ab685e 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -191,6 +191,10 @@ function getOption() {
       axisLabel: {
         color: "#808080",
         fontSize: "13",
+        formatter: function (value) {
+          //todo: should only substr if date is current date
+          return (value as string).substring(0, value.indexOf("\n"));
+        },
       },
     },
     yAxis: {