update option page

src/lib/components/Options/DailyStats.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import InfoModal from "$lib/components/InfoModal.svelte";
   import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
-  import { abbreviateNumber } from "$lib/utils";
+  import { abbreviateNumberWithColor } from "$lib/utils";
 
   export let rawData = {};
 </script>
@@ -31,31 +31,14 @@
           >
           <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]"
-            >{abbreviateNumber(rawData?.call_volume, false)}</td
+            >{@html abbreviateNumberWithColor(
-          ></tr
+              rawData?.call_volume,
-        >
+              false,
-        <tr
+              true,
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+            )}</td
-          ><td
-            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >Call Volume Ask Side</td
-          >
-          <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]"
-            >{abbreviateNumber(rawData?.call_volume_ask_side, false)}</td
-          ></tr
-        >
-        <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
-          ><td
-            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >Call Volume Bid Side</td
-          >
-          <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]"
-            >{abbreviateNumber(rawData?.call_volume_bid_side, false)}</td
           ></tr
         >
+
         <tr
           class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
@@ -64,7 +47,11 @@
           >
           <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]"
-            >{abbreviateNumber(rawData?.call_premium, false)}</td
+            >{@html abbreviateNumberWithColor(
+              rawData?.call_premium,
+              false,
+              true,
+            )}</td
           ></tr
         >
 
@@ -72,11 +59,15 @@
           class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >Net Call Premium</td
+            >Total Premium</td
           >
           <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]"
-            >{abbreviateNumber(rawData?.net_call_premium, false)}</td
+            >{@html abbreviateNumberWithColor(
+              rawData?.call_premium + rawData?.put_premium,
+              false,
+              true,
+            )}</td
           ></tr
         >
         <tr
@@ -87,18 +78,11 @@
           >
           <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]"
-            >{abbreviateNumber(rawData?.call_open_interest, false)}</td
+            >{@html abbreviateNumberWithColor(
-          ></tr
+              rawData?.call_open_interest,
-        >
+              false,
-        <tr
+              true,
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+            )}</td
-          ><td
-            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >IV Rank</td
-          >
-          <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]"
-            >{abbreviateNumber(rawData?.iv_rank, false)}</td
           ></tr
         >
         <tr
@@ -109,7 +93,7 @@
           </td>
           <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]"
-            >{rawData?.volatility}</td
+            >{rawData?.iv}%</td
           ></tr
         >
         <tr
@@ -120,18 +104,22 @@
           >
           <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]"
-            >{abbreviateNumber(rawData?.total_open_interest, false)}</td
+            >{@html abbreviateNumberWithColor(
+              rawData?.total_open_interest,
+              false,
+              true,
+            )}</td
           ></tr
         >
         <tr
           class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >Gex Ratio</td
+            >GEX</td
           >
           <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]"
-            >{rawData?.gex_ratio}</td
+            >{@html abbreviateNumberWithColor(rawData?.dex, false, true)}</td
           ></tr
         >
       </tbody>
@@ -146,31 +134,14 @@
           >
           <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]"
-            >{abbreviateNumber(rawData?.put_volume, false)}</td
+            >{@html abbreviateNumberWithColor(
-          ></tr
+              rawData?.put_volume,
-        >
+              false,
-        <tr
+              true,
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+            )}</td
-          ><td
-            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >Put Volume Ask Side</td
-          >
-          <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]"
-            >{abbreviateNumber(rawData?.put_volume_ask_side, false)}</td
-          ></tr
-        >
-        <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
-          ><td
-            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >Put Volume Bid Side</td
-          >
-          <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]"
-            >{abbreviateNumber(rawData?.put_volume_bid_side, false)}</td
           ></tr
         >
+
         <tr
           class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
@@ -179,31 +150,14 @@
           >
           <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]"
