diff --git a/src/lib/components/Options/DailyStats.svelte b/src/lib/components/Options/DailyStats.svelte new file mode 100644 index 00000000..c55b03cf --- /dev/null +++ b/src/lib/components/Options/DailyStats.svelte @@ -0,0 +1,361 @@ + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
Call Volume{@html abbreviateNumber(rawData?.call_volume, false, true)}
Call Volume Ask Side{@html abbreviateNumber( + rawData?.call_volume_ask_side, + false, + true, + )}
Call Volume Bid Side{@html abbreviateNumber( + rawData?.call_volume_bid_side, + false, + true, + )}
Call Premium{@html abbreviateNumber(rawData?.call_premium, false, true)}
Net Call Premium{@html abbreviateNumber( + rawData?.net_call_premium, + false, + true, + )}
Call Open Interest{@html abbreviateNumber( + rawData?.call_open_interest, + false, + true, + )}
IV Rank{@html abbreviateNumber(rawData?.iv_rank, false, true)}
Volatility + {rawData?.volatility}
Total Open Interest{@html abbreviateNumber( + rawData?.total_open_interest, + false, + true, + )}
Gex Ratio{rawData?.gex_ratio}
+ + + + + + + + + + + + + + + + + + + + + + + +
Put Volume{@html abbreviateNumber(rawData?.put_volume, false, true)}
Put Volume Ask Side{@html abbreviateNumber( + rawData?.put_volume_ask_side, + false, + true, + )}
Put Volume Bid Side{@html abbreviateNumber( + rawData?.put_volume_bid_side, + false, + true, + )}
Put Premium{@html abbreviateNumber(rawData?.put_premium, false, true)}
Net Put Premium{@html abbreviateNumber(rawData?.net_put_premium, false, true)}
Put Open Interest{@html abbreviateNumber( + rawData?.put_open_interest, + false, + true, + )}
P/C Ratio{rawData?.put_call_ratio}
🐻/🐂 Prem + + + +
+ +
+ +
+ + +
+ + +
+
+
+ + +
+
+
+ Bearish: {@html abbreviateNumber( + rawData?.premium_ratio[0], + false, + true, + )} +
+
+ Neutral: {@html abbreviateNumber( + rawData?.premium_ratio[1], + false, + true, + )} +
+
+ Bullish: {@html abbreviateNumber( + rawData?.premium_ratio[2], + false, + true, + )} +
+
+
+ +
Open Interest Change{@html abbreviateNumber( + rawData?.open_interest_change, + false, + true, + )}
IV 30d{rawData?.iv30d}
+
+
diff --git a/src/routes/stocks/[tickerID]/options/+layout.svelte b/src/routes/stocks/[tickerID]/options/+layout.svelte index 0926ab1f..b6ef6b70 100644 --- a/src/routes/stocks/[tickerID]/options/+layout.svelte +++ b/src/routes/stocks/[tickerID]/options/+layout.svelte @@ -11,7 +11,7 @@
-
+
diff --git a/src/routes/stocks/[tickerID]/options/+page.server.ts b/src/routes/stocks/[tickerID]/options/+page.server.ts index f61ca789..bca8524c 100644 --- a/src/routes/stocks/[tickerID]/options/+page.server.ts +++ b/src/routes/stocks/[tickerID]/options/+page.server.ts @@ -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(), diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte index 7951ec7e..bec5d45a 100644 --- a/src/routes/stocks/[tickerID]/options/+page.svelte +++ b/src/routes/stocks/[tickerID]/options/+page.svelte @@ -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 @@ >
-
- {#await import("$lib/components/OptionsNetFlow.svelte") then { default: Comp }} - - {/await} -
- - {#if optionsPlotData?.length !== 0} - - {:else} - - {/if} +
{#if optionsPlotData?.length !== 0}