update options page
This commit is contained in:
MuslemRahimi
parent
4e70a2bf8a
commit
2bf60b2c24
@ -96,6 +96,17 @@ function prepareData() {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const timePeriods = {
|
||||||
|
oneDay: '24h',
|
||||||
|
oneWeek: 'week',
|
||||||
|
oneMonth: 'month',
|
||||||
|
threeMonth: '3 months',
|
||||||
|
sixMonth: '6 months',
|
||||||
|
oneYear: '1 year'
|
||||||
|
};
|
||||||
|
|
||||||
|
$: period = timePeriods[displayTimePeriod] || displayTimePeriod;
|
||||||
|
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if(($assetType === 'stock' ? $stockTicker : $etfTicker) && typeof window !== 'undefined') {
|
if(($assetType === 'stock' ? $stockTicker : $etfTicker) && typeof window !== 'undefined') {
|
||||||
@ -148,15 +159,17 @@ $: {
|
|||||||
<select class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeStatement}>
|
<select class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeStatement}>
|
||||||
<option disabled>Choose a time period</option>
|
<option disabled>Choose a time period</option>
|
||||||
<option value="oneDay">
|
<option value="oneDay">
|
||||||
Last 24h
|
1 Day
|
||||||
</option>
|
</option>
|
||||||
<option value="oneWeek">
|
<option value="oneWeek">
|
||||||
Last Week
|
1 Week
|
||||||
</option>
|
</option>
|
||||||
<option value="oneMonth" selected>
|
<option value="oneMonth" selected>
|
||||||
Last Month
|
1 Month
|
||||||
</option>
|
</option>
|
||||||
<option value="threeMonth">Last 3 Months</option>
|
<option value="threeMonth">3 Months</option>
|
||||||
|
<option value="sixMonth">6 Months</option>
|
||||||
|
<option value="oneYear">1 Year</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
|
||||||
@ -209,7 +222,7 @@ $: {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span class="text-[1rem] text-white">
|
<span class="text-[1rem] text-white">
|
||||||
In the past {displayTimePeriod ==='oneDay' ? '24h': displayTimePeriod==='oneWeek' ? 'week' : displayTimePeriod==='oneMonth' ? 'month' : 'three months'}, hedge funds and major institutional traders have bought {abbreviateNumber(callVolume)} calls and {abbreviateNumber(putVolume)} puts with an average DTE of {dataset?.avgDTE} days.
|
In the past {period}, hedge funds and major institutional traders have bought {abbreviateNumber(callVolume)} calls and {abbreviateNumber(putVolume)} puts with an average DTE of {dataset?.avgDTE} days.
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -15,16 +15,17 @@ function daysLeft(targetDate) {
|
|||||||
|
|
||||||
export const load = async ({ parent, params }) => {
|
export const load = async ({ parent, params }) => {
|
||||||
|
|
||||||
|
|
||||||
const {apiKey, apiURL} = await parent();
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
|
|
||||||
const getOptionsPlotData = async () => {
|
const getOptionsPlotData = async () => {
|
||||||
let res;
|
|
||||||
|
|
||||||
const cachedData = getCache(params.tickerID, 'getOptionsPlotData');
|
const cachedData = getCache(params.tickerID, 'getOptionsPlotData');
|
||||||
if (cachedData) {
|
if (cachedData) {
|
||||||
res = cachedData;
|
return cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
const postData = {
|
const postData = {
|
||||||
ticker: params.tickerID
|
ticker: params.tickerID
|
||||||
};
|
};
|
||||||
@ -38,43 +39,12 @@ export const load = async ({ parent, params }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const output = await response.json();
|
const output = await response.json();
|
||||||
|
|
||||||
const totalCallVolume = output?.reduce((acc, obj) => acc + obj?.CALL?.volume, 0);
|
|
||||||
const totalPutVolume = output?.reduce((acc, obj) => acc + obj?.PUT?.volume, 0);
|
|
||||||
const putCallRatio = (totalPutVolume/totalCallVolume)?.toFixed(2);
|
|
||||||
|
|
||||||
const totalVolume = output?.reduce((acc, obj) => {
|
|
||||||
// Summing volume from both CALL and PUT
|
|
||||||
return acc + obj?.CALL?.volume + obj?.PUT?.volume;
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
const totalOpenInterest = output?.reduce((acc, obj) => {
|
setCache(params.tickerID, output, 'getOptionsPlotData');
|
||||||
// Summing volume from both CALL and PUT
|
return output;
|
||||||
return acc + obj?.CALL?.open_interest + obj?.PUT?.open_interest;
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
|
|
||||||
// Summing the total open interest of CALL and PUT options
|
|
||||||
const totalCallOpenInterest = output?.reduce((acc, obj) => acc + obj?.CALL.open_interest, 0);
|
|
||||||
const totalPutOpenInterest = output?.reduce((acc, obj) => acc + obj?.PUT.open_interest, 0);
|
|
||||||
|
|
||||||
// Computing the put-call ratio for open interest
|
|
||||||
const putCallOpenInterestRatio = (totalPutOpenInterest / totalCallOpenInterest)?.toFixed(2);
|
|
||||||
|
|
||||||
//Plot Data
|
|
||||||
const dateList = output?.map(item => item.date);
|
|
||||||
const callVolumeList = output?.map(item => item?.CALL?.volume);
|
|
||||||
const putVolumeList = output?.map(item => item?.PUT?.volume);
|
|
||||||
const callOpenInterestList = output?.map(item => item?.CALL?.open_interest);
|
|
||||||
const putOpenInterestList = output?.map(item => item?.PUT?.open_interest);
|
|
||||||
|
|
||||||
res = {plot: output, 'dateList': dateList, 'callOpenInterestList': callOpenInterestList, 'putOpenInterestList': putOpenInterestList, 'callVolumeList': callVolumeList, 'putVolumeList': putVolumeList, 'putCallRatio': putCallRatio, 'putCallOpenInterestRatio': putCallOpenInterestRatio,'totalVolume': totalVolume, 'totalOpenInterest': totalOpenInterest };
|
|
||||||
setCache(params.tickerID, res, 'getOptionsPlotData');
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return res;
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const getOptionsFlowData = async () => {
|
const getOptionsFlowData = async () => {
|
||||||
|
|||||||
@ -15,6 +15,8 @@
|
|||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
|
let rawPlotData = data?.getOptionsPlotData;
|
||||||
|
let filteredList = [];
|
||||||
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||||
|
|
||||||
let optionsPlotData = data?.getOptionsPlotData?.plot;
|
let optionsPlotData = data?.getOptionsPlotData?.plot;
|
||||||
@ -30,29 +32,29 @@
|
|||||||
let latestPutCallRatio;
|
let latestPutCallRatio;
|
||||||
let displayOTMRatio;
|
let displayOTMRatio;
|
||||||
|
|
||||||
const totalPutCallRatio = data?.getOptionsPlotData?.putCallRatio;
|
|
||||||
|
|
||||||
|
|
||||||
const totalVolume = data?.getOptionsPlotData?.totalVolume;
|
let totalVolume //= data?.getOptionsPlotData?.totalVolume;
|
||||||
|
|
||||||
const totalOpenInterest = data?.getOptionsPlotData?.totalOpenInterest;
|
let totalOpenInterest //= data?.getOptionsPlotData?.totalOpenInterest;
|
||||||
|
|
||||||
|
|
||||||
// Computing the put-call ratio for open interest
|
// Computing the put-call ratio for open interest
|
||||||
const putCallOpenInterestRatio = data?.getOptionsPlotData?.putCallOpenInterestRatio;
|
let putCallOpenInterestRatio //= data?.getOptionsPlotData?.putCallOpenInterestRatio;
|
||||||
|
let putCallRatio;
|
||||||
const displayTotalVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume);
|
let displayTotalVolume //= new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume);
|
||||||
const displayTotalOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
|
let displayTotalOpenInterest //= new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
|
||||||
|
let displayTotalPutCall
|
||||||
const dateList = data?.getOptionsPlotData?.dateList;
|
let dateList //= data?.getOptionsPlotData?.dateList;
|
||||||
|
|
||||||
const callVolumeList = data?.getOptionsPlotData?.callVolumeList;
|
|
||||||
const putVolumeList = data?.getOptionsPlotData?.putVolumeList;
|
|
||||||
const callOpenInterestList = data?.getOptionsPlotData?.callOpenInterestList;
|
|
||||||
const putOpenInterestList = data?.getOptionsPlotData?.putOpenInterestList;
|
|
||||||
|
|
||||||
|
let callVolumeList //= data?.getOptionsPlotData?.callVolumeList;
|
||||||
|
let putVolumeList //= data?.getOptionsPlotData?.putVolumeList;
|
||||||
|
let callOpenInterestList //= data?.getOptionsPlotData?.callOpenInterestList;
|
||||||
|
let putOpenInterestList //= data?.getOptionsPlotData?.putOpenInterestList;
|
||||||
|
|
||||||
|
|
||||||
|
let displayTimePeriod = 'threeMonths'
|
||||||
|
|
||||||
|
|
||||||
function formatDate(dateStr) {
|
function formatDate(dateStr) {
|
||||||
// Parse the input date string (YYYY-mm-dd)
|
// Parse the input date string (YYYY-mm-dd)
|
||||||
@ -96,6 +98,11 @@
|
|||||||
displayData = event.target.value;
|
displayData = event.target.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function changeTimePeriod(event)
|
||||||
|
{
|
||||||
|
displayTimePeriod = event.target.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function plotData(callData, putData) {
|
function plotData(callData, putData) {
|
||||||
@ -220,7 +227,74 @@
|
|||||||
// Calculate OTM/ITM ratio
|
// Calculate OTM/ITM ratio
|
||||||
displayOTMRatio = otmVolume / (itmVolume+otmVolume) ?? 0;
|
displayOTMRatio = otmVolume / (itmVolume+otmVolume) ?? 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function filterDate(filteredList, displayTimePeriod) {
|
||||||
|
const now = Date.now();
|
||||||
|
let cutoffDate;
|
||||||
|
|
||||||
|
switch (displayTimePeriod) {
|
||||||
|
case 'oneWeek':
|
||||||
|
cutoffDate = now - 7 * 24 * 60 * 60 * 1000;
|
||||||
|
break;
|
||||||
|
case 'oneMonth':
|
||||||
|
cutoffDate = now - 30 * 24 * 60 * 60 * 1000;
|
||||||
|
break;
|
||||||
|
case 'threeMonths':
|
||||||
|
cutoffDate = now - 90 * 24 * 60 * 60 * 1000;
|
||||||
|
break;
|
||||||
|
case 'sixMonths':
|
||||||
|
cutoffDate = now - 180 * 24 * 60 * 60 * 1000;
|
||||||
|
break;
|
||||||
|
case 'oneYear':
|
||||||
|
cutoffDate = now - 365 * 24 * 60 * 60 * 1000;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw new Error('Invalid time period');
|
||||||
|
}
|
||||||
|
|
||||||
|
return filteredList?.filter(item => {
|
||||||
|
// Convert YYYY-MM-DD to a timestamp
|
||||||
|
const [year, month, day] = item?.date?.split('-')?.map(Number);
|
||||||
|
const itemTimestamp = new Date(year, month - 1, day)?.getTime();
|
||||||
|
|
||||||
|
return itemTimestamp >= cutoffDate;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function processPlotData(filteredList: any[]) {
|
||||||
|
const totals = filteredList?.reduce((acc, obj) => {
|
||||||
|
acc.callVolume += obj?.CALL?.volume;
|
||||||
|
acc.putVolume += obj?.PUT?.volume;
|
||||||
|
acc.callOpenInterest += obj?.CALL?.open_interest;
|
||||||
|
acc.putOpenInterest += obj?.PUT?.open_interest;
|
||||||
|
return acc;
|
||||||
|
}, { callVolume: 0, putVolume: 0, callOpenInterest: 0, putOpenInterest: 0 });
|
||||||
|
|
||||||
|
putCallRatio = (totals.putVolume / totals.callVolume)?.toFixed(2);
|
||||||
|
totalVolume = totals.callVolume + totals.putVolume;
|
||||||
|
totalOpenInterest = totals.callOpenInterest + totals.putOpenInterest;
|
||||||
|
putCallOpenInterestRatio = (totals.putOpenInterest / totals.callOpenInterest)?.toFixed(2);
|
||||||
|
|
||||||
|
dateList = filteredList?.map(item => item.date);
|
||||||
|
callVolumeList = filteredList?.map(item => item?.CALL?.volume);
|
||||||
|
putVolumeList = filteredList?.map(item => item?.PUT?.volume);
|
||||||
|
callOpenInterestList = filteredList?.map(item => item?.CALL?.open_interest);
|
||||||
|
putOpenInterestList = filteredList?.map(item => item?.PUT?.open_interest);
|
||||||
|
|
||||||
|
displayTotalVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(totalVolume);
|
||||||
|
displayTotalPutCall = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(putCallRatio);
|
||||||
|
displayTotalOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(totalOpenInterest);
|
||||||
|
|
||||||
|
// Determine the type of plot data to generate based on displayData
|
||||||
|
if (displayData === 'volume') {
|
||||||
|
options = plotData(callVolumeList, putVolumeList);
|
||||||
|
} else if (displayData === 'openInterest') {
|
||||||
|
options = plotData(callOpenInterestList, putOpenInterestList);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
async function handleScroll() {
|
async function handleScroll() {
|
||||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
@ -233,35 +307,36 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
calculateStats();
|
calculateStats();
|
||||||
|
|
||||||
if(data?.user?.tier === 'Pro') {
|
if(data?.user?.tier === 'Pro') {
|
||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener('scroll', handleScroll);
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('scroll', handleScroll);
|
window.removeEventListener('scroll', handleScroll);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if(displayData && optionsPlotData?.length !== 0 && typeof window !== 'undefined') {
|
if ((displayTimePeriod || displayData) && optionsPlotData?.length !== 0 && typeof window !== 'undefined') {
|
||||||
if (displayData === 'volume') {
|
// Filter the raw plot data based on the selected time period
|
||||||
options = plotData(callVolumeList, putVolumeList)
|
filteredList = filterDate(rawPlotData, displayTimePeriod);
|
||||||
}
|
|
||||||
else if (displayData === 'openInterest') {
|
|
||||||
options = plotData(callOpenInterestList, putOpenInterestList)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// Process the filtered list to generate the plot data
|
||||||
|
processPlotData(filteredList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
@ -300,7 +375,7 @@
|
|||||||
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
{#if optionsPlotData?.length !== 0}
|
{#if optionsPlotData?.length !== 0}
|
||||||
Last 3 months of options activity involving {$displayCompanyName} by major institutional traders and hedge funds.
|
1 Year of options activity involving {$displayCompanyName} by major institutional traders and hedge funds.
|
||||||
{:else}
|
{:else}
|
||||||
There's no data available, indicating that major traders may not be actively betting on {$displayCompanyName}.
|
There's no data available, indicating that major traders may not be actively betting on {$displayCompanyName}.
|
||||||
{/if}
|
{/if}
|
||||||
@ -311,90 +386,126 @@
|
|||||||
|
|
||||||
|
|
||||||
{#if optionsPlotData?.length !== 0}
|
{#if optionsPlotData?.length !== 0}
|
||||||
|
|
||||||
<div class="stats stats-horizontal bg-[#27272A] w-full rounded-lg">
|
|
||||||
|
|
||||||
<div class="grid grid-cols-2">
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="totalVolume" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
|
|
||||||
Total Volume
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Total Volume"}
|
|
||||||
content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
|
|
||||||
id={"totalVolume"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value font-semibold mt-1 text-lg text-gray-200">{displayTotalVolume}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="totalOpenInterestModal" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
|
|
||||||
Total OI
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Total Open Interest"}
|
|
||||||
content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
|
|
||||||
id={"totalOpenInterestModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value font-semibold mt-1 text-lg text-gray-200">{displayTotalOpenInterest}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
|
|
||||||
P/C Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Put-Call Ratio"}
|
|
||||||
content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value font-semibold mt-1 text-lg text-gray-200">
|
|
||||||
{totalPutCallRatio !== 'Infinity' ? totalPutCallRatio : '> 1'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
|
|
||||||
OI P/C Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Open Interest Put-Call Ratio"}
|
|
||||||
content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value font-semibold mt-1 text-lg text-gray-200">{putCallOpenInterestRatio !== 'Infinity' ? putCallOpenInterestRatio : '> 1'}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
|
Total Volume
|
||||||
|
<span class="relative" role="tooltip">
|
||||||
|
<label for="totaVolume" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||||
|
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||||
|
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Total Volume"}
|
||||||
|
content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
|
||||||
|
id={"totaVolume"}
|
||||||
|
hide={true}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||||
|
{displayTotalVolume}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
|
||||||
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
|
Total OI
|
||||||
|
<span class="relative" role="tooltip">
|
||||||
|
<label for="totalOpenInterest" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||||
|
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||||
|
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Total OI"}
|
||||||
|
content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
|
||||||
|
id={"totalOpenInterest"}
|
||||||
|
hide={true}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||||
|
{displayTotalOpenInterest}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
|
||||||
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
|
P/C Ratio
|
||||||
|
<span class="relative" role="tooltip">
|
||||||
|
<label for="putCallRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||||
|
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||||
|
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"P/C Ratio"}
|
||||||
|
content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
|
||||||
|
id={"putCallRatio"}
|
||||||
|
hide={true}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||||
|
{putCallRatio !== 'Infinity' ? putCallRatio : '> 1'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
|
||||||
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
|
OI P/C Ratio
|
||||||
|
<span class="relative" role="tooltip">
|
||||||
|
<label for="openInteresteRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||||
|
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||||
|
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"OI P/C Ratio"}
|
||||||
|
content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
|
||||||
|
id={"openInteresteRatio"}
|
||||||
|
hide ={true}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||||
|
{putCallOpenInterestRatio !== 'Infinity' ? putCallOpenInterestRatio : '> 1'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center w-full mt-10">
|
||||||
|
<select class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeTimePeriod}>
|
||||||
|
<option disabled>Choose a time period</option>
|
||||||
<div class="flex flex-row items-center w-full mt-5">
|
<option value="oneWeek">1 Week</option>
|
||||||
<select class="mt-5 sm:mb-0 ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeStatement}>
|
<option value="oneMonth" selected>1 Month</option>
|
||||||
<option disabled>Choose a category</option>
|
<option value="threeMonths" selected>3 Months</option>
|
||||||
<option value="volume" selected>Volume</option>
|
<option value="sixMonths">6 Months</option>
|
||||||
<option value="openInterest">Open Interest</option>
|
<option value="oneYear">1 Year</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
<select class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeStatement}>
|
||||||
|
<option disabled>Choose a category</option>
|
||||||
|
<option value="volume" selected>Volume</option>
|
||||||
|
<option value="openInterest">Open Interest</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="app w-full bg-[#09090B] rounded-xl">
|
<div class="app w-full bg-[#09090B] rounded-xl">
|
||||||
<Chart {init} options={options} class="chart" />
|
{#if filteredList?.length !== 0}
|
||||||
|
<Chart {init} options={options} class="chart" />
|
||||||
|
{:else}
|
||||||
|
<span class="text-xl text-white m-auto flex justify-center items-center h-full">
|
||||||
|
<div class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
|
||||||
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
No Options activity found
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -567,7 +678,7 @@
|
|||||||
<!-- row -->
|
<!-- row -->
|
||||||
<tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
|
<tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
|
||||||
|
|
||||||
<td class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap">
|
<td class="text-white text-sm text-start whitespace-nowrap">
|
||||||
{formatTime(item?.time)}
|
{formatTime(item?.time)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
@ -583,11 +694,11 @@
|
|||||||
{item?.strike_price}
|
{item?.strike_price}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="{item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-start">
|
<td class="text-sm sm:text-[1rem] {item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-start">
|
||||||
{item?.put_call}
|
{item?.put_call}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="{item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start">
|
<td class="text-sm sm:text-[1rem] {item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start">
|
||||||
{item?.sentiment}
|
{item?.sentiment}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|||||||
@ -20,11 +20,10 @@ export const load = async ({ parent, params }) => {
|
|||||||
|
|
||||||
|
|
||||||
const getOptionsPlotData = async () => {
|
const getOptionsPlotData = async () => {
|
||||||
let res;
|
|
||||||
|
|
||||||
const cachedData = getCache(params.tickerID, 'getOptionsPlotData');
|
const cachedData = getCache(params.tickerID, 'getOptionsPlotData');
|
||||||
if (cachedData) {
|
if (cachedData) {
|
||||||
res = cachedData;
|
return cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
const postData = {
|
const postData = {
|
||||||
@ -40,43 +39,12 @@ export const load = async ({ parent, params }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const output = await response.json();
|
const output = await response.json();
|
||||||
|
|
||||||
const totalCallVolume = output?.reduce((acc, obj) => acc + obj?.CALL?.volume, 0);
|
|
||||||
const totalPutVolume = output?.reduce((acc, obj) => acc + obj?.PUT?.volume, 0);
|
|
||||||
const putCallRatio = (totalPutVolume/totalCallVolume)?.toFixed(2);
|
|
||||||
|
|
||||||
const totalVolume = output?.reduce((acc, obj) => {
|
|
||||||
// Summing volume from both CALL and PUT
|
|
||||||
return acc + obj?.CALL?.volume + obj?.PUT?.volume;
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
const totalOpenInterest = output?.reduce((acc, obj) => {
|
setCache(params.tickerID, output, 'getOptionsPlotData');
|
||||||
// Summing volume from both CALL and PUT
|
return output;
|
||||||
return acc + obj?.CALL?.open_interest + obj?.PUT?.open_interest;
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
|
|
||||||
// Summing the total open interest of CALL and PUT options
|
|
||||||
const totalCallOpenInterest = output?.reduce((acc, obj) => acc + obj?.CALL.open_interest, 0);
|
|
||||||
const totalPutOpenInterest = output?.reduce((acc, obj) => acc + obj?.PUT.open_interest, 0);
|
|
||||||
|
|
||||||
// Computing the put-call ratio for open interest
|
|
||||||
const putCallOpenInterestRatio = (totalPutOpenInterest / totalCallOpenInterest)?.toFixed(2);
|
|
||||||
|
|
||||||
//Plot Data
|
|
||||||
const dateList = output?.map(item => item.date);
|
|
||||||
const callVolumeList = output?.map(item => item?.CALL?.volume);
|
|
||||||
const putVolumeList = output?.map(item => item?.PUT?.volume);
|
|
||||||
const callOpenInterestList = output?.map(item => item?.CALL?.open_interest);
|
|
||||||
const putOpenInterestList = output?.map(item => item?.PUT?.open_interest);
|
|
||||||
|
|
||||||
res = {plot: output, 'dateList': dateList, 'callOpenInterestList': callOpenInterestList, 'putOpenInterestList': putOpenInterestList, 'callVolumeList': callVolumeList, 'putVolumeList': putVolumeList, 'putCallRatio': putCallRatio, 'putCallOpenInterestRatio': putCallOpenInterestRatio,'totalVolume': totalVolume, 'totalOpenInterest': totalOpenInterest };
|
|
||||||
setCache(params.tickerID, res, 'getOptionsPlotData');
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return res;
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const getOptionsFlowData = async () => {
|
const getOptionsFlowData = async () => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user