-            >{abbreviateNumber(rawData?.put_premium, false)}</td
+            >{@html abbreviateNumberWithColor(
-          ></tr
+              rawData?.put_premium,
-        >
+              false,
-        <tr
+              true,
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+            )}</td
-          ><td
-            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >Net Put Premium</td
-          >
-          <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]"
-            >{abbreviateNumber(rawData?.net_put_premium, false)}</td
-          ></tr
-        >
-        <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
-          ><td
-            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >Put Open Interest</td
-          >
-          <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]"
-            >{abbreviateNumber(rawData?.put_open_interest, false)}</td
           ></tr
         >
+
         <tr
           class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
@@ -212,111 +166,85 @@
           >
           <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]"
-            >{rawData?.put_call_ratio}</td
+            >{rawData?.putCallRatio}</td
           ></tr
         >
+
         <tr
           class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >🐻/🐂 Prem
+            >Put Open Interest</td
-          </td>
-          <td
-            class="whitespace-nowrap w-full px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-          >
-            <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 sm: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(({rawData
-                        ?.premium_ratio[0]} / ({rawData
-                        ?.premium_ratio[0]} + {rawData
-                        ?.premium_ratio[1]} + {rawData
-                        ?.premium_ratio[2]})) * 100%)"
-                    ></div>
-
-                    <!-- Neutral -->
-                    <div
-                      class="bg-gray-300 h-full"
-                      style="width: calc(({rawData
-                        ?.premium_ratio[1]} / ({rawData
-                        ?.premium_ratio[0]} + {rawData
-                        ?.premium_ratio[1]} + {rawData
-                        ?.premium_ratio[2]})) * 100%)"
-                    ></div>
-
-                    <!-- Bullish -->
-                    <div
-                      class="bg-green-500 h-full"
-                      style="width: calc(({rawData
-                        ?.premium_ratio[2]} / ({rawData
-                        ?.premium_ratio[0]} + {rawData
-                        ?.premium_ratio[1]} + {rawData
-                        ?.premium_ratio[2]})) * 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>
-                      Bearish: {abbreviateNumber(
-                        rawData?.premium_ratio[0],
-                        false,
-                        true,
-                      )}
-                    </div>
-                    <div>
-                      Neutral: {abbreviateNumber(
-                        rawData?.premium_ratio[1],
-                        false,
-                        true,
-                      )}
-                    </div>
-                    <div>
-                      Bullish: {abbreviateNumber(
-                        rawData?.premium_ratio[2],
-                        false,
-                        true,
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </HoverCard.Content>
-            </HoverCard.Root></td
-          >
-        </tr>
-        <tr
-          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
-          ><td
-            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >Open Interest Change</td
           >
           <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]"
-            >{abbreviateNumber(rawData?.open_interest_change, false)}</td
+            >{@html abbreviateNumberWithColor(
+              rawData?.put_open_interest,
+              false,
+              true,
+            )}</td
           ></tr
         >
+
         <tr
           class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
           ><td
             class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
-            >IV 30d</td
+            >Open Interest (OI) Change</td
           >
           <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]"
-            >{rawData?.iv30d}</td
+          >
+            {#if rawData?.changeOI >= 0}
+              <span class="text-[#00FC50]"
+                >+{rawData?.changeOI?.toLocaleString("en-US")}</span
+              >
+            {:else if rawData?.changeOI < 0}
+              <span class="text-[#FF2F1F]"
+                >{rawData?.changeOI?.toLocaleString("en-US")}
+              </span>
+            {:else}
+              <span class="text-white"> n/a </span>
+            {/if}</td
+          ></tr
+        >
+
+        <tr
+          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          ><td
+            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
+            >% OI Change</td
+          >
+          <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]"
+          >
+            {#if rawData?.changesPercentageOI >= 0}
+              <span class="text-[#00FC50]"
+                >+{rawData?.changesPercentageOI >= 1000
+                  ? abbreviateNumberWithColor(rawData?.changesPercentageOI)
+                  : rawData?.changesPercentageOI?.toFixed(2)}%</span
+              >
+            {:else if rawData?.changesPercentageOI < 0}
+              <span class="text-[#FF2F1F]"
+                >{rawData?.changesPercentageOI <= -1000
+                  ? abbreviateNumberWithColor(rawData?.changesPercentageOI)
+                  : rawData?.changesPercentageOI?.toFixed(2)}%
+              </span>
+            {:else}
+              <span class="text-white"> n/a </span>
+            {/if}</td
+          ></tr
+        >
+
+        <tr
+          class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
+          ><td
+            class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
+            >DEX</td
+          >
+          <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 abbreviateNumberWithColor(rawData?.dex, false, true)}</td
           ></tr
         >
       </tbody>

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

