284 lines
9.8 KiB
Svelte
284 lines
9.8 KiB
Svelte
<script lang='ts'>
|
|
import { optionComponent, assetType, stockTicker, etfTicker, displayCompanyName, getCache, setCache} from "$lib/store";
|
|
import { abbreviateNumber } from "$lib/utils";
|
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
|
import { LayerCake, Html } from 'layercake';
|
|
import Circle from '$lib/components/Circle/Circle.html.svelte';
|
|
|
|
export let data;
|
|
|
|
let optionsDict = {};
|
|
|
|
let isLoaded = false;
|
|
|
|
function changeStatement(event)
|
|
{
|
|
displayTimePeriod = event.target.value;
|
|
}
|
|
|
|
function allValuesZero(obj) {
|
|
return Object?.values(obj)?.every(value => value === 0);
|
|
}
|
|
|
|
|
|
let displayTimePeriod = 'oneMonth'
|
|
let signal = '';
|
|
let callVolume;
|
|
let putVolume;
|
|
let dataset;
|
|
|
|
const idKey = 'contract';
|
|
const valueKey = 'value';
|
|
let rawData = [];
|
|
|
|
let checkIfNotZero:boolean;
|
|
|
|
|
|
|
|
const getOptionsBubble = async (ticker) => {
|
|
// Get cached data for the specific tickerID
|
|
const cachedData = getCache(ticker, 'getOptionsBubble');
|
|
if (cachedData) {
|
|
optionsDict = cachedData;
|
|
} else {
|
|
|
|
const postData = {'ticker': ticker};
|
|
// make the POST request to the endpoint
|
|
const response = await fetch(data?.apiURL + '/options-bubble', {
|
|
method: 'POST',
|
|
headers: {
|
|
"Content-Type": "application/json", "X-API-KEY": data?.apiKey
|
|
},
|
|
body: JSON.stringify(postData)
|
|
});
|
|
|
|
optionsDict = await response.json();
|
|
|
|
// Cache the data for this specific tickerID with a specific name 'getOptionsBubble'
|
|
setCache(ticker, optionsDict, 'getOptionsBubble');
|
|
}
|
|
|
|
if(Object?.keys(optionsDict)?.length !== 0) {
|
|
$optionComponent = true;
|
|
}
|
|
else {
|
|
$optionComponent = false;
|
|
}
|
|
|
|
};
|
|
|
|
|
|
function prepareData() {
|
|
checkIfNotZero = false;
|
|
rawData = [];
|
|
try {
|
|
dataset = optionsDict[displayTimePeriod];
|
|
|
|
callVolume = dataset?.callVolume
|
|
putVolume = dataset?.putVolume
|
|
|
|
const totalVolume = dataset?.putVolume + dataset?.callVolume;
|
|
const callProportion = Math.ceil((dataset?.callVolume / totalVolume) * 100);
|
|
const putProportion = 100- callProportion;
|
|
|
|
rawData.push({ 'contract': 'calls', value: callProportion });
|
|
rawData.push({ 'contract': 'puts', value: putProportion });
|
|
signal = callProportion >= putProportion ? 'Bullish' : 'Bearish';
|
|
checkIfNotZero = allValuesZero(dataset);
|
|
|
|
}
|
|
catch(e) {
|
|
dataset = {};
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
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') {
|
|
isLoaded = false;
|
|
|
|
const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker;
|
|
|
|
const asyncFunctions = [
|
|
getOptionsBubble(ticker)
|
|
];
|
|
Promise.all(asyncFunctions)
|
|
.then((results) => {
|
|
prepareData()
|
|
})
|
|
.catch((error) => {
|
|
console.error('An error occurred:', error);
|
|
});
|
|
isLoaded = true;
|
|
}
|
|
}
|
|
|
|
$: {
|
|
if (displayTimePeriod && Object?.keys(optionsDict)?.length !== 0 && isLoaded === true)
|
|
{
|
|
prepareData()
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<section class="overflow-hidden text-white h-full pb-8">
|
|
<main class="overflow-hidden ">
|
|
|
|
|
|
<div class="flex flex-row items-center">
|
|
<label for="optionsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
|
Latest Options Activity
|
|
</label>
|
|
<InfoModal
|
|
title={"Options Activity"}
|
|
content={`Monitor real-time unusual options activity from big instiutional traders and hedge funds of ${$displayCompanyName} with a 1-minute delay, which can significantly influence stock prices.`}
|
|
id={"optionsInfo"}
|
|
/>
|
|
</div>
|
|
|
|
{#if data?.user?.tier === 'Pro'}
|
|
{#if isLoaded}
|
|
<div class="flex flex-row items-end justify-between">
|
|
<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 value="oneDay">
|
|
1 Day
|
|
</option>
|
|
<option value="oneWeek">
|
|
1 Week
|
|
</option>
|
|
<option value="oneMonth" selected>
|
|
1 Month
|
|
</option>
|
|
<option value="threeMonth">3 Months</option>
|
|
<option value="sixMonth">6 Months</option>
|
|
<option value="oneYear">1 Year</option>
|
|
</select>
|
|
|
|
|
|
<a href={$assetType === 'stock' ? `/stocks/${$stockTicker}/options` : `/etf/${$etfTicker}/options`} class="text-sm sm:text-[1rem] sm:hover:text-white text-blue-400 font-normal">Full report</a>
|
|
</div>
|
|
|
|
{#if !checkIfNotZero}
|
|
<div class="flex flex-row items-center justify-center m-auto w-full h-auto mt-4">
|
|
|
|
<div class="flex flex-col items-start w-full">
|
|
|
|
|
|
|
|
<div class="chart-container ">
|
|
<LayerCake
|
|
padding={{ top: 0, bottom: 0, left: 0, right: 10 }}
|
|
data={rawData}
|
|
>
|
|
<Html>
|
|
<Circle
|
|
idKey={idKey}
|
|
valueKey={valueKey}
|
|
textStrokeWidth={-0.5}
|
|
/>
|
|
</Html>
|
|
</LayerCake>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="sm:mt-10">
|
|
The Options activity signals a
|
|
{#if signal === 'Bullish' }
|
|
<span class="text-[#10DB06]">
|
|
<svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="#10db06" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="m3 17l6-6l4 4l8-8"/><path d="M17 7h4v4"/></g></svg>
|
|
{signal}
|
|
</span>
|
|
|
|
{:else if signal === 'Bearish' }
|
|
<span class="text-[#E57C34]">
|
|
<svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#ff2f1f" d="M244 136v64a12 12 0 0 1-12 12h-64a12 12 0 0 1 0-24h35l-67-67l-31.51 31.52a12 12 0 0 1-17 0l-72-72a12 12 0 0 1 17-17L96 127l31.51-31.52a12 12 0 0 1 17 0L220 171v-35a12 12 0 0 1 24 0Z"/></svg>
|
|
{signal}
|
|
</span>
|
|
{:else}
|
|
<span class="text-[#FF2F1F]">
|
|
<svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#e57c34" d="m22 12l-4-4v3H3v2h15v3l4-4Z"/></svg>
|
|
Neutral
|
|
</span>
|
|
{/if} trend.
|
|
</div>
|
|
|
|
<span class="text-[1rem] text-white">
|
|
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>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{:else}
|
|
<div class="flex justify-center items-center m-auto mt-16 mb-6">
|
|
<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>
|
|
</div>
|
|
{/if}
|
|
|
|
{:else}
|
|
<div class="flex justify-center items-center h-80">
|
|
<div class="relative">
|
|
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<span class="loading loading-spinner loading-md"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
|
|
<svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
|
|
Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
|
|
</div>
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
</main>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
/*
|
|
The wrapper div needs to have an explicit width and height in CSS.
|
|
It can also be a flexbox child or CSS grid element.
|
|
The point being it needs dimensions since the <LayerCake> element will
|
|
expand to fill it.
|
|
*/
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
</style>
|