From d36a3237881134729c523b84955d51dbc39e1760 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 18 Sep 2024 22:42:35 +0200
Subject: [PATCH] add historical options flow endpoint

---
 .../shadcn/calendar/calendar-day.svelte       |   2 +-
 .../shadcn/calendar/calendar.svelte           |   1 +
 src/lib/store.ts                              | 243 +++++++++---------
 .../api/options-historical-flow/+server.ts    |  27 ++
 src/routes/options-flow/+page.svelte          |  89 +++++--
 5 files changed, 213 insertions(+), 149 deletions(-)
 create mode 100644 src/routes/api/options-historical-flow/+server.ts

diff --git a/src/lib/components/shadcn/calendar/calendar-day.svelte b/src/lib/components/shadcn/calendar/calendar-day.svelte
index 3b81d8ff..e83b870c 100644
--- a/src/lib/components/shadcn/calendar/calendar-day.svelte
+++ b/src/lib/components/shadcn/calendar/calendar-day.svelte
@@ -21,7 +21,7 @@
 		"h-9 w-9 p-0 font-normal ",
 		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
 		// Selected
-		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
+		"data-[selected]:bg-[#262626] data-[selected]:text-white data-[selected]:hover:bg-[#262626] data-[selected]:hover:text-white data-[selected]:focus:bg-[#262626] data-[selected]:focus:text-white data-[selected]:opacity-100",
 		// Disabled
 		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
 		// Unavailable
diff --git a/src/lib/components/shadcn/calendar/calendar.svelte b/src/lib/components/shadcn/calendar/calendar.svelte
index 663c00bf..beeae592 100644
--- a/src/lib/components/shadcn/calendar/calendar.svelte
+++ b/src/lib/components/shadcn/calendar/calendar.svelte
@@ -13,6 +13,7 @@
 
 	let className: $$Props["class"] = undefined;
 	export { className as class };
+
 </script>
 
 <CalendarPrimitive.Root
diff --git a/src/lib/store.ts b/src/lib/store.ts
index f8889b6a..ed98cf33 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -1,5 +1,4 @@
-import { writable } from 'svelte/store';
-
+import { writable } from "svelte/store";
 
 // Cache expiration time in milliseconds (5 minutes)
 const CACHE_EXPIRATION_TIME = 5 * 60 * 1000;
