add unusual activity for etf page

src/routes/etf/[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",
@@ -19,10 +20,10 @@
 
     if (state !== "overview" && subSectionMap[state]) {
       displaySubSection = state;
-      //goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
+      //goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
     } else {
       displaySubSection = state;
-      //goto(`/stocks/${$etfTicker}/statistics`);
+      //goto(`/etf/${$etfTicker}/statistics`);
     }
   }
 
@@ -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={`/etf/${$etfTicker}/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={`/etf/${$etfTicker}/options/hottest-contracts`}
                 on:click={() => changeSubSection("hottest-contracts")}
@@ -161,7 +172,7 @@
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
-                Build your Stock Screener to find profitable stocks.
+                Build your Stock Screener to find profitable etf.
               </span>
             </a>
           </div>

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

@@ -0,0 +1,49 @@
+
+
+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;
+  }; 
+  
+   const getHistoricalPrice = async () => {
+     const postData = { ticker: params.tickerID, timePeriod: "six-months" };
+  const response = await fetch(apiURL + "/historical-price", {
+    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(),
+    getHistoricalPrice: await getHistoricalPrice(),
+  };
+};
+
+

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { etfTicker, 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} (${$etfTicker}) - Explore Unusual Option Activity | Stocknear`}
+  description={`Analyze historical unusual option trades with a minimum of 1 million dollar premium for ${$displayCompanyName} (${$etfTicker}).`}
+/>
+
+<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>