From 84abc75a9d9a1eac5d7f1d11305ac1c59f7459cd Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 30 Dec 2024 18:05:41 +0100
Subject: [PATCH] ui fix

---
 src/routes/market-flow/+page.svelte | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/routes/market-flow/+page.svelte b/src/routes/market-flow/+page.svelte
index c9ef600f..dae0b26b 100644
--- a/src/routes/market-flow/+page.svelte
+++ b/src/routes/market-flow/+page.svelte
@@ -213,7 +213,6 @@
   function getPlotOptions() {
     isLoading = true;
     let dates = marketTideData?.map((item) => item?.timestamp);
-
     const priceList = marketTideData?.map((item) => item?.close);
     const netCallPremList = marketTideData?.map(
       (item) => item?.net_call_premium,
@@ -310,17 +309,24 @@
           data: dates,
           axisLabel: {
             color: "#fff",
-            formatter: (value) => {
-              const timePart = value.split(" ")[1];
+            formatter: (value, index) => {
+              const [datePart, timePart] = value.split(" ");
               let [hours, minutes] = timePart.split(":").map(Number);
-              hours = minutes >= 30 ? hours + 1 : hours;
-              minutes = 0;
-              const amPm = hours >= 12 ? "PM" : "AM";
-              hours = hours % 12 || 12;
-              return `${hours}:00 ${amPm}`;
+
+              // Only show labels at 30-minute intervals (XX:00 and XX:30)
+              if (minutes % 30 === 0) {
+                const amPm = hours >= 12 ? "PM" : "AM";
+                hours = hours % 12 || 12;
+                return minutes === 0
+                  ? `${hours} ${amPm}`
+                  : `${hours}:30 ${amPm}`;
+              }
+              return "";
             },
+            interval: 29, // Show label every 30 minutes (29 intervals between)
           },
         },
+
         {
           type: "category",
           gridIndex: 1,