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

update options stats page

Browse Source
This commit is contained in:
MuslemRahimi 2025-02-05 00:01:04 +01:00
parent ba625e1107
commit 27dc3cc0a2
4 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/InfoModal.svelte
View File

@ -37,7 +37,7 @@
> >
<div class="mx-auto h-1.5 w-20 flex-shrink-0 rounded-full" /> <div class="mx-auto h-1.5 w-20 flex-shrink-0 rounded-full" />
<div class="text-white mb-5 text-center"> <div class="text-white mb-5 text-center">
<h3 class="font-bold text-2xl mb-5">{title}</h3> <h3 class="font-bold text-xl sm:text-2xl mb-5">{title}</h3>
<span class="text-white text-[1rem] font-normal">{@html content}</span> <span class="text-white text-[1rem] font-normal">{@html content}</span>
</div> </div>

49
src/lib/components/Options/DailyStats.svelte → src/lib/components/Options/QuickStats.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import InfoModal from "$lib/components/InfoModal.svelte"; import InfoModal from "$lib/components/InfoModal.svelte";
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
import { abbreviateNumberWithColor } from "$lib/utils"; import { abbreviateNumberWithColor } from "$lib/utils";
export let rawData = {}; export let rawData = {};
@ -8,14 +7,14 @@
<div class="text-white"> <div class="text-white">
<label <label
for="dailyStats" for="avgOptionsStats"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
> >
Daily Stats Avg. Options Trading Stats
<InfoModal <InfoModal
title={"Daily Stats"} title={"Avg. Options Trading Stats"}
content={"Daily options activity stats provide insights into the trading behavior of options contracts. These statistics help traders and analysts understand market sentiment, liquidity, and potential price movements for underlying assets."} content={"Average options activity stats provide insights into the trading behavior of options contracts. These statistics help traders to understand market sentiment, liquidity, and potential price movements for underlying assets."}
id={"dailyStats"} id={"avgOptionsStats"}
/> />
</label> </label>
<div <div
@ -30,7 +29,7 @@
>Call Volume</td >Call Volume</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{@html abbreviateNumberWithColor(
rawData?.call_volume, rawData?.call_volume,
false, false,
@ -46,7 +45,7 @@
>Call Premium</td >Call Premium</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{@html abbreviateNumberWithColor(
rawData?.call_premium, rawData?.call_premium,
false, false,
@ -59,10 +58,10 @@
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Total Premium</td >Premium</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{@html abbreviateNumberWithColor(
rawData?.call_premium + rawData?.put_premium, rawData?.call_premium + rawData?.put_premium,
false, false,
@ -77,7 +76,7 @@
>Call Open Interest</td >Call Open Interest</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{@html abbreviateNumberWithColor(
rawData?.call_open_interest, rawData?.call_open_interest,
false, false,
@ -92,7 +91,7 @@
>Implied Volatility (IV) >Implied Volatility (IV)
</td> </td>
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{rawData?.iv}%</td >{rawData?.iv}%</td
></tr ></tr
> >
@ -103,7 +102,7 @@
>Total Open Interest</td >Total Open Interest</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{@html abbreviateNumberWithColor(
rawData?.total_open_interest, rawData?.total_open_interest,
false, false,
@ -115,11 +114,11 @@
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>GEX</td >Volume</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor(rawData?.gex, false, true)}</td >{rawData?.volume?.toLocaleString("en-US")}</td
></tr ></tr
> >
</tbody> </tbody>
@ -133,7 +132,7 @@
>Put Volume</td >Put Volume</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{@html abbreviateNumberWithColor(
rawData?.put_volume, rawData?.put_volume,
false, false,
@ -149,7 +148,7 @@
>Put Premium</td >Put Premium</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{@html abbreviateNumberWithColor(
rawData?.put_premium, rawData?.put_premium,
false, false,
@ -165,7 +164,7 @@
>P/C Ratio</td >P/C Ratio</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{rawData?.putCallRatio}</td >{rawData?.putCallRatio}</td
></tr ></tr
> >
@ -177,7 +176,7 @@
>Put Open Interest</td >Put Open Interest</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{@html abbreviateNumberWithColor(
rawData?.put_open_interest, rawData?.put_open_interest,
false, false,
@ -193,7 +192,7 @@
>Open Interest (OI) Change</td >Open Interest (OI) Change</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
> >
{#if rawData?.changeOI >= 0} {#if rawData?.changeOI >= 0}
<span class="text-[#00FC50]" <span class="text-[#00FC50]"
@ -216,7 +215,7 @@
>% OI Change</td >% OI Change</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
> >
{#if rawData?.changesPercentageOI >= 0} {#if rawData?.changesPercentageOI >= 0}
<span class="text-[#00FC50]" <span class="text-[#00FC50]"
@ -243,10 +242,8 @@
>IV Rank</td >IV Rank</td
> >
<td <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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{rawData?.ivRank !== undefined >{rawData?.iv_rank ?? "n/a"}</td
? rawData?.ivRank?.toFixed(2)
: "n/a"}</td
></tr ></tr
> >
</tbody> </tbody>

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { displayCompanyName, screenWidth, etfTicker } from "$lib/store"; import { displayCompanyName, screenWidth, etfTicker } from "$lib/store";
import DailyStats from "$lib/components/Options/DailyStats.svelte"; import QuickStats from "$lib/components/Options/QuickStats.svelte";
import { Chart } from "svelte-echarts"; import { Chart } from "svelte-echarts";
import { abbreviateNumberWithColor, monthNames } from "$lib/utils"; import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
import { onMount } from "svelte"; import { onMount } from "svelte";
@ -301,7 +301,7 @@
{#if Object?.keys(dailyStats)?.length > 0} {#if Object?.keys(dailyStats)?.length > 0}
<div class="w-full mb-10"> <div class="w-full mb-10">
<DailyStats rawData={dailyStats} /> <QuickStats rawData={dailyStats} />
</div> </div>
{/if} {/if}

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { displayCompanyName, screenWidth, stockTicker } from "$lib/store"; import { displayCompanyName, screenWidth, stockTicker } from "$lib/store";
import DailyStats from "$lib/components/Options/DailyStats.svelte"; import QuickStats from "$lib/components/Options/QuickStats.svelte";
import { Chart } from "svelte-echarts"; import { Chart } from "svelte-echarts";
import { abbreviateNumberWithColor, monthNames } from "$lib/utils"; import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
import { onMount } from "svelte"; import { onMount } from "svelte";
@ -301,7 +301,7 @@
{#if Object?.keys(dailyStats)?.length > 0} {#if Object?.keys(dailyStats)?.length > 0}
<div class="w-full mb-10"> <div class="w-full mb-10">
<DailyStats rawData={dailyStats} /> <QuickStats rawData={dailyStats} />
</div> </div>
{/if} {/if}