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

remove temporarily market flow & update option etf page

Browse Source
This commit is contained in:
MuslemRahimi 2025-01-23 20:58:46 +01:00
parent f19271df2e
commit a2a72ef004
21 changed files with 220 additions and 665 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/lib/components/Options/Volatility.svelte
View File

@ -34,17 +34,13 @@
rawData = rawData?.map((item) => ({
...item,
volatilitySpread:
item?.realized_volatility !== null
? (item?.implied_volatility - item?.realized_volatility)?.toFixed(2)
: null,
item?.rv !== null ? (item?.iv - item?.rv)?.toFixed(2) : null,
}));
const avgIV =
rawData?.reduce((acc, entry) => acc + entry.implied_volatility, 0) /
rawData?.length;
rawData?.reduce((acc, entry) => acc + entry.iv, 0) / rawData?.length;
const avgRV =
rawData?.reduce((acc, entry) => acc + entry.realized_volatility, 0) /
rawData?.length;
rawData?.reduce((acc, entry) => acc + entry.rv, 0) / rawData?.length;
let displayList = rawData?.slice(0, 150);
let timePeriod = "3M";
@ -88,12 +84,8 @@
// Extract the dates and gamma values from the filtered data
const dateList = filteredData?.map((item) => item.date);
const impliedVolatility = filteredData?.map(
(item) => item?.implied_volatility,
);
const realizedVolatility = filteredData?.map(
(item) => item?.realized_volatility,
);
const impliedVolatility = filteredData?.map((item) => item?.iv);
const realizedVolatility = filteredData?.map((item) => item?.rv);
const volatilitySpread = filteredData?.map(
(item) => item?.volatilitySpread,
@ -161,7 +153,7 @@
},
silent: true,
grid: {
left: $screenWidth < 640 ? "5%" : "0%",
left: $screenWidth < 640 ? "5%" : "4%",
right: $screenWidth < 640 ? "5%" : "0%",
bottom: "10%",
containLabel: true,
@ -318,12 +310,12 @@
align: "right",
},
{
key: "implied_volatility",
label: "IV (30D)",
key: "iv",
label: "Implied Volatility",
align: "right",
},
{
key: "realized_volatility",
key: "rv",
label: "Realized Vol.",
align: "right",
},
@ -334,8 +326,8 @@
date: { order: "none", type: "date" },
changesPercentage: { order: "none", type: "number" },
putCallRatio: { order: "none", type: "number" },
implied_volatility: { order: "none", type: "number" },
realized_volatility: { order: "none", type: "number" },
iv: { order: "none", type: "number" },
rv: { order: "none", type: "number" },
volatilitySpread: { order: "none", type: "number" },
total_open_interest: { order: "none", type: "number" },
changesPercentageOI: { order: "none", type: "number" },
@ -422,19 +414,6 @@
<div class="w-full overflow-hidden m-auto mt-5">
{#if options !== null}
<div class="app w-full relative">
<div class="flex justify-start space-x-2 absolute right-0 top-0 z-10">
{#each ["3M", "6M", "1Y"] as item}
<label
on:click={() => (timePeriod = item)}
class="px-3 py-1 text-sm {timePeriod === item
? 'bg-white text-black '
: 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
>
{item}
</label>
{/each}
</div>
<Chart {init} {options} class="chart" />
</div>
{:else}
@ -474,13 +453,13 @@
</td>
<td class="text-white text-sm sm:text-[1rem] text-end">
{#if item?.changesPercentage >= 0}
{#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
<span class="text-[#00FC50]"
>+{item?.changesPercentage >= 1000
? abbreviateNumberWithColor(item?.changesPercentage)
: item?.changesPercentage?.toFixed(2)}%</span
>
{:else if item?.changesPercentage < 0}
{:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
<span class="text-[#FF2F1F]"
>{item?.changesPercentage <= -1000
? abbreviateNumberWithColor(item?.changesPercentage)
@ -524,12 +503,12 @@
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.implied_volatility}
{item?.iv}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.realized_volatility ?? "n/a"}
{item?.rv ?? "n/a"}
</td>
<td

4
src/routes/+layout.svelte
View File

@ -707,6 +707,7 @@
>
<Sheet.Close asChild let:builder>
<div class="flex flex-col items-start">
<!--
<Button
builders={[builder]}
type="submit"
@ -718,6 +719,7 @@
>Market Flow</a
>
</Button>
-->
<Button
builders={[builder]}
@ -1150,11 +1152,13 @@
class="border-l border-gray-500 ml-2 mt-5"
>
<div class="flex flex-col items-start">
<!--
<a
href="/market-flow"
class="text-[1rem] text-white ml-4 mt-4"
>Market Flow</a
>
-->
<a
href="/options-flow"
class="text-[1rem] text-white ml-4 mt-4"

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

@ -1,6 +1,6 @@
<script lang="ts">
import { etfTicker } from "$lib/store";
//import ArrowLogo from "lucide-svelte/icons/move-up-right";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { page } from "$app/stores";
export let data;
@ -19,10 +19,10 @@
if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state;
//goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
} else {
displaySubSection = state;
//goto(`/etf/${$etfTicker}/statistics`);
//goto(`/stocks/${$etfTicker}/statistics`);
}
}
@ -56,7 +56,7 @@
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full">
<main class="w-full lg:w-3/4 lg:pr-10">
<nav
class="sm:ml-4 overflow-x-scroll pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
>
@ -100,6 +100,7 @@
>
OI
</a>
<!--
<a
href={`/etf/${$etfTicker}/options/gex`}
on:click={() => changeSubSection("gex")}
@ -118,15 +119,15 @@
>
DEX
</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">
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
>
@ -160,12 +161,11 @@
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable etf.
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</aside>
-->
</div>
</div>
</div>

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

@ -1,17 +1,8 @@
<script lang="ts">
import {
numberOfUnreadNotification,
displayCompanyName,
screenWidth,
etfTicker,
} from "$lib/store";
import { displayCompanyName, screenWidth, etfTicker } from "$lib/store";
import DailyStats from "$lib/components/Options/DailyStats.svelte";
import { Chart } from "svelte-echarts";
import {
abbreviateNumber,
abbreviateNumberWithColor,
monthNames,
} from "$lib/utils";
import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
import { onMount } from "svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { init, use } from "echarts/core";
@ -19,7 +10,7 @@
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import Infobox from "$lib/components/Infobox.svelte";
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
import SEO from "$lib/components/SEO.svelte";
use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
@ -42,7 +33,7 @@
let putOpenInterestList; //= data?.getOptionsPlotData?.putOpenInterestList;
let priceList;
let displayTimePeriod = "threeMonths";
let displayTimePeriod = "oneYear";
function formatDate(dateStr) {
// Parse the input date string (YYYY-mm-dd)
@ -65,10 +56,6 @@
return formattedDate;
}
function changeTimePeriod(event) {
displayTimePeriod = event.target.value;
}
function changeVolumeOI(event) {
displayData = event.target.value;
}
@ -110,7 +97,7 @@
marker +
param.seriesName +
": " +
abbreviateNumber(param.value) +
abbreviateNumberWithColor(param.value, false, true) +
"<br/>";
});
@ -126,7 +113,7 @@
grid: {
left: $screenWidth < 640 ? "5%" : "2%",
right: $screenWidth < 640 ? "5%" : "2%",
bottom: "20%",
bottom: "10%",
containLabel: true,
},
xAxis: [
@ -288,7 +275,7 @@
});
$: {
if ((displayTimePeriod || displayData) && typeof window !== "undefined") {
if (displayTimePeriod || displayData) {
// Filter the raw plot data based on the selected time period
filteredList = filterDate(rawData, displayTimePeriod);
// Process the filtered list to generate the plot data
@ -297,42 +284,10 @@
}
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) Options Activity · Stocknear
</title>
<meta
name="description"
content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$etfTicker}) Options Activity · Stocknear`}
/>
<meta
property="og:description"
content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
/>
<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}) Options Activity · Stocknear`}
/>
<meta
name="twitter:description"
content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<SEO
title="Options Activity"
description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
/>
<section class="w-full bg-default overflow-hidden text-white min-h-screen">
<div class="w-full flex h-full overflow-hidden">
@ -352,20 +307,22 @@
{#if rawData?.length > 0}
<div class="flex flex-row items-center w-full mt-10">
<!--
<select
class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
on:change={changeTimePeriod}
>
<option disabled>Choose a time period</option>
<option value="oneWeek">1 Week</option>
<option value="oneMonth" selected>1 Month</option>
<option value="threeMonths" selected>3 Months</option>
<option value="oneMonth">1 Month</option>
<option value="threeMonths">3 Months</option>
<option value="sixMonths">6 Months</option>
<option value="oneYear">1 Year</option>
<option value="oneYear" selected>1 Year</option>
</select>
-->
<select
class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
class=" w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
on:change={changeVolumeOI}
>
<option disabled>Choose a category</option>
@ -428,15 +385,22 @@
<td class="text-white font-semibold text-sm text-center"
>P Volume</td
>
<!--
<td class="text-white font-semibold text-sm text-end"
>Vol/30D</td
>
-->
<!--
<td class="text-white font-semibold text-sm text-end"
>🐻/🐂 Prem</td
>
-->
<td class="text-white font-semibold text-sm text-end"
>Total 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"
>% OI Change</td
>
@ -446,12 +410,14 @@
<td class="text-white font-semibold text-sm text-end"
>P Prem</td
>
<!--
<td class="text-white font-semibold text-sm text-end"
>Net Prem</td
>
<td class="text-white font-semibold text-sm text-end"
>Total Prem</td
>
-->
</tr>
</thead>
<tbody>
@ -469,7 +435,7 @@
</td>
<td class="text-white text-sm sm:text-[1rem] text-end">
{#if item?.changesPercentage >= 0}
{#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
<span class="text-[#00FC50]"
>+{item?.changesPercentage >= 1000
? abbreviateNumberWithColor(
@ -477,7 +443,7 @@
)
: item?.changesPercentage?.toFixed(2)}%</span
>
{:else if item?.changesPercentage < 0}
{:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
<span class="text-[#FF2F1F]"
>{item?.changesPercentage <= -1000
? abbreviateNumberWithColor(
@ -509,22 +475,21 @@
>
{item?.put_volume?.toLocaleString("en-US")}
</td>
<!--
<td class="text-sm sm:text-[1rem] text-white text-end">
{item?.avgVolumeRatio?.toFixed(2)}
</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
@ -534,7 +499,6 @@
?.premium_ratio[2]})) * 100%)"
></div>
<!-- Neutral -->
<div
class="bg-gray-300 h-full"
style="width: calc(({item
@ -544,7 +508,6 @@
?.premium_ratio[2]})) * 100%)"
></div>
<!-- Bullish -->
<div
class="bg-green-500 h-full"
style="width: calc(({item
@ -589,6 +552,7 @@
</HoverCard.Content>
</HoverCard.Root>
</td>
-->
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(
@ -598,6 +562,20 @@
)}
</td>
<td class="text-white text-sm sm:text-[1rem] text-end">
{#if item?.changeOI >= 0}
<span class="text-[#00FC50]"
>+{item?.changeOI?.toLocaleString("en-US")}</span
>
{:else if item?.changeOI < 0}
<span class="text-[#FF2F1F]"
>{item?.changeOI?.toLocaleString("en-US")}
</span>
{:else}
<span class="text-white"> n/a </span>
{/if}
</td>
<td class="text-white text-sm sm:text-[1rem] text-end">
{#if item?.changesPercentageOI >= 0}
<span class="text-[#00FC50]"
@ -635,7 +613,7 @@
true,
)}
</td>
<!--
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(
item?.net_premium,
@ -651,6 +629,7 @@
true,
)}
</td>
-->
</tr>
{/each}
</tbody>

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

