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

add gex/dex pages back

Browse Source
This commit is contained in:
MuslemRahimi 2025-02-07 21:56:35 +01:00
parent 238d53beba
commit a1ab9c38c8
19 changed files with 79 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/components/Options/GreekByExpiry.svelte
View File

@ -47,10 +47,10 @@
} else {
result.push({
...item,
net_delta: (item?.call_delta || 0) + (item?.put_delta || 0),
net_dex: (item?.call_dex || 0) + (item?.put_dex || 0),
put_call_ratio:
item?.call_delta > 0
? Math.abs((item?.put_delta || 0) / item?.call_delta)
item?.call_dex > 0
? Math.abs((item?.put_dex || 0) / item?.call_dex)
: null,
});
}
@ -80,9 +80,9 @@
const processedData = rawData
?.map((d) => ({
expiry: formatDate(d?.expiry),
callValue: isGamma ? d?.call_gex : d?.call_delta,
putValue: isGamma ? d?.put_gex : d?.put_delta,
netValue: isGamma ? d?.net_gex : d?.net_delta,
callValue: isGamma ? d?.call_gex : d?.call_dex,
putValue: isGamma ? d?.put_gex : d?.put_dex,
netValue: isGamma ? d?.net_gex : d?.net_dex,
}))
.sort((a, b) => a.strike - b.strike);
@ -189,17 +189,17 @@
$: columns = [
{ key: "expiry", label: "Expiry Date", align: "left" },
{
key: isGamma ? "call_gex" : "call_delta",
key: isGamma ? "call_gex" : "call_dex",
label: isGamma ? "Call GEX" : "Call Delta",
align: "right",
},
{
key: isGamma ? "put_gex" : "put_delta",
key: isGamma ? "put_gex" : "put_dex",
label: isGamma ? "Put GEX" : "Put Delta",
align: "right",
},
{
key: isGamma ? "net_gex" : "net_delta",
key: isGamma ? "net_gex" : "net_dex",
label: isGamma ? "Net GEX" : "Net Delta",
align: "right",
},
@ -212,9 +212,9 @@
$: sortOrders = {
expiry: { order: "none", type: "date" },
[isGamma ? "call_gex" : "call_delta"]: { order: "none", type: "number" },
[isGamma ? "put_gex" : "put_delta"]: { order: "none", type: "number" },
[isGamma ? "net_gex" : "net_delta"]: { order: "none", type: "number" },
[isGamma ? "call_gex" : "call_dex"]: { order: "none", type: "number" },
[isGamma ? "put_gex" : "put_dex"]: { order: "none", type: "number" },
[isGamma ? "net_gex" : "net_dex"]: { order: "none", type: "number" },
put_call_ratio: { order: "none", type: "number" },
};
@ -333,7 +333,7 @@
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.call_gex : item?.call_delta)?.toFixed(2),
(isGamma ? item?.call_gex : item?.call_dex)?.toFixed(2),
false,
true,
)}
@ -342,7 +342,7 @@
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.put_gex : item?.put_delta)?.toFixed(2),
(isGamma ? item?.put_gex : item?.put_dex)?.toFixed(2),
false,
true,
)}
@ -352,7 +352,7 @@
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.net_gex : item?.net_delta)?.toFixed(2),
(isGamma ? item?.net_gex : item?.net_dex)?.toFixed(2),
false,
true,
)}

30
src/lib/components/Options/GreekByStrike.svelte
View File

