bugfixing options stats
This commit is contained in:
MuslemRahimi
parent
d7307c4ee2
commit
e5a6aa5899
@ -1,20 +1,21 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||||
import { abbreviateNumberWithColor } from "$lib/utils";
|
import { abbreviateNumberWithColor } from "$lib/utils";
|
||||||
|
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
|
||||||
|
|
||||||
export let rawData = {};
|
export let rawData = {};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="text-white">
|
<div class="text-white">
|
||||||
<label
|
<label
|
||||||
for="avgOptionsStats"
|
for="dailyStats"
|
||||||
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"
|
||||||
>
|
>
|
||||||
Avg. Options Trading Stats
|
Daily Stats
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Avg. Options Trading Stats"}
|
title={"Daily Stats"}
|
||||||
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."}
|
content={"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={"avgOptionsStats"}
|
id={"dailyStats"}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
@ -92,7 +93,7 @@
|
|||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm 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
|
||||||
>
|
>
|
||||||
<tr
|
<tr
|
||||||
@ -114,11 +115,15 @@
|
|||||||
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]"
|
||||||
>Volume</td
|
>Net Premium
|
||||||
>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm 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?.volume?.toLocaleString("en-US")}</td
|
>{@html abbreviateNumberWithColor(
|
||||||
|
rawData?.net_premium,
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
)}</td
|
||||||
></tr
|
></tr
|
||||||
>
|
>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -185,6 +190,18 @@
|
|||||||
></tr
|
></tr
|
||||||
>
|
>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
||||||
|
><td
|
||||||
|
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
||||||
|
>IV Rank</td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
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_rank ?? "n/a"}</td
|
||||||
|
></tr
|
||||||
|
>
|
||||||
|
|
||||||
<tr
|
<tr
|
||||||
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
|
||||||
@ -212,40 +229,84 @@
|
|||||||
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]"
|
||||||
>% OI Change</td
|
>🐻/🐂 Prem
|
||||||
>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
class="whitespace-nowrap w-full px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||||
>
|
>
|
||||||
{#if rawData?.changesPercentageOI >= 0}
|
<HoverCard.Root>
|
||||||
<span class="text-[#00FC50]"
|
<HoverCard.Trigger
|
||||||
>+{rawData?.changesPercentageOI >= 1000
|
class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
|
||||||
? abbreviateNumberWithColor(rawData?.changesPercentageOI)
|
|
||||||
: rawData?.changesPercentageOI?.toFixed(2)}%</span
|
|
||||||
>
|
>
|
||||||
{:else if rawData?.changesPercentageOI < 0}
|
<div class="flex items-center sm:justify-end">
|
||||||
<span class="text-[#FF2F1F]"
|
<!-- Bar Container -->
|
||||||
>{rawData?.changesPercentageOI <= -1000
|
<div
|
||||||
? abbreviateNumberWithColor(rawData?.changesPercentageOI)
|
class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
|
||||||
: rawData?.changesPercentageOI?.toFixed(2)}%
|
>
|
||||||
</span>
|
<!-- Bearish -->
|
||||||
{:else}
|
<div
|
||||||
<span class="text-white"> n/a </span>
|
class="bg-red-500 h-full"
|
||||||
{/if}</td
|
style="width: calc(({rawData
|
||||||
></tr
|
?.premium_ratio[0]} / ({rawData
|
||||||
>
|
?.premium_ratio[0]} + {rawData
|
||||||
|
?.premium_ratio[1]} + {rawData
|
||||||
|
?.premium_ratio[2]})) * 100%)"
|
||||||
|
></div>
|
||||||
|
|
||||||
<tr
|
<!-- Neutral -->
|
||||||
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
|
<div
|
||||||
><td
|
class="bg-gray-300 h-full"
|
||||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
|
style="width: calc(({rawData
|
||||||
>IV Rank</td
|
?.premium_ratio[1]} / ({rawData
|
||||||
|
?.premium_ratio[0]} + {rawData
|
||||||
|
?.premium_ratio[1]} + {rawData
|
||||||
|
?.premium_ratio[2]})) * 100%)"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- Bullish -->
|
||||||
|
<div
|
||||||
|
class="bg-green-500 h-full"
|
||||||
|
style="width: calc(({rawData
|
||||||
|
?.premium_ratio[2]} / ({rawData
|
||||||
|
?.premium_ratio[0]} + {rawData
|
||||||
|
?.premium_ratio[1]} + {rawData
|
||||||
|
?.premium_ratio[2]})) * 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>
|
||||||
|
Bearish: {@html abbreviateNumberWithColor(
|
||||||
|
rawData?.premium_ratio[0],
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Neutral: {@html abbreviateNumberWithColor(
|
||||||
|
rawData?.premium_ratio[1],
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Bullish: {@html abbreviateNumberWithColor(
|
||||||
|
rawData?.premium_ratio[2],
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</HoverCard.Content>
|
||||||
|
</HoverCard.Root></td
|
||||||
>
|
>
|
||||||
<td
|
</tr>
|
||||||
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_rank ?? "n/a"}</td
|
|
||||||
></tr
|
|
||||||
>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
@ -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 QuickStats from "$lib/components/Options/QuickStats.svelte";
|
import DailyStats from "$lib/components/Options/DailyStats.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">
|
||||||
<QuickStats rawData={dailyStats} />
|
<DailyStats rawData={dailyStats} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|||||||
@ -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 QuickStats from "$lib/components/Options/QuickStats.svelte";
|
import DailyStats from "$lib/components/Options/DailyStats.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">
|
||||||
<QuickStats rawData={dailyStats} />
|
<DailyStats rawData={dailyStats} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user