From f19271df2e368b14e7f309a66c40658c7b37cacf Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 23 Jan 2025 12:30:39 +0100
Subject: [PATCH] option page update

---
 .../options/hottest-contracts/+page.svelte    | 155 +++++-------------
 1 file changed, 38 insertions(+), 117 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
index f8978dfb..e5f2e186 100644
--- a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
@@ -12,7 +12,6 @@
     numberOfUnreadNotification,
     displayCompanyName,
   } from "$lib/store";
-  import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
 
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@@ -42,7 +41,7 @@
   let optionsData = null;
 
   let optionHistoryList = [];
-  let selectGraphType = "Bid/Ask";
+  let selectGraphType = "Vol/OI";
   let container;
   let rawDataHistory = [];
   let strikePrice;
@@ -305,13 +304,9 @@
       (a, b) => new Date(a?.date) - new Date(b?.date),
     );
     let dates = data?.map((item) => item?.date);
-    let avgPrice = data?.map((item) => item?.avg_price);
+    let avgPrice = data?.map((item) => item?.mark);
     let priceList = data?.map((item) => item?.price);
 
-    let bidVolume = data?.map((item) => item?.bid_volume);
-    let askVolume = data?.map((item) => item?.ask_volume);
-    let midVolume = data?.map((item) => item?.mid_volume);
-
     let volumeList = data?.map((item) => item?.volume);
     let oiList = data?.map((item) => item?.open_interest);
     let ivList = data?.map((item) =>
@@ -339,15 +334,7 @@
     });
 
     let series = [];
