fix analyst page

This commit is contained in:
MuslemRahimi 2024-08-13 15:32:05 +02:00
parent 465e7385de
commit 18b1ca855f
2 changed files with 86 additions and 78 deletions

View File

@ -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 -->

View File

@ -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