{#if rawDataVolume?.length > 0}

Hottest Contracts (Highest Volume)

{#each volumeList as item, index} {/each}

{item?.option_type === "C" ? "Call" : "Put"} handleViewData(item)} on:mouseover={() => getContractHistory(item?.option_symbol)} class="cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4" > {item?.strike_price} {" " + item?.date_expiration}	{item?.dte}	{item?.otm}%	{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, )}

Highest OI Contracts

{#each openInterestList as item, index} {/each}

{item?.option_type === "C" ? "Call" : "Put"} handleViewData(item)} on:mouseover={() => getContractHistory(item?.option_symbol)} class="cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4" > {item?.strike_price} {" " + item?.date_expiration}	{item?.dte}	{item?.otm}%	{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, )}

{:else}

Hottest Contracts

{/if}

{#if rawDataHistory?.length > 0}

{formatDate(optionHistoryList?.at(0)?.date)}:

Vol: {optionHistoryList?.at(0)?.volume?.toLocaleString("en-US")}

OI: {optionHistoryList?.at(0)?.open_interest?.toLocaleString("en-US")}

Avg: ${optionHistoryList?.at(0)?.avg_price}

Prem: {abbreviateNumber(optionHistoryList?.at(0)?.total_premium, true)}

IV: {(optionHistoryList?.at(0)?.implied_volatility * 100)?.toLocaleString( "en-US", )}%

OTM: {otmPercentage}%

{#if $screenWidth > 640}

{#each ["Bid/Ask", "Vol/OI", "IV"] as item} (selectGraphType = item)} class="px-3 py-1.5 {selectGraphType === item ? 'bg-white text-black mr-1' : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer" > {item} {/each}

{#if isLoaded} {:else}

{/if}

{/if}

{#if isLoaded} {#each optionHistoryList as item} {/each}

Date	Vol	OI	OI Change	% Change OI	Last Price	Avg Price	Bid/Ask	IV	Floor	Sweep	Multileg Vol	Total Prem
{formatDate(item?.date)}	{item?.volume?.toLocaleString("en-US")}	{item?.open_interest !== undefined ? item?.open_interest?.toLocaleString("en-US") : "n/a"}	{#if item?.open_interest_change >= 0 && item?.open_interest_change !== undefined} +{item?.open_interest_change?.toLocaleString( "en-US", )} {:else if item?.open_interest_change < 0 && item?.open_interest_change !== undefined} {item?.open_interest_change?.toLocaleString( "en-US", )} {:else} n/a {/if}	{#if item?.open_interest_change_percent > 0 && item?.open_interest_change_percent !== undefined} +{item?.open_interest_change_percent + "%"} {:else if item?.open_interest_change_percent < 0 && item?.open_interest_change_percent !== undefined} {item?.open_interest_change_percent + "%"} {:else if item?.open_interest_change_percent === 0 && item?.open_interest_change_percent !== undefined} 0% {:else} n/a {/if}	{item?.last_price}	{item?.avg_price}	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, )}	{(item?.implied_volatility * 100)?.toLocaleString( "en-US", ) + "%"}	{item?.volume > 0 ? ((item?.floor_volume / item?.volume) * 100)?.toFixed( 2, ) + "%" : "n/a"}	{item?.volume > 0 ? ((item?.sweep_volume / item?.volume) * 100)?.toFixed( 2, ) + "%" : "n/a"}	{item?.volume > 0 ? ( (item?.multi_leg_volume / item?.volume) * 100 )?.toFixed(2) + "%" : "n/a"}	{@html abbreviateNumberWithColor( item?.total_premium, false, true, )}

{:else}

{/if}

{:else}

No historical data available yet for the given contract

{/if}