624 lines
29 KiB
Svelte
624 lines
29 KiB
Svelte
<script lang="ts">
|
|
|
|
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
|
|
import { Chart } from 'svelte-echarts'
|
|
import { abbreviateNumber } from '$lib/utils';
|
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
|
import { onMount } from 'svelte'
|
|
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
|
|
|
|
export let data;
|
|
|
|
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
|
|
let optionsPlotData = data?.getOptionsPlotData?.plot;
|
|
let displayData = 'volume';
|
|
let options;
|
|
let rawData = data?.getOptionsFlowData
|
|
let optionList = rawData?.slice(0,15);
|
|
let flowSentiment = 'n/a';
|
|
let callPercentage;
|
|
let putPercentage;
|
|
let displayCallVolume;
|
|
let displayPutVolume;
|
|
let latestPutCallRatio;
|
|
|
|
const totalPutCallRatio = data?.getOptionsPlotData?.putCallRatio;
|
|
|
|
|
|
const totalVolume = data?.getOptionsPlotData?.totalVolume;
|
|
|
|
const totalOpenInterest = data?.getOptionsPlotData?.totalOpenInterest;
|
|
|
|
|
|
// Computing the put-call ratio for open interest
|
|
const putCallOpenInterestRatio = data?.getOptionsPlotData?.putCallOpenInterestRatio;
|
|
|
|
const displayTotalVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalVolume);
|
|
const displayTotalOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0})?.format(totalOpenInterest);
|
|
|
|
const dateList = data?.getOptionsPlotData?.dateList;
|
|
|
|
const callVolumeList = data?.getOptionsPlotData?.callVolumeList;
|
|
const putVolumeList = data?.getOptionsPlotData?.putVolumeList;
|
|
const callOpenInterestList = data?.getOptionsPlotData?.callOpenInterestList;
|
|
const putOpenInterestList = data?.getOptionsPlotData?.putOpenInterestList;
|
|
|
|
|
|
|
|
|
|
function formatDate(timestamp) {
|
|
// Convert timestamp to milliseconds
|
|
var date = new Date(timestamp * 1000);
|
|
|
|
// Get month, day, hours, minutes, and seconds
|
|
var month = date.getMonth() + 1; // Month starts from 0
|
|
var day = date.getDate();
|
|
var hours = date.getHours();
|
|
var minutes = date.getMinutes();
|
|
var seconds = date.getSeconds();
|
|
|
|
// Add leading zeros if necessary
|
|
month = (month < 10 ? "0" : "") + month;
|
|
day = (day < 10 ? "0" : "") + day;
|
|
hours = (hours < 10 ? "0" : "") + hours;
|
|
minutes = (minutes < 10 ? "0" : "") + minutes;
|
|
seconds = (seconds < 10 ? "0" : "") + seconds;
|
|
|
|
// Format the date string
|
|
var formattedDate = month + "/" + day + " " + hours + ":" + minutes + ":" + seconds;
|
|
//var formattedDate = hours + ":" + minutes + ":" + seconds;
|
|
|
|
return formattedDate;
|
|
}
|
|
|
|
|
|
function changeStatement(event)
|
|
{
|
|
displayData = event.target.value;
|
|
}
|
|
|
|
let tableVolume = 0;
|
|
let tableOpenInterest = 0;
|
|
let tableAvgDTE = 0;
|
|
|
|
|
|
|
|
function plotData(callData, putData) {
|
|
const options = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
silent: true,
|
|
grid: {
|
|
left: '10%',
|
|
right: '5%',
|
|
bottom: '20%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: dateList,
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
// Assuming dates are in the format 'yyyy-mm-dd'
|
|
const dateParts = value.split('-');
|
|
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
|
|
const year = parseInt(dateParts[0]);
|
|
const day = parseInt(dateParts[2])
|
|
return `${day} ${monthNames[monthIndex]} ${year}`;
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false // Hide the y-axis label
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'Call',
|
|
type: 'bar',
|
|
stack: 'Put-Call Ratio',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: callData,
|
|
itemStyle: {
|
|
color: '#0FB307'
|
|
},
|
|
barWidth: '30%',
|
|
},
|
|
{
|
|
name: 'Put',
|
|
type: 'bar',
|
|
stack: 'Put-Call Ratio',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: putData,
|
|
itemStyle: {
|
|
color: '#FF2F1F' //'#7A1C16'
|
|
},
|
|
},
|
|
]
|
|
};
|
|
return options;
|
|
}
|
|
|
|
function calculateStats() {
|
|
const { callVolumeSum, putVolumeSum, bullishCount, bearishCount } = rawData?.reduce((acc, item) => {
|
|
const volume = parseInt(item?.volume);
|
|
|
|
if (item?.put_call === "Calls") {
|
|
acc.callVolumeSum += volume;
|
|
} else if (item?.put_call === "Puts") {
|
|
acc.putVolumeSum += 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 });
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
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];
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onMount(async () => {
|
|
|
|
calculateStats();
|
|
|
|
if(data?.user?.tier === 'Pro') {
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}
|
|
})
|
|
|
|
|
|
$: {
|
|
if(displayData && optionsPlotData?.length !== 0 && typeof window !== 'undefined') {
|
|
if (displayData === 'volume') {
|
|
options = plotData(callVolumeList, putVolumeList)
|
|
}
|
|
else if (displayData === 'openInterest') {
|
|
options = plotData(callOpenInterestList, putOpenInterestList)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<svelte:head>
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>
|
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Options Activity · stocknear
|
|
</title>
|
|
<meta name="description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
|
|
|
|
<!-- Other meta tags -->
|
|
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
|
|
<meta property="og:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
|
|
<meta property="og:type" content="website"/>
|
|
<!-- Add more Open Graph meta tags as needed -->
|
|
|
|
<!-- Twitter specific meta tags -->
|
|
<meta name="twitter:card" content="summary_large_image"/>
|
|
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
|
|
<meta name="twitter:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
|
|
<!-- Add more Twitter meta tags as needed -->
|
|
|
|
</svelte:head>
|
|
|
|
|
|
|
|
<section class="bg-[#0F0F0F] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
|
|
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
|
|
<div class="relative flex justify-center items-center overflow-hidden w-full">
|
|
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
|
Unsual Options Activity
|
|
</h2>
|
|
|
|
<div class="text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
|
|
<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="#60a5fa" 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}
|
|
Last 3 months of options activity involving {$displayCompanyName} by major institutional traders and hedge funds.
|
|
{:else}
|
|
There's no data available, indicating that major traders may not be actively betting on {$displayCompanyName}.
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
{#if optionsPlotData?.length !== 0}
|
|
|
|
<div class="stats stats-horizontal bg-[#202020] 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>
|
|
|
|
|
|
|
|
|
|
<div class="flex flex-row items-center w-full mt-5">
|
|
<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 disabled>Choose a category</option>
|
|
<option value="volume" selected>Volume</option>
|
|
<option value="openInterest">Open Interest</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div class="app w-full bg-[#0F0F0F] bg-opacity-1 rounded-xl">
|
|
<Chart options={options} class="chart" />
|
|
</div>
|
|
|
|
|
|
|
|
<h3 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4 text-center sm:text-start">
|
|
Latest Options Activity
|
|
</h3>
|
|
|
|
|
|
|
|
{#if optionList?.length !== 0}
|
|
<!--Start Widget-->
|
|
|
|
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
|
|
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
|
<!--Start Flow Sentiment-->
|
|
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
|
|
<div class="flex flex-col items-start">
|
|
<span class="font-medium text-gray-200 text-sm ">Flow Sentiment</span>
|
|
<span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--End Flow Sentiment-->
|
|
<!--Start Put/Call-->
|
|
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
|
|
<div class="flex flex-col items-start">
|
|
<span class="font-medium text-gray-200 text-sm ">Put/Call</span>
|
|
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
|
{latestPutCallRatio?.toFixed(3)}
|
|
</span>
|
|
</div>
|
|
<!-- Circular Progress -->
|
|
<div class="relative size-14 ml-auto">
|
|
<svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background Circle -->
|
|
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
|
|
<!-- Progress Circle inside a group with rotation -->
|
|
<g class="origin-center -rotate-90 transform">
|
|
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={latestPutCallRatio >=1 ? 0 : 100-(latestPutCallRatio*100)?.toFixed(2)}></circle>
|
|
</g>
|
|
</svg>
|
|
<!-- Percentage Text -->
|
|
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
|
|
<span class="text-center text-white text-sm">{latestPutCallRatio?.toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Circular Progress -->
|
|
|
|
</div>
|
|
<!--End Put/Call-->
|
|
<!--Start Call Flow-->
|
|
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
|
|
<div class="flex flex-col items-start">
|
|
<span class="font-medium text-gray-200 text-sm ">Call Flow</span>
|
|
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
|
{new Intl.NumberFormat("en", {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
}).format(displayCallVolume)}
|
|
</span>
|
|
</div>
|
|
<!-- Circular Progress -->
|
|
<div class="relative size-14 ml-auto">
|
|
<svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background Circle -->
|
|
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
|
|
<!-- Progress Circle inside a group with rotation -->
|
|
<g class="origin-center -rotate-90 transform">
|
|
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#00FC50]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-callPercentage?.toFixed(2)}></circle>
|
|
</g>
|
|
</svg>
|
|
<!-- Percentage Text -->
|
|
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
|
|
<span class="text-center text-white text-sm">{callPercentage}%</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Circular Progress -->
|
|
</div>
|
|
<!--End Call Flow-->
|
|
<!--Start Put Flow-->
|
|
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
|
|
<div class="flex flex-col items-start">
|
|
<span class="font-medium text-gray-200 text-sm ">Put Flow</span>
|
|
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
|
{new Intl.NumberFormat("en", {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
}).format(displayPutVolume)}
|
|
</span>
|
|
</div>
|
|
<!-- Circular Progress -->
|
|
<div class="relative size-14 ml-auto">
|
|
<svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background Circle -->
|
|
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
|
|
<!-- Progress Circle inside a group with rotation -->
|
|
<g class="origin-center -rotate-90 transform">
|
|
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#EE5365]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-putPercentage?.toFixed(2)}></circle>
|
|
</g>
|
|
</svg>
|
|
<!-- Percentage Text -->
|
|
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
|
|
<span class="text-center text-white text-sm">{putPercentage}%</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Circular Progress -->
|
|
|
|
</div>
|
|
<!--End Put Flow-->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!--End Widget-->
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center m-auto overflow-x-auto">
|
|
|
|
|
|
<table class="table table-pin-cols table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#0F0F0F] m-auto mt-4 overflow-x-auto">
|
|
<thead>
|
|
<tr class="">
|
|
<td class="text-slate-200 font-semibold text-sm text-start">Time</td>
|
|
<td class="text-slate-200 font-semibold text-sm text-end">Expiry</td>
|
|
<td class="text-slate-200 font-semibold text-sm text-end">Strike</td>
|
|
<td class="text-slate-200 font-semibold text-sm text-end">C/P</td>
|
|
<td class="text-slate-200 font-semibold text-sm text-start">Sent.</td>
|
|
<td class="text-slate-200 font-semibold text-sm table-cell sm:hidden text-end">Spot</td>
|
|
<td class="text-slate-200 font-semibold text-sm text-end">Price</td>
|
|
<td class="text-slate-200 font-semibold text-sm text-end">Prem.</td>
|
|
<td class="text-slate-200 font-semibold text-sm table-cell sm:hidden text-start">Type</td>
|
|
<td class="text-slate-200 font-semibold text-sm text-end">Vol.</td>
|
|
<td class="text-slate-200 font-semibold text-sm text-end">OI</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index}
|
|
<!-- row -->
|
|
<tr class="bg-[#0F0F0F] border-b-[#0F0F0F] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
|
|
|
|
<td class="text-white text-xs sm:text-sm text-start">
|
|
{formatDate(item?.updated)}
|
|
</td>
|
|
|
|
<td class="text-white text-end">
|
|
{item?.dte < 0 ? 'expired' : item?.dte +'d'}
|
|
</td>
|
|
|
|
<td class="text-sm text-end text-white">
|
|
{item?.strike_price}
|
|
</td>
|
|
|
|
<td class="{item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-start">
|
|
{item?.put_call}
|
|
</td>
|
|
|
|
<td class="{item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start">
|
|
{item?.sentiment}
|
|
</td>
|
|
|
|
<td class="text-sm text-end text-white table-cell sm:hidden">
|
|
{item?.underlying_price}
|
|
</td>
|
|
|
|
<td class="text-sm text-end text-white">
|
|
{item?.price}
|
|
</td>
|
|
|
|
<td class="text-sm text-end font-medium {item?.put_call === 'Puts' ? 'text-[#CB281C]' : 'text-[#0FB307]'} ">
|
|
{abbreviateNumber(item?.cost_basis)}
|
|
</td>
|
|
|
|
<td class="text-sm text-start table-cell sm:hidden {item?.type === 'Sweep' ? 'text-[#C6A755]' : 'text-[#976DB7]'}">
|
|
{item?.type}
|
|
</td>
|
|
|
|
|
|
|
|
<td class="text-white text-end">
|
|
{new Intl.NumberFormat("en", {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
}).format(item?.volume)}
|
|
</td>
|
|
|
|
<td class="text-white text-end">
|
|
{new Intl.NumberFormat("en", {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
}).format(item?.open_interest)}
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
{/each}
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>
|
|
|
|
{:else}
|
|
<div class="flex justify-center items-center m-auto mt-16 mb-6">
|
|
<div class="text-gray-100 text-sm sm:text-[1rem] 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="#60a5fa" 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>
|
|
</div>
|
|
{/if}
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
.app {
|
|
height: 420px;
|
|
max-width: 1500px;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.app {
|
|
max-width: 520px;
|
|
height: 420px;
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
}
|
|
</style> |