ui fix
This commit is contained in:
MuslemRahimi
parent
f839a3566c
commit
558e42e499
@ -4,7 +4,6 @@
|
||||
export let title;
|
||||
export let content;
|
||||
export let id;
|
||||
export let hide = false;
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -389,85 +389,55 @@ $: {
|
||||
|
||||
<div class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Total Volume
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="totaVolume" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Total Volume"}
|
||||
content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
|
||||
id={"totaVolume"}
|
||||
hide={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="totaVolume" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Total Volume
|
||||
<InfoModal
|
||||
title={"Total Volume"}
|
||||
content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
|
||||
id={"totaVolume"}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||
{displayTotalVolume}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Total OI
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="totalOpenInterest" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Total OI"}
|
||||
content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
|
||||
id={"totalOpenInterest"}
|
||||
hide={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="totalOpenInterest" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Total OI
|
||||
<InfoModal
|
||||
title={"Total OI"}
|
||||
content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
|
||||
id={"totalOpenInterest"}
|
||||
/>
|
||||
</label>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||
{displayTotalOpenInterest}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
P/C Ratio
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="putCallRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"P/C Ratio"}
|
||||
content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
|
||||
id={"putCallRatio"}
|
||||
hide={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="putCallRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
P/C Ratio
|
||||
<InfoModal
|
||||
title={"P/C Ratio"}
|
||||
content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
|
||||
id={"putCallRatio"}
|
||||
/>
|
||||
</label>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||
{putCallRatio !== 'Infinity' ? putCallRatio : '> 1'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
OI P/C Ratio
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="openInteresteRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"OI P/C Ratio"}
|
||||
content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
|
||||
id={"openInteresteRatio"}
|
||||
hide ={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="openInteresteRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
OI P/C Ratio
|
||||
<InfoModal
|
||||
title={"OI P/C Ratio"}
|
||||
content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
|
||||
id={"openInteresteRatio"}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||
{putCallOpenInterestRatio !== 'Infinity' ? putCallOpenInterestRatio : '> 1'}
|
||||
</div>
|
||||
|
||||
@ -132,85 +132,56 @@ changeTab(0)
|
||||
|
||||
<div class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Total Analysts
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="totalAnalystInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Total Analyst"}
|
||||
content={"The total number of analyst who provided a rating in the past 12 months."}
|
||||
id={"totalAnalystInfo"}
|
||||
hide={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="totalAnalystInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Total Analysts
|
||||
<InfoModal
|
||||
title={"Total Analyst"}
|
||||
content={"The total number of analyst who provided a rating in the past 12 months."}
|
||||
id={"totalAnalystInfo"}
|
||||
/>
|
||||
</label>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{numOfAnalyst}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Consensus Rating
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="consensusRatingInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Consensus Rating"}
|
||||
content={`The average analyst rating for ${$stockTicker} is standardized to align with categories: Strong Buy, Buy, Hold, Sell, and Strong Sell.`}
|
||||
id={"consensusRatingInfo"}
|
||||
hide={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="consensusRatingInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Total Rating
|
||||
<InfoModal
|
||||
title={"Consensus Rating"}
|
||||
content={`The average analyst rating for ${$stockTicker} is standardized to align with categories: Strong Buy, Buy, Hold, Sell, and Strong Sell.`}
|
||||
id={"consensusRatingInfo"}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{consensusRating}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Price Target
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="priceTargetInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Price Target"}
|
||||
content={"The average 12-month price target"}
|
||||
id={"priceTargetInfo"}
|
||||
hide={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="priceTargetInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Price Target
|
||||
<InfoModal
|
||||
title={"Price Target"}
|
||||
content={"The average 12-month price target"}
|
||||
id={"priceTargetInfo"}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
${priceTarget}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Upside
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="upsideInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Upside"}
|
||||
content={"The average price target's percentage difference from the current stock price."}
|
||||
id={"upsideInfo"}
|
||||
hide ={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="upsideInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Upside
|
||||
<InfoModal
|
||||
title={"Upside"}
|
||||
content={"The average price target's percentage difference from the current stock price."}
|
||||
id={"upsideInfo"}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{#if changesPercentage >=0}
|
||||
<span class="text-[#10DB06]">+{changesPercentage}%</span>
|
||||
|
||||
@ -337,7 +337,8 @@ onMount(async() => {
|
||||
We can divide four types of insider transactions:
|
||||
|
||||
<div class="flex flex-row items-center justify-center">
|
||||
Buy, Sell,
|
||||
Buy, Sell,
|
||||
|
||||
<label for="grantInfo" class="ml-1 cursor-pointer font-medium">
|
||||
Grant
|
||||
</label>
|
||||
@ -345,8 +346,8 @@ onMount(async() => {
|
||||
title={"Stock Grant"}
|
||||
content={"A stock grant occurs when a company compensates an employee by offering them equity, or when an insider gifts shares. In essence, the company grants ownership of shares, or an insider transfers shares. These grants may involve common stock shares, preferred shares, or another class of shares."}
|
||||
id={"grantInfo"}
|
||||
/>,
|
||||
<label for="exerciseInfo" class="ml-1 cursor-pointer font-medium">
|
||||
/>
|
||||
<label for="exerciseInfo" class="ml-6 cursor-pointer font-medium">
|
||||
Exercise
|
||||
</label>
|
||||
<InfoModal
|
||||
|
||||
@ -389,85 +389,55 @@ $: {
|
||||
|
||||
<div class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Total Volume
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="totaVolume" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Total Volume"}
|
||||
content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
|
||||
id={"totaVolume"}
|
||||
hide={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="totaVolume" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Total Volume
|
||||
<InfoModal
|
||||
title={"Total Volume"}
|
||||
content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
|
||||
id={"totaVolume"}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||
{displayTotalVolume}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Total OI
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="totalOpenInterest" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Total OI"}
|
||||
content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
|
||||
id={"totalOpenInterest"}
|
||||
hide={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="totalOpenInterest" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Total OI
|
||||
<InfoModal
|
||||
title={"Total OI"}
|
||||
content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
|
||||
id={"totalOpenInterest"}
|
||||
/>
|
||||
</label>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||
{displayTotalOpenInterest}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
P/C Ratio
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="putCallRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"P/C Ratio"}
|
||||
content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
|
||||
id={"putCallRatio"}
|
||||
hide={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="putCallRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
P/C Ratio
|
||||
<InfoModal
|
||||
title={"P/C Ratio"}
|
||||
content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
|
||||
id={"putCallRatio"}
|
||||
/>
|
||||
</label>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||
{putCallRatio !== 'Infinity' ? putCallRatio : '> 1'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
OI P/C Ratio
|
||||
<span class="relative" role="tooltip">
|
||||
<label for="openInteresteRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
||||
<svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"OI P/C Ratio"}
|
||||
content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
|
||||
id={"openInteresteRatio"}
|
||||
hide ={true}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<label for="openInteresteRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
OI P/C Ratio
|
||||
<InfoModal
|
||||
title={"OI P/C Ratio"}
|
||||
content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
|
||||
id={"openInteresteRatio"}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
|
||||
{putCallOpenInterestRatio !== 'Infinity' ? putCallOpenInterestRatio : '> 1'}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user