ui fixes
This commit is contained in:
parent
b36cb888d9
commit
577b391c79
@ -114,121 +114,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href={`/stocks/${$stockTicker}/forecast/analyst`} class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"> Analyst Ratings </a>
|
||||
<a href={`/stocks/${$stockTicker}/forecast/analyst`} class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100">
|
||||
Analyst Ratings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Analyst Card-->
|
||||
|
||||
<!--Start Mobile Analyst Card-->
|
||||
<!--
|
||||
<div class="space-y-3 sm:pt-5 sm:hidden">
|
||||
<div class="bg-[#000] h-auto w-screen">
|
||||
<div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
|
||||
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">Analyst Rating</h2>
|
||||
|
||||
<div class="flex flex-col items-center mt-10 w-full">
|
||||
<div class="flex flex-row justify-between items-center w-full mb-5">
|
||||
<div class="flex flex-col items-start ml-3">
|
||||
<span class="text-white text-lg font-medium inline-block"> Recommendation: </span>
|
||||
<span class="text-white text-2xl font-medium inline-block">
|
||||
{#if consensusRating === "Buy" || consensusRating === "Strong Buy"}
|
||||
<span class="text-start font-medium text-[#37C97D] text-2xl">
|
||||
{consensusRating}
|
||||
</span>
|
||||
{:else if consensusRating === "Sell" || consensusRating === "Strong Sell"}
|
||||
<span class="text-start font-medium text-[#FF2F1F] text-2xl">
|
||||
{consensusRating}
|
||||
</span>
|
||||
{:else if consensusRating === "Hold"}
|
||||
<span class="text-start font-medium text-[#FF2F1F] text-2xl">
|
||||
{consensusRating ?? "n/a"}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-start font-medium text-white text-2xl"> n/a </span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-start mr-5">
|
||||
<span class="text-white ml-auto text-lg font-medium inline-block"> Price Target: </span>
|
||||
<span class="text-white ml-auto text-2xl font-medium inline-block">
|
||||
{priceTarget}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if changesPercentage < 0}
|
||||
<div class="text-white p-4 text-center">
|
||||
The Stock Price has a downside of
|
||||
<span class="text-[#FF2F1F] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
|
||||
based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
|
||||
</div>
|
||||
{:else if changesPercentage >= 0}
|
||||
<div class="text-white p-4 text-center">
|
||||
The Stock Price has an upside of
|
||||
<span class="text-[#37C97D] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
|
||||
based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if numOfAnalyst !== 0}
|
||||
<div class="mt-5 flex flex-col m-auto items-center rounded-lg w-full mb-16 p-3">
|
||||
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
|
||||
<div class="flex flex-col -mt-2 w-full">
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Buy </span>
|
||||
<span class="text-white text-md font-medium ml-auto">
|
||||
{buyCount}%
|
||||
</span>
|
||||
</div>
|
||||
<progress
|
||||
class="progress w-full {buyCount >= 50 ? '[&::-webkit-progress-value]:bg-[#37C97D] [&::-moz-progress-bar]:bg-[#37C97D]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
|
||||
value={buyCount}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
|
||||
<div class="flex flex-col -mt-2 w-full">
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Hold </span>
|
||||
<span class="text-white text-md font-medium ml-auto">
|
||||
{holdCount}%
|
||||
</span>
|
||||
</div>
|
||||
<progress
|
||||
class="progress w-full {holdCount >= 50 ? '[&::-webkit-progress-value]:bg-[#37C97D] [&::-moz-progress-bar]:bg-[#37C97D]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
|
||||
value={holdCount}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
|
||||
<div class="flex flex-col -mt-2 w-full">
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Sell </span>
|
||||
<span class="text-white text-md font-medium ml-auto">
|
||||
{sellCount}
|
||||
</span>
|
||||
</div>
|
||||
<progress
|
||||
class="progress w-full {sellCount >= 50 ? '[&::-webkit-progress-value]:bg-[#37C97D] [&::-moz-progress-bar]:bg-[#37C97D]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
|
||||
value={sellCount}
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class=" mt-20 flex justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!--End Mobile Analyst Card-->
|
||||
|
||||
@ -11,7 +11,8 @@ export let stockDeck;
|
||||
export let lastPrice;
|
||||
export let similarstock;
|
||||
export let topETFHolder;
|
||||
export let analystRating
|
||||
export let analystRating;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -1034,14 +1034,14 @@ $: {
|
||||
|
||||
|
||||
|
||||
<td class="text-white text-end">
|
||||
<td class="text-white text-end text-sm sm:text-[1rem]">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(item?.volume)}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-end">
|
||||
<td class="text-white text-end text-sm sm:text-[1rem]">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
|
||||
@ -1034,14 +1034,14 @@ $: {
|
||||
|
||||
|
||||
|
||||
<td class="text-white text-end">
|
||||
<td class="text-white text-end text-sm sm:text-[1rem]">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(item?.volume)}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-end">
|
||||
<td class="text-white text-end text-sm sm:text-[1rem]">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user