@ -1,5 +1,5 @@
<script lang="ts">
import { etfTicker } from "$lib/store";
import { stockTicker } from "$lib/store";
import { page } from "$app/stores";
export let data;
@ -15,10 +15,10 @@
if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state;
//goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
} else {
displaySubSection = state;
//goto(`/etf/${$etfTicker}/statistics`);
//goto(`/stocks/${$stockTicker}/statistics`);
}
}
@ -55,7 +55,7 @@
>
<ul class="flex flex-row items-center w-full text-white">
<a
href={`/etf/${$etfTicker}/options/dex`}
href={`/stocks/${$stockTicker}/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={`/etf/${$etfTicker}/options/dex/strike`}
href={`/stocks/${$stockTicker}/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={`/etf/${$etfTicker}/options/dex/expiry`}
href={`/stocks/${$stockTicker}/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]'

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

@ -1,6 +1,6 @@
<script lang="ts">
import {
etfTicker,
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
@ -15,7 +15,7 @@
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) Delta Exposure · Stocknear
{$displayCompanyName} ({$stockTicker}) Delta Exposure · Stocknear
</title>
<meta
name="description"
@ -25,7 +25,7 @@
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure · Stocknear`}
/>
<meta
property="og:description"
@ -38,7 +38,7 @@
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure · Stocknear`}
/>
<meta
name="twitter:description"

14
src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {
etfTicker,
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
@ -17,21 +17,21 @@
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) Delta Exposure by Expiry · Stocknear
{$displayCompanyName} ({$stockTicker}) Delta Exposure by Expiry · Stocknear
</title>
<meta
name="description"
content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
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} (${$etfTicker}) Delta Exposure by Expiry · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure by Expiry · Stocknear`}
/>
<meta
property="og:description"
content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
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 -->
@ -40,11 +40,11 @@
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure by Expiry · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure by Expiry · Stocknear`}
/>
<meta
name="twitter:description"
content={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
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>

14
src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {
etfTicker,
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
@ -17,22 +17,22 @@
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) Delta Exposure by Strike Price ·
{$displayCompanyName} ({$stockTicker}) Delta Exposure by Strike Price ·
Stocknear
</title>
<meta
name="description"
content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure by Strike Price · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure by Strike Price · Stocknear`}
/>
<meta
property="og:description"
content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). 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 -->
@ -41,11 +41,11 @@
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure by Strike Price · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Delta Exposure by Strike Price · Stocknear`}
/>
<meta
name="twitter:description"
content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>

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

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

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

@ -1,6 +1,6 @@
<script lang="ts">
import {
etfTicker,
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
@ -15,7 +15,7 @@
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) Gamma Exposure · Stocknear
{$displayCompanyName} ({$stockTicker}) Gamma Exposure · Stocknear
</title>
<meta
name="description"
@ -25,7 +25,7 @@
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure · Stocknear`}
/>
<meta
property="og:description"
@ -38,7 +38,7 @@
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure · Stocknear`}
/>
<meta
name="twitter:description"

14
src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {
etfTicker,
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
@ -17,21 +17,21 @@
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) Gamma Exposure by Expiry · Stocknear
{$displayCompanyName} ({$stockTicker}) Gamma Exposure 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.`}
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} (${$etfTicker}) Gamma Exposure by Expiry · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Expiry · Stocknear`}
/>
<meta
property="og: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.`}
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 -->
@ -40,11 +40,11 @@
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure by Expiry · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Expiry · Stocknear`}
/>
<meta
name="twitter: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.`}
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>

