bugfixing

src/routes/api/historical-price/+server.ts

@@ -15,6 +15,5 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   });
 
   const output = await response.json();
-
   return new Response(JSON.stringify(output));
 };

src/routes/watchlist/options/+page.server.ts

@@ -1,3 +1,14 @@
+  function daysLeft(targetDate) {
+    const targetTime = new Date(targetDate).getTime();
+    const currentTime = new Date().getTime();
+    const difference = targetTime - currentTime;
+
+    const millisecondsPerDay = 1000 * 60 * 60 * 24;
+    const daysLeft = Math?.ceil(difference / millisecondsPerDay);
+
+    return daysLeft;
+  }
+  
 export const load = async ({ locals }) => {
   const getOptionsWatchlist = async () => {
     const { apiKey, apiURL, pb, user } = locals;
@@ -21,6 +32,13 @@ export const load = async ({ locals }) => {
           body: JSON.stringify(postData),
         });
         const output = await response.json();
+
+        output?.forEach((item) => {
+        item.dte = daysLeft(item?.date_expiration);
+        item.size = Math.floor(item?.cost_basis / (item?.price * 100));
+      });
+
+
         return { id: watchList?.id, optionsList: output };
       } else {
         return { id: "", optionsList: [] };

src/routes/watchlist/options/+page.svelte

@@ -7,6 +7,7 @@
   import { screenWidth, setCache, getCache } from "$lib/store";
   import { onMount } from "svelte";
   import { toast } from "svelte-sonner";
+  import highcharts from "$lib/highcharts.ts";
   import { mode } from "mode-watcher";
 
   export let data;
@@ -16,7 +17,7 @@
   let deleteOptionsId = [];
 
   let isLoaded = false;
-  let configContract = null;
+  let config = null;
 
   let optionHistoryList = [];
   let selectGraphType = "Vol/OI";
@@ -24,6 +25,7 @@
   let rawDataHistory = [];
   let strikePrice;
   let optionType;
+  let optionSymbol;
   let dateExpiration;
   let ticker;
 
@@ -38,7 +40,7 @@
     return daysLeft;
   }
 
-  let optionsWatchlist = data?.getOptionsWatchlist?.optionsList;
+  let rawData = data?.getOptionsWatchlist?.optionsList;
 
   function reformatDate(dateString) {
     return (
@@ -137,17 +139,6 @@
     }
   }
 
-  onMount(async () => {
-    if (optionsWatchlist?.length !== 0) {
-      optionsWatchlist?.forEach((item) => {
-        item.dte = daysLeft(item?.date_expiration);
-        item.size = Math.floor(item?.cost_basis / (item?.price * 100));
-      });
-    }
-    originalData = [...optionsWatchlist];
-    isLoaded = true;
-  });
-
   function getScroll() {
     const scrollThreshold = container.scrollHeight * 0.8; // 80% of the container height
 
@@ -166,17 +157,19 @@
     }
   }
 
