ui fix

src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
-  import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
+  import {
+    abbreviateNumberWithColor,
+    abbreviateNumber,
+    monthNames,
+  } from "$lib/utils";
   import { setCache, getCache, stockTicker, screenWidth } from "$lib/store";
   import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
+  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
+  import { Button } from "$lib/components/shadcn/button/index.js";
+
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
@@ -30,9 +37,12 @@
   let optionsData = null;
 
   let optionHistoryList = [];
-
+  let selectGraphType = "Bid/Ask";
   let container;
   let rawDataHistory = [];
+  let strikePrice;
+  let optionType;
+  let dateExpiration;
 
   function formatDate(dateStr) {
     // Parse the input date string (YYYY-mm-dd)
@@ -429,14 +439,25 @@
     return output;
   };
 
-  async function handleViewData(contractId) {
+  async function handleViewData(item) {
     isLoaded = false;
     optionDetailsDesktopModal?.showModal();
 
-    rawDataHistory = await getContractHistory(contractId);
+    strikePrice = item?.strike_price;
-    optionsData = plotData();
+    optionType = item?.option_type;
+    dateExpiration = item?.date_expiration;
 
+    rawDataHistory = await getContractHistory(item?.option_symbol);
+    if (rawDataHistory?.length > 0) {
+      optionsData = plotData();
+      rawDataHistory = rawDataHistory?.sort(
+        (a, b) => new Date(b?.date) - new Date(a?.date),
+      );
       optionHistoryList = rawDataHistory?.slice(0, 20);
+    } else {
+      optionsData = null;
+    }
+
     isLoaded = true;
   }
 </script>
@@ -653,7 +674,7 @@
                         {item?.option_type === "C" ? "Call" : "Put"}
                       </span>
                       <label
-                        on:click={() => handleViewData(item?.option_symbol)}
+                        on:click={() => handleViewData(item)}
                         on:mouseover={() =>
                           getContractHistory(item?.option_symbol)}
                         class="cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
@@ -813,14 +834,30 @@
 
 <dialog
   id="optionDetailsDesktopModal"
-  class="modal cursor-pointer bg-[#000] bg-opacity-[0.8] sm:px-5"
+  class="modal {$screenWidth < 640
+    ? 'modal-bottom'
+    : ''} bg-[#000] bg-opacity-[0.8] sm:px-5"
 >
   <div
-    class="modal-box w-full max-w-7xl bg-[#141417] rounded-md sm:bg-default border-t sm:border border-gray-600 h-auto"
+    class="modal-box w-full {rawDataHistory?.length > 0
+      ? 'max-w-7xl'
+      : 'w-full'} rounded-md bg-table border-t sm:border border-gray-600 min-h-48 h-auto"
   >
-    <form method="dialog" class="modal-backdrop backdrop-blur-[4px]">
+    <form
+      method="dialog"
+      class="modal-backdrop backdrop-blur-[4px] flex flex-row items-center w-full justify-between"
+    >
+      <p class="text-white text-[1rem] sm:text-xl font-semibold cursor-text">
+        Contract: <span
+          class={optionType === "C" ? "text-[#00FC50]" : "text-[#FF2F1F]"}
+          >{$stockTicker}
+          {strikePrice}
+          {optionType}
+          {dateExpiration} ({daysLeft(dateExpiration)})
+        </span>
+      </p>
       <button
-        class="cursor-pointer absolute right-0 top-0 text-[1.8rem] text-white focus:outline-none"
+        class="cursor-pointer text-[1.8rem] text-white focus:outline-none"
       >
         <svg
           class="w-8 h-8"
@@ -833,14 +870,84 @@
         </svg>
       </button>
     </form>
