AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add otm ratio

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-23 23:54:39 +02:00
parent 539a4cb19b
commit d54833f3e9
2 changed files with 720 additions and 649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/routes/etf/[tickerID]/options/+page.svelte
View File

@ -22,6 +22,7 @@ let putPercentage;
let displayCallVolume;
let displayPutVolume;
let latestPutCallRatio;
let displayOTMRatio;
const totalPutCallRatio = data?.getOptionsPlotData?.putCallRatio;
@ -47,23 +48,6 @@ const putOpenInterestList = data?.getOptionsPlotData?.putOpenInterestList;
function formatTime(timeString) {
// Split the time string into components
const [hours, minutes, seconds] = timeString.split(':').map(Number);
// Determine AM or PM
const period = hours >= 12 ? 'PM' : 'AM';
// Convert hours from 24-hour to 12-hour format
const formattedHours = hours % 12 || 12; // Converts 0 to 12 for midnight
// Format the time string
const formattedTimeString = `${formattedHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${period}`;
return formattedTimeString;
}
function formatDate(dateStr) {
// Parse the input date string (YYYY-mm-dd)
var date = new Date(dateStr);
@ -85,17 +69,27 @@ function formatDate(dateStr) {
return formattedDate;
}
function formatTime(timeString) {
// Split the time string into components
const [hours, minutes, seconds] = timeString.split(':').map(Number);
// Determine AM or PM
const period = hours >= 12 ? 'PM' : 'AM';
// Convert hours from 24-hour to 12-hour format
const formattedHours = hours % 12 || 12; // Converts 0 to 12 for midnight
// Format the time string
const formattedTimeString = `${formattedHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${period}`;
return formattedTimeString;
}
function changeStatement(event)
{
displayData = event.target.value;
}
let tableVolume = 0;
let tableOpenInterest = 0;
let tableAvgDTE = 0;
function plotData(callData, putData) {
@ -171,13 +165,26 @@ function plotData(callData, putData) {
}
function calculateStats() {
const { callVolumeSum, putVolumeSum, bullishCount, bearishCount } = rawData?.reduce((acc, item) => {
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") {
@ -187,24 +194,24 @@ function calculateStats() {
}
return acc;
}, { callVolumeSum: 0, putVolumeSum: 0, bullishCount: 0, bearishCount: 0 });
}, { callVolumeSum: 0, putVolumeSum: 0, bullishCount: 0, bearishCount: 0, otmVolume: 0, itmVolume: 0 });
if (bullishCount > bearishCount) {
flowSentiment = 'Bullish'
}
else if (bullishCount < bearishCount) {
flowSentiment = 'Bearish'
flowSentiment = 'Bullish';
} else if (bullishCount < bearishCount) {
flowSentiment = 'Bearish';
} else {
flowSentiment = 'Neutral';
}
latestPutCallRatio = (putVolumeSum/callVolumeSum);
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;
}
async function handleScroll() {
@ -220,7 +227,6 @@ async function handleScroll() {
onMount(async () => {
calculateStats();
if(data?.user?.tier === 'Pro') {
@ -400,7 +406,7 @@ $: {
<!--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="font-medium text-gray-200 text-[1rem] ">Flow Sentiment</span>
<span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
</div>
@ -409,7 +415,7 @@ $: {
<!--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="font-medium text-gray-200 text-[1rem] ">Put/Call</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
{latestPutCallRatio?.toFixed(3)}
</span>
@ -436,7 +442,7 @@ $: {
<!--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="font-medium text-gray-200 text-[1rem] ">Call Flow</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
{new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
@ -465,7 +471,7 @@ $: {
<!--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="font-medium text-gray-200 text-[1rem] ">Put Flow</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
{new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
@ -493,6 +499,34 @@ $: {
</div>
<!--End Put Flow-->
<!--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-[1rem] ">Ratio %</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
OTM / ITM
</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={displayOTMRatio >=1 ? 0 : 100-(displayOTMRatio*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">{(displayOTMRatio*100)?.toFixed(0)}%</span>
</div>
</div>
<!-- End Circular Progress -->
</div>
<!--End Put/Call-->
</div>
</div>
@ -530,7 +564,7 @@ $: {
{formatTime(item?.time)}
</td>
<td class="text-white text-xs sm:text-sm text-start whitespace-nowrap">
<td class="text-white text-xs sm:text-sm text-start">
{formatDate(item?.date)}
</td>

71
src/routes/stocks/[tickerID]/options/+page.svelte
View File

@ -22,6 +22,7 @@ let putPercentage;
let displayCallVolume;
let displayPutVolume;
let latestPutCallRatio;
let displayOTMRatio;
const totalPutCallRatio = data?.getOptionsPlotData?.putCallRatio;
@ -89,10 +90,6 @@ function changeStatement(event)
displayData = event.target.value;
}
let tableVolume = 0;
let tableOpenInterest = 0;
let tableAvgDTE = 0;
function plotData(callData, putData) {
@ -168,13 +165,26 @@ function plotData(callData, putData) {
}
function calculateStats() {
const { callVolumeSum, putVolumeSum, bullishCount, bearishCount } = rawData?.reduce((acc, item) => {
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") {
@ -184,24 +194,24 @@ function calculateStats() {
}
return acc;
}, { callVolumeSum: 0, putVolumeSum: 0, bullishCount: 0, bearishCount: 0 });
}, { callVolumeSum: 0, putVolumeSum: 0, bullishCount: 0, bearishCount: 0, otmVolume: 0, itmVolume: 0 });
if (bullishCount > bearishCount) {
flowSentiment = 'Bullish'
}
else if (bullishCount < bearishCount) {
flowSentiment = 'Bearish'
flowSentiment = 'Bullish';
} else if (bullishCount < bearishCount) {
flowSentiment = 'Bearish';
} else {
flowSentiment = 'Neutral';
}
latestPutCallRatio = (putVolumeSum/callVolumeSum);
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;
}
async function handleScroll() {
@ -217,7 +227,6 @@ async function handleScroll() {
onMount(async () => {
calculateStats();
if(data?.user?.tier === 'Pro') {
@ -397,7 +406,7 @@ $: {
<!--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="font-medium text-gray-200 text-[1rem] ">Flow Sentiment</span>
<span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
</div>
@ -406,7 +415,7 @@ $: {
<!--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="font-medium text-gray-200 text-[1rem] ">Put/Call</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
{latestPutCallRatio?.toFixed(3)}
</span>
@ -433,7 +442,7 @@ $: {
<!--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="font-medium text-gray-200 text-[1rem] ">Call Flow</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
{new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
@ -462,7 +471,7 @@ $: {
<!--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="font-medium text-gray-200 text-[1rem] ">Put Flow</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
{new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
@ -490,6 +499,34 @@ $: {
</div>
<!--End Put Flow-->
<!--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-[1rem] ">Ratio %</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
OTM / ITM
</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={displayOTMRatio >=1 ? 0 : 100-(displayOTMRatio*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">{(displayOTMRatio*100)?.toFixed(0)}%</span>
</div>
</div>
<!-- End Circular Progress -->
</div>
<!--End Put/Call-->
</div>
</div>