add hottest contracts

src/lib/components/Options/DailyStats.svelte

@@ -9,7 +9,7 @@
 <div class="text-white">
   <label
     for="dailyStats"
-    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
   >
     Daily Stats
     <InfoModal
@@ -31,7 +31,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(rawData?.call_volume, false, true)}</td
+            >{abbreviateNumber(rawData?.call_volume, false)}</td
           ></tr
         >
         <tr
@@ -42,11 +42,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(
+            >{abbreviateNumber(rawData?.call_volume_ask_side, false)}</td
-              rawData?.call_volume_ask_side,
-              false,
-              true,
-            )}</td
           ></tr
         >
         <tr
@@ -57,11 +53,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(
+            >{abbreviateNumber(rawData?.call_volume_bid_side, false)}</td
-              rawData?.call_volume_bid_side,
-              false,
-              true,
-            )}</td
           ></tr
         >
         <tr
@@ -72,7 +64,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(rawData?.call_premium, false, true)}</td
+            >{abbreviateNumber(rawData?.call_premium, false)}</td
           ></tr
         >
 
@@ -84,11 +76,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(
+            >{abbreviateNumber(rawData?.net_call_premium, false)}</td
-              rawData?.net_call_premium,
-              false,
-              true,
-            )}</td
           ></tr
         >
         <tr
@@ -99,11 +87,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(
+            >{abbreviateNumber(rawData?.call_open_interest, false)}</td
-              rawData?.call_open_interest,
-              false,
-              true,
-            )}</td
           ></tr
         >
         <tr
@@ -114,7 +98,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(rawData?.iv_rank, false, true)}</td
+            >{abbreviateNumber(rawData?.iv_rank, false)}</td
           ></tr
         >
         <tr
@@ -136,11 +120,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(
+            >{abbreviateNumber(rawData?.total_open_interest, false)}</td
-              rawData?.total_open_interest,
-              false,
-              true,
-            )}</td
           ></tr
         >
         <tr
@@ -166,7 +146,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(rawData?.put_volume, false, true)}</td
+            >{abbreviateNumber(rawData?.put_volume, false)}</td
           ></tr
         >
         <tr
@@ -177,11 +157,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(
+            >{abbreviateNumber(rawData?.put_volume_ask_side, false)}</td
-              rawData?.put_volume_ask_side,
-              false,
-              true,
-            )}</td
           ></tr
         >
         <tr
@@ -192,11 +168,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(
+            >{abbreviateNumber(rawData?.put_volume_bid_side, false)}</td
-              rawData?.put_volume_bid_side,
-              false,
-              true,
-            )}</td
           ></tr
         >
         <tr
@@ -207,7 +179,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(rawData?.put_premium, false, true)}</td
+            >{abbreviateNumber(rawData?.put_premium, false)}</td
           ></tr
         >
         <tr
@@ -218,7 +190,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(rawData?.net_put_premium, false, true)}</td
+            >{abbreviateNumber(rawData?.net_put_premium, false)}</td
           ></tr
         >
         <tr
@@ -229,11 +201,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(
+            >{abbreviateNumber(rawData?.put_open_interest, false)}</td
-              rawData?.put_open_interest,
-              false,
-              true,
-            )}</td
           ></tr
         >
         <tr
@@ -303,21 +271,21 @@
                 <div class="flex justify-between space-x-4">
                   <div class="space-y-1 flex flex-col items-start text-white">
                     <div>