-    if (selectGraphType === "Bid/Ask") {
-      series = [
-        createBarSeries("Ask", askVolume, "#33B890", "Ratio"),
-        createBarSeries("Mid", midVolume, "#007BFF", "Ratio"),
-        createBarSeries("Bid", bidVolume, "#EE5365", "Ratio"),
-        createLineSeries("Avg Fill", avgPrice, "#FAD776"),
-        createLineSeries("Stock Price", priceList, "#fff", 2),
-      ];
-    } else if (selectGraphType === "Vol/OI") {
+    if (selectGraphType === "Vol/OI") {
       series = [
         createBarSeries("Volume", volumeList, "#FD7E14"),
         createBarSeries("OI", oiList, "#33B890"),
@@ -406,27 +393,14 @@
               param.color +
               '"></span>';
 
-            if (param.seriesName === "Bid") {
-              bidValue = param.value;
-              bidColor = marker;
-            } else if (param.seriesName === "Ask") {
-              askValue = param.value;
-              askColor = marker;
-            } else {
-              result +=
-                marker +
-                param.seriesName +
-                ": " +
-                abbreviateNumberWithColor(param.value, false, true) +
-                "<br/>";
-            }
+            result +=
+              marker +
+              param.seriesName +
+              ": " +
+              abbreviateNumberWithColor(param.value, false, true) +
+              "<br/>";
           });
 
-          // Add Bid x Ask line if both are present
-          if (bidValue !== null && askValue !== null) {
-            result += `${bidColor}Bid x ${askColor}Ask: ${bidValue} x ${askValue}<br/>`;
-          }
-
           if (rawDataPoint?.dte !== undefined) {
             result += `Days to Expiration : ${rawDataPoint.dte}<br/>`;
           }
@@ -532,7 +506,7 @@
 
   async function handleViewData(item) {
     isLoaded = false;
-    selectGraphType = "Bid/Ask";
+    selectGraphType = "Vol/OI";
     optionDetailsDesktopModal?.showModal();
 
     strikePrice = item?.strike_price;
@@ -540,7 +514,9 @@
     dateExpiration = item?.date_expiration;
     otmPercentage = item?.otm;
 
-    rawDataHistory = await getContractHistory(item?.option_symbol);
+    const output = await getContractHistory(item?.option_symbol);
+    rawDataHistory = output?.history;
+
     if (rawDataHistory?.length > 0) {
       rawDataHistory.forEach((entry) => {
         const matchingData = data?.getHistoricalPrice?.find(
@@ -952,7 +928,7 @@
           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}
+            {#each ["Vol/OI", "IV"] as item}
               <label
                 on:click={() => (selectGraphType = item)}
                 class="px-3 py-1.5 mr-2 {selectGraphType === item
@@ -1005,28 +981,18 @@
                   <td class="text-white font-semibold text-sm text-end"
                     >% Change OI</td
                   >
-                  <td class="text-white font-semibold text-sm text-start"
+                  <td class="text-white font-semibold text-sm text-end"
                     >Last Price</td
                   >
-                  <td class="text-white font-semibold text-sm text-start"
+                  <td class="text-white font-semibold text-sm text-end"
                     >Avg Price</td
                   >
-                  <td class="text-white font-semibold text-sm text-start"
-                    >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"
-                    >Sweep</td
-                  >
-                  <td class="text-white font-semibold text-sm text-start"
-                    >Multileg Vol</td
-                  >
                   <td class="text-white font-semibold text-sm text-end"
                     >Total Prem</td
                   >
+                  <td class="text-white font-semibold text-sm text-end">GEX</td>
+                  <td class="text-white font-semibold text-sm text-end">DEX</td>
                 </tr>
               </thead>
               <tbody>
@@ -1038,7 +1004,9 @@
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.volume?.toLocaleString("en-US")}
+                      {item?.volume !== null
+                        ? item?.volume?.toLocaleString("en-US")
+                        : 0}
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
@@ -1047,17 +1015,13 @@
                         : "n/a"}
                     </td>
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {#if item?.open_interest_change >= 0 && item?.open_interest_change !== undefined}
+                      {#if item?.changeOI >= 0 && item?.changeOI !== undefined}
                         <span class="text-[#00FC50]"
-                          >+{item?.open_interest_change?.toLocaleString(
-                            "en-US",
-                          )}</span
+                          >+{item?.changeOI?.toLocaleString("en-US")}</span
                         >
-                      {:else if item?.open_interest_change < 0 && item?.open_interest_change !== undefined}
+                      {:else if item?.changeOI < 0 && item?.changeOI !== undefined}
                         <span class="text-[#FF2F1F]"
-                          >{item?.open_interest_change?.toLocaleString(
-                            "en-US",
-                          )}</span
+                          >{item?.changeOI?.toLocaleString("en-US")}</span
                         >
                       {:else}
                         n/a
@@ -1065,15 +1029,15 @@
                     </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?.changesPercentageOI > 0 && item?.changesPercentageOI !== undefined}
                         <span class="text-[#00FC50]"
-                          >+{item?.open_interest_change_percent + "%"}</span
+                          >+{item?.changesPercentageOI + "%"}</span
                         >
-                      {:else if item?.open_interest_change_percent < 0 && item?.open_interest_change_percent !== undefined}
+                      {:else if item?.changesPercentageOI < 0 && item?.changesPercentageOI !== undefined}
                         <span class="text-[#FF2F1F]"
-                          >{item?.open_interest_change_percent + "%"}</span
+                          >{item?.changesPercentageOI + "%"}</span
                         >
-                      {:else if item?.open_interest_change_percent === 0 && item?.open_interest_change_percent !== undefined}
+                      {:else if item?.changesPercentageOI === 0 && item?.changesPercentageOI !== undefined}
                         0%
                       {:else}
                         n/a
@@ -1081,38 +1045,11 @@
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.last}
+                      {item?.close}
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.avg_price}
-                    </td>
-
-                    <td class="text-sm sm:text-[1rem] text-end">
-                      <div class="flex items-center justify-end">
-                        <!-- Bar Container -->
-                        <div
-                          class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
-                        >
-                          <!-- Bearish -->
-                          <div
-                            class="bg-red-500 h-full"
-                            style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-
-                          <!-- Neutral -->
-                          <div
-                            class="bg-gray-300 h-full"
-                            style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-
-                          <!-- Bullish -->
-                          <div
-                            class="bg-green-500 h-full"
-                            style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
-                          ></div>
-                        </div>
-                      </div>
+                      {item?.mark}
                     </td>
 
                     <td class="text-sm sm:text-[1rem] text-end text-white">
@@ -1121,28 +1058,6 @@
                       ) + "%"}
                     </td>
 
-                    <td class="text-sm sm:text-[1rem] text-end text-white">
-                      {item?.volume > 0
-                        ? ((item?.floor_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(
                         item?.total_premium,
@@ -1150,6 +1065,12 @@
                         true,
                       )}
                     </td>
+                    <td class="text-sm sm:text-[1rem] text-end text-white">
+                      {@html abbreviateNumberWithColor(item?.gex, false, true)}
+                    </td>
+                    <td class="text-sm sm:text-[1rem] text-end text-white">
+                      {@html abbreviateNumberWithColor(item?.dex, false, true)}
+                    </td>
                   </tr>
                 {/each}
               </tbody>