update dashboard

src/routes/+page.svelte

@@ -11,21 +11,12 @@
   import { compareTimes, formatTime, isPWAInstalled } from "$lib/utils";
   import Infobox from "$lib/components/Infobox.svelte";
   import { closedPWA } from "$lib/store";
+  import { options } from "marked";
 
   export let data;
-  let optionsMode = "premium";
+  let optionsMode = "openInterest";
 
-  function reformatDate(dateString) {
+  let optionsTable = data?.getDashboard?.optionsData?.openInterest || [];
-    return (
-      dateString.substring(5, 7) +
-      "/" +
-      dateString.substring(8) +
-      "/" +
-      dateString.substring(2, 4)
-    );
-  }
-
-  let optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
   let gainersList = data?.getDashboard?.marketMovers?.gainers || [];
   let losersList = data?.getDashboard?.marketMovers?.losers || [];
   let marketStatus = data?.getDashboard?.marketStatus ?? 0;
@@ -34,11 +25,11 @@
   function changeTable(state) {
     optionsMode = state;
     if (optionsMode === "premium") {
-      optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
+      optionsTable = data?.getDashboard?.optionsData?.premium || [];
-    } else if (optionsMode === "volume") {
+    } else if (optionsMode === "ivRank") {
-      optionsTable = data?.getDashboard?.optionsFlow?.volume || [];
+      optionsTable = data?.getDashboard?.optionsData?.ivRank || [];
-    } else {
+    } else if (optionsMode === "openInterest") {
-      optionsTable = data?.getDashboard?.optionsFlow?.openInterest || [];
+      optionsTable = data?.getDashboard?.optionsData?.openInterest || [];
     }
   }
   let Feedback;
@@ -434,10 +425,14 @@
                 <div class="flex flex-row w-full items-center">
                   <Card.Title
                     class="text-xl sm:text-2xl tex-white font-semibold"
-                    >Hottest Options Contract</Card.Title
+                    >Hottest Options Activity</Card.Title
                   >
                   <a
-                    href="/options-flow"
+                    href={optionsMode === "openInterest"
+                      ? "/list/highest-open-interest-change"
+                      : optionsMode === "ivRank"
+                        ? "/list/highest-option-iv-rank"
+                        : "/list/highest-option-premium"}
                     class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#fff] text-black"
                   >
                     View All
@@ -449,25 +444,22 @@
                 <Card.Description class="mt-2 text-sm sm:text-[1rem]"
                   >Recent unusual options with the highest ...</Card.Description
                 >
-                <Tabs.Root value="premium" class="w-full sm:w-fit mt-5 ">
+                <Tabs.Root value="openInterest" class="w-full sm:w-fit mt-5 ">
                   <Tabs.List class="grid w-full grid-cols-3 bg-secondary">
+                    <Tabs.Trigger
+                      on:click={() => changeTable("openInterest")}
+                      value="openInterest"
+                      class="text-sm">OI Change</Tabs.Trigger
+                    >
                     <Tabs.Trigger
                       on:click={() => changeTable("premium")}
                       value="premium"
                       class="text-sm">Premium</Tabs.Trigger
                     >
                     <Tabs.Trigger
-                      on:click={() => changeTable("volume")}
+                      on:click={() => changeTable("ivRank")}
-                      value="volume"
+                      value="ivRank"
-                      class="text-sm">Volume</Tabs.Trigger
+                      class="text-sm">IV Rank</Tabs.Trigger
-                    >
-                    <Tabs.Trigger
-                      on:click={() => changeTable("openInterest")}
-                      value="openInterest"
-                      class="text-sm"
-                      >{$screenWidth < 640
-                        ? "OI"
-                        : "Open Interest"}</Tabs.Trigger
                     >
                   </Tabs.List>
                 </Tabs.Root>
@@ -481,21 +473,17 @@
                       >Symbol</Table.Head
                     >
                     <Table.Head class="text-white text-right font-semibold"
-                      >Prem</Table.Head
+                      >Total OI</Table.Head
+                    >
+
+                    <Table.Head class="text-white text-right font-semibold"
+                      >Change OI</Table.Head
                     >
                     <Table.Head class="text-white text-right font-semibold"
-                      >Strike</Table.Head
+                      >Total Prem</Table.Head
                     >
                     <Table.Head class="text-white text-right font-semibold"
-                      >{optionsMode === "openInterest"
+                      >IV Rank</Table.Head
-                        ? "OI"
-                        : "Vol"}</Table.Head
-                    >
-                    <Table.Head class="text-white text-right font-semibold"
-                      >C/P</Table.Head
-                    >
-                    <Table.Head class="text-right text-white font-semibold"
-                      >Expiry</Table.Head
                     >
                   </Table.Row>
                 </Table.Header>
