update dashboard
This commit is contained in:
MuslemRahimi
parent
3cd8a82f31
commit
d16e12e719
@ -12,17 +12,6 @@
|
|||||||
|
|
||||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||||
|
|
||||||
/*
|
|
||||||
import { Chart } from 'svelte-echarts'
|
|
||||||
import { init, use } from 'echarts/core'
|
|
||||||
import { BarChart } from 'echarts/charts'
|
|
||||||
import { GridComponent } from 'echarts/components'
|
|
||||||
import { CanvasRenderer } from 'echarts/renderers'
|
|
||||||
|
|
||||||
// now with tree-shaking
|
|
||||||
use([BarChart, GridComponent, CanvasRenderer])
|
|
||||||
*/
|
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let isLoaded = false;
|
let isLoaded = false;
|
||||||
let optionsMode = "premium";
|
let optionsMode = "premium";
|
||||||
@ -82,6 +71,7 @@
|
|||||||
let gainersList = data?.getDashboard?.marketMovers?.gainers || [];
|
let gainersList = data?.getDashboard?.marketMovers?.gainers || [];
|
||||||
let losersList = data?.getDashboard?.marketMovers?.losers || [];
|
let losersList = data?.getDashboard?.marketMovers?.losers || [];
|
||||||
let marketStatus = data?.getDashboard?.marketStatus ?? 0;
|
let marketStatus = data?.getDashboard?.marketStatus ?? 0;
|
||||||
|
let analystReport = data?.getDashboard?.analystReport || {};
|
||||||
|
|
||||||
function changeTable(state) {
|
function changeTable(state) {
|
||||||
optionsMode = state;
|
optionsMode = state;
|
||||||
@ -559,78 +549,99 @@
|
|||||||
>
|
>
|
||||||
<Card.Header class="flex flex-row items-center">
|
<Card.Header class="flex flex-row items-center">
|
||||||
<div class="flex flex-col items-start w-full">
|
<div class="flex flex-col items-start w-full">
|
||||||
<div class="flex flex-row w-full items-center">
|
<div
|
||||||
|
class="whitespace-nowrap flex flex-row w-full items-center"
|
||||||
|
>
|
||||||
<Card.Title
|
<Card.Title
|
||||||
class="text-xl sm:text-2xl tex-white font-semibold"
|
class="text-xl sm:text-2xl tex-white font-semibold"
|
||||||
>Dividend Announcement <span class="text-sm text-gray-300"
|
>AI Analyst report
|
||||||
>(NYSE Time)</span
|
</Card.Title>
|
||||||
></Card.Title
|
{#if analystReport?.date}
|
||||||
>
|
<label
|
||||||
|
class="text-black bg-[#fff] inline-block ml-3 mt-1 font-semibold not-italic text-xs rounded px-2 py-0.5"
|
||||||
|
>New</label
|
||||||
|
>
|
||||||
|
|
||||||
|
<label
|
||||||
|
class="hidden sm:inline-block text-white text-sm italic ml-auto"
|
||||||
|
>Updated {analystReport?.date}</label
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
{#if analystReport?.date}
|
||||||
|
<label class="sm:hidden text-white text-xs italic mt-2"
|
||||||
|
>Updated {analystReport?.date}</label
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
<Card.Content>
|
<Card.Content>
|
||||||
{#if data?.getDashboard?.recentDividends?.length !== 0}
|
{#if Object?.keys(analystReport)?.length > 0}
|
||||||
<ul style="padding-left: 5px;">
|
{analystReport?.insight}
|
||||||
{#each data?.getDashboard?.recentDividends as item}
|
|
||||||
<strong>{item?.name}</strong> (<HoverStockChart
|
|
||||||
symbol={item?.symbol}
|
|
||||||
/>) has announced its upcoming dividend details as of {convertTimestamp(
|
|
||||||
item?.updated,
|
|
||||||
)}:
|
|
||||||
|
|
||||||
<li
|
<div class="text-white mt-4">
|
||||||
style="color: #fff; line-height: 22px; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
According to 29 analyst ratings, the average rating for <HoverStockChart
|
||||||
|
symbol={analystReport?.symbol}
|
||||||
|
/>
|
||||||
|
stock is "{analystReport?.consensusRating}" The 12-month stock
|
||||||
|
price forecast is ${analystReport?.medianPriceTarget}, which
|
||||||
|
is an {analystReport?.medianPriceChange > 0
|
||||||
|
? "increase"
|
||||||
|
: "decreas"} of {analystReport?.medianPriceChange}% from the
|
||||||
|
latest price.
|
||||||
|
</div>
|
||||||
|
<table
|
||||||
|
class="w-full text-right text-tiny text-white xs:text-sm sm:text-base mt-5"
|
||||||
|
>
|
||||||
|
<thead
|
||||||
|
><tr
|
||||||
|
class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
|
||||||
|
><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 text-sm sm:text-[1rem]"
|
||||||
|
><td class="py-[3px] text-left lg:py-0.5">Price</td>
|
||||||
|
<td>${analystReport?.lowPriceTarget}</td>
|
||||||
|
<td>${analystReport?.avgPriceTarget}</td>
|
||||||
|
<td>${analystReport?.medianPriceTarget}</td>
|
||||||
|
<td>${analystReport?.highPriceTarget}</td></tr
|
||||||
>
|
>
|
||||||
<span class="font-bold">Dividend:</span> ${item?.dividend}
|
<tr class="text-sm sm:text-[1rem]"
|
||||||
per share ({item?.dividend / item?.dividendPrior - 1 > 0
|
><td class="py-[3px] text-left lg:py-0.5">Change</td>
|
||||||
? "+"
|
<td
|
||||||
: ""}{(
|
class={analystReport?.lowPriceChange > 0
|
||||||
(item?.dividend / item?.dividendPrior - 1) *
|
? "before:content-['+'] text-[#00FC50]"
|
||||||
100
|
: "text-[#FF2F1F]"}
|
||||||
)?.toFixed(2)}% YoY)
|
>{analystReport?.lowPriceChange}%</td
|
||||||
</li>
|
>
|
||||||
<li
|
<td
|
||||||
style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
class={analystReport?.avgPriceChange > 0
|
||||||
>
|
? "before:content-['+'] text-[#00FC50]"
|
||||||
<span class="font-bold">Dividend Yield:</span>
|
: "text-[#FF2F1F]"}
|
||||||
{item?.dividendYield?.toFixed(2)}%
|
>{analystReport?.avgPriceChange}%</td
|
||||||
</li>
|
>
|
||||||
<li
|
<td
|
||||||
style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
class={analystReport?.medianPriceChange > 0
|
||||||
>
|
? "before:content-['+'] text-[#00FC50]"
|
||||||
<span class="font-bold">Ex-Dividend Date:</span>
|
: "text-[#FF2F1F]"}
|
||||||
{new Date(item?.exDividendDate)?.toLocaleString("en-US", {
|
>{analystReport?.medianPriceChange}%</td
|
||||||
month: "short",
|
>
|
||||||
day: "numeric",
|
<td
|
||||||
year: "numeric",
|
class={analystReport?.highPriceChange > 0
|
||||||
daySuffix: "2-digit",
|
? "before:content-['+'] text-[#00FC50]"
|
||||||
})}
|
: "text-[#FF2F1F]"}
|
||||||
</li>
|
>{analystReport?.highPriceChange}%</td
|
||||||
<li
|
></tr
|
||||||
style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
></tbody
|
||||||
>
|
>
|
||||||
<span class="font-bold">Payable Date:</span>
|
</table>
|
||||||
{new Date(item?.payableDate)?.toLocaleString("en-US", {
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
year: "numeric",
|
|
||||||
daySuffix: "2-digit",
|
|
||||||
})}
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 30px; list-style-type: disc;"
|
|
||||||
>
|
|
||||||
<span class="font-bold">Record Date:</span>
|
|
||||||
{new Date(item?.recordDate)?.toLocaleString("en-US", {
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
year: "numeric",
|
|
||||||
daySuffix: "2-digit",
|
|
||||||
})}
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<div
|
||||||
class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-gray-600 text-[1rem]"
|
class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-gray-600 text-[1rem]"
|
||||||
@ -644,7 +655,7 @@
|
|||||||
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"
|
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
|
/></svg
|
||||||
>
|
>
|
||||||
Currently, there are no dividend announcement reports available.
|
Currently, there are no new analyst reports available.
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
|
|||||||
@ -606,7 +606,7 @@
|
|||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<h2 class="mb-1 text-xl font-bold">Latest Analyst Report</h2>
|
<h2 class="mb-1 text-xl font-bold">AI Analyst Report</h2>
|
||||||
{#if latestInfoDate(data?.getAnalystInsight?.date)}
|
{#if latestInfoDate(data?.getAnalystInsight?.date)}
|
||||||
<label
|
<label
|
||||||
class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
|
class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user