From 119e33c549fd8c389fbede6329a005419f9c7210 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Sat, 13 Jul 2024 10:32:03 +0200 Subject: [PATCH] experimental update of options flow page --- src/routes/options-flow/+page.svelte | 259 ++++++++++----------------- 1 file changed, 94 insertions(+), 165 deletions(-) diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte index 5f37932b..40036941 100644 --- a/src/routes/options-flow/+page.svelte +++ b/src/routes/options-flow/+page.svelte @@ -9,9 +9,7 @@ export let data; - - let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; - + const usRegion = ['cle1','iad1','pdx1','sfo1']; let wsURL; @@ -165,7 +163,7 @@ function handleViewData(optionData) { if (rawData?.length !== 0 && newIncomingData === true) { notFound = false; newIncomingData = false; - optionList = rawData?.slice(0, 20); + optionList = rawData?.slice(0, 50); } else if (!newIncomingData) { notFound = false; newIncomingData = false; @@ -202,31 +200,47 @@ function handleViewData(optionData) { } - + let scrollContainer; + + onMount(async () => { - - audio = new Audio(notifySound) + audio = new Audio(notifySound); rawData = data?.getOptionsFlowFeed; - optionList = rawData?.slice(0,20); + optionList = rawData?.slice(0, 100); calculateStats(rawData); isLoaded = true; - - if ($isOpen) //&& currentDateTime > startTime && currentDateTime < endTime - { - await websocketRealtimeData() + + if ($isOpen) { + await websocketRealtimeData(); } - - if(data?.user?.tier === 'Pro') { - window.addEventListener('scroll', handleScroll); - return () => { - window.removeEventListener('scroll', handleScroll); + + if (data?.user?.tier === 'Pro') { + const attachScrollListener = () => { + if (scrollContainer) { + scrollContainer.addEventListener('scroll', handleScroll); + return true; + } + return false; }; + + if (!attachScrollListener()) { + const observer = new MutationObserver(() => { + if (attachScrollListener()) { + observer.disconnect(); + } + }); + + observer.observe(document.body, { childList: true, subtree: true }); + } } + }); - - }) - - onDestroy(async() => { +onDestroy(async() => { + + if (scrollContainer && data?.user?.tier === 'Pro') { + scrollContainer.removeEventListener('scroll', handleScroll); + }; + if (typeof window !== 'undefined') { socket?.close() @@ -239,14 +253,16 @@ function handleViewData(optionData) { }) async function handleScroll() { - const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height - const isBottom = window.innerHeight + window.scrollY >= scrollThreshold; - if (isBottom && optionList?.length !== rawData?.length) { - const nextIndex = optionList?.length; - const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25); - optionList = [...optionList, ...filteredNewResults]; - } + if (!scrollContainer) return; + const scrollThreshold = scrollContainer.scrollHeight * 0.8; // 80% of the div height + const isBottom = scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollThreshold; + if (isBottom && optionList?.length !== rawData?.length) { + const nextIndex = optionList?.length; + const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25); + optionList = [...optionList, ...filteredNewResults]; + } } + async function assetSelector(symbol, assetType) { @@ -397,17 +413,17 @@ function calculateStats(optionList) { newData = [...rawData?.filter(item => item?.ticker === filterQuery?.toUpperCase())]; if (newData?.length !== 0) { rawData = newData; - optionList = rawData?.slice(0, 20); + optionList = rawData?.slice(0, 100); notFound = false; } else { notFound = true; rawData = data?.getOptionsFlowFeed; - optionList = rawData?.slice(0, 20); + optionList = rawData?.slice(0, 100); } } else { notFound = false; rawData = data?.getOptionsFlowFeed; - optionList = rawData?.slice(0, 20); + optionList = rawData?.slice(0, 100); } }, 200); } @@ -466,7 +482,7 @@ $: { const newData = filterExpiringSoon(rawData, Math.max(...filterList)); if (newData?.length !== 0) { rawData = newData; - optionList = rawData?.slice(0, 20); + optionList = rawData?.slice(0, 50); notFound = false; } else { notFound = true; @@ -514,60 +530,12 @@ $: { -
+ +
-
-
- - -
-
-

- Options Flow -

-
- - - The most recent unusual options activity from large institutional traders and hedge funds. - - - - -
- - - - - -
- - - -
- - - -
+
{#if !$isOpen} @@ -624,21 +592,21 @@ $: { {#if isLoaded }
-
+
-
+
- Flow Sentiment - {flowSentiment} + Flow Sentiment + {flowSentiment}
-
+
- Put/Call - + Put/Call + {putCallRatio?.toFixed(3)}
@@ -662,10 +630,10 @@ $: {
-
+
- Call Flow - + Call Flow + {new Intl.NumberFormat("en", { minimumFractionDigits: 0, maximumFractionDigits: 0 @@ -691,10 +659,10 @@ $: {
-
+
- Put Flow - + Put Flow + {new Intl.NumberFormat("en", { minimumFractionDigits: 0, maximumFractionDigits: 0 @@ -722,10 +690,10 @@ $: { {#if showMore} -
+
- Most Traded Option - + Most Traded Option + {mostFrequentTicker?.ticker} @@ -739,10 +707,10 @@ $: { -
+
- Highest Premium - + Highest Premium + {highestPremiumTicker?.ticker} @@ -756,10 +724,10 @@ $: { -
+
- Highest Volume - + Highest Volume + {highestVolumeTicker?.ticker} @@ -775,8 +743,8 @@ $: {
- Highest Open Interest - + Highest Open Interest + {highestOpenInterestTicker?.ticker} @@ -802,69 +770,30 @@ $: { - -
-
-
    -
  • - - {#if notFound === true} - - No Results Found - - {/if} -
    • - - -
  • - -
    • - - -
-
-
- - + -
+
-
- +
+
- - - - - - - - - - - - + + + + + + + + + + + + @@ -904,7 +833,7 @@ $: { {item?.price} - @@ -959,9 +888,9 @@ $: { {/if} - + - +
TimeSymbolExpiryStrikeC/PSent.SpotPricePrem.TypeVol.OITimeSymbolExpiryStrikeC/PSent.SpotPricePrem.TypeVolOI
+ {abbreviateNumber(item?.cost_basis)}