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

add hottest contracts

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-31 19:13:19 +01:00
parent b33235361f
commit b296cd7108
6 changed files with 495 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/lib/components/Options/DailyStats.svelte
View File

@ -9,7 +9,7 @@
<div class="text-white">
<label
for="dailyStats"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
Daily Stats
<InfoModal
@ -31,7 +31,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(rawData?.call_volume, false, true)}</td
>{abbreviateNumber(rawData?.call_volume, false)}</td
></tr
>
<tr
@ -42,11 +42,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(
rawData?.call_volume_ask_side,
false,
true,
)}</td
>{abbreviateNumber(rawData?.call_volume_ask_side, false)}</td
></tr
>
<tr
@ -57,11 +53,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(
rawData?.call_volume_bid_side,
false,
true,
)}</td
>{abbreviateNumber(rawData?.call_volume_bid_side, false)}</td
></tr
>
<tr
@ -72,7 +64,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(rawData?.call_premium, false, true)}</td
>{abbreviateNumber(rawData?.call_premium, false)}</td
></tr
>
@ -84,11 +76,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(
rawData?.net_call_premium,
false,
true,
)}</td
>{abbreviateNumber(rawData?.net_call_premium, false)}</td
></tr
>
<tr
@ -99,11 +87,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(
rawData?.call_open_interest,
false,
true,
)}</td
>{abbreviateNumber(rawData?.call_open_interest, false)}</td
></tr
>
<tr
@ -114,7 +98,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(rawData?.iv_rank, false, true)}</td
>{abbreviateNumber(rawData?.iv_rank, false)}</td
></tr
>
<tr
@ -136,11 +120,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(
rawData?.total_open_interest,
false,
true,
)}</td
>{abbreviateNumber(rawData?.total_open_interest, false)}</td
></tr
>
<tr
@ -166,7 +146,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(rawData?.put_volume, false, true)}</td
>{abbreviateNumber(rawData?.put_volume, false)}</td
></tr
>
<tr
@ -177,11 +157,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(
rawData?.put_volume_ask_side,
false,
true,
)}</td
>{abbreviateNumber(rawData?.put_volume_ask_side, false)}</td
></tr
>
<tr
@ -192,11 +168,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(
rawData?.put_volume_bid_side,
false,
true,
)}</td
>{abbreviateNumber(rawData?.put_volume_bid_side, false)}</td
></tr
>
<tr
@ -207,7 +179,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(rawData?.put_premium, false, true)}</td
>{abbreviateNumber(rawData?.put_premium, false)}</td
></tr
>
<tr
@ -218,7 +190,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(rawData?.net_put_premium, false, true)}</td
>{abbreviateNumber(rawData?.net_put_premium, false)}</td
></tr
>
<tr
@ -229,11 +201,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(
rawData?.put_open_interest,
false,
true,
)}</td
>{abbreviateNumber(rawData?.put_open_interest, false)}</td
></tr
>
<tr
@ -303,21 +271,21 @@
<div class="flex justify-between space-x-4">
<div class="space-y-1 flex flex-col items-start text-white">
<div>
Bearish: {@html abbreviateNumber(
Bearish: {abbreviateNumber(
rawData?.premium_ratio[0],
false,
true,
)}
</div>
<div>
Neutral: {@html abbreviateNumber(
Neutral: {abbreviateNumber(
rawData?.premium_ratio[1],
false,
true,
)}
</div>
<div>
Bullish: {@html abbreviateNumber(
Bullish: {abbreviateNumber(
rawData?.premium_ratio[2],
false,
true,
@ -337,11 +305,7 @@
>
<td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumber(
rawData?.open_interest_change,
false,
true,
)}</td
>{abbreviateNumber(rawData?.open_interest_change, false)}</td
></tr
>
<tr

69
src/routes/stocks/[tickerID]/options/+layout.svelte
View File

@ -1,8 +1,45 @@
<script lang="ts">
import { stockTicker } from "$lib/store";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { page } from "$app/stores";
export let data;
let displaySubSection = "overview";
function changeSubSection(state) {
const subSectionMap = {
overview: "/options",
"hottest-contracts": "/options/hottest-contracts",
};
if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
} else {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}/statistics`);
}
}
$: {
if ($page?.url?.pathname) {
const parts = $page?.url?.pathname.split("/");
const sectionMap = {
overview: "overview",
"hottest-contracts": "hottest-contracts",
};
const foundSection = parts?.find((part) =>
Object?.values(sectionMap)?.includes(part),
);
displaySubSection =
Object?.keys(sectionMap)?.find(
(key) => sectionMap[key] === foundSection,
) || "overview";
}
}
</script>
<section class="w-full overflow-hidden min-h-screen">
@ -11,8 +48,36 @@
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 mt-2 sm:mt-0">
<slot />
<main class="w-full lg:w-3/4">
<nav
class="sm:ml-4 overflow-x-scroll pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul class="flex flex-row items-center w-full text-white">
<a
href={`/stocks/${$stockTicker}/options`}
on:click={() => changeSubSection("overview")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
>
Overview
</a>
<a
href={`/stocks/${$stockTicker}/options/hottest-contracts`}
on:click={() => changeSubSection("hottest-contracts")}
class="p-2 px-5 cursor-pointer {displaySubSection ===
'hottest-contracts'
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
>
Hottest Contracts
</a>
</ul>
</nav>
<div class="mt-2 sm:mt-0">
<slot />
</div>
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">

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

@ -594,7 +594,7 @@
<div class="p-4 bp:p-5 sm:p-6">
<label
for="totaVolume"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] w-fit"
>
Total Volume
<InfoModal
@ -613,7 +613,7 @@
<div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
<label
for="totalOpenInterest"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] w-fit"
>
Total OI
<InfoModal
@ -631,7 +631,7 @@
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
<label
for="putCallRatio"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] w-fit"
>
P/C Ratio
<InfoModal
@ -651,7 +651,7 @@
>
<label
for="openInteresteRatio"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] w-fit"
>
OI P/C Ratio
<InfoModal
@ -702,7 +702,7 @@
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-md h-auto border border-gray-600 p-4"
class="text-white text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
@ -720,7 +720,7 @@
</div>
{#if data?.getOptionsGexData?.length !== 0}
<h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
<h3 class="text-2xl text-white font-bold mb-4 text-start">
{activeEX === 0
? "Daily Gamma Exposure (GEX)"
: "Daily Delta Exposure (DEX)"}
@ -757,7 +757,7 @@
{/if}
{#if optionList?.length !== 0}
<h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
<h3 class="text-2xl text-white font-bold mb-4 text-start">
{activeIdx === 0 ? "Historical Option Data" : "Option Chain Data"}
</h3>
@ -1162,7 +1162,7 @@
</button>
</form>
<p class="text-gray-200 mt-10 cursor-text">
<p class="text-white mt-10 cursor-text">
<span class="text-white text-xl font-semibold mb-4"
>Option Data Details:</span
>

32
src/routes/stocks/[tickerID]/options/hottest-contracts/+page.server.ts Normal file
View File

@ -0,0 +1,32 @@
export const load = async ({ locals, params }) => {
const { apiKey, apiURL } = locals;
const getData = async () => {
const postData = {
ticker: params.tickerID,
};
const response = await fetch(apiURL + "/hottest-contracts", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
// Make sure to return a promise
return {
getData: await getData(),
};
};

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

@ -0,0 +1,368 @@
<script lang="ts">
import { abbreviateNumberWithColor } from "$lib/utils";
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
export let data;
let volumeList = data?.getData;
let openInterestList = volumeList?.sort(
(a, b) => b?.open_interest - a?.open_interest,
);
const currentTime = new Date(
new Date().toLocaleString("en-US", { timeZone: "America/New_York" }),
)?.getTime();
function daysLeft(targetDate) {
const targetTime = new Date(targetDate).getTime();
const difference = targetTime - currentTime;
const millisecondsPerDay = 1000 * 60 * 60 * 24;
const daysLeft = Math?.ceil(difference / millisecondsPerDay);
return daysLeft + "D";
}
</script>
<section class="w-full bg-default overflow-hidden text-white min-h-screen">
<div class="w-full flex h-full overflow-hidden">
<div
class="w-full relative flex justify-center items-center overflow-hidden"
>
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<h2
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
Hottest Contracts (Highest Volume)
</h2>
<table
class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
>
<thead class="bg-default">
<tr class="">
<td class="text-white font-semibold text-sm text-center">Chain</td
>
<td class="text-white font-semibold text-sm text-end">Last</td>
<td class="text-white font-semibold text-sm text-end">Low-High</td
>
<td class="text-white font-semibold text-sm text-end">Volume</td>
<td class="text-white font-semibold text-sm text-end">OI</td>
<td class="text-white font-semibold text-sm text-end"
>OI Change</td
>
<td class="text-white font-semibold text-sm text-end"
>Bid/Ask Vol</td
>
<td class="text-white font-semibold text-sm text-end"
>Total Prem</td
>
</tr>
</thead>
<tbody>
{#each volumeList as item, index}
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
1 ===
volumeList?.slice(0, 3)?.length && data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
<td
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
{item?.strike_price}
{item?.option_type === "C" ? "Call" : "Put"}
{" " +
item?.date_expiration +
" " +
`(${daysLeft(item?.date_expiration)})`}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.last_price}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.low_price}-{item?.high_price}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.volume?.toLocaleString("en-US")}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.open_interest?.toLocaleString("en-US")}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{#if item?.open_interest_change >= 0}
<span class="text-[#00FC50]"
>+{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>
{:else}
<span class="text-[#FF2F1F]"
>{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>
{/if}
</td>
<td class="text-sm sm:text-[1rem] text-end">
<HoverCard.Root>
<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
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
item?.total_premium,
false,
true,
)}
</td>
</tr>
{/each}
</tbody>
</table>
<h2
class="mt-10 flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
Highest OI Contracts
</h2>
<table
class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
>
<thead class="bg-default">
<tr class="">
<td class="text-white font-semibold text-sm text-center">Chain</td
>
<td class="text-white font-semibold text-sm text-end">Strike</td>
<td class="text-white font-semibold text-sm text-end">Last</td>
<td class="text-white font-semibold text-sm text-end">Low-High</td
>
<td class="text-white font-semibold text-sm text-end">Volume</td>
<td class="text-white font-semibold text-sm text-end">OI</td>
<td class="text-white font-semibold text-sm text-end"
>OI Change</td
>
<td class="text-white font-semibold text-sm text-end"
>Bid/Ask Vol</td
>
<td class="text-white font-semibold text-sm text-end"
>Total Prem</td
>
</tr>
</thead>
<tbody>
{#each openInterestList as item, index}
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
1 ===
openInterestList?.slice(0, 3)?.length &&
data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
<td
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
{item?.option_type === "C" ? "Call" : "Put"}
{" " +
item?.date_expiration +
" " +
`(${daysLeft(item?.date_expiration)})`}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.strike_price}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.last_price}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.low_price}-{item?.high_price}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.volume?.toLocaleString("en-US")}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.open_interest?.toLocaleString("en-US")}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{#if item?.open_interest_change >= 0}
<span class="text-[#00FC50]"
>+{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>
{:else}
<span class="text-[#FF2F1F]"
>{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>
{/if}
</td>
<td class="text-sm sm:text-[1rem] text-end">
<HoverCard.Root>
<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
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
item?.total_premium,
false,
true,
)}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>
</section>

2
src/routes/stocks/[tickerID]/statistics/+layout.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { stockTicker, screenWidth } from "$lib/store";
import { stockTicker } from "$lib/store";
import { page } from "$app/stores";
let displaySubSection = "overview";