refactor analyst page
This commit is contained in:
MuslemRahimi
parent
f85a0e21d6
commit
fc64088ee4
@ -117,6 +117,91 @@
|
||||
>
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="w-full mb-6">
|
||||
<div
|
||||
class="rounded-sm border border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0"
|
||||
>
|
||||
<div
|
||||
class="p-3 md:flex md:space-x-4 md:p-0 lg:block lg:max-w-[32%] lg:space-x-0"
|
||||
>
|
||||
<div data-test="forecast-snippet">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<h2 class="mb-1 text-xl font-bold">Stock Price Forecast</h2>
|
||||
<span></span>
|
||||
</div>
|
||||
<p>
|
||||
The 15 analysts with 12-month price forecasts for SMCI stock
|
||||
have an average target of 74.53, with a low estimate of 32.5
|
||||
and a high estimate of 135. The average target predicts an
|
||||
increase of 125.37% from the current stock price of 33.07.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h-[160px]">
|
||||
<canvas
|
||||
id="myChart"
|
||||
style="display: block; box-sizing: border-box; height: 160px; width: 352px;"
|
||||
width="529"
|
||||
height="240"
|
||||
></canvas>
|
||||
</div>
|
||||
<div class="-mt-2 text-center text-xl font-semibold">
|
||||
Analyst Consensus: <span class="font-bold text-green-700"
|
||||
>Buy</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0">
|
||||
<div class="h-[250px] xs:h-[275px]">
|
||||
<canvas
|
||||
id="myChart"
|
||||
style="display: block; box-sizing: border-box; height: 275px; width: 728px;"
|
||||
width="1092"
|
||||
height="412"
|
||||
></canvas>
|
||||
</div>
|
||||
<div
|
||||
class="hide-scroll mb-1 mt-2 overflow-x-auto px-1.5 text-center md:mb-0 md:px-0 lg:mt-2"
|
||||
data-test="forecast-target-table"
|
||||
>
|
||||
<table
|
||||
class="w-full text-right text-tiny text-white xs:text-sm sm:text-base"
|
||||
>
|
||||
<thead
|
||||
><tr class="border-b border-gray-600 font-normal"
|
||||
><th class="py-[3px] text-left font-semibold lg:py-0.5"
|
||||
>Target</th
|
||||
> <th class="font-semibold">Low</th>
|
||||
<th class="font-semibold">Average</th>
|
||||
<th class="font-semibold">Median</th>
|
||||
<th class="font-semibold">High</th></tr
|
||||
></thead
|
||||
>
|
||||
<tbody
|
||||
><tr class="border-b border-gray-600 font-normal"
|
||||
><td class="py-[3px] text-left lg:py-0.5">Price</td>
|
||||
<td>$32.5</td> <td>$74.53</td> <td>$67.5</td>
|
||||
<td>$135</td></tr
|
||||
>
|
||||
<tr
|
||||
><td class="py-[3px] text-left lg:py-0.5">Change</td>
|
||||
<td class="text-red-700 dark:text-red-default">-1.72%</td>
|
||||
<td class="text-green-800 dark:text-green-default"
|
||||
>+125.37%</td
|
||||
>
|
||||
<td class="text-green-800 dark:text-green-default"
|
||||
>+104.11%</td
|
||||
>
|
||||
<td class="text-green-800 dark:text-green-default"
|
||||
>+308.22%</td
|
||||
></tr
|
||||
></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
|
||||
Financial Forecast this Year
|
||||
</h2>
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
stockTicker,
|
||||
currentPortfolioPrice,
|
||||
} from "$lib/store";
|
||||
import InfoModal from "$lib/components/InfoModal.svelte";
|
||||
import { onMount } from "svelte";
|
||||
@ -19,7 +18,6 @@
|
||||
let numOfAnalyst = 0;
|
||||
let consensusRating = "n/a";
|
||||
let changesPercentage = 0;
|
||||
let isLoaded = false;
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
@ -44,7 +42,7 @@
|
||||
consensusRating = analystRating?.consensusRating;
|
||||
changesPercentage =
|
||||
analystRating?.priceTarget !== ("n/a" && 0)
|
||||
? ((priceTarget / $currentPortfolioPrice - 1) * 100)?.toFixed(2)
|
||||
? ((priceTarget / data?.getStockQuote?.price - 1) * 100)?.toFixed(2)
|
||||
: "-";
|
||||
}
|
||||
if (activeIdx === 1) {
|
||||
@ -87,11 +85,9 @@
|
||||
return differenceInDays <= 4;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
isLoaded = false;
|
||||
changeTab(0);
|
||||
isLoaded = true;
|
||||
changeTab(0);
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
@ -145,370 +141,295 @@
|
||||
>
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
Analyst Ratings
|
||||
</h2>
|
||||
<div
|
||||
class="mb-5 flex flex-col justify-between gap-y-2.5 sm:mb-2 sm:flex-row sm:items-end"
|
||||
>
|
||||
<h1 class="mb-px text-xl font-bold bp:text-2xl sm:pl-1">
|
||||
{$displayCompanyName} Analyst Ratings
|
||||
</h1>
|
||||
<div>
|
||||
<div class="pr-4 hidden justify-end md:flex">
|
||||
<InfoModal
|
||||
title={"Top Analysts"}
|
||||
content={"Filter for analysts rated 4+ stars focusing on their win rate and average return per rating. Analysts with 4+ stars typically exhibit both high accuracy and high return per rating."}
|
||||
id={"topAnalystsInfo"}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="inline-flex justify-center w-full rounded-md shadow-sm sm:w-auto"
|
||||
>
|
||||
<div
|
||||
class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
<button
|
||||
on:click={() => changeTab(i)}
|
||||
class="group relative z-[1] rounded-full px-5 py-1 {activeIdx ===
|
||||
i
|
||||
? 'z-0'
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-md bg-purple-600"
|
||||
></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-medium duration-200 text-white"
|
||||
>
|
||||
{item.title}
|
||||
</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
class="mb-4 grid grid-cols-2 grid-rows-2 divide-contrast rounded-lg border border-gray-600 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
|
||||
</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"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
>
|
||||
<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 {changesPercentage >=
|
||||
0
|
||||
? 'text-[#00FC50]'
|
||||
: changesPercentage < 0
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{changesPercentage > 0 ? "+" : ""}{changesPercentage}
|
||||
</div>
|
||||
{numOfAnalyst}
|
||||
</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
|
||||
</h3>
|
||||
|
||||
<div
|
||||
class="mt-5 w-fit text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#a474f6"
|
||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||
/></svg
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-l border-gray-600 md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Consensus Rating
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
>
|
||||
In previous years, Wall Street analysts have given {$displayCompanyName}
|
||||
a total of {data?.getAnalystTickerHistory?.length} ratings.
|
||||
{consensusRating}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-gray-600 md:border-0">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Price Target
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
>
|
||||
${priceTarget}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-4 bp:p-5 sm:p-6 border-t border-gray-600 md:border-0 border-l border-gray-600 md:border-0"
|
||||
>
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
Upside
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changesPercentage >=
|
||||
0
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'}"
|
||||
>
|
||||
{changesPercentage}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end w-full pt-10">
|
||||
<InfoModal
|
||||
title={"Top Analysts"}
|
||||
content={"Filter for analysts rated 4+ stars focusing on their win rate and average return per rating. Analysts with 4+ stars typically exhibit both high accuracy and high return per rating."}
|
||||
id={"topAnalystsInfo"}
|
||||
/>
|
||||
|
||||
<div class="ml-auto">
|
||||
<div
|
||||
class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-4"
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="sm:w-full m-auto mt-10">
|
||||
<div
|
||||
class="w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"
|
||||
>
|
||||
<table
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
<button
|
||||
on:click={() => changeTab(i)}
|
||||
class="group relative z-[1] rounded-full px-6 py-2 {activeIdx ===
|
||||
i
|
||||
? 'z-0'
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-lg bg-purple-600"
|
||||
></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-medium duration-200 text-white"
|
||||
<thead class="">
|
||||
<tr class="border-b border-[#27272A]">
|
||||
<td class="text-white font-semibold text-[1rem] text-start"
|
||||
>Analyst</td
|
||||
>
|
||||
<td class="text-white font-semibold text-[1rem] text-start"
|
||||
>Rating</td
|
||||
>
|
||||
<td class="text-white font-semibold text-[1rem] text-end"
|
||||
>Date</td
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data?.user?.tier === "Pro" ? historyList : historyList?.slice(0, 3) as item, index}
|
||||
<tr
|
||||
class="{latestInfoDate(item?.date)
|
||||
? 'bg-[#F9AB00] bg-opacity-[0.1]'
|
||||
: 'odd:bg-[#27272A]'} border-b-[#09090B] {index + 1 ===
|
||||
historyList?.slice(0, 3)?.length &&
|
||||
data?.user?.tier !== 'Pro'
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
>
|
||||
{item.title}
|
||||
</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="sm:w-full m-auto mt-10">
|
||||
<div
|
||||
class="w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"
|
||||
>
|
||||
<table
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
|
||||
>
|
||||
<thead class="">
|
||||
<tr class="border-b border-[#27272A]">
|
||||
<td
|
||||
class="text-white font-semibold text-[1rem] text-start"
|
||||
>Analyst</td
|
||||
class="text-sm sm:text-[1rem] whitespace-nowrap text-start"
|
||||
>
|
||||
<td
|
||||
class="text-white font-semibold text-[1rem] text-start"
|
||||
>Rating</td
|
||||
>
|
||||
<td class="text-white font-semibold text-[1rem] text-end"
|
||||
>Date</td
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data?.user?.tier === "Pro" ? historyList : historyList?.slice(0, 3) as item, index}
|
||||
<tr
|
||||
class="{latestInfoDate(item?.date)
|
||||
? 'bg-[#F9AB00] bg-opacity-[0.1]'
|
||||
: 'odd:bg-[#27272A]'} border-b-[#09090B] {index +
|
||||
1 ===
|
||||
historyList?.slice(0, 3)?.length &&
|
||||
data?.user?.tier !== 'Pro'
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
>
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] whitespace-nowrap text-start"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<a
|
||||
href={item?.analystId !== null
|
||||
? `/analysts/${item?.analystId}`
|
||||
: "#"}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>{item?.analyst_name}
|
||||
</a>
|
||||
<span class="text-white"
|
||||
>{item?.analyst?.length > 15
|
||||
? item?.analyst?.slice(0, 15) + "..."
|
||||
: item?.analyst}</span
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<a
|
||||
href={item?.analystId !== null
|
||||
? `/analysts/${item?.analystId}`
|
||||
: "#"}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>{item?.analyst_name}
|
||||
</a>
|
||||
<span class="text-white"
|
||||
>{item?.analyst?.length > 15
|
||||
? item?.analyst?.slice(0, 15) + "..."
|
||||
: item?.analyst}</span
|
||||
>
|
||||
|
||||
<div class="flex flex-row items-center mt-1">
|
||||
{#each Array.from({ length: 5 }) as _, i}
|
||||
{#if i < Math.floor(item?.analystScore)}
|
||||
<svg
|
||||
class="w-3 h-3 text-yellow-300"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 22 20"
|
||||
>
|
||||
<path
|
||||
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-3 h-3 text-gray-300 dark:text-gray-500"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 22 20"
|
||||
>
|
||||
<path
|
||||
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<span class="ml-1 text-sm">
|
||||
({item?.analystScore !== null
|
||||
? item?.analystScore
|
||||
: 0})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] whitespace-nowrap text-center text-white"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span
|
||||
class="text-[1rem] font-medium {[
|
||||
'Strong Buy',
|
||||
'Buy',
|
||||
]?.includes(item?.rating_current)
|
||||
? 'text-[#00FC50]'
|
||||
: item?.rating_current === 'Hold'
|
||||
? 'text-[#FF7070]'
|
||||
: ['Strong Sell', 'Sell']?.includes(
|
||||
item?.rating_current,
|
||||
)
|
||||
? 'text-[#FF2F1F]'
|
||||
: ''}"
|
||||
>
|
||||
{item?.rating_current}
|
||||
</span>
|
||||
<span class="font-medium text-white"
|
||||
>{item?.action_company?.replace(
|
||||
"Initiates Coverage On",
|
||||
"Initiates",
|
||||
)}</span
|
||||
>
|
||||
<div class="flex flex-row items-center">
|
||||
{#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
|
||||
<span class="text-gray-100 font-normal"
|
||||
>${Math?.ceil(item?.adjusted_pt_prior)}</span
|
||||
>
|
||||
<div class="flex flex-row items-center mt-1">
|
||||
{#each Array.from({ length: 5 }) as _, i}
|
||||
{#if i < Math.floor(item?.analystScore)}
|
||||
<svg
|
||||
class="w-3 h-3 ml-1 mr-1 inline-block"
|
||||
class="w-3 h-3 text-yellow-300"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M4 12h16m0 0l-6-6m6 6l-6 6"
|
||||
/></svg
|
||||
fill="currentColor"
|
||||
viewBox="0 0 22 20"
|
||||
>
|
||||
<span class="text-white font-semibold"
|
||||
>${Math?.ceil(
|
||||
item?.adjusted_pt_current,
|
||||
)}</span
|
||||
>
|
||||
{:else if Math?.ceil(item?.adjusted_pt_current) !== 0}
|
||||
<span class="text-white font-semibold"
|
||||
>${Math?.ceil(
|
||||
item?.adjusted_pt_current,
|
||||
)}</span
|
||||
<path
|
||||
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-3 h-3 text-gray-300 dark:text-gray-500"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 22 20"
|
||||
>
|
||||
<path
|
||||
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{/each}
|
||||
|
||||
<td
|
||||
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="flex flex-col items-end">
|
||||
{#if latestInfoDate(item?.date)}
|
||||
<label
|
||||
class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3 mb-1"
|
||||
<span class="ml-1 text-sm">
|
||||
({item?.analystScore !== null
|
||||
? item?.analystScore
|
||||
: 0})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] whitespace-nowrap text-center text-white"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span
|
||||
class="text-[1rem] font-medium {[
|
||||
'Strong Buy',
|
||||
'Buy',
|
||||
]?.includes(item?.rating_current)
|
||||
? 'text-[#00FC50]'
|
||||
: item?.rating_current === 'Hold'
|
||||
? 'text-[#FF7070]'
|
||||
: ['Strong Sell', 'Sell']?.includes(
|
||||
item?.rating_current,
|
||||
)
|
||||
? 'text-[#FF2F1F]'
|
||||
: ''}"
|
||||
>
|
||||
{item?.rating_current}
|
||||
</span>
|
||||
<span class="font-medium text-white"
|
||||
>{item?.action_company?.replace(
|
||||
"Initiates Coverage On",
|
||||
"Initiates",
|
||||
)}</span
|
||||
>
|
||||
<div class="flex flex-row items-center">
|
||||
{#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
|
||||
<span class="text-gray-100 font-normal"
|
||||
>${Math?.ceil(item?.adjusted_pt_prior)}</span
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 ml-1 mr-1 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M4 12h16m0 0l-6-6m6 6l-6 6"
|
||||
/></svg
|
||||
>
|
||||
<span class="text-white font-semibold"
|
||||
>${Math?.ceil(item?.adjusted_pt_current)}</span
|
||||
>
|
||||
{:else if Math?.ceil(item?.adjusted_pt_current) !== 0}
|
||||
<span class="text-white font-semibold"
|
||||
>${Math?.ceil(item?.adjusted_pt_current)}</span
|
||||
>
|
||||
New
|
||||
</label>
|
||||
{/if}
|
||||
{new Date(item?.date).toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{:else if activeIdx === 1}
|
||||
<div
|
||||
class="w-full flex justify-start items-center m-auto mt-10 mb-6"
|
||||
>
|
||||
<div
|
||||
class="text-center w-fit text-gray-100 text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block sm:mr-1 flex-shrink-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#a474f6"
|
||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||
/></svg
|
||||
>
|
||||
There are no top analyst ratings available for the past 12 months
|
||||
for {$displayCompanyName}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<UpgradeToPro
|
||||
{data}
|
||||
title="Get stock forecasts from Wall Street's highest rated professionals"
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<span class="loading loading-spinner loading-md text-gray-400"
|
||||
></span>
|
||||
</label>
|
||||
<td
|
||||
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="flex flex-col items-end">
|
||||
{#if latestInfoDate(item?.date)}
|
||||
<label
|
||||
class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3 mb-1"
|
||||
>
|
||||
New
|
||||
</label>
|
||||
{/if}
|
||||
{new Date(item?.date).toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{:else if activeIdx === 1}
|
||||
<div class="w-full flex justify-start items-center m-auto mt-10 mb-6">
|
||||
<div
|
||||
class="text-center w-fit text-gray-100 text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block sm:mr-1 flex-shrink-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#a474f6"
|
||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||
/></svg
|
||||
>
|
||||
There are no top analyst ratings available for the past 12 months for
|
||||
{$displayCompanyName}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<UpgradeToPro
|
||||
{data}
|
||||
title="Get stock forecasts from Wall Street's highest rated professionals"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user