ui fix
This commit is contained in:
MuslemRahimi
parent
b4d555526a
commit
6104e7ec5c
361
src/lib/components/Options/DailyStats.svelte
Normal file
361
src/lib/components/Options/DailyStats.svelte
Normal file
@ -0,0 +1,361 @@
|
||||
<script lang="ts">
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
|
||||
export let rawData = {};
|
||||
</script>
|
||||
|
||||
<div class="text-white">
|
||||
<label
|
||||
for="dailyStats"
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
|
||||
>
|
||||
Daily Stats
|
||||
<InfoModal
|
||||
title={"Daily 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."}
|
||||
id={"dailyStats"}
|
||||
/>
|
||||
</label>
|
||||
<div
|
||||
class="mt-5 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
|
||||
>
|
||||
<table class="w-[50%] text-sm text-white sm:text-[1rem] xl:min-w-[300px]">
|
||||
<tbody
|
||||
><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]"
|
||||
>Call Volume</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]"
|
||||
>{@html abbreviateNumber(rawData?.call_volume, false, true)}</td
|
||||
></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]"
|
||||
>Call Volume Ask Side</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]"
|
||||
>{@html abbreviateNumber(
|
||||
rawData?.call_volume_ask_side,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></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]"
|
||||
>Call Volume Bid Side</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]"
|
||||
>{@html abbreviateNumber(
|
||||
rawData?.call_volume_bid_side,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></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]"
|
||||
>Call Premium</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]"
|
||||
>{@html abbreviateNumber(rawData?.call_premium, false, true)}</td
|
||||
></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]"
|
||||
>Net Call Premium</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]"
|
||||
>{@html abbreviateNumber(
|
||||
rawData?.net_call_premium,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></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]"
|
||||
>Call Open Interest</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]"
|
||||
>{@html abbreviateNumber(
|
||||
rawData?.call_open_interest,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></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 font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
|
||||
>{@html abbreviateNumber(rawData?.iv_rank, false, true)}</td
|
||||
></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]"
|
||||
>Volatility
|
||||
</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]"
|
||||
>{rawData?.volatility}</td
|
||||
></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]"
|
||||
>Total Open Interest</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]"
|
||||
>{@html abbreviateNumber(
|
||||
rawData?.total_open_interest,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></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]"
|
||||
>Gex Ratio</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]"
|
||||
>{rawData?.gex_ratio}</td
|
||||
></tr
|
||||
>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="w-[50%] text-sm text-white xl:min-w-[300px]">
|
||||
<tbody
|
||||
><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]"
|
||||
>Put Volume</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]"
|
||||
>{@html abbreviateNumber(rawData?.put_volume, false, true)}</td
|
||||
></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]"
|
||||
>Put Volume Ask Side</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]"
|
||||
>{@html abbreviateNumber(
|
||||
rawData?.put_volume_ask_side,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></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]"
|
||||
>Put Volume Bid Side</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]"
|
||||
>{@html abbreviateNumber(
|
||||
rawData?.put_volume_bid_side,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></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]"
|
||||
>Put Premium</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]"
|
||||
>{@html abbreviateNumber(rawData?.put_premium, false, true)}</td
|
||||
></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]"
|
||||
>Net Put Premium</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]"
|
||||
>{@html abbreviateNumber(rawData?.net_put_premium, false, true)}</td
|
||||
></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]"
|
||||
>Put Open Interest</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]"
|
||||
>{@html abbreviateNumber(
|
||||
rawData?.put_open_interest,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></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]"
|
||||
>P/C Ratio</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]"
|
||||
>{rawData?.put_call_ratio}</td
|
||||
></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]"
|
||||
>🐻/🐂 Prem
|
||||
</td>
|
||||
<td
|
||||
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]"
|
||||
>
|
||||
<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 sm: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(({rawData
|
||||
?.premium_ratio[0]} / ({rawData
|
||||
?.premium_ratio[0]} + {rawData
|
||||
?.premium_ratio[1]} + {rawData
|
||||
?.premium_ratio[2]})) * 100%)"
|
||||
></div>
|
||||
|
||||
<!-- Neutral -->
|
||||
<div
|
||||
class="bg-gray-300 h-full"
|
||||
style="width: calc(({rawData
|
||||
?.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 abbreviateNumber(
|
||||
rawData?.premium_ratio[0],
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
Neutral: {@html abbreviateNumber(
|
||||
rawData?.premium_ratio[1],
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
Bullish: {@html abbreviateNumber(
|
||||
rawData?.premium_ratio[2],
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HoverCard.Content>
|
||||
</HoverCard.Root></td
|
||||
>
|
||||
</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]"
|
||||
>Open Interest Change</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]"
|
||||
>{@html abbreviateNumber(
|
||||
rawData?.open_interest_change,
|
||||
false,
|
||||
true,
|
||||
)}</td
|
||||
></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 30d</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]"
|
||||
>{rawData?.iv30d}</td
|
||||
></tr
|
||||
>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@ -11,7 +11,7 @@
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4">
|
||||
<main class="w-full lg:w-3/4 mt-2 sm:mt-0">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
|
||||
@ -6,12 +6,12 @@ import { loginUserSchema, registerUserSchema } from "$lib/schemas";
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
|
||||
const getOptionsNetFlow = async () => {
|
||||
const getDailyStats = async () => {
|
||||
const postData = {
|
||||
ticker: params.tickerID,
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-net-flow-ticker", {
|
||||
const response = await fetch(apiURL + "/options-stats-ticker", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@ -106,7 +106,7 @@ export const load = async ({ locals, params }) => {
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getOptionsNetFlow: await getOptionsNetFlow(),
|
||||
getDailyStats: await getDailyStats(),
|
||||
getOptionsPlotData: await getOptionsPlotData(),
|
||||
getOptionsHistoricalData: await getOptionsHistoricalData(),
|
||||
getOptionsChainData: await getOptionsChainData(),
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
setCache,
|
||||
getCache,
|
||||
} from "$lib/store";
|
||||
import DailyStats from "$lib/components/Options/DailyStats.svelte";
|
||||
import { Chart } from "svelte-echarts";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
@ -16,14 +17,13 @@
|
||||
import { BarChart, LineChart } from "echarts/charts";
|
||||
import { GridComponent, TooltipComponent } from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
let activeEX = 0;
|
||||
let activeIdx = 0;
|
||||
|
||||
let dailyStats = data?.getDailyStats;
|
||||
const getDailyTransactions = async (transactionId) => {
|
||||
let output;
|
||||
const cachedData = getCache(transactionId, "getDailyTransactions");
|
||||
@ -577,27 +577,7 @@
|
||||
>
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="w-full mb-10">
|
||||
<div
|
||||
class="w-full m-auto sm:pb-6 {data?.getOptionsNetFlow?.length === 0
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/OptionsNetFlow.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} rawData={data?.getOptionsNetFlow} />
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
{#if optionsPlotData?.length !== 0}
|
||||
<Infobox
|
||||
text={`1 Year of options activity involving ${$displayCompanyName} by major
|
||||
institutional traders and hedge funds.`}
|
||||
/>
|
||||
{:else}
|
||||
<Infobox
|
||||
text={`There's no data available, indicating that major traders may not
|
||||
be actively betting on ${$displayCompanyName}.`}
|
||||
/>
|
||||
{/if}
|
||||
<DailyStats rawData={dailyStats} />
|
||||
</div>
|
||||
|
||||
{#if optionsPlotData?.length !== 0}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user