@@ -503,45 +491,36 @@
                   {#each optionsTable as item}
                     <Table.Row>
                       <Table.Cell class="text-sm sm:text-[1rem]">
-                        <HoverStockChart
+                        <HoverStockChart symbol={item?.symbol} />
-                          symbol={item?.ticker}
-                          assetType={item?.underlying_type}
-                        />
                       </Table.Cell>
                       <Table.Cell
-                        class="text-right xl:table.-column text-sm sm:text-[1rem] {item?.put_call ===
+                        class="text-right xl:table.-column text-sm sm:text-[1rem] "
-                        'Calls'
-                          ? 'text-[#00FC50]'
-                          : 'text-[#FF2F1F]'}"
                       >
-                        {abbreviateNumber(item?.cost_basis, true)}
+                        {abbreviateNumber(item?.totalOI)}
                       </Table.Cell>
                       <Table.Cell
                         class="text-right xl:table.-column text-sm sm:text-[1rem]"
                       >
-                        ${item?.strike_price}
+                        {#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
+                          >
+                        {/if}
                       </Table.Cell>
                       <Table.Cell
                         class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
                       >
-                        {abbreviateNumber(
+                        {abbreviateNumber(item?.totalPrem)}
-                          optionsMode === "openInterest"
-                            ? item?.open_interest
-                            : item?.volume,
-                        )}
                       </Table.Cell>
                       <Table.Cell
-                        class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.put_call ===
+                        class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
-                        'Calls'
-                          ? 'text-[#00FC50]'
-                          : 'text-[#FF2F1F]'}"
                       >
-                        {item?.put_call}
+                        {abbreviateNumber(item?.ivRank)}
                       </Table.Cell>
-
-                      <Table.Cell class="text-right text-sm sm:text-[1rem]"
-                        >{reformatDate(item?.date_expiration)}</Table.Cell
-                      >
                     </Table.Row>
                   {/each}
                 </Table.Body>

src/routes/list/highest-open-interest-change/+page.svelte

@@ -9,7 +9,8 @@
     { name: "Change OI", rule: "changeOI" },
     { name: "Price", rule: "price" },
     { name: "% Change", rule: "changesPercentage" },
-    { name: "Market Cap", rule: "marketCap" },
+    { name: "IV Rank", rule: "ivRank" },
+    { name: "Total Prem", rule: "totalPrem" },
   ];
 
   const excludedRules = new Set([
@@ -18,9 +19,10 @@
     "changesPercentage",
     "revenue",
     "eps",
-    "marketCap",
     "changeOI",
     "totalOI",
+    "totalPrem",
+    "ivRank",
   ]);
 </script>
 

src/routes/list/highest-open-interest/+page.svelte

@@ -9,7 +9,8 @@
     { name: "Change OI", rule: "changeOI" },
     { name: "Price", rule: "price" },
     { name: "% Change", rule: "changesPercentage" },
-    { name: "Market Cap", rule: "marketCap" },
+    { name: "IV Rank", rule: "ivRank" },
+    { name: "Total Prem", rule: "totalPrem" },
   ];
 
   const excludedRules = new Set([
@@ -18,9 +19,10 @@
     "changesPercentage",
     "revenue",
     "eps",
-    "marketCap",
     "changeOI",
     "totalOI",
+    "totalPrem",
+    "ivRank",
   ]);
 </script>
 

src/routes/list/highest-option-iv-rank/+page.svelte

@@ -5,11 +5,12 @@
   export let data;
 
   const defaultList = [
-    { name: "IV Rank", rule: "ivRank" },
     { name: "Total OI", rule: "totalOI" },
+    { name: "Change OI", rule: "changeOI" },
     { name: "Price", rule: "price" },
     { name: "% Change", rule: "changesPercentage" },
-    { name: "Market Cap", rule: "marketCap" },
+    { name: "IV Rank", rule: "ivRank" },
+    { name: "Total Prem", rule: "totalPrem" },
   ];
 
   const excludedRules = new Set([
@@ -18,9 +19,10 @@
     "changesPercentage",
     "revenue",
     "eps",
-    "marketCap",
+    "changeOI",
-    "ivRank",
     "totalOI",
+    "totalPrem",
+    "ivRank",
   ]);
 </script>
 

src/routes/list/highest-option-premium/+page.svelte

@@ -5,12 +5,12 @@
   export let data;
 
   const defaultList = [
-    { name: "Total Prem", rule: "totalPrem" },
+    { name: "Total OI", rule: "totalOI" },
-
+    { name: "Change OI", rule: "changeOI" },
-    { name: "IV Rank", rule: "ivRank" },
     { name: "Price", rule: "price" },
     { name: "% Change", rule: "changesPercentage" },
-    { name: "Market Cap", rule: "marketCap" },
+    { name: "IV Rank", rule: "ivRank" },
+    { name: "Total Prem", rule: "totalPrem" },
   ];
 
   const excludedRules = new Set([
@@ -19,9 +19,10 @@
     "changesPercentage",
     "revenue",
     "eps",
-    "marketCap",
+    "changeOI",
-    "ivRank",
+    "totalOI",
     "totalPrem",
+    "ivRank",
   ]);
 </script>