fix analyst page
This commit is contained in:
parent
465e7385de
commit
18b1ca855f
@ -4,12 +4,12 @@
|
||||
export let title;
|
||||
export let content;
|
||||
export let id;
|
||||
|
||||
export let hide = false;
|
||||
</script>
|
||||
|
||||
|
||||
<label for={id} class="cursor-pointer ml-1">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="gray"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
|
||||
<svg class="w-5 h-5 {hide ? 'hidden' : ''}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="gray"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
|
||||
</label>
|
||||
|
||||
<!-- Desktop modal using dialog component -->
|
||||
|
||||
@ -130,91 +130,99 @@ changeTab(0)
|
||||
|
||||
{#if historyList?.length !== 0}
|
||||
|
||||
<div class="stats stats-horizontal bg-[#272727] w-full rounded-lg pr-6 sm:pr-0">
|
||||
|
||||
<div class="grid grid-cols-2">
|
||||
|
||||
<div class="stat">
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="totalAnalystInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
|
||||
Total Analyst
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Total Analyst"}
|
||||
content={"The total number of analyst who provided a rating in the past 12 months."}
|
||||
id={"totalAnalystInfo"}
|
||||
/>
|
||||
</div>
|
||||
<div class="stat-value mt-1 text-lg text-gray-200 font-semibold">
|
||||
<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>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{numOfAnalyst}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="consensusRatingInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
|
||||
Consensus Rating
|
||||
</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"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="stat-value font-semibold {['Strong Buy', 'Buy']?.includes(consensusRating) ? 'text-[#10DB06]' : consensusRating === 'Hold' ? 'text-[#FF7070]' : ['Strong Sell','Sell']?.includes(consensusRating) ? 'text-[#FF2F1F]' : 'text-gray-200'} mt-1 text-lg">
|
||||
</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>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{consensusRating}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="priceTargetInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
|
||||
Price Target
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Price Target"}
|
||||
content={"The average 12-month price target"}
|
||||
id={"priceTargetInfo"}
|
||||
/>
|
||||
</div>
|
||||
<div class="stat-value font-semibold text-lg text-gray-200">
|
||||
</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>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
${priceTarget}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="upsideInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
|
||||
Upside
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Upside"}
|
||||
content={"The average price target's percentage difference from the current stock price."}
|
||||
id={"upsideInfo"}
|
||||
/>
|
||||
</div>
|
||||
<div class="stat-value font-semibold text-lg text-gray-200">
|
||||
<div class="flex flex-row items-center">
|
||||
{#if changesPercentage >=0}
|
||||
</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>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{#if changesPercentage >=0}
|
||||
<span class="text-[#10DB06]">+{changesPercentage}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{changesPercentage}% </span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h3 class="mt-10 text-2xl sm:text-3xl text-gray-200 font-bold mb-4 text-center sm:text-start">
|
||||
Ratings History
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user