@@ -9,13 +8,13 @@ export const clientSideCache = writable({});
 // Function to set cache data for a specific key
 export const setCache = (key, data, name) => {
   const timestamp = Date.now();
-  clientSideCache.update(cache => {
+  clientSideCache.update((cache) => {
     return {
       ...cache,
       [key]: {
         ...cache[key],
-        [name]: { data, timestamp }
-      }
+        [name]: { data, timestamp },
+      },
     };
   });
 };
@@ -23,7 +22,7 @@ export const setCache = (key, data, name) => {
 // Function to get cache data for a specific key
 export const getCache = (key, name) => {
   let cacheData;
-  clientSideCache.subscribe(cache => {
+  clientSideCache.subscribe((cache) => {
     const entry = cache[key]?.[name];
     if (entry) {
       const { data, timestamp } = entry;
@@ -44,156 +43,146 @@ export const clearCache = () => {
   clientSideCache.set({});
 };
 
+export const showCookieConsent = writable(<boolean>false);
 
-export const showCookieConsent = writable(<boolean>(false));
+export const executiveClicked = writable(<boolean>false);
+export const secFilingsClicked = writable(<boolean>false);
 
+export const discordMembers = writable(<Number>308);
 
-export const executiveClicked = writable(<boolean>(false));
-export const secFilingsClicked = writable(<boolean>(false));
+export const newAvatar = writable(<string>"");
 
-export const discordMembers = writable(<Number> (308));
+export const displayCompanyName = writable(<string>"");
+export const currentPrice = writable(<number>0);
+export const currentPortfolioPrice = writable(<number>0);
+export const realtimePrice = writable(<number>0);
 
-export const newAvatar = writable(<string> (""));
+export const priceIncrease = writable(<boolean>false);
+export const isCrosshairMoveActive = writable(<boolean>true);
 
-export const displayCompanyName = writable(<string> (""));
-export const currentPrice = writable(<number> (0));
-export const currentPortfolioPrice = writable(<number> (0));
-export const realtimePrice = writable(<number> (0));
+export const twitchStatus = writable(<boolean>false);
 
-export const priceIncrease = writable(<boolean>(false));
-export const isCrosshairMoveActive = writable(<boolean>(true));
+export const screenWidth = writable(<Number>0);
 
-export const twitchStatus = writable(<boolean>(false));
+export const globalForm = writable(<Array<any>>[]);
 
-export const screenWidth = writable(<Number> (0));
+export const trendingList = writable(<Array<any>>[]);
 
-export const globalForm = writable(<Array<any>> []);
+export const userRegion = writable(<string>"");
 
+export const loginData = writable({});
 
-export const trendingList = writable(<Array<any>> []);
+export const replyCommentClicked = writable({});
+export const editCommentClicked = writable({});
 
-export const userRegion =  writable(<string> (""));
+export const fundamentalAnalysisComponent = writable(<boolean>false);
+export const priceAnalysisComponent = writable(<boolean>false);
+export const revenueSegmentationComponent = writable(<boolean>false);
+export const trendAnalysisComponent = writable(<boolean>false);
+export const shareStatisticsComponent = writable(<boolean>false);
+export const shareholderComponent = writable(<boolean>false);
+export const retailVolumeComponent = writable(<boolean>false);
+export const darkPoolComponent = writable(<boolean>false);
+export const enterpriseComponent = writable(<boolean>false);
+export const varComponent = writable(<boolean>false);
+export const sentimentComponent = writable(<boolean>false);
+export const analystEstimateComponent = writable(<boolean>false);
+export const marketMakerComponent = writable(<boolean>false);
+export const optionComponent = writable(<boolean>false);
+export const clinicalTrialComponent = writable(<boolean>false);
+export const failToDeliverComponent = writable(<boolean>false);
+export const borrowedShareComponent = writable(<boolean>false);
+export const impliedVolatilityComponent = writable(<boolean>false);
+export const optionsNetFlowComponent = writable(<boolean>false);
+export const governmentContractComponent = writable(<boolean>false);
+export const analystInsightComponent = writable(<boolean>false);
+export const swapComponent = writable(<boolean>false);
+export const taRatingComponent = writable(<boolean>false);
+export const dcfComponent = writable(<boolean>false);
+export const correlationComponent = writable(<boolean>false);
+export const corporateLobbyingComponent = writable(<boolean>false);
 
-export const loginData = writable(({}));
+export const strategyId = writable(<string>"");
+export const articleId = writable(<string>"");
 
-export const replyCommentClicked = writable(({}));
-export const editCommentClicked = writable(({}));
+export const traded = writable(<boolean>false);
 
-export const fundamentalAnalysisComponent = writable(<boolean>(false));
-export const priceAnalysisComponent = writable(<boolean>(false));
-export const revenueSegmentationComponent = writable(<boolean>(false));
-export const trendAnalysisComponent = writable(<boolean>(false));
-export const shareStatisticsComponent = writable(<boolean>(false));
-export const shareholderComponent = writable(<boolean>(false));
-export const retailVolumeComponent = writable(<boolean>(false));
-export const darkPoolComponent = writable(<boolean>(false));
-export const enterpriseComponent = writable(<boolean>(false));
-export const varComponent = writable(<boolean>(false));
-export const sentimentComponent = writable(<boolean>(false));
-export const analystEstimateComponent = writable(<boolean>(false));
-export const marketMakerComponent = writable(<boolean>(false));
-export const optionComponent = writable(<boolean>(false));
-export const clinicalTrialComponent = writable(<boolean>(false));
-export const failToDeliverComponent= writable(<boolean>(false));
-export const borrowedShareComponent= writable(<boolean>(false));
-export const impliedVolatilityComponent= writable(<boolean>(false));
-export const optionsNetFlowComponent= writable(<boolean>(false));
-export const governmentContractComponent= writable(<boolean>(false));
-export const analystInsightComponent= writable(<boolean>(false));
-export const swapComponent= writable(<boolean>(false));
-export const taRatingComponent= writable(<boolean>(false));
-export const dcfComponent= writable(<boolean>(false));
-export const correlationComponent = writable(<boolean>(false));
-export const corporateLobbyingComponent =  writable(<boolean>(false));
+export const previousPage = writable(<string>"");
 
+export const oauthState = writable(<string>"");
+export const oauthVerifier = writable(<string>"");
+export const oauthProvider = writable(<string>"");
 
-export const strategyId = writable(<string> (""));
-export const articleId = writable(<string> (""));
+export const switchWatchList = writable(<boolean>false);
 
-export const traded = writable(<boolean>(false));
+export const cachedPosts = writable(<Array<any>>{});
+export const currentPagePosition = writable(<Number>0);
+export const postVote = writable(<Array<any>>{});
 
-export const previousPage = writable(<string> (""));
+export const similarTickerClicked = writable(<boolean>false);
 
-export const oauthState = writable(<string> (""));
-export const oauthVerifier = writable(<string> (""));
-export const oauthProvider = writable(<string> (""));
-
-
-export const switchWatchList = writable(<boolean>(false));
-
-export const cachedPosts = writable(<Array<any>> {});
-export const currentPagePosition = writable(<Number> (0));
-export const postVote = writable(<Array<any>> {});
-
-export const similarTickerClicked = writable(<boolean>(false));
-
-export const isScrollingUp = writable(<boolean>(true));
-export const isWeekend = writable(<boolean>(false));
-export const isBeforeMarketOpen = writable(<boolean>(false));
-export const isAfterMarketClose = writable(<boolean>(false));
-export const isOpen = writable(<boolean>(false));
-
-
-export const commentIdDeleted = writable(<string> (""));
-export const postIdDeleted = writable(<string> (""));
-export const commentAdded = writable(<string> (""));
-export const commentUpdated = writable(<string> (""));
-export const scrollToComment = writable(<string> (""));
+export const isScrollingUp = writable(<boolean>true);
+export const isWeekend = writable(<boolean>false);
+export const isBeforeMarketOpen = writable(<boolean>false);
+export const isAfterMarketClose = writable(<boolean>false);
+export const isOpen = writable(<boolean>false);
 
+export const commentIdDeleted = writable(<string>"");
+export const postIdDeleted = writable(<string>"");
+export const commentAdded = writable(<string>"");
+export const commentUpdated = writable(<string>"");
+export const scrollToComment = writable(<string>"");
 
 export const searchBarData = writable([]);
 
-export const stockTicker = writable(<string> (""));
-export const etfTicker = writable(<string> (""));
-export const cryptoTicker = writable(<string> (""));
-export const assetType = writable(<string> (""));
+export const stockTicker = writable(<string>"");
+export const etfTicker = writable(<string>"");
+export const cryptoTicker = writable(<string>"");
+export const assetType = writable(<string>"");
 
-export const hedgeFundsCIK = writable(<string> (""));
+export const hedgeFundsCIK = writable(<string>"");
 
-export const linkTitle = writable(<string> (""));
+export const linkTitle = writable(<string>"");
 
-export const numberOfUnreadNotification = writable(<number> (0));
+export const numberOfUnreadNotification = writable(<number>0);
 
-export const openPriceAlert = writable(<boolean>(false));
+export const openPriceAlert = writable(<boolean>false);
 
-export const sidebarOpen = writable(<boolean>(false));
-export const sidebarExpanded = writable(<boolean>(true));
-export const sidebarOpenField = writable(<boolean>(false));
+export const sidebarOpen = writable(<boolean>false);
+export const sidebarExpanded = writable(<boolean>true);
+export const sidebarOpenField = writable(<boolean>false);
 
-
-export const tagList = writable( [
-
-    {
-      name: "Meme",
-      color: '#105488',
-    },
-    {
-      name:  "News",
-      color: '#c78900',
-    },
-    {
-      name: "Discussion",
-      color: '#800080',
-    },
-    {
-      name: "Gain",
-      color: '#19c41d',
-    },
-    {
-      name: "Loss",
-      color: '#FF0000',
-    },
-    {
-      name: 'Chart',
-      color: '#FF4500',
-    },
-    {
-      name: 'DD',
-      color: '#365B8C',
-    },
-    {
-      name: 'YOLO',
-      color: '#56B6DF',
-    }
+export const tagList = writable([
+  {
+    name: "Meme",
+    color: "#105488",
+  },
+  {
+    name: "News",
+    color: "#c78900",
+  },
+  {
+    name: "Discussion",
+    color: "#800080",
+  },
+  {
+    name: "Gain",
+    color: "#19c41d",
+  },
+  {
+    name: "Loss",
+    color: "#FF0000",
+  },
+  {
+    name: "Chart",
+    color: "#FF4500",
+  },
+  {
+    name: "DD",
+    color: "#365B8C",
+  },
+  {
+    name: "YOLO",
+    color: "#56B6DF",
+  },
 ]);
-
diff --git a/src/routes/api/options-historical-flow/+server.ts b/src/routes/api/options-historical-flow/+server.ts
new file mode 100644
index 00000000..d5b1d212
--- /dev/null
+++ b/src/routes/api/options-historical-flow/+server.ts
@@ -0,0 +1,27 @@
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+  const data = await request.json();
+  const selectedDate = data?.selectedDate;
+  const { apiURL, apiKey } = locals;
+  let output;
+
+  try {
+    const postData = { date: selectedDate };
+    const response = await fetch(apiURL + "/options-historical-flow", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    output = await response.json();
+  } catch (e) {
+    console.error(e);
+    output = [];
+  }
+
+  return new Response(JSON.stringify(output));
+};
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index 72b8c378..131394ed 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { screenWidth, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
+  import {screenWidth, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
   import notifySound from '$lib/audio/options-flow-reader.mp3';
   //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import { abbreviateNumber,cn } from '$lib/utils';
@@ -47,7 +47,6 @@
       month: "short",
       year: "numeric"
     });
-  
   let selectedDate: DateValue | undefined = undefined;
 
 const allRules = {
@@ -651,6 +650,52 @@ function calculateStats(data) {
   }
   
   
+const getHistoricalFlow = async () => {
+  // Create a delay using setTimeout wrapped in a Promise
+  isLoaded = false;
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  // Make the POST request after the delay
+   const convertDate = new Date(df.format(selectedDate?.toDate()))
+  const year = convertDate?.getFullYear();
+  const month = String(convertDate?.getMonth() + 1).padStart(2, '0');
+  const day = String(convertDate?.getDate()).padStart(2, '0');
+
+  console.log(`${year}-${month}-${day}`)    
+  const postData = { 'selectedDate': `${year}-${month}-${day}`}  
+
+  try {
+    const response = await fetch('/api/options-historical-flow', {
+      method: 'POST',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(postData)
+    });
+
+    rawData = await response?.json();
+    console.log(rawData)
+    if(rawData?.length !== 0) {
+      rawData?.forEach((item) => {
+      item.dte = daysLeft(item?.date_expiration);
+      });
+      shouldLoadWorker.set(true);
+    } else {
+
+      displayRules = allRows?.filter(row => ruleOfList.some(rule => rule.name === row.rule));
+      displayedData = [];
+      calculateStats(displayedData);
+    }
+  } catch (error) {
+    console.error("Error fetching historical flow:", error);
+    rawData = [];
+  } finally {
+    isLoaded = true;
+  }
+};
+
+
+
   function handleInput(event) {
     filterQuery = event.target.value;
 
@@ -788,25 +833,7 @@ $: {
                 <div class="sm:ml-auto w-full sm:w-fit pt-5">
                     <div class="relative flex flex-col sm:flex-row items-center">
 
-                     <Popover.Root>
-                        <Popover.Trigger asChild let:builder>
-                          <Button
-                            class={cn(
-                              "w-fit mr-3 py-2 bg-[#000] sm:hover:bg-[#000] sm:hover:text-white text-white justify-start text-left font-normal border-none rounded-md",
-                              !selectedDate && "text-gray-300"
-                            )}
-                            builders={[builder]}
-                          >
-                            <CalendarIcon class="mr-2 h-4 w-4" />
-                            {selectedDate ? df.format(selectedDate?.toDate()) : "Pick a date"}
-                          </Button>
-                        </Popover.Trigger>
-                        <Popover.Content class="w-auto p-0 border-gray-500">
-                          <Calendar class="bg-[#09090B] text-white" bind:value={selectedDate} initialFocus />
-                        </Popover.Content>
-                      </Popover.Root>
-
-
+      
                         <div class="relative w-full sm:w-fit pl-3  sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#313131] rounded-md border border-gray-600">
                           <label class="flex flex-row items-center ">
                             <input 
@@ -826,6 +853,26 @@ $: {
                           </span>
                           {/if}
                         </div>
+
+                      <Popover.Root>
+                        <Popover.Trigger asChild let:builder>
+                          <Button
+                            class={cn(
+                              "w-full sm:w-[160px] truncate sm:mr-3 py-3 bg-[#000] sm:hover:bg-[#000] sm:hover:text-white text-white justify-center sm:justify-start text-center sm:text-left font-normal border-none rounded-md",
+                              !selectedDate && "text-gray-300"
+                            )}
+                            builders={[builder]}
+                          >
+                            <CalendarIcon class="mr-2 h-4 w-4" />
+                            {selectedDate ? df.format(selectedDate?.toDate()) : "Pick a date"}
+                          </Button>
+                        </Popover.Trigger>
+                        <Popover.Content class="w-auto p-0 border-gray-500">
+                          <Calendar class="bg-[#09090B] text-white" bind:value={selectedDate} initialFocus onValueChange={getHistoricalFlow}/>
+                        </Popover.Content>
+                      </Popover.Root>
+
+
                 </div>
               </div>