From 2f136f22ff57ba3cd15dc470cc8494cb360e5ca4 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 5 Jan 2025 00:06:44 +0100
Subject: [PATCH] update hottest contract

---
 .../+server.ts                                |   4 +-
 .../options/hottest-contracts/+page.svelte    | 325 ++++++++++++++++++
 2 files changed, 327 insertions(+), 2 deletions(-)
 rename src/routes/api/{options-daily-transactions => options-contract-history}/+server.ts (74%)

diff --git a/src/routes/api/options-daily-transactions/+server.ts b/src/routes/api/options-contract-history/+server.ts
similarity index 74%
rename from src/routes/api/options-daily-transactions/+server.ts
rename to src/routes/api/options-contract-history/+server.ts
index 98c6a825..3d9b082f 100644
--- a/src/routes/api/options-daily-transactions/+server.ts
+++ b/src/routes/api/options-contract-history/+server.ts
@@ -4,8 +4,8 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   const data = await request.json();
   const { apiURL, apiKey } = locals;
 
-  const postData = { transactionId: data?.transactionId };
-  const response = await fetch(apiURL + "/options-daily-transactions", {
+  const postData = { params: data?.params };
+  const response = await fetch(apiURL + "/options-contract-history", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
diff --git a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
index 775140f8..2eccaba6 100644
--- a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
@@ -1,11 +1,58 @@
 <script lang="ts">
   import { abbreviateNumberWithColor } from "$lib/utils";
+  import { setCache, getCache, stockTicker } 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";
   import Infobox from "$lib/components/Infobox.svelte";
   export let data;
+  let isLoaded = false;
+
+  let optionHistoryList = [];
+
+  let container;
+  let rawDataHistory = [];
+
+  function formatDate(dateStr) {
+    // Parse the input date string (YYYY-mm-dd)
+    var date = new Date(dateStr);
+
+    // Get month, day, and year
+    var month = date.getMonth() + 1; // Month starts from 0
+    var day = date.getDate();
+    var year = date.getFullYear();
+
+    // Extract the last two digits of the year
+    var shortYear = year.toString().slice(-2);
+
+    // Add leading zeros if necessary
+    month = (month < 10 ? "0" : "") + month;
+    day = (day < 10 ? "0" : "") + day;
+
+    var formattedDate = day + "/" + year;
+
+    return formattedDate;
+  }
+
+  function getScroll() {
+    const scrollThreshold = container.scrollHeight * 0.8; // 80% of the container height
+
+    // Check if the user has scrolled to the bottom based on the threshold
+    const isBottom =
+      container.scrollTop + container.clientHeight >= scrollThreshold;
+
+    // Only load more data if at the bottom and there is still data to load
+    if (isBottom && optionHistoryList?.length !== rawDataHistory?.length) {
+      const nextIndex = optionHistoryList.length; // Ensure optionHistoryList is defined
+      const filteredNewResults = rawDataHistory.slice(
+        nextIndex,
+        nextIndex + 25,
+      ); // Ensure rawData is defined
+      optionHistoryList = [...optionHistoryList, ...filteredNewResults];
+    }
+  }
 
   const currentTime = new Date(
     new Date().toLocaleString("en-US", { timeZone: "America/New_York" }),
@@ -175,6 +222,42 @@
     // Sort using the generic comparison function
     openInterestList = [...originalData].sort(compareValues);
   };
+
+  const getContractHistory = async (contractId) => {
+    let output;
+    const cachedData = getCache(contractId, "getContractHistory");
+    if (cachedData) {
+      output = cachedData;
+    } else {
+      const postData = {
+        params: contractId,
+      };
+
+      // make the POST request to the endpoint
+      const response = await fetch("/api/options-contract-history", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(postData),
+      });
+
+      output = await response.json();
+
+      setCache(contractId, output, "getContractHistory");
+    }
+
+    return output;
+  };
+
+  async function handleViewData(contractId) {
+    isLoaded = false;
+    optionDetailsDesktopModal?.showModal();
+
+    rawDataHistory = await getContractHistory(contractId);
+    optionHistoryList = rawDataHistory?.slice(0, 20);
+    isLoaded = true;
+  }
 </script>
 
 <section
@@ -389,6 +472,9 @@
                         {item?.option_type === "C" ? "Call" : "Put"}
                       </span>
                       <label
+                        on:click={() => handleViewData(item?.option_symbol)}
+                        on:mouseover={() =>
+                          getContractHistory(item?.option_symbol)}
                         class="cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
                       >
                         {item?.strike_price}
@@ -543,3 +629,242 @@
     </div>
   </div>
 </section>
+
+<dialog
+  id="optionDetailsDesktopModal"
+  class="modal cursor-pointer bg-[#000] bg-opacity-[0.8] px-5"
+>
+  <div
+    class="modal-box w-full max-w-7xl bg-[#141417] sm:bg-default border-t sm:border border-gray-600 h-auto"
+  >
+    <form method="dialog" class="modal-backdrop backdrop-blur-[4px]">
+      <button
+        class="cursor-pointer absolute right-0 top-0 text-[1.8rem] text-white focus:outline-none"
+      >
+        <svg
+          class="w-8 h-8"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="white"
+            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+          />
+        </svg>
+      </button>
+    </form>
+
+    <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
+      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">
+        {#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-end">Vol</td>
+                <td class="text-white font-semibold text-sm text-end">OI</td>
+                <td class="text-white font-semibold text-sm text-end"
+                  >OI Change</td
+                >
+                <td class="text-white font-semibold text-sm text-end"
+                  >% Change OI</td
+                >
+                <td class="text-white font-semibold text-sm text-start"
+                  >Last Price</td
+                >
+                <td class="text-white font-semibold text-sm text-start"
+                  >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
+                >
+              </tr>
+            </thead>
+            <tbody>
+              {#each optionHistoryList as item}
+                <!-- row -->
+                <tr class="odd:bg-odd border-b border-gray-800">
+                  <td class="text-sm sm:text-[1rem] text-start text-white">
+                    {formatDate(item?.date)}
+                  </td>
+
+                  <td class="text-sm sm:text-[1rem] text-end text-white">
+                    {item?.volume?.toLocaleString("en-US")}
+                  </td>
+
+                  <td class="text-sm sm:text-[1rem] text-end text-white">
+                    {item?.open_interest !== undefined
+                      ? item?.open_interest?.toLocaleString("en-US")
+                      : "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}
+                      <span class="text-[#00FC50]"
+                        >+{item?.open_interest_change?.toLocaleString(
+                          "en-US",
+                        )}</span
+                      >
+                    {:else if item?.open_interest_change < 0 && item?.open_interest_change !== undefined}
+                      <span class="text-[#FF2F1F]"
+                        >{item?.open_interest_change?.toLocaleString(
+                          "en-US",
+                        )}</span
+                      >
+                    {:else}
+                      n/a
+                    {/if}
+                  </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}
+                      <span class="text-[#00FC50]"
+                        >+{item?.open_interest_change_percent + "%"}</span
+                      >
+                    {:else if item?.open_interest_change_percent < 0 && item?.open_interest_change_percent !== undefined}
+                      <span class="text-[#FF2F1F]"
+                        >{item?.open_interest_change_percent + "%"}</span
+                      >
+                    {:else}
+                      n/a
+                    {/if}
+                  </td>
+
+                  <td class="text-sm sm:text-[1rem] text-end text-white">
+                    {item?.last_price}
+                  </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">
+                    <HoverCard.Root>
+                      <HoverCard.Trigger
+                        class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
+                      >
+                        <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>
+                      </HoverCard.Trigger>
+                      <HoverCard.Content
+                        class="w-auto bg-secondary border border-gray-600"
+                      >
+                        <div class="flex justify-between space-x-4">
+                          <div
+                            class="space-y-1 flex flex-col items-start text-white"
+                          >
+                            <div>
+                              Bid Vol: {@html abbreviateNumberWithColor(
+                                item?.bid_volume,
+                                false,
+                                true,
+                              )}
+                            </div>
+                            <div>
+                              Mid Vol: {@html abbreviateNumberWithColor(
+                                item?.mid_volume,
+                                false,
+                                true,
+                              )}
+                            </div>
+                            <div>
+                              Ask Vol: {@html abbreviateNumberWithColor(
+                                item?.ask_volume,
+                                false,
+                                true,
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </HoverCard.Content>
+                    </HoverCard.Root>
+                  </td>
+
+                  <td class="text-sm sm:text-[1rem] text-end text-white">
+                    {(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) +
+                      "%"}
+                  </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,
+                    ) + "%"}
+                  </td>
+                  <td class="text-sm sm:text-[1rem] text-end text-white">
+                    {@html abbreviateNumberWithColor(
+                      item?.total_premium,
+                      false,
+                      true,
+                    )}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        {:else}
+          <div class="m-auto flex justify-center items-center h-80">
+            <div class="relative">
+              <label
+                class="bg-[#272727] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+              >
+                <span class="loading loading-spinner loading-md text-gray-400"
+                ></span>
+              </label>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>