From 961c0d62a6a642f06901557bdf2e4d48e5615471 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 30 Oct 2024 18:45:20 +0100
Subject: [PATCH] update statistics page

---
 src/lib/components/ScrollToTop.svelte         |  54 +++--
 .../stocks/[tickerID]/statistics/+page.svelte | 226 +++++++++++++++++-
 2 files changed, 259 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/ScrollToTop.svelte b/src/lib/components/ScrollToTop.svelte
index 7836b5c3..0e9fd09d 100644
--- a/src/lib/components/ScrollToTop.svelte
+++ b/src/lib/components/ScrollToTop.svelte
@@ -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>
diff --git a/src/routes/stocks/[tickerID]/statistics/+page.svelte b/src/routes/stocks/[tickerID]/statistics/+page.svelte
index ad96901b..ef7d7335 100644
--- a/src/routes/stocks/[tickerID]/statistics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+page.svelte
@@ -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 &amp; 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>