From 724d41a13d32fc1460dabae5451709d1540b2802 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 15 Jan 2025 00:23:35 +0100
Subject: [PATCH] add volatility to etf page

---
 .../etf/[tickerID]/options/+layout.svelte     | 12 ++++
 .../options/volatility/+layout.svelte         | 15 ++++
 .../options/volatility/+page.server.ts        | 31 ++++++++
 .../options/volatility/+page.svelte           | 70 +++++++++++++++++++
 4 files changed, 128 insertions(+)
 create mode 100644 src/routes/etf/[tickerID]/options/volatility/+layout.svelte
 create mode 100644 src/routes/etf/[tickerID]/options/volatility/+page.server.ts
 create mode 100644 src/routes/etf/[tickerID]/options/volatility/+page.svelte

diff --git a/src/routes/etf/[tickerID]/options/+layout.svelte b/src/routes/etf/[tickerID]/options/+layout.svelte
index abb96dc0..acbf95c7 100644
--- a/src/routes/etf/[tickerID]/options/+layout.svelte
+++ b/src/routes/etf/[tickerID]/options/+layout.svelte
@@ -11,6 +11,7 @@
     const subSectionMap = {
       overview: "/options",
       "hottest-contracts": "/options/hottest-contracts",
+      volatility: "/options/volatility",
       gex: "/options/gex",
       dex: "/options/dex",
       oi: "/options/oi",
@@ -31,6 +32,7 @@
       const sectionMap = {
         overview: "overview",
         "hottest-contracts": "hottest-contracts",
+        volatility: "volatility",
         gex: "gex",
         dex: "dex",
         oi: "oi",
@@ -79,6 +81,16 @@
               >
                 Hottest Contracts
               </a>
+              <a
+                href={`/etf/${$etfTicker}/options/volatility`}
+                on:click={() => changeSubSection("volatility")}
+                class="p-2 px-5 cursor-pointer {displaySubSection ===
+                'volatility'
+                  ? '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]'}"
+              >
+                Volatility
+              </a>
               <a
                 href={`/etf/${$etfTicker}/options/oi`}
                 on:click={() => changeSubSection("oi")}
diff --git a/src/routes/etf/[tickerID]/options/volatility/+layout.svelte b/src/routes/etf/[tickerID]/options/volatility/+layout.svelte
new file mode 100644
index 00000000..22ee866b
--- /dev/null
+++ b/src/routes/etf/[tickerID]/options/volatility/+layout.svelte
@@ -0,0 +1,15 @@
+<section class="w-full overflow-hidden min-h-screen">
+  <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"
+      >
+        <main class="w-full">
+          <div class="mt-2 sm:mt-0">
+            <slot />
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/etf/[tickerID]/options/volatility/+page.server.ts b/src/routes/etf/[tickerID]/options/volatility/+page.server.ts
new file mode 100644
index 00000000..2deabb8c
--- /dev/null
+++ b/src/routes/etf/[tickerID]/options/volatility/+page.server.ts
@@ -0,0 +1,31 @@
+
+
+export const load = async ({ locals, params }) => {
+  const { apiKey, apiURL, user } = locals;
+
+  const getData = async () => {
+    const postData = {
+      ticker: params.tickerID,
+    };
+
+    const response = await fetch(apiURL + "/implied-volatility", {
+      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(),
+  };
+};
+
+
diff --git a/src/routes/etf/[tickerID]/options/volatility/+page.svelte b/src/routes/etf/[tickerID]/options/volatility/+page.svelte
new file mode 100644
index 00000000..297ebfb5
--- /dev/null
+++ b/src/routes/etf/[tickerID]/options/volatility/+page.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import {
+    etfTicker,
+    numberOfUnreadNotification,
+    displayCompanyName,
+  } from "$lib/store";
+
+  import Infobox from "$lib/components/Infobox.svelte";
+
+  import Volatility from "$lib/components/Options/Volatility.svelte";
+
+  export let data;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$etfTicker}) Volatility · Stocknear
+  </title>
+  <meta
+    name="description"
+    content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$etfTicker}) Volatility · Stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
+  />
+  <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} (${$etfTicker}) Volatility · Stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<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}
+        <Volatility {data} />
+      {:else}
+        <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+          <div class="mt-2">
+            <Infobox text="No data is available" />
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+</section>