14
src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {
etfTicker,
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
@ -17,22 +17,22 @@
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) Gamma Exposure by Strike Price ·
{$displayCompanyName} ({$stockTicker}) Gamma Exposure by Strike Price ·
Stocknear
</title>
<meta
name="description"
content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure by Strike Price · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Strike Price · Stocknear`}
/>
<meta
property="og:description"
content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). 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 -->
@ -41,11 +41,11 @@
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure by Strike Price · Stocknear`}
content={`${$displayCompanyName} (${$stockTicker}) Gamma Exposure by Strike Price · Stocknear`}
/>
<meta
name="twitter:description"
content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
content={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>

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

@ -12,7 +12,6 @@
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@ -42,7 +41,7 @@
let optionsData = null;
let optionHistoryList = [];
let selectGraphType = "Bid/Ask";
let selectGraphType = "Vol/OI";
let container;
let rawDataHistory = [];
let strikePrice;
@ -164,12 +163,12 @@
{ key: "strike_price", label: "Chain", align: "left" },
{ key: "dte", label: "DTE", align: "right" },
{ key: "otm", label: "% OTM", align: "right" },
{ key: "last_price", label: "Last", align: "right" },
{ key: "high_price", label: "Low-High", align: "right" },
{ key: "last", label: "Last", align: "right" },
{ key: "high", label: "Low-High", align: "right" },
{ key: "volume", label: "Volume", align: "right" },
{ key: "open_interest", label: "OI", 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" },
];
@ -177,12 +176,12 @@
strike_price: { order: "none", type: "number" },
dte: { order: "none", type: "number" },
otm: { order: "none", type: "number" },
last_price: { order: "none", type: "number" },
high_price: { order: "none", type: "number" },
last: { order: "none", type: "number" },
high: { order: "none", type: "number" },
volume: { order: "none", type: "number" },
open_interest: { 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" },
};
@ -305,13 +304,9 @@
(a, b) => new Date(a?.date) - new Date(b?.date),
);
let dates = data?.map((item) => item?.date);
let avgPrice = data?.map((item) => item?.avg_price);
let avgPrice = data?.map((item) => item?.mark);
let priceList = data?.map((item) => item?.price);
let bidVolume = data?.map((item) => item?.bid_volume);
let askVolume = data?.map((item) => item?.ask_volume);
let midVolume = data?.map((item) => item?.mid_volume);
let volumeList = data?.map((item) => item?.volume);
let oiList = data?.map((item) => item?.open_interest);
let ivList = data?.map((item) =>
@ -339,15 +334,7 @@
});
let series = [];
if (selectGraphType === "Bid/Ask") {
series = [
createBarSeries("Ask", askVolume, "#33B890", "Ratio"),
createBarSeries("Mid", midVolume, "#007BFF", "Ratio"),
createBarSeries("Bid", bidVolume, "#EE5365", "Ratio"),
createLineSeries("Avg Fill", avgPrice, "#FAD776"),
createLineSeries("Stock Price", priceList, "#fff", 2),
];
} else if (selectGraphType === "Vol/OI") {
if (selectGraphType === "Vol/OI") {
series = [
createBarSeries("Volume", volumeList, "#FD7E14"),
createBarSeries("OI", oiList, "#33B890"),
@ -406,27 +393,14 @@
param.color +
'"></span>';
if (param.seriesName === "Bid") {
bidValue = param.value;
bidColor = marker;
} else if (param.seriesName === "Ask") {
askValue = param.value;
askColor = marker;
} else {
result +=
marker +
param.seriesName +
": " +
abbreviateNumberWithColor(param.value, false, true) +
"<br/>";
}
result +=
marker +
param.seriesName +
": " +
abbreviateNumberWithColor(param.value, false, true) +
"<br/>";
});
// Add Bid x Ask line if both are present
if (bidValue !== null && askValue !== null) {
result += `${bidColor}Bid x ${askColor}Ask: ${bidValue} x ${askValue}<br/>`;
}
if (rawDataPoint?.dte !== undefined) {
result += `Days to Expiration : ${rawDataPoint.dte}<br/>`;
}
@ -509,7 +483,8 @@
output = cachedData;
} else {
const postData = {
params: contractId,
ticker: $etfTicker,
contract: contractId,
};
// make the POST request to the endpoint
@ -531,7 +506,7 @@
async function handleViewData(item) {
isLoaded = false;
selectGraphType = "Bid/Ask";
selectGraphType = "Vol/OI";
optionDetailsDesktopModal?.showModal();
strikePrice = item?.strike_price;
@ -539,7 +514,9 @@
dateExpiration = item?.date_expiration;
otmPercentage = item?.otm;
rawDataHistory = await getContractHistory(item?.option_symbol);
const output = await getContractHistory(item?.option_symbol);
rawDataHistory = output?.history;
if (rawDataHistory?.length > 0) {
rawDataHistory.forEach((entry) => {
const matchingData = data?.getHistoricalPrice?.find(
@ -690,12 +667,12 @@
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.last_price}
{item?.last}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.low_price}-{item?.high_price}
{item?.low}-{item?.high}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@ -710,82 +687,18 @@
<td
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]"
>+{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>+{item?.changeOI?.toLocaleString("en-US")}</span
>
{:else}
<span class="text-[#FF2F1F]"
>{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>{item?.changeOI?.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>
{item?.iv}%
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@ -868,12 +781,12 @@
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.last_price}
{item?.last}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.low_price}-{item?.high_price}
{item?.low}-{item?.high}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@ -888,82 +801,18 @@
<td
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]"
>+{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>+{item?.changeOI?.toLocaleString("en-US")}</span
>
{:else}
<span class="text-[#FF2F1F]"
>{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>{item?.changeOI?.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>
{item?.iv}%
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
@ -1055,7 +904,7 @@
</div>
<div class="mr-3 whitespace-nowrap">
<span class="text-[var(--light-text-color)] font-normal">Avg:</span>
${optionHistoryList?.at(0)?.avg_price}
${optionHistoryList?.at(0)?.mark}
</div>
<div class="mr-3 whitespace-nowrap">
<span class="text-[var(--light-text-color)] font-normal">Prem:</span>
@ -1079,7 +928,7 @@
class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-600 overflow-hidden"
>
<div class="flex justify-end ml-auto w-fit mr-2 mt-2">
{#each ["Bid/Ask", "Vol/OI", "IV"] as item}
{#each ["Vol/OI", "IV"] as item}
<label
on:click={() => (selectGraphType = item)}
class="px-3 py-1.5 mr-2 {selectGraphType === item
@ -1132,28 +981,18 @@
<td class="text-white font-semibold text-sm text-end"
>% Change OI</td
>
<td class="text-white font-semibold text-sm text-start"
<td class="text-white font-semibold text-sm text-end"
>Last Price</td
>
<td class="text-white font-semibold text-sm text-start"
<td class="text-white font-semibold text-sm text-end"
>Avg Price</td
>
<td class="text-white font-semibold text-sm text-start"
>Bid/Ask</td
>
<td class="text-white font-semibold text-sm text-end">IV</td>
<td class="text-white font-semibold text-sm text-end"
>Floor</td
>
<td class="text-white font-semibold text-sm text-end"
>Sweep</td
>
<td class="text-white font-semibold text-sm text-start"
>Multileg Vol</td
>
<td class="text-white font-semibold text-sm text-end"
>Total Prem</td
>
<td class="text-white font-semibold text-sm text-end">GEX</td>
<td class="text-white font-semibold text-sm text-end">DEX</td>
</tr>
</thead>
<tbody>
@ -1165,7 +1004,9 @@
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{item?.volume?.toLocaleString("en-US")}
{item?.volume !== null
? item?.volume?.toLocaleString("en-US")
: 0}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
@ -1174,17 +1015,13 @@
: "n/a"}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{#if item?.open_interest_change >= 0 && item?.open_interest_change !== undefined}
{#if item?.changeOI >= 0 && item?.changeOI !== undefined}
<span class="text-[#00FC50]"
>+{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>+{item?.changeOI?.toLocaleString("en-US")}</span
>
{:else if item?.open_interest_change < 0 && item?.open_interest_change !== undefined}
{:else if item?.changeOI < 0 && item?.changeOI !== undefined}
<span class="text-[#FF2F1F]"
>{item?.open_interest_change?.toLocaleString(
"en-US",
)}</span
>{item?.changeOI?.toLocaleString("en-US")}</span
>
{:else}
n/a
@ -1192,15 +1029,15 @@
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{#if item?.open_interest_change_percent > 0 && item?.open_interest_change_percent !== undefined}
{#if item?.changesPercentageOI > 0 && item?.changesPercentageOI !== undefined}
<span class="text-[#00FC50]"
>+{item?.open_interest_change_percent + "%"}</span
>+{item?.changesPercentageOI + "%"}</span
>
{:else if item?.open_interest_change_percent < 0 && item?.open_interest_change_percent !== undefined}
{:else if item?.changesPercentageOI < 0 && item?.changesPercentageOI !== undefined}
<span class="text-[#FF2F1F]"
>{item?.open_interest_change_percent + "%"}</span
>{item?.changesPercentageOI + "%"}</span
>
{:else if item?.open_interest_change_percent === 0 && item?.open_interest_change_percent !== undefined}
{:else if item?.changesPercentageOI === 0 && item?.changesPercentageOI !== undefined}
0%
{:else}
n/a
@ -1208,38 +1045,11 @@
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{item?.last_price}
{item?.close}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{item?.avg_price}
</td>
<td class="text-sm sm:text-[1rem] text-end">
<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>
{item?.mark}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
@ -1248,28 +1058,6 @@
) + "%"}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{item?.volume > 0
? ((item?.floor_volume / item?.volume) * 100)?.toFixed(
2,
) + "%"
: "n/a"}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{item?.volume > 0
? ((item?.sweep_volume / item?.volume) * 100)?.toFixed(
2,
) + "%"
: "n/a"}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{item?.volume > 0
? (
(item?.multi_leg_volume / item?.volume) *
100
)?.toFixed(2) + "%"
: "n/a"}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(
item?.total_premium,
@ -1277,6 +1065,12 @@
true,
)}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(item?.gex, false, true)}
</td>
<td class="text-sm sm:text-[1rem] text-end text-white">
{@html abbreviateNumberWithColor(item?.dex, false, true)}
</td>
</tr>
{/each}
</tbody>

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

@ -1,54 +1,18 @@
<script lang="ts">
import {
etfTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import { etfTicker, displayCompanyName } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte";
import SEO from "$lib/components/SEO.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>
<SEO
title="Open Interet by Strike Price"
description={`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.`}
/>
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"

47
src/routes/etf/[tickerID]/options/oi/expiry/+page.svelte
View File

@ -1,10 +1,7 @@
<script lang="ts">
import {
etfTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import { etfTicker, displayCompanyName } from "$lib/store";
import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte";
import OpenInterestByExpiry from "$lib/components/Options/OpenInterestByExpiry.svelte";
@ -12,42 +9,10 @@
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>
<SEO
title="Open Interest by Expiry"
description={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). 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"

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

@ -1,53 +1,18 @@
<script lang="ts">
import {
etfTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import { etfTicker, displayCompanyName } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte";
import SEO from "$lib/components/SEO.svelte";
import Volatility from "$lib/components/Options/Volatility.svelte";
export let data;
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) Volatility · Stocknear
</title>
<meta
name="description"
content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$etfTicker}) Volatility · Stocknear`}
/>
<meta
property="og:description"
content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
/>
<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}) Volatility · Stocknear`}
/>
<meta
name="twitter:description"
content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<SEO
title={`${$displayCompanyName} (${$etfTicker}) Volatility · Stocknear`}
description={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
/>
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"

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

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

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

@ -904,7 +904,7 @@
</div>
<div class="mr-3 whitespace-nowrap">
<span class="text-[var(--light-text-color)] font-normal">Avg:</span>
${optionHistoryList?.at(0)?.avg_price}
${optionHistoryList?.at(0)?.mark}
</div>
<div class="mr-3 whitespace-nowrap">
<span class="text-[var(--light-text-color)] font-normal">Prem:</span>

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

@ -6,49 +6,17 @@
} from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte";
import SEO from "$lib/components/SEO.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} ({$stockTicker}) Open Interet by Strike Price ·
Stocknear
</title>
<meta
name="description"
content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$stockTicker}) Open Interest by Strike Price · Stocknear`}
/>
<meta
property="og:description"
content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$stockTicker}). 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} (${$stockTicker}) Open Interest by Strike Price · Stocknear`}
/>
<meta
name="twitter:description"
content={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<SEO
title="Open Interet by Strike Price"
description={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$stockTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"

41
src/routes/stocks/[tickerID]/options/oi/expiry/+page.svelte
View File

@ -5,6 +5,7 @@
displayCompanyName,
} from "$lib/store";
import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte";
import OpenInterestByExpiry from "$lib/components/Options/OpenInterestByExpiry.svelte";
@ -12,42 +13,10 @@
let rawData = data?.getData || [];
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$stockTicker}) OpenInterest 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}) OpenInterest by Expiry · Stocknear`}
/>
<meta
property="og:description"
content={`Analyze OpenInterest 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}) OpenInterest by Expiry · Stocknear`}
/>
<meta
name="twitter:description"
content={`Analyze OpenInterest 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="Open Interest 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"

47
src/routes/stocks/[tickerID]/options/volatility/+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 SEO from "$lib/components/SEO.svelte";
import Volatility from "$lib/components/Options/Volatility.svelte";
export let data;
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$stockTicker}) Volatility · Stocknear
</title>
<meta
name="description"
content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$stockTicker}) Volatility · Stocknear`}
/>
<meta
property="og:description"
content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
/>
<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}) Volatility · Stocknear`}
/>
<meta
name="twitter:description"
content={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<SEO
title={`${$displayCompanyName} (${$stockTicker}) Volatility · Stocknear`}
description={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
/>
<section
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"