@ -44,10 +44,10 @@
} else {
return {
...item,
net_delta: (item?.call_delta || 0) + (item?.put_delta || 0),
net_dex: (item?.call_dex || 0) + (item?.put_dex || 0),
put_call_ratio:
item?.call_delta > 0
? Math.abs((item?.put_delta || 0) / item?.call_delta)
item?.call_dex > 0
? Math.abs((item?.put_dex || 0) / item?.call_dex)
: null,
};
}
@ -61,9 +61,9 @@
const processedData = rawData
?.map((d) => ({
strike: d?.strike,
callValue: isGamma ? d?.call_gex : d?.call_delta,
putValue: isGamma ? d?.put_gex : d?.put_delta,
netValue: isGamma ? d?.net_gex : d?.net_delta,
callValue: isGamma ? d?.call_gex : d?.call_dex,
putValue: isGamma ? d?.put_gex : d?.put_dex,
netValue: isGamma ? d?.net_gex : d?.net_dex,
}))
?.sort((a, b) => a?.strike - b?.strike);
@ -168,17 +168,17 @@
$: columns = [
{ key: "strike", label: "Strike Price", align: "left" },
{
key: isGamma ? "call_gex" : "call_delta",
key: isGamma ? "call_gex" : "call_dex",
label: `Call ${isGamma ? "GEX" : "Delta"}`,
align: "right",
},
{
key: isGamma ? "put_gex" : "put_delta",
key: isGamma ? "put_gex" : "put_dex",
label: `Put ${isGamma ? "GEX" : "Delta"}`,
align: "right",
},
{
key: isGamma ? "net_gex" : "net_delta",
key: isGamma ? "net_gex" : "net_dex",
label: `Net ${isGamma ? "GEX" : "Delta"}`,
align: "right",
},
@ -191,9 +191,9 @@
$: sortOrders = {
strike: { order: "none", type: "number" },
[isGamma ? "call_gex" : "call_delta"]: { order: "none", type: "number" },
[isGamma ? "put_gex" : "put_delta"]: { order: "none", type: "number" },
[isGamma ? "net_gex" : "net_delta"]: { order: "none", type: "number" },
[isGamma ? "call_gex" : "call_dex"]: { order: "none", type: "number" },
[isGamma ? "put_gex" : "put_dex"]: { order: "none", type: "number" },
[isGamma ? "net_gex" : "net_dex"]: { order: "none", type: "number" },
put_call_ratio: { order: "none", type: "number" },
};
@ -312,7 +312,7 @@
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.call_gex : item?.call_delta)?.toFixed(2),
(isGamma ? item?.call_gex : item?.call_dex)?.toFixed(2),
false,
true,
)}
@ -321,7 +321,7 @@
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.put_gex : item?.put_delta)?.toFixed(2),
(isGamma ? item?.put_gex : item?.put_dex)?.toFixed(2),
false,
true,
)}
@ -331,7 +331,7 @@
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{@html abbreviateNumberWithColor(
(isGamma ? item?.net_gex : item?.net_delta)?.toFixed(2),
(isGamma ? item?.net_gex : item?.net_dex)?.toFixed(2),
false,
true,
)}

3
src/routes/etf/[tickerID]/options/+layout.svelte
View File

@ -111,7 +111,7 @@
>
OI
</a>
<!--
<a
href={`/etf/${$etfTicker}/options/gex`}
on:click={() => changeSubSection("gex")}
@ -130,7 +130,6 @@
>
DEX
</a>
-->
</ul>
</nav>
<div class="mt-2 sm:mt-0">

