update statistics page
This commit is contained in:
MuslemRahimi
parent
a5d3ff25b3
commit
961c0d62a6
@ -1,32 +1,48 @@
|
||||
<script lang='ts'>
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let isScrolled = false;
|
||||
let isScrolled = false;
|
||||
|
||||
function handleScroll() {
|
||||
function handleScroll() {
|
||||
// Check the scroll position
|
||||
isScrolled = window.scrollY > 250;
|
||||
}
|
||||
|
||||
function handleScrollUp() {
|
||||
function handleScrollUp() {
|
||||
window.scrollTo({
|
||||
top: 0, // Scrolls to the top of the page
|
||||
top: 0, // Scrolls to the top of the page
|
||||
});
|
||||
}
|
||||
onMount(() => {
|
||||
|
||||
window?.addEventListener('scroll', handleScroll);
|
||||
}
|
||||
onMount(() => {
|
||||
window?.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
// Remove the event listener when the component is unmounted
|
||||
window?.removeEventListener('scroll', handleScroll);
|
||||
// Remove the event listener when the component is unmounted
|
||||
window?.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="{!isScrolled ? 'hidden' : ''} sm:hidden fixed z-40 bottom-8 sm:bottom-10 right-8 sm:right-16">
|
||||
<label on:click={handleScrollUp} class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-medium bg-gray-700 sm:bg-[#FFEDE5] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer">
|
||||
<svg class="sm:hidden sm:ml-4 w-6 h-6 text-white inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M19 5a1 1 0 1 0 0-2H5a1 1 0 1 0 0 2zM7.05 12.703a1 1 0 0 0 1.415 0L11 10.167V20a1 1 0 0 0 2 0v-9.833l2.536 2.536a1 1 0 0 0 1.414-1.415l-4.243-4.242a1 1 0 0 0-1.414 0L7.05 11.288a1 1 0 0 0 0 1.415"/></g></svg>
|
||||
</label>
|
||||
<div
|
||||
class="{!isScrolled
|
||||
? 'hidden'
|
||||
: ''} sm:hidden fixed z-40 bottom-8 sm:bottom-10 right-8 sm:right-16"
|
||||
>
|
||||
<label
|
||||
on:click={handleScrollUp}
|
||||
class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-medium bg-gray-700 sm:bg-[#FFEDE5] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
class="sm:hidden sm:ml-4 w-6 h-6 text-white inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><g fill="none"
|
||||
><path
|
||||
d="M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"
|
||||
/><path
|
||||
fill="currentColor"
|
||||
d="M19 5a1 1 0 1 0 0-2H5a1 1 0 1 0 0 2zM7.05 12.703a1 1 0 0 0 1.415 0L11 10.167V20a1 1 0 0 0 2 0v-9.833l2.536 2.536a1 1 0 0 0 1.414-1.415l-4.243-4.242a1 1 0 0 0-1.414 0L7.05 11.288a1 1 0 0 0 0 1.415"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
import {
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
screenWidth,
|
||||
stockTicker,
|
||||
} from "$lib/store";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import ScrollToTop from "$lib/components/ScrollToTop.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getStatistics ?? {};
|
||||
@ -59,7 +59,7 @@
|
||||
<div class="mb-6">
|
||||
{#if Object?.keys(rawData)?.length !== 0}
|
||||
<div
|
||||
class="space-y-5 xs:space-y-6 lg:grid lg:grid-cols-2 lg:space-x-10 lg:space-y-0"
|
||||
class="space-y-5 xs:space-y-6 lg:grid lg:grid-cols-3 lg:space-x-10 lg:space-y-0"
|
||||
>
|
||||
<div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
|
||||
<div
|
||||
@ -871,6 +871,226 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Dividends & Yields
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white xs:text-[1.05rem] lg:leading-normal"
|
||||
>
|
||||
{$stockTicker} does not appear to pay any dividends at this time.
|
||||
</p>
|
||||
<table class="w-full" data-test="statistics-table">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Dividend Per Share</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
>{rawData?.annualDividend !== null
|
||||
? "$" + rawData?.annualDividend?.toFixed(2)
|
||||
: "n/a"}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Dividend Yield</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
>{rawData?.dividendYield !== null
|
||||
? rawData?.dividendYield
|
||||
: "n/a"}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Dividend Growth (YoY)</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
>{rawData?.dividendGrowth !== null
|
||||
? rawData?.dividendGrowth + "%"
|
||||
: "n/a"}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Payout Ratio</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="n/a"
|
||||
>{rawData?.payoutRatio !== null
|
||||
? rawData?.payoutRatio + "%"
|
||||
: "n/a"}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Earnings Yield</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
>{rawData?.earningsYield !== null
|
||||
? rawData?.earningsYield + "%"
|
||||
: "n/a"}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>FCF Yield</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="0.578%"
|
||||
>{rawData?.freeCashFlowYield !== null
|
||||
? rawData?.freeCashFlowYield + "%"
|
||||
: "n/a"}</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/dividends`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
|
||||
>
|
||||
Dividend Details
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Analyst Forecast
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white xs:text-[1.05rem] lg:leading-normal"
|
||||
data-test="statistics-text"
|
||||
>
|
||||
{#if rawData?.priceTarget && rawData?.upside && rawData?.analystRating}
|
||||
The average price target for {$stockTicker} is ${rawData?.priceTarget},
|
||||
which is {rawData?.upside}% higher than the current price. The
|
||||
consensus rating is "{rawData?.analystRating}".
|
||||
{:else}
|
||||
Currently there are no analyst rating for {$stockTicker}.
|
||||
{/if}
|
||||
</p>
|
||||
<table class="w-full" data-test="statistics-table">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Price Target</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="$197.17"
|
||||
>{rawData?.priceTarget !== null
|
||||
? "$" + rawData?.priceTarget
|
||||
: "n/a"}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Price Target Difference</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="30.69%"
|
||||
>{rawData?.upside !== null
|
||||
? rawData?.upside + "%"
|
||||
: "n/a"}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Analyst Consensus</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="Strong Buy">{rawData?.analystRating ?? "n/a"}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Analyst Count</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="30">{rawData?.analystCounter ?? "n/a"}</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/forecast/analyst`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-lg text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
|
||||
>
|
||||
Stock Forecasts
|
||||
</a>
|
||||
</div>
|
||||
{#if rawData?.lastStockSplit && rawData?.splitType && rawData?.splitRatio}
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">
|
||||
Stock Splits
|
||||
</h2>
|
||||
<p
|
||||
class="mb-4 px-0.5 text-base leading-relaxed text-white xs:text-[1.05rem] lg:leading-normal"
|
||||
data-test="statistics-text"
|
||||
>
|
||||
The last stock split was on {rawData?.lastStockSplit} It was a
|
||||
{rawData?.splitType}
|
||||
split with a ratio of {rawData?.splitRatio}.
|
||||
</p>
|
||||
<table class="w-full" data-test="statistics-table">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Last Split Date</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="August 22, 2000">{rawData?.lastStockSplit}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Split Type</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="Forward">{rawData?.splitType}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Split Ratio</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
>{rawData?.splitRatio}</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<h2 class="mb-2 px-0.5 text-xl font-bold text-white">Scores</h2>
|
||||
<table class="w-full" data-test="statistics-table">
|
||||
<tbody
|
||||
><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Altman Z-Score</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
title="n/a">{rawData?.altmanZScore}</td
|
||||
>
|
||||
</tr><tr class="border-y border-gray-600 odd:bg-[#27272A]"
|
||||
><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
|
||||
><span>Piotroski F-Score</span>
|
||||
</td>
|
||||
<td
|
||||
class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
|
||||
>{rawData?.piotroskiScore}</td
|
||||
>
|
||||
</tr></tbody
|
||||
>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<h2
|
||||
@ -880,5 +1100,7 @@
|
||||
</h2>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user