From a5a5b3c474dca58c13b6dd925ec8356358b047f1 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Sun, 8 Sep 2024 21:16:01 +0200 Subject: [PATCH] update etf option page --- .../etf/[tickerID]/options/+page.svelte | 359 ++++++++++++++---- src/routes/etf/[tickerID]/options/+page.ts | 39 +- 2 files changed, 314 insertions(+), 84 deletions(-) diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte index f40ca317..e6220e73 100644 --- a/src/routes/etf/[tickerID]/options/+page.svelte +++ b/src/routes/etf/[tickerID]/options/+page.svelte @@ -23,18 +23,12 @@ let displayData = 'volume'; let options; let optionsGEX; - let rawData = data?.getOptionsChain + + let rawData = data?.getOptionsHistoricalData; let optionList = rawData?.slice(0,30); - let flowSentiment = 'n/a'; - let callPercentage; - let putPercentage; - let displayCallVolume; - let displayPutVolume; - let latestPutCallRatio; - let displayOTMRatio; - - + let optionChainList = data?.getOptionsChainData?.at(0)?.chain || []; + let totalVolume //= data?.getOptionsPlotData?.totalVolume; let totalOpenInterest //= data?.getOptionsPlotData?.totalOpenInterest; @@ -109,10 +103,6 @@ function normalizer(value) { return formattedTimeString; } - function changeStatement(event) - { - displayData = event.target.value; - } function changeTimePeriod(event) { @@ -306,55 +296,6 @@ function getGEXPlot() { return option; } - function calculateStats() { - const currentPrice = parseFloat(data?.getStockQuote?.price); - - const { callVolumeSum, putVolumeSum, bullishCount, bearishCount, otmVolume, itmVolume } = rawData?.reduce((acc, item) => { - const volume = parseInt(item?.volume); - const strikePrice = parseFloat(item?.strike_price); - - if (item?.put_call === "Calls") { - acc.callVolumeSum += volume; - if (strikePrice > currentPrice) { - acc.otmVolume += volume; - } else { - acc.itmVolume += volume; - } - } else if (item?.put_call === "Puts") { - acc.putVolumeSum += volume; - if (strikePrice < currentPrice) { - acc.itmVolume += volume; - } else { - acc.otmVolume += volume; - } - } - - if (item?.sentiment === "Bullish") { - acc.bullishCount += 1; - } else if (item?.sentiment === "Bearish") { - acc.bearishCount += 1; - } - - return acc; - }, { callVolumeSum: 0, putVolumeSum: 0, bullishCount: 0, bearishCount: 0, otmVolume: 0, itmVolume: 0 }); - - if (bullishCount > bearishCount) { - flowSentiment = 'Bullish'; - } else if (bullishCount < bearishCount) { - flowSentiment = 'Bearish'; - } else { - flowSentiment = 'Neutral'; - } - - latestPutCallRatio = (putVolumeSum / callVolumeSum); - callPercentage = Math.floor((callVolumeSum) / (callVolumeSum + putVolumeSum) * 100); - putPercentage = (100 - callPercentage); - displayCallVolume = callVolumeSum; - displayPutVolume = putVolumeSum; - - // Calculate OTM/ITM ratio - displayOTMRatio = otmVolume / (itmVolume+otmVolume) ?? 0; - } function filterDate(filteredList, displayTimePeriod) { const now = Date.now(); @@ -448,7 +389,49 @@ onMount(async () => { }; } }) - + + +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; +} + +let optionHistoryList = []; + +function handleViewData(optionData) { + + optionHistoryList = optionData; + optionHistoryList?.forEach((item) => { + item.dte = daysLeft(item?.date_expiration); + }); + optionDetailsDesktopModal?.showModal() +} + +function handleMode(i) { + activeIdx = i; + } + + const tabs = [ + { + title: "Historical Data", + }, + { + title: "Chain Data", + }, + ]; + + let activeIdx = 0; + +function changeStatement(event) +{ + optionChainList = (data?.getOptionsChainData?.filter(item => item?.date_expiration === event.target.value))?.at(0)?.chain || []; +} $: { if ((displayTimePeriod || displayData) && optionsPlotData?.length !== 0 && typeof window !== 'undefined') { @@ -496,7 +479,7 @@ $: {
-
+

Unsual Options Activity @@ -585,7 +568,7 @@ $: { - @@ -611,7 +594,7 @@ $: { {#if data?.getOptionsGexData?.length !== 0} -

+

Daily Gamma Exposure (GEX)

@@ -622,21 +605,51 @@ $: { {/if} -

- Historical Option Data +

+ {activeIdx === 0 ? 'Historical Option Data' : 'Option Chain Data'}

- - + {#if optionList?.length !== 0} +
+ {#each tabs as item, i} + + {/each} +
+ + {#if activeIdx === 1} +
+ +
+ {/if} - - - +
- + {#if activeIdx === 0} @@ -644,6 +657,7 @@ $: { + @@ -651,9 +665,8 @@ $: { {#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index} - + handleViewData(item?.history)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> - @@ -667,10 +680,10 @@ $: { - + + +
% Change P/C Bear/Bull% OTM Total Volume Total OI Total Prem
{formatDate(item?.date)} - {(item?.p_vol/item?.c_vol)?.toFixed(2)} + {item?.c_vol !== 0 ? (item?.p_vol/item?.c_vol)?.toFixed(1) : '-'} + {#if item?.bear_ratio > (item?.neutral_ratio ?? 0) && item?.bear_ratio > (item?.bull_ratio ?? 0)}
{item?.bear_ratio?.toFixed(0)}% Bearish @@ -702,6 +715,11 @@ $: { {/if}
+ {item?.otm_ratio?.toFixed(0)}% + {abbreviateNumber(item?.total_volume)} @@ -725,6 +743,63 @@ $: {
+ {:else} + + + + + + + + + + + + + + {#each (data?.user?.tier === 'Pro' ? optionChainList : optionChainList?.slice(0,3)) as item, index} + + + + + + + + + + + + + + + + + + + + + + {/each} + + +
Call PremCall OICall VolumeStrike PricePut VolumePut OIPut Prem
+ {abbreviateNumber(item?.total_premium_call,true)} + + {abbreviateNumber(item?.total_open_interest_call)} + + {abbreviateNumber(item?.total_volume_call)} + +
+ {item?.strike_price} +
+ 		+ {abbreviateNumber(item?.total_volume_put)} + + {abbreviateNumber(item?.total_open_interest_put)} + + {abbreviateNumber(item?.total_premium_put,true)} +
+ {/if}
@@ -754,7 +829,133 @@ $: {
+ + + + + + + + + +
+
+ +
+

+ Option Data Details: +
+ All individual contracts for {new Date(optionHistoryList?.at(0)?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + {#each optionHistoryList as item} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/each} + + +
TimeDateExpiryStrikeC/PSent.SpotPricePrem.TypeVol.OI
+ {formatTime(item?.time)} + + {formatDate(item?.date)} + + {item?.dte < 0 ? 'expired' : item?.dte +'d'} + + {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)} +
+ +
+
+ + +
+
+ +
+ + + + + +