add unusual activity section

src/lib/components/Options/UnusualActivity.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+  import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
+
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+
+  export let data;
+
+  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";
+  }
+
+  function formatDate(dateStr) {
+    // Parse the input date string (YYYY-mm-dd)
+    var date = new Date(dateStr);
+
+    // Get month, day, and year
+    var month = date.getMonth() + 1; // Month starts from 0
+    var day = date.getDate();
+    var year = date.getFullYear();
+
+    // Extract the last two digits of the year
+    var shortYear = year.toString().slice(-2);
+
+    // Add leading zeros if necessary
+    month = (month < 10 ? "0" : "") + month;
+    day = (day < 10 ? "0" : "") + day;
+
+    var formattedDate = month + "/" + day + "/" + year;
+
+    return formattedDate;
+  }
+
+  let rawData = data?.getData?.map((item) => ({
+    ...item,
+    dte: daysLeft(item?.expiry),
+  }));
+
+  let displayList = rawData?.slice(0, 150) || [];
+
+  $: columns = [
+    { key: "date", label: "Date", align: "left" },
+    { key: "dte", label: "DTE", align: "right" },
+    { key: "optionType", label: "P/C", align: "right" },
+    { key: "unusualType", label: "Type", align: "right" },
+    { key: "sentiment", label: "Sent.", align: "right" },
+    { key: "size", label: "Size", align: "right" },
+    { key: "strike", label: "Strike", align: "right" },
+    { key: "avgPrice", label: "Avg Price Paid", align: "right" },
+    { key: "price", label: "Spot", align: "right" },
+    { key: "premium", label: "Prem", align: "right" },
+  ];
+
+  $: sortOrders = {
+    date: { order: "none", type: "date" },
+    optionType: { order: "none", type: "string" },
+    unusualType: { order: "none", type: "string" },
+    dte: { order: "none", type: "number" },
+    sentiment: { order: "none", type: "string" },
+    size: { order: "none", type: "number" },
+    strike: { order: "none", type: "number" },
+    avgPrice: { order: "none", type: "number" },
+    price: { order: "none", type: "number" },
+    premium: { order: "none", type: "number" },
+  };
+
+  const sortData = (key) => {
+    // Reset all other keys to 'none' except the current key
+    for (const k in sortOrders) {
+      if (k !== key) {
+        sortOrders[k].order = "none";
+      }
+    }
+
+    // Cycle through 'none', 'asc', 'desc' for the clicked key
+    const orderCycle = ["none", "asc", "desc"];
+    let originalData = rawData;
+    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
+    sortOrders[key].order =
+      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
+    const sortOrder = sortOrders[key].order;
+
+    // Reset to original data when 'none' and stop further sorting
+    if (sortOrder === "none") {
+      displayList = [...originalData]; // Reset originalData to rawData
+      return;
+    }
+
+    // Define a generic comparison function
+    const compareValues = (a, b) => {
+      const { type } = sortOrders[key];
+      let valueA, valueB;
+
+      switch (type) {
+        case "date":
+          valueA = new Date(a[key]);
+          valueB = new Date(b[key]);
+          break;
+        case "string":
+          valueA = a[key].toUpperCase();
+          valueB = b[key].toUpperCase();
+          return sortOrder === "asc"
+            ? valueA.localeCompare(valueB)
+            : valueB.localeCompare(valueA);
+        case "number":
+        default:
+          valueA = parseFloat(a[key]);
+          valueB = parseFloat(b[key]);
+          break;
+      }
+
+      if (sortOrder === "asc") {
+        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      } else {
+        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
+      }
+    };
+
+    // Sort using the generic comparison function
+    displayList = [...originalData].sort(compareValues);
+  };
+</script>
+
+<section
+  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
+>
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <div class="sm:pl-7 sm:pb-7 sm:pt-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"
+        >
+          Unusual Activity
+        </h2>
+        <div class="w-full overflow-x-scroll text-white">
+          <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>
+              <TableHeader {columns} {sortOrders} {sortData} />
+            </thead>
+            <tbody>
+              {#each displayList 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 ===
+                    rawData?.slice(0, 3)?.length && data?.user?.tier !== 'Pro'
+                    ? 'opacity-[0.1]'
+                    : ''}"
+                >
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                  >
+                    {formatDate(item?.date)}
+                  </td>
+
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.dte}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.optionType}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.unusualType}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.sentiment}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.size?.toLocaleString("en-US")}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.strike}
+                  </td>
+
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.avgPrice}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {item?.price}
+                  </td>
+                  <td
+                    class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
+                  >
+                    {@html abbreviateNumberWithColor(
+                      item?.premium,
+                      false,
+                      true,
+                    )}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+
+        <UpgradeToPro {data} />
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .app {
+    height: 400px;
+    width: 100%;
+  }
+
+  @media (max-width: 560px) {
+    .app {
+      width: 100%;
+      height: 300px;
+    }
+  }
+
+  .chart {
+    width: 100%;
+  }
+</style>

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

@@ -11,6 +11,7 @@
     const subSectionMap = {
       overview: "/options",
       "hottest-contracts": "/options/hottest-contracts",
+      "unusual-activity": "/options/unusual-activity",
       volatility: "/options/volatility",
       gex: "/options/gex",
       dex: "/options/dex",
@@ -32,6 +33,7 @@
       const sectionMap = {
         overview: "overview",
         "hottest-contracts": "hottest-contracts",
+        "unusual-activity": "unusual-activity",
         volatility: "volatility",
         gex: "gex",
         dex: "dex",
@@ -70,7 +72,16 @@
               >
                 Overview
               </a>
-
+              <a
+                href={`/stocks/${$stockTicker}/options/unusual-activity`}
+                on:click={() => changeSubSection("unusual-activity")}
+                class="p-2 px-5 cursor-pointer {displaySubSection ===
+                'unusual-activity'
+                  ? '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]'}"
+              >
+                Unusual Activity
+              </a>
               <a
                 href={`/stocks/${$stockTicker}/options/hottest-contracts`}
                 on:click={() => changeSubSection("hottest-contracts")}

src/routes/stocks/[tickerID]/options/unusual-activity/+page.server.ts

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

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { stockTicker, displayCompanyName } from "$lib/store";
+
+  import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+
+  import UnusualActivity from "$lib/components/Options/UnusualActivity.svelte";
+
+  export let data;
+</script>
+
+<SEO
+  title={`${$displayCompanyName} (${$stockTicker}) - Explore Unusual Option Activity | Stocknear`}
+  description={`Analyze historical unusual option trades with a minimum of 1 million dollar premium for ${$displayCompanyName} (${$stockTicker}).`}
+/>
+
+<section
+  class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
+>
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      {#if data?.getData?.length > 0}
+        <UnusualActivity {data} />
+      {:else}
+        <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
+          <div class="mt-2">
+            <Infobox
+              text="No unusual options trading activity with a premium of at least $1 million was found."
+            />
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+</section>