From dcd972deaca9887a47898b731fc2b06ac52def6a Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 10 Jan 2025 09:55:02 +0100
Subject: [PATCH] ui fixes

---
 .../Options/OpenInterestByExpiry.svelte          | 16 ++++++++++------
 .../Options/OpenInterestByStrike.svelte          |  4 ++--
 src/lib/components/Table/OptionsFlowTable.svelte |  1 +
 src/routes/stocks/[tickerID]/+layout.svelte      | 10 ++++++----
 src/routes/stocks/[tickerID]/+page.svelte        |  4 ++--
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/Options/OpenInterestByExpiry.svelte b/src/lib/components/Options/OpenInterestByExpiry.svelte
index 850448ae..287c3aac 100644
--- a/src/lib/components/Options/OpenInterestByExpiry.svelte
+++ b/src/lib/components/Options/OpenInterestByExpiry.svelte
@@ -49,6 +49,15 @@
     }));
 
     const dates = processedData?.map((d) => d.expiry);
+    const formattedDates = dates.map((date) => {
+      const d = new Date(date);
+      return d.toLocaleDateString("en-US", {
+        month: "short", // Abbreviated month name
+        day: "numeric", // Day of the month
+        year: "2-digit", // Two-digit year
+      });
+    });
+
     const callValues = processedData?.map((d) => d.callValue?.toFixed(2));
     const putValues = processedData?.map((d) => d.putValue?.toFixed(2));
     const barWidthPercentage = Math.max(100 / processedData.length, 20); // Adjust automatically, max 80%
@@ -93,18 +102,13 @@
       },
       xAxis: {
         type: "category",
-        data: dates,
+        data: formattedDates,
         axisLine: { lineStyle: { color: "#fff" } },
         axisLabel: {
           color: "#fff",
-          interval: (index) => index % 2 === 0, // Show every 5th label
-          rotate: 45, // Rotate labels for better readability
-          fontSize: 12, // Adjust font size if needed
-          margin: 20,
         },
         splitLine: { show: false },
       },
-
       series: [
         {
           name: `Put`,
diff --git a/src/lib/components/Options/OpenInterestByStrike.svelte b/src/lib/components/Options/OpenInterestByStrike.svelte
index 744a818b..c9259345 100644
--- a/src/lib/components/Options/OpenInterestByStrike.svelte
+++ b/src/lib/components/Options/OpenInterestByStrike.svelte
@@ -53,7 +53,7 @@
     const strikes = processedData?.map((d) => d.strike);
     const callValues = processedData?.map((d) => d.callValue?.toFixed(2));
     const putValues = processedData?.map((d) => d.putValue?.toFixed(2));
-    const barWidthPercentage = Math.max(100 / processedData.length, 30); // Adjust automatically, max 80%
+    const barWidthPercentage = Math.max(100 / processedData.length, 30);
 
     const options = {
       animation: false,
@@ -101,7 +101,7 @@
           color: "#fff",
           interval: (index) => index % 5 === 0, // Show every 5th label
           rotate: 45, // Rotate labels for better readability
-          fontSize: 14, // Adjust font size if needed
+          fontSize: $screenWidth < 640 ? 10 : 14, // Adjust font size if needed
           margin: 20,
         },
         splitLine: { show: false },
diff --git a/src/lib/components/Table/OptionsFlowTable.svelte b/src/lib/components/Table/OptionsFlowTable.svelte
index 67610f38..61d4e047 100644
--- a/src/lib/components/Table/OptionsFlowTable.svelte
+++ b/src/lib/components/Table/OptionsFlowTable.svelte
@@ -736,6 +736,7 @@
           {displayedData[index]?.execution_estimate
             ?.replace("At", "")
             ?.replace("Above", "")
+            ?.replace("Below", "")
             ?.replace("Midpoint", "Mid")}
         </div>
 
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 36ceec3d..f753952b 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -738,15 +738,17 @@
                             <div
                               class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
                             >
-                              <span
+                              <div
                                 class="text-2xl lg:text-3xl font-bold text-white"
                               >
                                 {$displayCompanyName?.length > charNumber
                                   ? $displayCompanyName?.slice(0, charNumber) +
                                     "..."
                                   : $displayCompanyName}
-                                ({$stockTicker?.toUpperCase()})
-                              </span>
+                                <span class="hidden sm:inline-block"
+                                  >({$stockTicker?.toUpperCase()})</span
+                                >
+                              </div>
                               <div
                                 class="sm:hidden items-end justify-end absolute right-3 top-14 {$scoreComponent ===
                                 false
@@ -804,7 +806,7 @@
                                   {/if}
                                 </div>
                               </div>
-                              {#if Object?.keys(prePostData)?.length !== 0 && !$isOpen}
+                              {#if Object?.keys(prePostData)?.length !== 0 && !$isOpen && prePostData?.timestamp > 0}
                                 <div
                                   class="border-l border-default pl-3 bp:pl-5"
                                 >
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 30c4e2db..ffee2a0a 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -969,7 +969,7 @@
                         ? $wsBidPrice
                         : ((data?.getStockQuote?.bid !== 0
                             ? data?.getStockQuote?.bid
-                            : "-") ?? "n/a")}</td
+                            : "n/a") ?? "n/a")}</td
                     ></tr
                   >
                   <tr
@@ -1094,7 +1094,7 @@
                         ? $wsAskPrice
                         : ((data?.getStockQuote?.ask !== 0
                             ? data?.getStockQuote?.ask
-                            : "-") ?? "n/a")}</td
+                            : "n/a") ?? "n/a")}</td
                     ></tr
                   >
                   <tr