From b6facb9f07066db434eff839343e2d7dce6542c0 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Wed, 1 Jan 2025 13:08:48 +0100 Subject: [PATCH] ui fix --- .../options/hottest-contracts/+page.svelte | 675 +++++++++--------- 1 file changed, 350 insertions(+), 325 deletions(-) diff --git a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte index 76eeed49..7ab9bab3 100644 --- a/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte +++ b/src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte @@ -2,6 +2,7 @@ import { abbreviateNumberWithColor } from "$lib/utils"; import * as HoverCard from "$lib/components/shadcn/hover-card/index.js"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; + import Infobox from "$lib/components/Infobox.svelte"; export let data; let volumeList = data?.getData; @@ -31,350 +32,374 @@
-
-

- Hottest Contracts (Highest Volume) -

-
- 0} +
+

-

- - + Hottest Contracts (Highest Volume) + +
+
Chain
+ + + - - - - - - - - - - - {#each volumeList as item, index} - - - {item?.strike_price} - {item?.option_type === "C" ? "Call" : "Put"} - {" " + - item?.date_expiration + - " " + - `(${daysLeft(item?.date_expiration)})`} - - - - {item?.last_price} - - - {item?.low_price}-{item?.high_price} - - + - {item?.volume?.toLocaleString("en-US")} - - - {item?.open_interest?.toLocaleString("en-US")} - - - {#if item?.open_interest_change >= 0} - +{item?.open_interest_change?.toLocaleString( - "en-US", - )} - {:else} - {item?.open_interest_change?.toLocaleString( - "en-US", - )} - {/if} - - - - {/each} - -
ChainLastLow-HighVolumeOIOI ChangeBid/Ask VolTotal Prem
LastLow-HighVolumeOIOI ChangeBid/Ask VolTotal Prem - - -
- -
- -
- - -
- - -
-
-
- - -
-
-
- Bid Vol: {@html abbreviateNumberWithColor( - item?.bid_volume, - false, - true, - )} -
-
- Mid Vol: {@html abbreviateNumberWithColor( - item?.mid_volume, - false, - true, - )} -
-
- Ask Vol: {@html abbreviateNumberWithColor( - item?.ask_volume, - false, - true, - )} -
-
-
- - - 		- {@html abbreviateNumberWithColor( - item?.total_premium, - false, - true, - )} -
-
-

- Highest OI Contracts -

-
- + + {#each volumeList as item, index} + + + + + + + + + + + + {/each} + +
+ {item?.strike_price} + + {item?.option_type === "C" ? "Call" : "Put"} + + {" " + + item?.date_expiration + + " " + + `(${daysLeft(item?.date_expiration)})`} + + {item?.last_price} + + {item?.low_price}-{item?.high_price} + + {item?.volume?.toLocaleString("en-US")} + + {item?.open_interest?.toLocaleString("en-US")} + + {#if item?.open_interest_change >= 0} + +{item?.open_interest_change?.toLocaleString( + "en-US", + )} + {:else} + {item?.open_interest_change?.toLocaleString( + "en-US", + )} + {/if} + + + +
+ +
+ +
+ + +
+ + +
+
+
+ + +
+
+
+ Bid Vol: {@html abbreviateNumberWithColor( + item?.bid_volume, + false, + true, + )} +
+
+ Mid Vol: {@html abbreviateNumberWithColor( + item?.mid_volume, + false, + true, + )} +
+
+ Ask Vol: {@html abbreviateNumberWithColor( + item?.ask_volume, + false, + true, + )} +
+
+
+ + + 		+ {@html abbreviateNumberWithColor( + item?.total_premium, + false, + true, + )} +
+
+

- - - Chain - Strike + Highest OI Contracts +

+
+ + + + - - - - - - - - - - - {#each openInterestList as item, index} - - - {item?.option_type === "C" ? "Call" : "Put"} - {" " + - item?.date_expiration + - " " + - `(${daysLeft(item?.date_expiration)})`} - - - {item?.strike_price} - - - {item?.last_price} - - + - {item?.low_price}-{item?.high_price} - - - {item?.volume?.toLocaleString("en-US")} - - - {item?.open_interest?.toLocaleString("en-US")} - - - - - {/each} - -
ChainLastLow-HighVolumeOIOI ChangeBid/Ask VolTotal Prem
LastLow-HighVolumeOIOI ChangeBid/Ask VolTotal Prem - {#if item?.open_interest_change >= 0} - +{item?.open_interest_change?.toLocaleString( - "en-US", - )} - {:else} - {item?.open_interest_change?.toLocaleString( - "en-US", - )} - {/if} - - - -
- -
- -
- - -
- - -
-
-
- - -
-
-
- Bid Vol: {@html abbreviateNumberWithColor( - item?.bid_volume, - false, - true, - )} -
-
- Mid Vol: {@html abbreviateNumberWithColor( - item?.mid_volume, - false, - true, - )} -
-
- Ask Vol: {@html abbreviateNumberWithColor( - item?.ask_volume, - false, - true, - )} -
-
-
- - - 		- {@html abbreviateNumberWithColor( - item?.total_premium, - false, - true, - )} -
+ + + {#each openInterestList as item, index} + + + {item?.strike_price} + + {item?.option_type === "C" ? "Call" : "Put"} + + {" " + + item?.date_expiration + + " " + + `(${daysLeft(item?.date_expiration)})`} + + + + {item?.last_price} + + + {item?.low_price}-{item?.high_price} + + + {item?.volume?.toLocaleString("en-US")} + + + {item?.open_interest?.toLocaleString("en-US")} + + + {#if item?.open_interest_change >= 0} + +{item?.open_interest_change?.toLocaleString( + "en-US", + )} + {:else} + {item?.open_interest_change?.toLocaleString( + "en-US", + )} + {/if} + + + + +
+ +
+ +
+ + +
+ + +
+
+
+ + +
+
+
+ Bid Vol: {@html abbreviateNumberWithColor( + item?.bid_volume, + false, + true, + )} +
+
+ Mid Vol: {@html abbreviateNumberWithColor( + item?.mid_volume, + false, + true, + )} +
+
+ Ask Vol: {@html abbreviateNumberWithColor( + item?.ask_volume, + false, + true, + )} +
+
+
+ + + + + {@html abbreviateNumberWithColor( + item?.total_premium, + false, + true, + )} + + + {/each} + + +
+
- -
+ {:else} +
+

+ Hottest Contracts +

+
+ +
+
+ {/if}