diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte index 52babd60..7da29eb4 100644 --- a/src/routes/options-flow/+page.svelte +++ b/src/routes/options-flow/+page.svelte @@ -814,7 +814,7 @@ $: {
handleViewData(rawData[index])} slot="item" let:index let:style {style} class="tr cursor-pointer"> -
+
{formatTime(rawData[index]?.time)}
@@ -1210,9 +1210,3 @@ $: { border-bottom: 1px solid #09090B; } - -
-
- -
-
diff --git a/src/routes/options-zero-dte/+page.svelte b/src/routes/options-zero-dte/+page.svelte index 5c0fdd9f..0a78c396 100644 --- a/src/routes/options-zero-dte/+page.svelte +++ b/src/routes/options-zero-dte/+page.svelte @@ -6,6 +6,7 @@ import { abbreviateNumber } from '$lib/utils'; import { onMount, onDestroy } from 'svelte'; import toast from 'svelte-french-toast'; + import VirtualList from 'svelte-tiny-virtual-list'; export let data; @@ -22,7 +23,6 @@ } }); - let optionList = [] let rawData = []; let filterList = []; @@ -136,16 +136,13 @@ socket.addEventListener('message', (event) => { if (newData?.length !== 0) { notFound = false; rawData = [...newData] - optionList = rawData?.slice(0,20); //newData?.slice(0,20) //[...newData]; } else { - optionList = rawData?.slice(0,20); notFound = true; } } else { notFound = false; - optionList = rawData?.slice(0,20); } calculateStats(rawData); @@ -179,7 +176,6 @@ socket.addEventListener('message', (event) => { onMount(async () => { audio = new Audio(notifySound); rawData = data?.getOptionsZeroDTE; - optionList = rawData?.slice(0, 100); calculateStats(rawData); isLoaded = true; @@ -187,33 +183,10 @@ socket.addEventListener('message', (event) => { await websocketRealtimeData(); } - 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() => { - if (scrollContainer && data?.user?.tier === 'Pro') { - scrollContainer.removeEventListener('scroll', handleScroll); - }; - if (typeof window !== 'undefined') { socket?.close() @@ -225,17 +198,6 @@ onDestroy(async() => { }) - async function handleScroll() { - 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) { @@ -387,19 +349,14 @@ function calculateStats(optionList) { if (newData?.length !== 0) { rawData = newData; - optionList = [...rawData?.slice(0, 100)]; - - notFound = false; } else { notFound = true; rawData = data?.getOptionsZeroDTE; - optionList = rawData?.slice(0, 100); } } else { notFound = false; rawData = data?.getOptionsZeroDTE; - optionList = rawData?.slice(0, 100); } calculateStats(rawData); @@ -460,18 +417,15 @@ $: { const newData = filterExpiringSoon(rawData, Math.max(...filterList)); if (newData?.length !== 0) { rawData = newData; - optionList = rawData?.slice(0, 50); notFound = false; } else { notFound = true; rawData = data?.getOptionsZeroDTE; - optionList = []; } } else if (filterQuery?.length === 0) { rawData = data?.getOptionsZeroDTE; - optionList = rawData?.slice(0,100); } calculateStats(rawData); @@ -523,7 +477,7 @@ $: { {#if !$isOpen}
- Live flow of {new Date(optionList?.at(0)?.date ?? null)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} (NYSE Time) + Live flow of {new Date(rawData?.at(0)?.date ?? null)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} (NYSE Time)
{/if} @@ -793,98 +747,92 @@ $: {
- - - -
- - - - - - - - - - - - - - - - - - {#each optionList as item,index} - - handleViewData(item)} class="w-full odd:bg-[#27272A] cursor-pointer {index+1 === optionList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> - - + +
+
+
+ +
+
Time
+
Symbol
+
Strike
+
C/P
+
Sent.
+
Spot
+
Price
+
Prem.
+
Type
+
Vol
+
OI
+
+ +
handleViewData(rawData[index])} slot="item" let:index let:style {style} class="tr cursor-pointer"> + + +
+ {formatTime(rawData[index]?.time)} +
-
+
assetSelector(rawData[index]?.ticker, rawData[index]?.assetType)} style="justify-content: center;" class="td text-sm text-blue-400 font-normal"> + {rawData[index]?.ticker} +
- - +
+ {rawData[index]?.strike_price} +
- - - +
+ {rawData[index]?.put_call} +
+ +
+ {rawData[index]?.sentiment} +
- +
+ {rawData[index]?.underlying_price} +
- +
+ {rawData[index]?.price} +
- +
+ {abbreviateNumber(rawData[index]?.cost_basis)} +
- +
+ {rawData[index]?.type} +
- - - + }).format(rawData[index]?.volume)} + - + }).format(rawData[index]?.open_interest)} + - - - - - - - {/each} - -
TimeSymbolStrikeC/PSent.SpotPricePrem.TypeVolOI
- {formatTime(item?.time)} - assetSelector(item?.ticker, item?.assetType)} class="{index % 2 ? 'bg-[#09090B]' : 'bg-[#27272A]'} text-blue-400 text-start font-normal"> - {item?.ticker} - - {item?.strike_price} - - {item?.put_call} - - {item?.sentiment} - - {item?.underlying_price} - - {item?.price} - - {abbreviateNumber(item?.cost_basis)} - - {item?.type} - +
{new Intl.NumberFormat("en", { minimumFractionDigits: 0, maximumFractionDigits: 0 - }).format(item?.volume)} -
+
{new Intl.NumberFormat("en", { minimumFractionDigits: 0, maximumFractionDigits: 0 - }).format(item?.open_interest)} -
- - - -
+
+ +
+
+ + + + @@ -923,7 +871,7 @@ $: { -