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

update option page

Browse Source
This commit is contained in:
MuslemRahimi 2025-01-22 23:56:43 +01:00
parent 77afc0aab1
commit a61fa5cdee
2 changed files with 22 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/api/options-contract-history/+server.ts
View File

@ -4,7 +4,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
const data = await request.json(); const data = await request.json();
const { apiURL, apiKey } = locals; const { apiURL, apiKey } = locals;
const postData = { params: data?.params }; const postData = { ticker: data?.ticker, contract: data?.contract };
const response = await fetch(apiURL + "/options-contract-history", { const response = await fetch(apiURL + "/options-contract-history", {
method: "POST", method: "POST",
headers: { headers: {

169
src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
View File

@ -164,12 +164,12 @@
{ key: "strike_price", label: "Chain", align: "left" }, { key: "strike_price", label: "Chain", align: "left" },
{ key: "dte", label: "DTE", align: "right" }, { key: "dte", label: "DTE", align: "right" },
{ key: "otm", label: "% OTM", align: "right" }, { key: "otm", label: "% OTM", align: "right" },
{ key: "last_price", label: "Last", align: "right" }, { key: "last", label: "Last", align: "right" },
{ key: "high_price", label: "Low-High", align: "right" }, { key: "high", label: "Low-High", align: "right" },
{ key: "volume", label: "Volume", align: "right" }, { key: "volume", label: "Volume", align: "right" },
{ key: "open_interest", label: "OI", align: "right" }, { key: "open_interest", label: "OI", align: "right" },
{ key: "open_interest_change", label: "OI Change", align: "right" }, { key: "open_interest_change", label: "OI Change", align: "right" },
{ key: "bid_volume", label: "Bid/Ask Vol", align: "right" }, { key: "iv", label: "IV", align: "right" },
{ key: "total_premium", label: "Total Prem", align: "right" }, { key: "total_premium", label: "Total Prem", align: "right" },
]; ];
@ -177,12 +177,12 @@
strike_price: { order: "none", type: "number" }, strike_price: { order: "none", type: "number" },
dte: { order: "none", type: "number" }, dte: { order: "none", type: "number" },
otm: { order: "none", type: "number" }, otm: { order: "none", type: "number" },
last_price: { order: "none", type: "number" }, last: { order: "none", type: "number" },
high_price: { order: "none", type: "number" }, high: { order: "none", type: "number" },
volume: { order: "none", type: "number" }, volume: { order: "none", type: "number" },
open_interest: { order: "none", type: "number" }, open_interest: { order: "none", type: "number" },
open_interest_change: { order: "none", type: "number" }, open_interest_change: { order: "none", type: "number" },
bid_volume: { order: "none", type: "number" }, iv: { order: "none", type: "number" },
total_premium: { order: "none", type: "number" }, total_premium: { order: "none", type: "number" },
}; };
@ -509,7 +509,8 @@
output = cachedData; output = cachedData;
} else { } else {
const postData = { const postData = {
params: contractId, ticker: $stockTicker,
contract: contractId,
}; };
// make the POST request to the endpoint // make the POST request to the endpoint
@ -690,12 +691,12 @@
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
> >
{item?.last_price} {item?.last}
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
> >
{item?.low_price}-{item?.high_price} {item?.low}-{item?.high}
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@ -710,82 +711,18 @@
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
> >
{#if item?.open_interest_change >= 0} {#if item?.changeOI >= 0}
<span class="text-[#00FC50]" <span class="text-[#00FC50]"
>+{item?.open_interest_change?.toLocaleString( >+{item?.changeOI?.toLocaleString("en-US")}</span
"en-US",
)}</span
> >
{:else} {:else}
<span class="text-[#FF2F1F]" <span class="text-[#FF2F1F]"
>{item?.open_interest_change?.toLocaleString( >{item?.changeOI?.toLocaleString("en-US")}</span
"en-US",
)}</span
> >
{/if} {/if}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end"> <td class="text-sm sm:text-[1rem] text-end">
<HoverCard.Root> {item?.iv}%
<HoverCard.Trigger
class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
>
<div class="flex items-center justify-end">
<!-- Bar Container -->
<div
class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
>
<!-- Bearish -->
<div
class="bg-red-500 h-full"
style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
></div>
<!-- Neutral -->
<div
class="bg-gray-300 h-full"
style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
></div>
<!-- Bullish -->
<div
class="bg-green-500 h-full"
style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
></div>
</div>
</div>
</HoverCard.Trigger>
<HoverCard.Content
class="w-auto bg-secondary border border-gray-600"
>
<div class="flex justify-between space-x-4">
<div
class="space-y-1 flex flex-col items-start text-white"
>
<div>
Bid Vol: {@html abbreviateNumberWithColor(
item?.bid_volume,
false,
true,
)}
</div>
<div>
Mid Vol: {@html abbreviateNumberWithColor(
item?.mid_volume,
false,
true,
)}
</div>
<div>
Ask Vol: {@html abbreviateNumberWithColor(
item?.ask_volume,
false,
true,
)}
</div>
</div>
</div>
</HoverCard.Content>
</HoverCard.Root>
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@ -868,12 +805,12 @@
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
> >
{item?.last_price} {item?.last}
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
> >
{item?.low_price}-{item?.high_price} {item?.low}-{item?.high}
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@ -888,82 +825,18 @@
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
> >
{#if item?.open_interest_change >= 0} {#if item?.changeOI >= 0}
<span class="text-[#00FC50]" <span class="text-[#00FC50]"
>+{item?.open_interest_change?.toLocaleString( >+{item?.changeOI?.toLocaleString("en-US")}</span
"en-US",
)}</span
> >
{:else} {:else}
<span class="text-[#FF2F1F]" <span class="text-[#FF2F1F]"
>{item?.open_interest_change?.toLocaleString( >{item?.changeOI?.toLocaleString("en-US")}</span
"en-US",
)}</span
> >
{/if} {/if}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end"> <td class="text-sm sm:text-[1rem] text-end">
<HoverCard.Root> {item?.iv}%
<HoverCard.Trigger
class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
>
<div class="flex items-center justify-end">
<!-- Bar Container -->
<div
class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
>
<!-- Bearish -->
<div
class="bg-red-500 h-full"
style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
></div>
<!-- Neutral -->
<div
class="bg-gray-300 h-full"
style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
></div>
<!-- Bullish -->
<div
class="bg-green-500 h-full"
style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
></div>
</div>
</div>
</HoverCard.Trigger>
<HoverCard.Content
class="w-auto bg-secondary border border-gray-600"
>
<div class="flex justify-between space-x-4">
<div
class="space-y-1 flex flex-col items-start text-white"
>
<div>
Bid Vol: {@html abbreviateNumberWithColor(
item?.bid_volume,
false,
true,
)}
</div>
<div>
Mid Vol: {@html abbreviateNumberWithColor(
item?.mid_volume,
false,
true,
)}
</div>
<div>
Ask Vol: {@html abbreviateNumberWithColor(
item?.ask_volume,
false,
true,
)}
</div>
</div>
</div>
</HoverCard.Content>
</HoverCard.Root>
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@ -1208,7 +1081,7 @@
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end text-white">
{item?.last_price} {item?.last}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end text-white">