add gex/dex

src/lib/components/Options/GreekExposure.svelte

@@ -37,19 +37,17 @@
     if (title === "Gamma") {
       return {
         ...item,
-        net_gamma: (item?.call_gamma || 0) + (item?.put_gamma || 0),
+        putCallRatio:
-        put_call_ratio:
+          item?.call_gex > 0
-          item?.call_gamma > 0
+            ? Math.abs((item?.put_gex || 0) / item?.call_gex)
-            ? Math.abs((item?.put_gamma || 0) / item?.call_gamma)
             : null,
       };
     } else {
       return {
         ...item,
-        net_delta: (item?.call_delta || 0) + (item?.put_delta || 0),
+        putCallRatio:
-        put_call_ratio:
+          item?.call_dex > 0
-          item?.call_delta > 0
+            ? Math.abs((item?.put_dex || 0) / item?.call_dex)
-            ? Math.abs((item?.put_delta || 0) / item?.call_delta)
             : null,
       };
     }
@@ -98,7 +96,7 @@
     // Extract the dates and gamma values from the filtered data
     const dateList = filteredData?.map((item) => item.date);
     const dataList = filteredData?.map((item) =>
-      title === "Gamma" ? item.net_gamma : item.net_delta,
+      title === "Gamma" ? item.netGex : item.netDex,
     );
     const priceList = filteredData?.map((item) => item.price);
 
@@ -106,9 +104,11 @@
   }
 
   function plotData() {
-    const data = rawData?.sort((a, b) => new Date(a?.date) - new Date(b?.date));
+    const history = data?.getData?.sort(
+      (a, b) => new Date(a?.date) - new Date(b?.date),
+    );
     const { dateList, dataList, priceList } = filterDataByPeriod(
-      data,
+      history,
       timePeriod,
     );
     const options = {
@@ -267,34 +267,34 @@
     title === "Gamma"
       ? [
           { key: "date", label: "Date", align: "left" },
-          { key: "call_gamma", label: "Call GEX", align: "right" },
+          { key: "call_gex", label: "Call GEX", align: "right" },
-          { key: "put_gamma", label: "Put GEX", align: "right" },
+          { key: "put_gex", label: "Put GEX", align: "right" },
-          { key: "net_gamma", label: "Net GEX", align: "right" },
+          { key: "netGex", label: "Net GEX", align: "right" },
-          { key: "put_call_ratio", label: "P/C GEX", align: "right" },
+          { key: "putCallRatio", label: "P/C GEX", align: "right" },
         ]
       : [
           { key: "date", label: "Date", align: "left" },
-          { key: "call_delta", label: "Call Delta", align: "right" },
+          { key: "call_dex", label: "Call Delta", align: "right" },
-          { key: "put_delta", label: "Put Delta", align: "right" },
+          { key: "put_dex", label: "Put Delta", align: "right" },
-          { key: "net_delta", label: "Net Delta", align: "right" },
+          { key: "netDex", label: "Net Delta", align: "right" },
-          { key: "put_call_ratio", label: "P/C Delta", align: "right" },
+          { key: "putCallRatio", label: "P/C Delta", align: "right" },
         ];
 
   $: sortOrders =
     title === "Gamma"
       ? {
           date: { order: "none", type: "date" },
-          call_gamma: { order: "none", type: "number" },
+          call_gex: { order: "none", type: "number" },
-          put_gamma: { order: "none", type: "number" },
+          put_gex: { order: "none", type: "number" },
-          net_gamma: { order: "none", type: "number" },
+          netGex: { order: "none", type: "number" },
-          put_call_ratio: { order: "none", type: "number" },
+          putCallRatio: { order: "none", type: "number" },
         }
       : {
           date: { order: "none", type: "date" },
-          call_delta: { order: "none", type: "number" },
+          call_dex: { order: "none", type: "number" },
-          put_delta: { order: "none", type: "number" },
+          put_dex: { order: "none", type: "number" },
-          net_delta: { order: "none", type: "number" },
+          netDex: { order: "none", type: "number" },
-          put_call_ratio: { order: "none", type: "number" },
+          putCallRatio: { order: "none", type: "number" },
         };
 
   const sortData = (key) => {
@@ -425,7 +425,7 @@
               class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
             >
               {@html abbreviateNumberWithColor(
-                title === "Gamma" ? item?.call_gamma : item?.call_delta,
+                title === "Gamma" ? item?.call_gex : item?.call_dex,
                 false,
                 true,
               )}
@@ -434,7 +434,7 @@
               class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
             >
               {@html abbreviateNumberWithColor(
-                title === "Gamma" ? item?.put_gamma : item?.put_delta,
+                title === "Gamma" ? item?.put_gex : item?.put_dex,
                 false,
                 true,
               )}
@@ -444,7 +444,7 @@
               class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
             >
               {@html abbreviateNumberWithColor(
-                title === "Gamma" ? item?.net_gamma : item?.net_delta,
+                title === "Gamma" ? item?.netGex : item?.netDex,
                 false,
                 true,
               )}
@@ -453,13 +453,13 @@
             <td
               class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
             >
-              {#if item?.put_call_ratio <= 1}
+              {#if item?.putCallRatio <= 1}
                 <span class="text-[#00FC50]"
-                  >{item?.put_call_ratio?.toFixed(2)}</span
+                  >{item?.putCallRatio?.toFixed(2)}</span
                 >
               {:else}
                 <span class="text-[#FF2F1F]"
-                  >{item?.put_call_ratio?.toFixed(2)}</span
+                  >{item?.putCallRatio?.toFixed(2)}</span
                 >
               {/if}
             </td>

src/routes/stocks/[tickerID]/options/dex/+page.svelte

@@ -1,52 +1,15 @@
 <script lang="ts">
-  import {
-    stockTicker,
-    numberOfUnreadNotification,
-    displayCompanyName,
-  } from "$lib/store";
   import Infobox from "$lib/components/Infobox.svelte";
   import GreekExposure from "$lib/components/Options/GreekExposure.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 </script>
 
-<svelte:head>
+<SEO
-  <meta charset="utf-8" />
+  title="Daily Delta Exposure"
-  <meta name="viewport" content="width=device-width" />
+  description="Analyze daily delta exposure with historic options volume and open interest data. Save individual contracts for future reference and optimize your trading strategy."
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Delta Exposure · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
 />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-  <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} (${$stockTicker}) Delta Exposure · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
-
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
 >

src/routes/stocks/[tickerID]/options/gex/+page.svelte

@@ -1,52 +1,16 @@
 <script lang="ts">
-  import {
-    stockTicker,
-    numberOfUnreadNotification,
-    displayCompanyName,
-  } from "$lib/store";
   import Infobox from "$lib/components/Infobox.svelte";
   import GreekExposure from "$lib/components/Options/GreekExposure.svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 </script>
 
-<svelte:head>
+<SEO
-  <meta charset="utf-8" />
+  title="Daily Gamma Exposure"
-  <meta name="viewport" content="width=device-width" />
+  description="Analyze daily gamma exposure with historic options volume and open interest data. Save individual contracts for future reference and optimize your trading strategy."
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Gamma Exposure · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
 />
 
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-  <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} (${$stockTicker}) Gamma Exposure · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Explore historic volume & open interest of option chains & save individual contracts for later`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
-
 <section
   class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
 >
@@ -55,7 +19,7 @@
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       {#if data?.getData?.length > 0}
-        <GreekExposure {data} title="Gamma" params="" />
+        <GreekExposure {data} title="Gamma" />
       {: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">