update options page for etf
This commit is contained in:
MuslemRahimi
parent
dcd972deac
commit
878934e246
@ -13,6 +13,7 @@
|
||||
"hottest-contracts": "/options/hottest-contracts",
|
||||
gex: "/options/gex",
|
||||
dex: "/options/dex",
|
||||
oi: "/options/oi",
|
||||
};
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
@ -32,6 +33,7 @@
|
||||
"hottest-contracts": "hottest-contracts",
|
||||
gex: "gex",
|
||||
dex: "dex",
|
||||
oi: "oi",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) =>
|
||||
@ -77,6 +79,15 @@
|
||||
>
|
||||
Hottest Contracts
|
||||
</a>
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/oi`}
|
||||
on:click={() => changeSubSection("oi")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'oi'
|
||||
? '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]'}"
|
||||
>
|
||||
OI
|
||||
</a>
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/gex`}
|
||||
on:click={() => changeSubSection("gex")}
|
||||
|
||||
83
src/routes/etf/[tickerID]/options/oi/+layout.svelte
Normal file
83
src/routes/etf/[tickerID]/options/oi/+layout.svelte
Normal file
@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker } from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
export let data;
|
||||
|
||||
let displaySubSection = "strike";
|
||||
|
||||
function changeSubSection(state) {
|
||||
const subSectionMap = {
|
||||
strike: "/options/oi/strike",
|
||||
expiry: "/options/gex/expiry",
|
||||
};
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
|
||||
} else {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$etfTicker}/statistics`);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($page?.url?.pathname) {
|
||||
const parts = $page?.url?.pathname.split("/");
|
||||
const sectionMap = {
|
||||
strike: "strike",
|
||||
expiry: "expiry",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) =>
|
||||
Object?.values(sectionMap)?.includes(part),
|
||||
);
|
||||
|
||||
displaySubSection =
|
||||
Object?.keys(sectionMap)?.find(
|
||||
(key) => sectionMap[key] === foundSection,
|
||||
) || "strike";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden min-h-screen">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full">
|
||||
<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={`/etf/${$etfTicker}/options/oi`}
|
||||
on:click={() => changeSubSection("strike")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
|
||||
? '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]'}"
|
||||
>
|
||||
By Strike
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/oi/expiry`}
|
||||
on:click={() => changeSubSection("expiry")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
|
||||
? '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]'}"
|
||||
>
|
||||
By Expiry
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="mt-2 sm:mt-0">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
34
src/routes/etf/[tickerID]/options/oi/+page.server.ts
Normal file
34
src/routes/etf/[tickerID]/options/oi/+page.server.ts
Normal file
@ -0,0 +1,34 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "strike"
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-oi", {
|
||||
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(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
71
src/routes/etf/[tickerID]/options/oi/+page.svelte
Normal file
71
src/routes/etf/[tickerID]/options/oi/+page.svelte
Normal file
@ -0,0 +1,71 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
etfTicker,
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
} from "$lib/store";
|
||||
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
|
||||
import OpenInterestByStrike from "$lib/components/Options/OpenInterestByStrike.svelte";
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$etfTicker}) Open Interet by Strike Price ·
|
||||
Stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${$displayCompanyName} (${$etfTicker}) Open Interest by Strike Price · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
|
||||
/>
|
||||
<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} (${$etfTicker}) Open Interest by Strike Price · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<OpenInterestByStrike {data} />
|
||||
{:else}
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
34
src/routes/etf/[tickerID]/options/oi/expiry/+page.server.ts
Normal file
34
src/routes/etf/[tickerID]/options/oi/expiry/+page.server.ts
Normal file
@ -0,0 +1,34 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "expiry"
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-oi", {
|
||||
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(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
70
src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte
Normal file
70
src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte
Normal file
@ -0,0 +1,70 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
etfTicker,
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
} from "$lib/store";
|
||||
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import OpenInterestByExpiry from "$lib/components/Options/OpenInterestByExpiry.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData || [];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$etfTicker}) OpenInterest by Expiry · Stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${$displayCompanyName} (${$etfTicker}) OpenInterest by Expiry · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Analyze OpenInterest by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
|
||||
/>
|
||||
<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} (${$etfTicker}) OpenInterest by Expiry · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Analyze OpenInterest by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if rawData?.length > 0}
|
||||
<OpenInterestByExpiry {data} />
|
||||
{:else}
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
x
Reference in New Issue
Block a user