-
+    {#if rawDataHistory?.length > 0}
-    <p class="text-white text-xl mt-10 font-semibold cursor-text">
-      Contract: {$stockTicker} 32 C 2025-01-03 (-1D)
-    </p>
-    <div class="border-gray-600 border-b w-full mb-3 mt-5"></div>
       <div
-      class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-800 overflow-hidden"
+        class="border-b border-gray-600 w-full mt-2 mb-2 sm:mb-3 sm:mt-3"
+      ></div>
+
+      <div class="hidden sm:flex flex-wrap text-white pb-2">
+        <div
+          class="mr-3 whitespace-nowrap"
+          data-state="closed"
+          data-sentry-element="unknown"
+          data-sentry-source-file="Tooltip.tsx"
         >
+          {formatDate(optionHistoryList?.at(0)?.date)}:
+        </div>
+        <div
+          class="mr-3 whitespace-nowrap"
+          data-state="closed"
+          data-sentry-element="unknown"
+          data-sentry-source-file="Tooltip.tsx"
+        >
+          <span class="text-[var(--light-text-color)] font-normal">Vol:</span>
+          {optionHistoryList?.at(0)?.volume?.toLocaleString("en-US")}
+        </div>
+        <div
+          class="mr-3 whitespace-nowrap"
+          data-state="closed"
+          data-sentry-element="unknown"
+          data-sentry-source-file="Tooltip.tsx"
+        >
+          <span class="text-[var(--light-text-color)] font-normal">OI:</span>
+          {optionHistoryList?.at(0)?.open_interest?.toLocaleString("en-US")}
+        </div>
+        <div
+          class="mr-3 whitespace-nowrap"
+          data-state="closed"
+          data-sentry-element="unknown"
+          data-sentry-source-file="Tooltip.tsx"
+        >
+          <span class="text-[var(--light-text-color)] font-normal">Avg:</span>
+          ${optionHistoryList?.at(0)?.avg_price}
+        </div>
+        <div
+          class="mr-3 whitespace-nowrap"
+          data-state="closed"
+          data-sentry-element="unknown"
+          data-sentry-source-file="Tooltip.tsx"
+        >
+          <span class="text-[var(--light-text-color)] font-normal">Prem:</span>
+          {abbreviateNumber(optionHistoryList?.at(0)?.total_premium, true)}
+        </div>
+        <div
+          class="mr-3 whitespace-nowrap"
+          data-state="closed"
+          data-sentry-element="unknown"
+          data-sentry-source-file="Tooltip.tsx"
+        >
+          <span class="text-[var(--light-text-color)] font-normal">IV:</span>
+          {(optionHistoryList?.at(0)?.implied_volatility * 100)?.toLocaleString(
+            "en-US",
+          )}%
+        </div>
+      </div>
+
+      {#if $screenWidth > 640}
+        <div
+          class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-600 overflow-hidden"
+        >
+          <div class="flex justify-end ml-auto w-fit mr-2 mt-2">
+            {#each ["Bid/Ask", "Vol/OI", "IV"] as item}
+              <label
+                class="px-3 py-1.5 {selectGraphType === item
+                  ? 'bg-white text-black  mr-1'
+                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+              >
+                {item}
+              </label>
+            {/each}
+          </div>
           <div class="app w-full h-[300px] mt-5">
             {#if isLoaded}
               <Chart {init} options={optionsData} class="chart" />
@@ -858,20 +965,22 @@
             {/if}
           </div>
         </div>
+      {/if}
 
       <div
         bind:this={container}
         on:scroll={getScroll}
         class="h-full max-h-[500px] overflow-y-scroll overflow-x-auto"
       >
-      <div class="flex justify-start items-center m-auto">
+        <div class="flex justify-start items-center m-auto cursor-normal">
           {#if isLoaded}
             <table
               class="table table-pin-cols table-sm bg-table border border-gray-800 table-compact rounded-none sm:rounded-md w-full m-auto mt-4 overflow-x-auto"
             >
               <thead class="bg-default">
                 <tr class="">
-                <td class="text-white font-semibold text-sm text-start">Date</td
+                  <td class="text-white font-semibold text-sm text-start"
+                    >Date</td
                   >
                   <td class="text-white font-semibold text-sm text-end">Vol</td>
                   <td class="text-white font-semibold text-sm text-end">OI</td>
@@ -891,8 +1000,12 @@
                     >Bid/Ask</td
                   >
                   <td class="text-white font-semibold text-sm text-end">IV</td>
-                <td class="text-white font-semibold text-sm text-end">Floor</td>
+                  <td class="text-white font-semibold text-sm text-end"
-                <td class="text-white font-semibold text-sm text-end">Sweep</td>
+                    >Floor</td
+                  >
+                  <td class="text-white font-semibold text-sm text-end"
+                    >Sweep</td
+                  >
                   <td class="text-white font-semibold text-sm text-start"
                     >Multileg Vol</td
                   >
@@ -937,7 +1050,7 @@
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                    {#if item?.open_interest_change_percent >= 0 && item?.open_interest_change_percent !== undefined}
+                      {#if item?.open_interest_change_percent > 0 && item?.open_interest_change_percent !== undefined}
                         <span class="text-[#00FC50]"
                           >+{item?.open_interest_change_percent + "%"}</span
                         >
@@ -945,6 +1058,8 @@
                         <span class="text-[#FF2F1F]"
                           >{item?.open_interest_change_percent + "%"}</span
                         >
+                      {:else if item?.open_interest_change_percent === 0 && item?.open_interest_change_percent !== undefined}
+                        0%
                       {:else}
                         n/a
                       {/if}
@@ -1023,22 +1138,32 @@
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                    {(item?.implied_volatility * 100)?.toLocaleString("en-US") +
+                      {(item?.implied_volatility * 100)?.toLocaleString(
-                      "%"}
+                        "en-US",
+                      ) + "%"}
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                    {((item?.floor_volume / item?.volume) * 100)?.toFixed(2) +
+                      {item?.volume > 0
-                      "%"}
+                        ? ((item?.floor_volume / item?.volume) * 100)?.toFixed(
-                  </td>
-                  <td class="text-sm sm:text-[1rem] text-end text-white">
-                    {((item?.sweep_volume / item?.volume) * 100)?.toFixed(2) +
-                      "%"}
-                  </td>
-                  <td class="text-sm sm:text-[1rem] text-end text-white">
-                    {((item?.multi_leg_volume / item?.volume) * 100)?.toFixed(
                             2,
-                    ) + "%"}
+                          ) + "%"
+                        : "n/a"}
+                    </td>
+                    <td class="text-sm sm:text-[1rem] text-end text-white">
+                      {item?.volume > 0
+                        ? ((item?.sweep_volume / item?.volume) * 100)?.toFixed(
+                            2,
+                          ) + "%"
+                        : "n/a"}
+                    </td>
+                    <td class="text-sm sm:text-[1rem] text-end text-white">
+                      {item?.volume > 0
+                        ? (
+                            (item?.multi_leg_volume / item?.volume) *
+                            100
+                          )?.toFixed(2) + "%"
+                        : "n/a"}
                     </td>
                     <td class="text-sm sm:text-[1rem] text-end text-white">
                       {@html abbreviateNumberWithColor(
@@ -1065,6 +1190,13 @@
           {/if}
         </div>
       </div>
+    {:else}
+      <div
+        class="mt-10 flex justify-center sm:justify-start items-center w-full text-white"
+      >
+        No historical data available yet for the given contract
+      </div>
+    {/if}
   </div>
   <form method="dialog" class="modal-backdrop">
     <button>close</button>