12
src/routes/etf/[tickerID]/options/dex/+layout.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { stockTicker } from "$lib/store";
import { etfTicker } from "$lib/store";
import { page } from "$app/stores";
export let data;
@ -15,10 +15,10 @@
if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
} else {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}/statistics`);
//goto(`/stocks/${$etfTicker}/statistics`);
}
}
@ -55,7 +55,7 @@
>
<ul class="flex flex-row items-center w-full text-white">
<a
href={`/stocks/${$stockTicker}/options/dex`}
href={`/etf/${$etfTicker}/options/dex`}
on:click={() => changeSubSection("overview")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
@ -65,7 +65,7 @@
</a>
<a
href={`/stocks/${$stockTicker}/options/dex/strike`}
href={`/etf/${$etfTicker}/options/dex/strike`}
on:click={() => changeSubSection("strike")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
@ -74,7 +74,7 @@
By Strike
</a>
<a
href={`/stocks/${$stockTicker}/options/dex/expiry`}
href={`/etf/${$etfTicker}/options/dex/expiry`}
on:click={() => changeSubSection("expiry")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'

3
src/routes/etf/[tickerID]/options/dex/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "overview"
category: "overview",
type: "",
};
const response = await fetch(apiURL + "/options-gex-dex", {

3
src/routes/etf/[tickerID]/options/dex/expiry/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "expiry"
category: "expiry",
type: "dex",
};
const response = await fetch(apiURL + "/options-gex-dex", {

3
src/routes/etf/[tickerID]/options/dex/strike/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "strike"
category: "strike",
type: "dex",
};
const response = await fetch(apiURL + "/options-gex-dex", {

13
src/routes/etf/[tickerID]/options/gex/+layout.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import { stockTicker } from "$lib/store";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { etfTicker } from "$lib/store";
import { page } from "$app/stores";
export let data;
@ -16,10 +15,10 @@
if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
} else {
displaySubSection = state;
//goto(`/stocks/${$stockTicker}/statistics`);
//goto(`/stocks/${$etfTicker}/statistics`);
}
}
@ -56,7 +55,7 @@
>
<ul class="flex flex-row items-center w-full text-white">
<a
href={`/stocks/${$stockTicker}/options/gex`}
href={`/etf/${$etfTicker}/options/gex`}
on:click={() => changeSubSection("overview")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
@ -66,7 +65,7 @@
</a>
<a
href={`/stocks/${$stockTicker}/options/gex/strike`}
href={`/etf/${$etfTicker}/options/gex/strike`}
on:click={() => changeSubSection("strike")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
@ -75,7 +74,7 @@
By Strike
</a>
<a
href={`/stocks/${$stockTicker}/options/gex/expiry`}
href={`/etf/${$etfTicker}/options/gex/expiry`}
on:click={() => changeSubSection("expiry")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'

3
src/routes/etf/[tickerID]/options/gex/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "overview"
category: "overview",
type: "",
};
const response = await fetch(apiURL + "/options-gex-dex", {

3
src/routes/etf/[tickerID]/options/gex/expiry/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "expiry"
category: "expiry",
type: "gex",
};
const response = await fetch(apiURL + "/options-gex-dex", {

3
src/routes/etf/[tickerID]/options/gex/strike/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "strike"
category: "strike",
type: "gex",
};
const response = await fetch(apiURL + "/options-gex-dex", {

3
src/routes/stocks/[tickerID]/options/dex/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "overview"
category: "overview",
type: "",
};
const response = await fetch(apiURL + "/options-gex-dex", {

3
src/routes/stocks/[tickerID]/options/dex/expiry/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "expiry"
category: "expiry",
type: "dex",
};
const response = await fetch(apiURL + "/options-gex-dex", {

47
src/routes/stocks/[tickerID]/options/dex/expiry/+page.svelte
View File

@ -1,53 +1,18 @@
<script lang="ts">
import {
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import { stockTicker, displayCompanyName } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte";
import GreekByExpiry from "$lib/components/Options/GreekByExpiry.svelte";
import SEO from "$lib/components/SEO.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} ({$stockTicker}) Delta Exposure by Expiry · Stocknear
</title>
<meta
name="description"
content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure by Expiry · Stocknear`}
/>
<meta
property="og:description"
content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). 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} (${$stockTicker}) Delta Exposure by Expiry · Stocknear`}
/>
<meta
name="twitter:description"
content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<SEO
title="Delta Exposure by Expiry"
description={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/>
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"

3
src/routes/stocks/[tickerID]/options/dex/strike/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "strike"
category: "strike",
type: "dex",
};
const response = await fetch(apiURL + "/options-gex-dex", {

3
src/routes/stocks/[tickerID]/options/gex/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "overview"
category: "overview",
type: "",
};
const response = await fetch(apiURL + "/options-gex-dex", {

6
src/routes/stocks/[tickerID]/options/gex/expiry/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "expiry"
category: "expiry",
type: "gex",
};
const response = await fetch(apiURL + "/options-gex-dex", {
@ -23,9 +24,6 @@ export const load = async ({ locals, params }) => {
};
// Make sure to return a promise
return {
getData: await getData(),

47
src/routes/stocks/[tickerID]/options/gex/expiry/+page.svelte
View File

@ -1,53 +1,18 @@
<script lang="ts">
import {
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import { stockTicker, displayCompanyName } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte";
import GreekByExpiry from "$lib/components/Options/GreekByExpiry.svelte";
import SEO from "$lib/components/SEO.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} ({$stockTicker}) Gamma Exposure by Expiry · Stocknear
</title>
<meta
name="description"
content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Expiry · Stocknear`}
/>
<meta
property="og:description"
content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). 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} (${$stockTicker}) Gamma Exposure by Expiry · Stocknear`}
/>
<meta
name="twitter:description"
content={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<SEO
title="Gamma Exposure by Expiry"
description={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$stockTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/>
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"

3
src/routes/stocks/[tickerID]/options/gex/strike/+page.server.ts
View File

@ -6,7 +6,8 @@ export const load = async ({ locals, params }) => {
const getData = async () => {
const postData = {
params: params.tickerID,
category: "strike"
category: "strike",
type: "gex",
};
const response = await fetch(apiURL + "/options-gex-dex", {