-  const getContractHistory = async (contractId) => {
+  const getContractHistory = async () => {
     let output;
-    const cachedData = getCache(contractId, "getContractHistory");
+    const cachedData = getCache(optionSymbol, "getContractHistory");
     if (cachedData) {
       output = cachedData;
     } else {
       const postData = {
         ticker: ticker,
-        contract: contractId,
+        contract: optionSymbol,
       };
 
+      console.log(postData);
+
       // make the POST request to the endpoint
       const response = await fetch("/api/options-contract-history", {
         method: "POST",
@@ -188,7 +181,35 @@
 
       output = await response.json();
 
-      setCache(contractId, output, "getContractHistory");
+      setCache(optionSymbol, output, "getContractHistory");
+    }
+
+    return output;
+  };
+
+  const getHistoricalPrice = async () => {
+    let output;
+    const cachedData = getCache(ticker, "getHistoricalPrice");
+    if (cachedData) {
+      output = cachedData;
+    } else {
+      const postData = {
+        timePeriod: "six-months",
+        ticker: ticker,
+      };
+
+      // make the POST request to the endpoint
+      const response = await fetch("/api/historical-price", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(postData),
+      });
+
+      output = await response.json();
+
+      setCache(ticker, output, "getHistoricalPrice");
     }
 
     return output;
@@ -201,13 +222,18 @@
 
     strikePrice = item?.strike_price;
     optionType = item?.option_type;
+    ticker = item?.ticker;
     dateExpiration = item?.date_expiration;
-    const output = await getContractHistory(item?.option_symbol);
+    optionSymbol = item?.option_symbol;
+    const output = await getContractHistory();
+    const historicalPrice = await getHistoricalPrice();
+
+    console.log(historicalPrice);
     rawDataHistory = output?.history;
 
     if (rawDataHistory?.length > 0) {
       rawDataHistory.forEach((entry) => {
-        const matchingData = data?.getHistoricalPrice?.find(
+        const matchingData = historicalPrice?.find(
           (d) => d?.time === entry?.date,
         );
         if (matchingData) {
@@ -215,19 +241,19 @@
         }
       });
 
-      configContract = plotContractHistory();
+      config = plotData();
       rawDataHistory = rawDataHistory?.sort(
         (a, b) => new Date(b?.date) - new Date(a?.date),
       );
       optionHistoryList = rawDataHistory?.slice(0, 20);
     } else {
-      configContract = null;
+      config = null;
     }
 
     isLoaded = true;
   }
 
-  function plotContractHistory() {
+  function plotData() {
     // Ensure rawDataHistory exists and sort it by date
     const sortedData =
       rawDataHistory?.sort((a, b) => new Date(a?.date) - new Date(b?.date)) ||
@@ -503,10 +529,9 @@
     sortOrders[key].order =
       orderCycle[(currentOrderIndex + 1) % orderCycle.length];
     const sortOrder = sortOrders[key].order;
-
+    let originalData = data?.getOptionsWatchlist?.optionsList;
-    // Reset to original data when 'none' and stop further sorting
     if (sortOrder === "none") {
-      optionsWatchlist = [...originalData]?.slice(0, 150);
+      rawData = [...originalData]?.slice(0, 150);
       return;
     }
 
@@ -548,8 +573,21 @@
     };
 
     // Sort using the generic comparison function
-    optionsWatchlist = [...originalData].sort(compareValues)?.slice(0, 150);
+    rawData = [...originalData].sort(compareValues)?.slice(0, 150);
   };
+
+  $: {
+    if (selectGraphType) {
+      isLoaded = false;
+      if (rawDataHistory?.length > 0) {
+        config = plotData();
+      } else {
+        config = null;
+      }
+
+      isLoaded = true;
+    }
+  }
 </script>
 
 <SEO
@@ -566,11 +604,10 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full">
-          {#if isLoaded}
+          {#if rawData?.length !== 0}
-            {#if optionsWatchlist?.length !== 0}
             <div class="flex flex-row justify-end items-center pb-2">
               <h2 class="font-semibold text-xl mr-auto">
-                  {optionsWatchlist?.length} Options
+                {rawData?.length} Options
               </h2>
               <a
                 href="/options-flow"
@@ -634,7 +671,7 @@
                   <TableHeader {columns} {sortOrders} {sortData} />
                 </thead>
                 <tbody>
-                    {#each optionsWatchlist as item, index}
+                  {#each rawData as item, index}
                     <!-- row -->
                     <tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
                       <td
@@ -776,16 +813,13 @@
             </div>
             <!--End Table-->
           {:else}
-              <div
+            <div class="flex flex-col justify-center items-center m-auto pt-8">
-                class="flex flex-col justify-center items-center m-auto pt-8"
-              >
               <span class=" font-bold text-2xl sm:text-3xl">
                 Empty Options List
               </span>
 
               <span class=" text-sm sm:text-lg m-auto p-4 text-center">
-                  Add your unusual options contracts and start tracking them
+                Add your unusual options contracts and start tracking them now!
-                  now!
               </span>
               {#if !data?.user}
                 <a
@@ -842,18 +876,6 @@
               {/if}
             </div>
           {/if}
-          {:else}
-            <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"
-                >
-                  <span class="loading loading-spinner loading-md text-gray-400"
-                  ></span>
-                </label>
-              </div>
-            </div>
-          {/if}
         </main>
       </div>
     </div>
@@ -948,7 +970,7 @@
         </div>
         <div
           class="mt-2 border border-gray-300 dark:border-gray-800 rounded"
-          use:highcharts={configContract}
+          use:highcharts={config}
         ></div>
       </div>