add sector flow

src/routes/market-flow/+layout.svelte

@@ -7,7 +7,7 @@
 
   const tabs = [
     {
-      title: "Market Flow",
+      title: "Overview",
       path: "/market-flow",
     },
     {
@@ -48,8 +48,6 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-10">
-          <!--
-          
           <h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
             {activeIdx === 0 ? "Market Flow" : "Sector Flow"}
           </h1>
@@ -67,7 +65,6 @@
               {/each}
             </ul>
           </nav>
-          -->
 
           <slot />
 

src/routes/market-flow/+page.svelte

@@ -5,6 +5,7 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import { abbreviateNumberWithColor } from "$lib/utils";
   import InfoModal from "$lib/components/InfoModal.svelte";
+
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
   import { Chart } from "svelte-echarts";
@@ -366,7 +367,7 @@
               }
               return "";
             },
-            interval: "auto", // Show label every 30 minutes (29 intervals between)
+            interval: 30,
           },
         },
 
@@ -503,21 +504,18 @@
         <main class="w-full">
           <div class="w-full m-auto">
             {#if optionsData !== null}
-              <div class="flex flex-row items-center mb-3">
+              <p class="mt-4 text-white">
-                <label
+                Market Flow evaluates the balance between advancing and
-                  for="marketTideInfo"
+                declining stocks by analyzing SP& 500 price movements, net call
-                  class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+                premiums and net put premiums, providing a real-time snapshot of
+                market sentiment and momentum. <a
+                  href="/learning-center/article/market-sentiment-through-options-activity-riding-the-tide"
+                  class="text-blue-400 sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
+                  >Learn more here.</a
                 >
-                  Market Flow
+              </p>
-                </label>
-                <InfoModal
-                  title={"Market Flow"}
-                  content={"Market Flow evaluates the balance between advancing and declining stocks by analyzing SPY price movements, net call premiums, and net put premiums, providing a real-time snapshot of market sentiment and momentum. <a href='/learning-center/article/market-sentiment-through-options-activity-riding-the-tide' class='text-blue-400 sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4'>Learn more</a>"}
-                  id={"marketTideInfo"}
-                />
-              </div>
 
-              <div class="text-white text-sm italic mb-3">
+              <div class="text-white text-sm italic mt-5 mb-3">
                 Last Updated: {formatDate(
                   findLastNonNull(marketTideData, "time"),
                 )}

src/routes/market-flow/sector-flow/+page.server.ts

@@ -0,0 +1,21 @@
+export const load = async ({ locals }) => {
+  const getData = async () => {
+    const { apiKey, apiURL, user } = locals;
+
+    const response = await fetch(apiURL + "/sector-flow", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+    });
+
+  let output = await response?.json();
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getData: await getData(),
+  };
+};

src/routes/market-flow/sector-flow/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { numberOfUnreadNotification, screenWidth } from "$lib/store";
+  import { screenWidth } from "$lib/store";
 
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
@@ -9,6 +9,7 @@
 
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
+  import SEO from "$lib/components/SEO.svelte";
 
   import { Chart } from "svelte-echarts";
 
@@ -48,16 +49,19 @@
     "Consumer Cyclical": "XLY",
   };
 
-  let sectorData = data?.getData?.sectorData || [];
+  //let sectorData = data?.getData?.sectorData || [];
-  let topSectorTickers = data?.getData?.topSectorTickers || {};
+  let topPosNetPremium =
+    data?.getData?.topPosNetPremium[sectorDict[selectedSector]] || [];
+  let topNegNetPremium =
+    data?.getData?.topNegNetPremium[sectorDict[selectedSector]] || [];
+
   let marketTideData =
-    data?.getData?.marketTide[sectorDict[selectedSector]] || {};
+    data?.getData?.sectorFlow[sectorDict[selectedSector]] || {};
-  let originalData = [...sectorData]; // Unaltered copy of raw data
+  let originalPosTickers = topPosNetPremium;
+  let displayPosTickers = topPosNetPremium;
 