@@ -1,10 +1,5 @@
 <script lang="ts">
-  import {
+  import { displayCompanyName, screenWidth, stockTicker } from "$lib/store";
-    numberOfUnreadNotification,
-    displayCompanyName,
-    screenWidth,
-    stockTicker,
-  } from "$lib/store";
   import DailyStats from "$lib/components/Options/DailyStats.svelte";
   import { Chart } from "svelte-echarts";
   import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
@@ -15,6 +10,7 @@
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
   import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
@@ -60,10 +56,6 @@
     return formattedDate;
   }
 
-  function changeTimePeriod(event) {
-    displayTimePeriod = event.target.value;
-  }
-
   function changeVolumeOI(event) {
     displayData = event.target.value;
   }
@@ -292,42 +284,10 @@
   }
 </script>
 
-<svelte:head>
+<SEO
-  <meta charset="utf-8" />
+  title="Options Activity"
-  <meta name="viewport" content="width=device-width" />
+  description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`}
-  <title>
+/>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Options Activity · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Options Activity · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Options Activity · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
 
 <section class="w-full bg-default overflow-hidden text-white min-h-screen">
   <div class="w-full flex h-full overflow-hidden">
@@ -347,6 +307,7 @@
 
         {#if rawData?.length > 0}
           <div class="flex flex-row items-center w-full mt-10">
+            <!--
             <select
               class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
               on:change={changeTimePeriod}
@@ -358,9 +319,10 @@
               <option value="sixMonths">6 Months</option>
               <option value="oneYear" selected>1 Year</option>
             </select>
+            -->
 
             <select
-              class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
+              class=" w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
               on:change={changeVolumeOI}
             >
               <option disabled>Choose a category</option>
@@ -436,6 +398,9 @@
                     <td class="text-white font-semibold text-sm text-end"
                       >Total 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"
                       >% OI Change</td
                     >
@@ -470,7 +435,7 @@
                       </td>
 
                       <td class="text-white text-sm sm:text-[1rem] text-end">
-                        {#if item?.changesPercentage >= 0}
+                        {#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
                           <span class="text-[#00FC50]"
                             >+{item?.changesPercentage >= 1000
                               ? abbreviateNumberWithColor(
@@ -478,7 +443,7 @@
                                 )
                               : item?.changesPercentage?.toFixed(2)}%</span
                           >
-                        {:else if item?.changesPercentage < 0}
+                        {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
                           <span class="text-[#FF2F1F]"
                             >{item?.changesPercentage <= -1000
                               ? abbreviateNumberWithColor(
@@ -597,6 +562,20 @@
                         )}
                       </td>
 
+                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                        {#if item?.changeOI >= 0}
+                          <span class="text-[#00FC50]"
+                            >+{item?.changeOI?.toLocaleString("en-US")}</span
+                          >
+                        {:else if item?.changeOI < 0}
+                          <span class="text-[#FF2F1F]"
+                            >{item?.changeOI?.toLocaleString("en-US")}
+                          </span>
+                        {:else}
+                          <span class="text-white"> n/a </span>
+                        {/if}
+                      </td>
+
                       <td class="text-white text-sm sm:text-[1rem] text-end">
                         {#if item?.changesPercentageOI >= 0}
                           <span class="text-[#00FC50]"