-                      Bearish: {@html abbreviateNumber(
+                      Bearish: {abbreviateNumber(
                         rawData?.premium_ratio[0],
                         false,
                         true,
                       )}
                     </div>
                     <div>
-                      Neutral: {@html abbreviateNumber(
+                      Neutral: {abbreviateNumber(
                         rawData?.premium_ratio[1],
                         false,
                         true,
                       )}
                     </div>
                     <div>
-                      Bullish: {@html abbreviateNumber(
+                      Bullish: {abbreviateNumber(
                         rawData?.premium_ratio[2],
                         false,
                         true,
@@ -337,11 +305,7 @@
           >
           <td
             class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-            >{@html abbreviateNumber(
+            >{abbreviateNumber(rawData?.open_interest_change, false)}</td
-              rawData?.open_interest_change,
-              false,
-              true,
-            )}</td
           ></tr
         >
         <tr

src/routes/stocks/[tickerID]/options/+layout.svelte

@@ -1,8 +1,45 @@
 <script lang="ts">
   import { stockTicker } from "$lib/store";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
+  import { page } from "$app/stores";
 
   export let data;
+
+  let displaySubSection = "overview";
+
+  function changeSubSection(state) {
+    const subSectionMap = {
+      overview: "/options",
+      "hottest-contracts": "/options/hottest-contracts",
+    };
+
+    if (state !== "overview" && subSectionMap[state]) {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
+    } else {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}/statistics`);
+    }
+  }
+
+  $: {
+    if ($page?.url?.pathname) {
+      const parts = $page?.url?.pathname.split("/");
+      const sectionMap = {
+        overview: "overview",
+        "hottest-contracts": "hottest-contracts",
+      };
+
+      const foundSection = parts?.find((part) =>
+        Object?.values(sectionMap)?.includes(part),
+      );
+
+      displaySubSection =
+        Object?.keys(sectionMap)?.find(
+          (key) => sectionMap[key] === foundSection,
+        ) || "overview";
+    }
+  }
 </script>
 
 <section class="w-full overflow-hidden min-h-screen">
@@ -11,8 +48,36 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4 mt-2 sm:mt-0">
+        <main class="w-full lg:w-3/4">
+          <nav
+            class="sm:ml-4 overflow-x-scroll pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
+          >
+            <ul class="flex flex-row items-center w-full text-white">
+              <a
+                href={`/stocks/${$stockTicker}/options`}
+                on:click={() => changeSubSection("overview")}
+                class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
+                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+              >
+                Overview
+              </a>
+
+              <a
+                href={`/stocks/${$stockTicker}/options/hottest-contracts`}
+                on:click={() => changeSubSection("hottest-contracts")}
+                class="p-2 px-5 cursor-pointer {displaySubSection ===
+                'hottest-contracts'
+                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+              >
+                Hottest Contracts
+              </a>
+            </ul>
+          </nav>
+          <div class="mt-2 sm:mt-0">
             <slot />
+          </div>
         </main>
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">

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

@@ -594,7 +594,7 @@
             <div class="p-4 bp:p-5 sm:p-6">
               <label
                 for="totaVolume"
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] w-fit"
               >
                 Total Volume
                 <InfoModal
@@ -613,7 +613,7 @@
             <div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
               <label
                 for="totalOpenInterest"
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] w-fit"
               >
                 Total OI
                 <InfoModal
@@ -631,7 +631,7 @@
             <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
               <label
                 for="putCallRatio"
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] w-fit"
               >
                 P/C Ratio
                 <InfoModal
@@ -651,7 +651,7 @@
             >
               <label
                 for="openInteresteRatio"
-                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
+                class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] w-fit"
               >
                 OI P/C Ratio
                 <InfoModal
@@ -702,7 +702,7 @@
                 class="text-xl text-white m-auto flex justify-center items-center h-full"
               >
                 <div
-                  class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
+                  class="text-white text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
                 >
                   <svg
                     class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
@@ -720,7 +720,7 @@
           </div>
 
           {#if data?.getOptionsGexData?.length !== 0}
-            <h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
+            <h3 class="text-2xl text-white font-bold mb-4 text-start">
               {activeEX === 0
                 ? "Daily Gamma Exposure (GEX)"
                 : "Daily Delta Exposure (DEX)"}
@@ -757,7 +757,7 @@
           {/if}
 
           {#if optionList?.length !== 0}
-            <h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
+            <h3 class="text-2xl text-white font-bold mb-4 text-start">
               {activeIdx === 0 ? "Historical Option Data" : "Option Chain Data"}
             </h3>
 
@@ -1162,7 +1162,7 @@
       </button>
     </form>
 
-    <p class="text-gray-200 mt-10 cursor-text">
+    <p class="text-white mt-10 cursor-text">
       <span class="text-white text-xl font-semibold mb-4"
         >Option Data Details:</span
       >

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

@@ -0,0 +1,32 @@
+
+
+export const load = async ({ locals, params }) => {
+  const { apiKey, apiURL } = locals;
+
+  const getData = async () => {
+    const postData = {
+      ticker: params.tickerID,
+    };
+
+    const response = await fetch(apiURL + "/hottest-contracts", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+
+  // Make sure to return a promise
+  return {
+    getData: await getData(),
+  };
+};
+
+

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

@@ -0,0 +1,368 @@
+<script lang="ts">
+  import { abbreviateNumberWithColor } from "$lib/utils";
+  import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
+
+  export let data;
+
+  let volumeList = data?.getData;
+  let openInterestList = volumeList?.sort(
+    (a, b) => b?.open_interest - a?.open_interest,
+  );
+
+  const currentTime = new Date(
+    new Date().toLocaleString("en-US", { timeZone: "America/New_York" }),
+  )?.getTime();
+
+  function daysLeft(targetDate) {
+    const targetTime = new Date(targetDate).getTime();
+    const difference = targetTime - currentTime;
+
+    const millisecondsPerDay = 1000 * 60 * 60 * 24;
+    const daysLeft = Math?.ceil(difference / millisecondsPerDay);
+
+    return daysLeft + "D";
+  }
+</script>
+
+<section class="w-full bg-default overflow-hidden text-white min-h-screen">
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <h2
+          class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
+        >
+          Hottest Contracts (Highest Volume)
+        </h2>
+
+        <table
+          class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
+        >
+          <thead class="bg-default">
+            <tr class="">
+              <td class="text-white font-semibold text-sm text-center">Chain</td
+              >
+
+              <td class="text-white font-semibold text-sm text-end">Last</td>
+              <td class="text-white font-semibold text-sm text-end">Low-High</td
+              >
+              <td class="text-white font-semibold text-sm text-end">Volume</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"
+                >Bid/Ask Vol</td
+              >
+              <td class="text-white font-semibold text-sm text-end"
+                >Total Prem</td
+              >
+            </tr>
+          </thead>
+          <tbody>
+            {#each volumeList as item, index}
+              <tr
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
+                  1 ===
+                  volumeList?.slice(0, 3)?.length && data?.user?.tier !== 'Pro'
+                  ? 'opacity-[0.1]'
+                  : ''}"
+              >
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                >
+                  {item?.strike_price}
+                  {item?.option_type === "C" ? "Call" : "Put"}
+                  {" " +
+                    item?.date_expiration +
+                    " " +
+                    `(${daysLeft(item?.date_expiration)})`}
+                </td>
+
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {item?.last_price}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {item?.low_price}-{item?.high_price}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {item?.volume?.toLocaleString("en-US")}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {item?.open_interest?.toLocaleString("en-US")}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {#if item?.open_interest_change >= 0}
+                    <span class="text-[#00FC50]"
+                      >+{item?.open_interest_change?.toLocaleString(
+                        "en-US",
+                      )}</span
+                    >
+                  {:else}
+                    <span class="text-[#FF2F1F]"
+                      >{item?.open_interest_change?.toLocaleString(
+                        "en-US",
+                      )}</span
+                    >
+                  {/if}
+                </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-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {@html abbreviateNumberWithColor(
+                    item?.total_premium,
+                    false,
+                    true,
+                  )}
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+
+        <h2
+          class="mt-10 flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
+        >
+          Highest OI Contracts
+        </h2>
+
+        <table
+          class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
+        >
+          <thead class="bg-default">
+            <tr class="">
+              <td class="text-white font-semibold text-sm text-center">Chain</td
+              >
+              <td class="text-white font-semibold text-sm text-end">Strike</td>
+
+              <td class="text-white font-semibold text-sm text-end">Last</td>
+              <td class="text-white font-semibold text-sm text-end">Low-High</td
+              >
+              <td class="text-white font-semibold text-sm text-end">Volume</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"
+                >Bid/Ask Vol</td
+              >
+              <td class="text-white font-semibold text-sm text-end"
+                >Total Prem</td
+              >
+            </tr>
+          </thead>
+          <tbody>
+            {#each openInterestList as item, index}
+              <tr
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
+                  1 ===
+                  openInterestList?.slice(0, 3)?.length &&
+                data?.user?.tier !== 'Pro'
+                  ? 'opacity-[0.1]'
+                  : ''}"
+              >
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                >
+                  {item?.option_type === "C" ? "Call" : "Put"}
+                  {" " +
+                    item?.date_expiration +
+                    " " +
+                    `(${daysLeft(item?.date_expiration)})`}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {item?.strike_price}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {item?.last_price}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {item?.low_price}-{item?.high_price}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {item?.volume?.toLocaleString("en-US")}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {item?.open_interest?.toLocaleString("en-US")}
+                </td>
+                <td
+                  class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {#if item?.open_interest_change >= 0}
+                    <span class="text-[#00FC50]"
+                      >+{item?.open_interest_change?.toLocaleString(
+                        "en-US",
+                      )}</span
+                    >
+                  {:else}
+                    <span class="text-[#FF2F1F]"
+                      >{item?.open_interest_change?.toLocaleString(
+                        "en-US",
+                      )}</span
+                    >
+                  {/if}
+                </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-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                >
+                  {@html abbreviateNumberWithColor(
+                    item?.total_premium,
+                    false,
+                    true,
+                  )}
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</section>

src/routes/stocks/[tickerID]/statistics/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { stockTicker, screenWidth } from "$lib/store";
+  import { stockTicker } from "$lib/store";
   import { page } from "$app/stores";
 
   let displaySubSection = "overview";