-  let stockList = sectorData ?? [];
+  let originalNegTickers = topNegNetPremium;
-
+  let displayNegTickers = topNegNetPremium;
-  let originalTopTickers = [...topSectorTickers[selectedSector]];
-  let displayTopTickers = topSectorTickers[selectedSector];
 
   function findLastNonNull(dataArray, key) {
     for (let i = dataArray.length - 1; i >= 0; i--) {
@@ -109,15 +113,12 @@
     changesPercentage: { order: "none", type: "number" },
     call_volume: { order: "none", type: "number" },
     put_volume: { order: "none", type: "number" },
-    premium_ratio: { order: "none", type: "number" },
+    net_premium: { order: "none", type: "number" },
-    avg30_call_volume: { order: "none", type: "string" },
+    net_call_premium: { order: "none", type: "number" },
-    avg30_put_volume: { order: "none", type: "number" },
+    net_put_premium: { order: "none", type: "number" },
-    netPremium: { order: "none", type: "number" },
+    call_premium: { order: "none", type: "number" },
-    netCallPremium: { order: "none", type: "number" },
+    put_premium: { order: "none", type: "number" },
-    netPutPremium: { order: "none", type: "number" },
+    iv_rank: { order: "none", type: "number" },
-    gexRatio: { order: "none", type: "number" },
-    gexNetChange: { order: "none", type: "number" },
-    ivRank: { order: "none", type: "number" },
   };
 
   $: topColumns = [
@@ -126,15 +127,13 @@
     { key: "name", label: "Name", align: "left" },
     { key: "price", label: "Price", align: "right" },
     { key: "changesPercentage", label: "% Change", align: "right" },
-    { key: "netPremium", label: "Net Prem", align: "right" },
+    { key: "net_premium", label: "Net Prem", align: "right" },
-    { key: "netCallPremium", label: "Net Call Prem", align: "right" },
+    { key: "net_call_premium", label: "Net Call Prem", align: "right" },
-    { key: "netPutPremium", label: "Net Put Prem", align: "right" },
+    { key: "net_put_premium", label: "Net Put Prem", align: "right" },
-    { key: "gexRatio", label: "Gex Ratio", align: "right" },
+    { key: "iv_rank", label: "IV Rank", align: "right" },
-    { key: "gexNetChange", label: "Gex Change", align: "right" },
-    { key: "ivRank", label: "IV Rank", align: "right" },
   ];
 
-  const sortData = (key) => {
+  const sortPosTickers = (key) => {
     // Reset all other keys to 'none' except the current key
     for (const k in sortOrders) {
       if (k !== key) {
@@ -152,8 +151,8 @@
 
     // Reset to original data when 'none' and stop further sorting
     if (sortOrder === "none") {
-      originalData = [...sectorData]; // Reset originalData to sectorData
+      originalPosTickers = [...topPosNetPremium]; // Reset originalPosTickers to sectorData
-      stockList = originalData?.slice(0, 50); // Reset displayed data
+      displayPosTickers = originalPosTickers?.slice(0, 50);
       return;
     }
 
@@ -188,10 +187,12 @@
     };
 
     // Sort using the generic comparison function
-    stockList = [...originalData].sort(compareValues)?.slice(0, 50);
+    displayPosTickers = [...originalPosTickers]
+      .sort(compareValues)
+      ?.slice(0, 50);
   };
 
-  const sortTopTickers = (key) => {
+  const sortNegTickers = (key) => {
     // Reset all other keys to 'none' except the current key
     for (const k in sortOrders) {
       if (k !== key) {
@@ -209,8 +210,8 @@
 
     // Reset to original data when 'none' and stop further sorting
     if (sortOrder === "none") {
-      originalTopTickers = [...topSectorTickers[selectedSector]]; // Reset originalTopTickers to sectorData
+      originalNegTickers = [...topNegNetPremium];
-      displayTopTickers = originalTopTickers;
+      displayNegTickers = originalNegTickers?.slice(0, 50);
       return;
     }
 
@@ -245,15 +246,17 @@
     };
 
     // Sort using the generic comparison function
-    displayTopTickers = [...originalTopTickers]
+    displayNegTickers = [...originalNegTickers]
       .sort(compareValues)
       ?.slice(0, 50);
   };
 
   function getPlotOptions() {
     isLoading = true;
-    let dates = marketTideData?.map((item) => item?.timestamp);
+    let dates = marketTideData?.map((item) => item?.time);
-    const priceList = marketTideData?.map((item) => item?.close);
+    const priceList = marketTideData?.map((item) =>
+      item?.close !== null ? item?.close?.toFixed(2) : item?.close,
+    );
     const netCallPremList = marketTideData?.map(
       (item) => item?.net_call_premium,
     );
@@ -266,7 +269,6 @@
     const options = {
       silent: true,
       animation: false,
-      backgroundColor: "#18181D",
       legend: {
         data: ["Price", "Vol", "Net Call Premium", "Net Put Premium"],
         textStyle: {
@@ -376,7 +378,7 @@
               let [hours, minutes] = timePart.split(":").map(Number);
 
               // Only show labels at 30-minute intervals (XX:00 and XX:30)
-              if (minutes % 60 === 0) {
+              if (minutes % 30 === 0) {
                 const amPm = hours >= 12 ? "PM" : "AM";
                 hours = hours % 12 || 12;
                 return minutes === 0
@@ -385,7 +387,7 @@
               }
               return "";
             },
-            interval: 29, // Show label every 30 minutes (29 intervals between)
+            interval: 30,
           },
         },
 
@@ -505,56 +507,34 @@
     isLoading = false;
     return options;
   }
+  optionsData = marketTideData ? getPlotOptions() : null;
 
   $: {
     if (selectedSector) {
-      originalTopTickers = [...topSectorTickers[selectedSector]];
+      topPosNetPremium =
-      displayTopTickers = topSectorTickers[selectedSector];
+        data?.getData?.topPosNetPremium[sectorDict[selectedSector]] || [];
-      displayTopTickers =
+      topNegNetPremium =
-        data?.user?.tier === "Pro"
+        data?.getData?.topNegNetPremium[sectorDict[selectedSector]] || [];
-          ? displayTopTickers
+
-          : displayTopTickers?.slice(0, 3);
       marketTideData =
-        data?.getData?.marketTide[sectorDict[selectedSector]] || {};
+        data?.getData?.sectorFlow[sectorDict[selectedSector]] || {};
+      originalPosTickers = topPosNetPremium;
+      displayPosTickers = topPosNetPremium;
+
+      originalNegTickers = topNegNetPremium;
+      displayNegTickers = topNegNetPremium;
       optionsData = marketTideData ? getPlotOptions() : null;
     }
   }
 </script>
 
-<svelte:head>
+<SEO
-  <meta charset="utf-8" />
+  title="Live Sector Flow - Real-Time Sector Options Sentiment"
-  <meta name="viewport" content="width=device-width" />
+  description="Get real-time insights on all sectors of the stock market flow sentiment through options premium analysis. Track trends and make informed trading decisions."
-  <title>
+/>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Live
-    Market Flow · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Track and compare historical and current options activity
-              performances of the market & sectors`}
-  />
-
-  <!-- Other meta tags -->
-  <meta property="og:title" content={`Live Market Flow · Stocknear`} />
-  <meta
-    property="og:description"
-    content={`Track and compare historical and current options activity`}
-  />
-  <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={`Live Market Flow · Stocknear`} />
-  <meta
-    name="twitter:description"
-    content={`              performances of the market & sectors`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
 
 <section class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden">
-  <div class="w-full overflow-hidden m-auto mt-5">
+  <div class="w-full overflow-hidden m-auto">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
@@ -562,145 +542,131 @@
         <main class="w-full">
           <div class="w-full m-auto">
             {#if optionsData !== null}
-              <div
+              <p class="mt-4 text-white">
-                class="flex flex-wrap sm:flex-row items-center sm:justify-between mb-4"
+                <strong>{selectedSector}</strong> Flow tracks sector stocks, net
-              >
+                call/put premiums, and price movements to gauge market sentiment
-                <div class="flex flex-row items-center">
+                and momentum in real time.
-                  <label
+              </p>
-                    for="sectorTideInfo"
-                    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
-                  >
-                    {selectedSector} Tide
-                  </label>
-                  <InfoModal
-                    title={"Sector Tide"}
-                    content={`Sector Tide evaluates the balance between advancing and declining stocks by analyzing ${selectedSector} sector price movements, net call premiums, and net put premiums, providing a real-time snapshot of market sentiment and momentum. <a href='/learning-center/market-tide' class='text-blue-400 sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4'>Learn more</a>`}
-                    id={"sectorTideInfo"}
-                  />
-                </div>
 
-                <div
+              <div
-                  class="flex flex-row items-center w-fit ml-auto mt-2 sm:mt-0"
+                class="flex flex-row items-center w-fit ml-auto mt-2 sm:mt-0"
-                >
+              >
-                  <div class="relative inline-block text-left grow">
+                <div class="relative inline-block text-left grow">
-                    <DropdownMenu.Root>
+                  <DropdownMenu.Root>
-                      <DropdownMenu.Trigger asChild let:builder>
+                    <DropdownMenu.Trigger asChild let:builder>
-                        <Button
+                      <Button
-                          builders={[builder]}
+                        builders={[builder]}
-                          class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                        class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
-                        >
-                          <span class="truncate text-white"
-                            >{selectedSector}</span
-                          >
-                          <svg
-                            class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            style="max-width:40px"
-                            aria-hidden="true"
-                          >
-                            <path
-                              fill-rule="evenodd"
-                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                              clip-rule="evenodd"
-                            ></path>
-                          </svg>
-                        </Button>
-                      </DropdownMenu.Trigger>
-                      <DropdownMenu.Content
-                        class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                       >
-                        <DropdownMenu.Label class="text-gray-400">
+                        <span class="truncate text-white">{selectedSector}</span
-                          Select Sector
+                        >
-                        </DropdownMenu.Label>
+                        <svg
-                        <DropdownMenu.Separator />
+                          class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
-                        <DropdownMenu.Group>
+                          viewBox="0 0 20 20"
-                          {#each sectorList as sector}
+                          fill="currentColor"
-                            <DropdownMenu.Item
+                          style="max-width:40px"
-                              on:click={() => (selectedSector = sector)}
+                          aria-hidden="true"
-                              class="cursor-pointer hover:bg-primary"
+                        >
-                            >
+                          <path
-                              {sector}
+                            fill-rule="evenodd"
-                            </DropdownMenu.Item>
+                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                          {/each}
+                            clip-rule="evenodd"
-                        </DropdownMenu.Group>
+                          ></path>
-                      </DropdownMenu.Content>
+                        </svg>
-                    </DropdownMenu.Root>
+                      </Button>
-                  </div>
+                    </DropdownMenu.Trigger>
+                    <DropdownMenu.Content
+                      class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                    >
+                      <DropdownMenu.Label class="text-gray-400">
+                        Select Sector
+                      </DropdownMenu.Label>
+                      <DropdownMenu.Separator />
+                      <DropdownMenu.Group>
+                        {#each sectorList as sector}
+                          <DropdownMenu.Item
+                            on:click={() => (selectedSector = sector)}
+                            class="cursor-pointer hover:bg-primary"
+                          >
+                            {sector}
+                          </DropdownMenu.Item>
+                        {/each}
+                      </DropdownMenu.Group>
+                    </DropdownMenu.Content>
+                  </DropdownMenu.Root>
                 </div>
               </div>
-              <div
-                class="mt-5 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-4 sm:divide-x sm:divide-y-0"
-              >
-                <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-                  <div class="flex items-center justify-between sm:block">
-                    <div class="text-[1rem] font-semibold text-white">Date</div>
-                    <div
-                      class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
-                    >
-                      {formatDate(findLastNonNull(marketTideData, "timestamp"))}
-                    </div>
-                  </div>
-                </div>
 
-                <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+              <div class="text-white text-sm italic mt-5 mb-3">
-                  <div class="flex items-center justify-between sm:block">
+                Last Updated: {formatDate(
-                    <div class="text-[1rem] font-semibold text-white">
+                  findLastNonNull(marketTideData, "time"),
-                      Volume
+                )}
-                    </div>
+              </div>
-                    <div
+              <div
-                      class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
+                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
-                    >
+              >
+                <div
+                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                >
+                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                    <span>Volume</span>
+                    <span class="ml-1 text-yellow-400">●</span>
+                  </div>
+                  <div class="flex items-baseline">
+                    <span class="text-2xl font-bold text-white">
                       {@html abbreviateNumberWithColor(
                         findLastNonNull(marketTideData, "net_volume"),
                         false,
                         true,
-                      )}
+                      )}</span
-                    </div>
+                    >
                   </div>
                 </div>
-                <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+
-                  <div class="flex items-center justify-between sm:block">
+                <div
-                    <div class="text-[1rem] font-semibold text-white">
+                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
-                      Net Call Premium
+                >
-                    </div>
+                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
-                    <div
+                    <span>Net Call Prem</span>
-                      class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
+                    <span class="ml-1 text-green-500">●</span>
-                    >
+                  </div>
-                      {@html abbreviateNumberWithColor(
+                  <div class="flex items-baseline">
+                    <span class="text-2xl font-bold text-white"
+                      >{@html abbreviateNumberWithColor(
                         findLastNonNull(marketTideData, "net_call_premium"),
                         false,
                         true,
-                      )}
+                      )}</span
-                    </div>
+                    >
                   </div>
                 </div>
-                <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+
-                  <div class="flex items-center justify-between sm:block">
+                <div
-                    <div class="text-[1rem] font-semibold text-white">
+                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
-                      Net Put Premium
+                >
-                    </div>
+                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
-                    <div
+                    <span>Net Put Prem</span>
-                      class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
+                    <span class="ml-1 text-red-400">●</span>
-                    >
+                  </div>
-                      {@html abbreviateNumberWithColor(
+                  <div class="flex items-baseline">
+                    <span class="text-2xl font-bold text-white"
+                      >{@html abbreviateNumberWithColor(
                         findLastNonNull(marketTideData, "net_put_premium"),
                         false,
                         true,
-                      )}
+                      )}</span
-                    </div>
+                    >
                   </div>
                 </div>
               </div>
-              <div
+
-                class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-800"
+              <div class="pb-8 sm:pb-2 rounded border border-gray-600">
-              >
                 <div class="app w-full h-[300px] mt-5">
                   {#if isLoading}
                     <div class="flex justify-center items-center h-80">
                       <div class="relative">
                         <label
-                          class="bg-secondary rounded-md 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"
+                          class="bg-secondary z-10 rounded-md 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-white"
@@ -714,121 +680,221 @@
                 </div>
               </div>
             {/if}
-          </div>
+            <div class="w-full m-auto mt-10">
-          <div class="w-full m-auto mt-10">
+              <div
-            <div class="flex flex-wrap sm:flex-row items-center mb-4">
+                class="flex flex-wrap sm:flex-row items-center sm:justify-between mb-4"
-              <div class="flex flex-row items-center">
+              >
-                <label
+                <div class="flex flex-row items-center">
-                  for="topSectorTickers"
+                  <label
-                  class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+                    for="topPosNetPrem"
+                    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+                  >
+                    Top Stocks by Positive Net Prem
+                  </label>
+                  <InfoModal
+                    title={"Top Stocks by Positive Net Prem"}
+                    content={"This list showcases top stocks with a positive net premium, indicating bullish sentiment. Track price movements, analyze options activity, and uncover the stocks leading their sectors with detailed options data."}
+                    id={"topPosNetPrem"}
+                  />
+                </div>
+              </div>
+
+              <div
+                class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
+              >
+                <table
+                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border border-gray-800 m-auto"
                 >
-                  Top {selectedSector} Stocks by Net Premium
+                  <thead>
-                </label>
+                    <TableHeader
-                <InfoModal
+                      columns={topColumns}
-                  title={"Top Sector Stocks by Net Premium"}
+                      {sortOrders}
-                  content={"This list highlights top stocks in each sector based on net premium, displaying price changes and options activity. Discover which stocks are driving the sector and explore detailed options data."}
+                      sortData={sortPosTickers}
-                  id={"topSectorTickers"}
+                    />
-                />
+                  </thead>
+                  <tbody>
+                    {#each displayPosTickers as item, index}
+                      <tr
+                        class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                          1 ===
+                          originalPosTickers?.length &&
+                        data?.user?.tier !== 'Pro'
+                          ? 'opacity-[0.1]'
+                          : ''}"
+                      >
+                        <td
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        >
+                          {item?.rank}
+                        </td>
+
+                        <td
+                          class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                        >
+                          <HoverStockChart symbol={item?.symbol} />
+                        </td>
+
+                        <td
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        >
+                          {item?.name?.length > 20
+                            ? item?.name?.slice(0, 20) + "..."
+                            : item?.name}
+                        </td>
+
+                        <td
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        >
+                          {item?.price}
+                        </td>
+
+                        <td
+                          class="text-sm sm:text-[1rem] {item?.changesPercentage >=
+                          0
+                            ? "text-[#00FC50] before:content-['+'] "
+                            : 'text-[#FF2F1F]'} text-end"
+                        >
+                          {item?.changesPercentage}%
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-end">
+                          {@html abbreviateNumberWithColor(
+                            item?.net_premium,
+                            false,
+                            true,
+                          )}
+                        </td>
+                        <td class="text-sm sm:text-[1rem] text-end">
+                          {@html abbreviateNumberWithColor(
+                            item?.net_call_premium,
+                            false,
+                            true,
+                          )}
+                        </td>
+                        <td class="text-sm sm:text-[1rem] text-end">
+                          {@html abbreviateNumberWithColor(
+                            item?.net_put_premium,
+                            false,
+                            true,
+                          )}
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-end">
+                          {item?.iv_rank}
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              </div>
+
+              <div class="mb-3 mt-10">
+                <div class="flex flex-row items-center">
+                  <label
+                    for="topNegNetPrem"
+                    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+                  >
+                    Top Stocks by Negative Net Prem
+                  </label>
+                  <InfoModal
+                    title={"Top Stocks by Negative Net Prem"}
+                    content={"This list showcases top stocks with a negative net premium, indicating bullish sentiment. Track price movements, analyze options activity, and uncover the stocks leading their sectors with detailed options data."}
+                    id={"topNegNetPrem"}
+                  />
+                </div>
+              </div>
+
+              <div
+                class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
+              >
+                <table
+                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border border-gray-800 m-auto"
+                >
+                  <thead>
+                    <TableHeader
+                      columns={topColumns}
+                      {sortOrders}
+                      sortData={sortNegTickers}
+                    />
+                  </thead>
+                  <tbody>
+                    {#each displayNegTickers as item, index}
+                      <tr
+                        class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                          1 ===
+                          originalNegTickers?.length &&
+                        data?.user?.tier !== 'Pro'
+                          ? 'opacity-[0.1]'
+                          : ''}"
+                      >
+                        <td
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        >
+                          {item?.rank}
+                        </td>
+
+                        <td
+                          class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                        >
+                          <HoverStockChart symbol={item?.symbol} />
+                        </td>
+
+                        <td
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        >
+                          {item?.name?.length > 20
+                            ? item?.name?.slice(0, 20) + "..."
+                            : item?.name}
+                        </td>
+
+                        <td
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        >
+                          {item?.price}
+                        </td>
+
+                        <td
+                          class="text-sm sm:text-[1rem] {item?.changesPercentage >=
+                          0
+                            ? "text-[#00FC50] before:content-['+'] "
+                            : 'text-[#FF2F1F]'} text-end"
+                        >
+                          {item?.changesPercentage}%
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-end">
+                          {@html abbreviateNumberWithColor(
+                            item?.net_premium,
+                            false,
+                            true,
+                          )}
+                        </td>
+                        <td class="text-sm sm:text-[1rem] text-end">
+                          {@html abbreviateNumberWithColor(
+                            item?.net_call_premium,
+                            false,
+                            true,
+                          )}
+                        </td>
+                        <td class="text-sm sm:text-[1rem] text-end">
+                          {@html abbreviateNumberWithColor(
+                            item?.net_put_premium,
+                            false,
+                            true,
+                          )}
+                        </td>
+
+                        <td class="text-sm sm:text-[1rem] text-end">
+                          {item?.iv_rank}
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
               </div>
             </div>
-
+            <UpgradeToPro {data} />
-            <div
-              class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
-            >
-              <table
-                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border border-gray-800 m-auto"
-              >
-                <thead>
-                  <TableHeader
-                    columns={topColumns}
-                    {sortOrders}
-                    sortData={sortTopTickers}
-                  />
-                </thead>
-                <tbody>
-                  {#each displayTopTickers as item, index}
-                    <tr
-                      class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
-                        1 ===
-                        sectorData?.length && data?.user?.tier !== 'Pro'
-                        ? 'opacity-[0.1]'
-                        : ''}"
-                    >
-                      <td
-                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                      >
-                        {item?.rank}
-                      </td>
-
-                      <td
-                        class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
-                      >
-                        <HoverStockChart symbol={item?.ticker} />
-                      </td>
-
-                      <td
-                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                      >
-                        {item?.name}
-                      </td>
-
-                      <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                      >
-                        {item?.price}
-                      </td>
-
-                      <td
-                        class="text-sm sm:text-[1rem] {item?.changesPercentage >=
-                        0
-                          ? "text-[#00FC50] before:content-['+'] "
-                          : 'text-[#FF2F1F]'} text-end"
-                      >
-                        {item?.changesPercentage}%
-                      </td>
-
-                      <td class="text-sm sm:text-[1rem] text-end">
-                        {@html abbreviateNumberWithColor(
-                          item?.netPremium,
-                          false,
-                          true,
-                        )}
-                      </td>
-                      <td class="text-sm sm:text-[1rem] text-end">
-                        {@html abbreviateNumberWithColor(
-                          item?.netCallPremium,
-                          false,
-                          true,
-                        )}
-                      </td>
-                      <td class="text-sm sm:text-[1rem] text-end">
-                        {@html abbreviateNumberWithColor(
-                          item?.netPutPremium,
-                          false,
-                          true,
-                        )}
-                      </td>
-
-                      <td class="text-sm sm:text-[1rem] text-end">
-                        {item?.gexRatio}
-                      </td>
-                      <td class="text-sm sm:text-[1rem] text-end">
-                        {@html abbreviateNumberWithColor(
-                          item?.gexNetChange,
-                          false,
-                          true,
-                        )}
-                      </td>
-                      <td class="text-sm sm:text-[1rem] text-end">
-                        {item?.ivRank}
-                      </td>
-                    </tr>
-                  {/each}
-                </tbody>
-              </table>
-            </div>
           </div>
-          <UpgradeToPro {data} />
         </main>
       </div>
     </div>