From ac94deff5d643a3405004efacea5bb6d83e0bce6 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 20 Dec 2024 20:25:46 +0100
Subject: [PATCH] add past earnings volatility

---
 src/lib/components/NextEarnings.svelte        |  25 +-
 src/lib/components/PastEarnings.svelte        | 456 ++++++++++++++++++
 .../stocks/[tickerID]/metrics/+page.svelte    |   6 +-
 3 files changed, 483 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/PastEarnings.svelte

diff --git a/src/lib/components/NextEarnings.svelte b/src/lib/components/NextEarnings.svelte
index 77274ca1..2f2bdc89 100644
--- a/src/lib/components/NextEarnings.svelte
+++ b/src/lib/components/NextEarnings.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { stockTicker, displayCompanyName } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
+  import PastEarnings from "$lib/components/PastEarnings.svelte";
   export let data;
 
   let rawData = {};
@@ -20,7 +21,7 @@
 
   $: {
     if ($stockTicker && typeof window !== "undefined") {
-      rawData = data?.getNextEarnings;
+      rawData = data?.getNextEarnings?.next;
       epsRatio =
         rawData?.epsPrior !== 0
           ? ((rawData?.epsEst / rawData?.epsPrior - 1) * 100)?.toFixed(2)
@@ -94,3 +95,25 @@
     </div>
   </div>
 {/if}
+
+{#if Object?.keys(rawData)?.length !== 0}
+  <div class="space-y-3 overflow-hidden mt-5">
+    <!--Start Content-->
+    <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
+      <div class="flex flex-col items-center w-full mb-3">
+        <div class="flex flex-row justify-start mr-auto items-center">
+          <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
+          <div class="flex flex-row items-center">
+            <h3
+              class="mr-1 flex flex-row items-center text-white text-2xl font-bold"
+            >
+              Past Earnings Volatility
+            </h3>
+          </div>
+        </div>
+      </div>
+
+     <PastEarnings userTier={data?.user?.tier} rawData={data?.getNextEarnings?.past} />
+    </div>
+  </div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/PastEarnings.svelte b/src/lib/components/PastEarnings.svelte
new file mode 100644
index 00000000..1de85a24
--- /dev/null
+++ b/src/lib/components/PastEarnings.svelte
@@ -0,0 +1,456 @@
+<script lang="ts">
+    import {  stockTicker } from "$lib/store";
+    import { abbreviateNumber } from "$lib/utils";
+
+    export let userTier;
+    export let rawData;
+  
+    let isLoaded = false;
+  
+    let xData = [];
+    
+    let tableRevenue = [];
+    let tableRevenueEst = [];
+    let tableRevenueSurprise = [];
+    let tableEPS = [];
+    let tableEPSEst = [];
+    let tableEPSSurprise = [];
+    let tableVolatility = [];
+
+  let averageVolatility = 0;
+  let positiveRevenueSurprisePercentage = 0;
+  let positiveEpsSurprisePercentage = 0;
+
+  function prepareDataset() {
+
+    xData = rawData?.map(({ year, quarter }) => {
+    const shortYear = String(year).slice(2); // Get the last two digits of the year
+        return `${quarter} '${shortYear}`;
+    });
+
+    tableRevenue = rawData?.map(({ revenue }) =>revenue);
+    tableRevenueEst = rawData?.map(({ revenueEst }) =>revenueEst);
+    tableRevenueSurprise = rawData?.map(({ revenueSurprisePercent }) =>revenueSurprisePercent);
+    
+    tableEPS = rawData?.map(({ eps }) =>eps);
+    tableEPSEst = rawData?.map(({ epsEst }) =>epsEst);
+    tableEPSSurprise = rawData?.map(({ epsSurprisePercent }) =>epsSurprisePercent);
+
+    tableVolatility = rawData?.map(({ volatility }) =>volatility);
+
+    averageVolatility = rawData?.length > 0
+  ? rawData.reduce((sum, item) => sum + (item?.volatility || 0), 0) / rawData?.length
+  : 0;
+
+
+const countPositiveRevenueSurprise = rawData?.filter(data => data.revenueSurprisePercent > 0)?.length;
+const countPositiveEpsSurprise = rawData.filter(data => data.epsSurprisePercent > 0).length;
+
+const totalDataCount = rawData?.length;
+
+positiveRevenueSurprisePercentage = Math.ceil((countPositiveRevenueSurprise / totalDataCount) * 100);
+positiveEpsSurprisePercentage = Math.ceil((countPositiveEpsSurprise / totalDataCount) * 100);
+
+
+
+}
+
+  
+    $: {
+      if ($stockTicker && typeof window !== "undefined") {
+        isLoaded = false;
+        prepareDataset()
+        isLoaded = true;
+      }
+    }
+  </script>
+  
+  <section class="overflow-hidden text-white h-full pb-8 sm:pb-2">
+    <main class="overflow-hidden">
+      <div class="w-full m-auto">
+  
+        {#if isLoaded}
+          {#if rawData?.length !== 0}
+          <span class="">
+            The average price volatility over this 3-day period is
+            {#if userTier !== 'Pro'}
+            ... Unlock content with
+            <a
+              class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
+              href="/pricing"
+              >Pro Subscription <svg
+                class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                ><path
+                  fill="currentColor"
+                  d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                /></svg
+              ></a
+            >
+            {:else}
+            <span class="font-bold">±{averageVolatility?.toFixed(2)}%</span>.
+            During this period, the reported revenue exceeded expectations <span class="font-bold">{positiveRevenueSurprisePercentage}%</span> of the time & the reported EPS surpassed analyst estimates <span class="font-bold">{positiveEpsSurprisePercentage}%</span> of the time.
+            {/if}
+          </span>
+            <div
+              class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-3 m-auto overflow-x-scroll pr-5 sm:pr-0"
+            >
+              <table
+                class="table table-sm table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
+              >
+                <thead class="">
+                  <tr class="">
+                    <th
+                      class="bg-primary border-b border-[#000] text-white font-semibold text-sm text-start"
+                      >Date</th
+                    >
+                    {#each xData as item}
+                      <td
+                        class="z-20 bg-primary border-b border-[#000] text-white font-semibold text-sm text-end bg-[#09090B]"
+                        >{item}</td
+                      >
+                    {/each}
+                  </tr>
+                </thead>
+                <tbody class="shadow-md">
+
+                    <tr class="bg-primary border-b-[#27272A]">
+                        <th
+                          class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                        >
+                          Reported Revenue
+                        </th>
+                        {#each tableRevenue as item, index}
+                        <td class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#09090B]">
+                          {#if index !== 0}
+                            {#if userTier !== "Pro"}
+                              <a class="inline-block ml-0.5 text-white whitespace-nowrap" href="/pricing">
+                                Pro
+                                <svg
+                                  class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    fill="currentColor"
+                                    d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                                  />
+                                </svg>
+                              </a>
+                            {:else}
+                              {#if item !== undefined && item !== null}
+                                <span>{abbreviateNumber(item)}</span>
+                              {:else}
+                                n/a
+                              {/if}
+                            {/if}
+                          {:else}
+                            {abbreviateNumber(item)}
+                          {/if}
+                        </td>
+                      {/each}
+
+                      </tr>
+
+                      <tr class="bg-primary border-b-[#27272A]">
+                        <th
+                          class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                        >
+                          Est. Revenue
+                        </th>
+                        {#each tableRevenueEst as item, index}
+                        <td class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#09090B]">
+                          {#if index !== 0}
+                            {#if userTier !== "Pro"}
+                              <a class="inline-block ml-0.5 text-white whitespace-nowrap" href="/pricing">
+                                Pro
+                                <svg
+                                  class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    fill="currentColor"
+                                    d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                                  />
+                                </svg>
+                              </a>
+                            {:else}
+                              {#if item !== undefined && item !== null}
+                                <span>{abbreviateNumber(item)}</span>
+                              {:else}
+                                n/a
+                              {/if}
+                            {/if}
+                          {:else}
+                            {abbreviateNumber(item)}
+                          {/if}
+                        </td>
+                      {/each}
+                      </tr>
+
+                    <tr class="bg-primary border-b-[#27272A]">
+                        <th
+                          class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                        >
+                          Revenue Surprise
+                        </th>
+                        {#each tableRevenueSurprise as item, index}
+                        <td class="text-white text-sm sm:text-[1rem] text-end font-semibold bg-[#09090B]">
+                          {#if index !== 0}
+                            {#if userTier !== "Pro"}
+                              <a class="inline-block ml-0.5 text-white whitespace-nowrap font-normal" href="/pricing">
+                                Pro
+                                <svg
+                                  class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    fill="currentColor"
+                                    d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                                  />
+                                </svg>
+                              </a>
+                            {:else}
+                              {#if item !== undefined && item !== null}
+                              <span
+                                class={item > 0
+                                  ? "text-[#00FC50] before:content-['+']"
+                                  : item < 0
+                                    ? "text-[#FF2F1F]"
+                                    : ""}
+                              >
+                                {abbreviateNumber(item)}%
+                              </span>
+                              {:else}
+                                n/a
+                              {/if}
+                            {/if}
+                          {:else}
+                          <span
+                                class={item > 0
+                                  ? "text-[#00FC50] before:content-['+']"
+                                  : item < 0
+                                    ? "text-[#FF2F1F]"
+                                    : ""}
+                              >
+                                {abbreviateNumber(item)}%
+                              </span>
+                          {/if}
+                        </td>
+                      {/each}
+                      </tr>
+  
+                      
+                      <tr class="bg-primary border-b-[#27272A]">
+                        <th
+                          class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                        >
+                          Reported EPS
+                        </th>
+                        {#each tableEPS as item, index}
+                        <td class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#09090B]">
+                          {#if index !== 0}
+                            {#if userTier !== "Pro"}
+                              <a class="inline-block ml-0.5 text-white whitespace-nowrap" href="/pricing">
+                                Pro
+                                <svg
+                                  class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    fill="currentColor"
+                                    d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                                  />
+                                </svg>
+                              </a>
+                            {:else}
+                              {#if item !== undefined && item !== null}
+                                <span>{abbreviateNumber(item)}</span>
+                              {:else}
+                                n/a
+                              {/if}
+                            {/if}
+                          {:else}
+                            {abbreviateNumber(item)}
+                          {/if}
+                        </td>
+                        {/each}
+                      </tr>
+
+
+                      <tr class="bg-primary border-b-[#27272A]">
+                        <th
+                          class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                        >
+                          Est. EPS
+                        </th>
+                        {#each tableEPSEst as item, index}
+                        <td class="text-white text-sm sm:text-[1rem] text-end font-medium bg-[#09090B]">
+                          {#if index !== 0}
+                            {#if userTier !== "Pro"}
+                              <a class="inline-block ml-0.5 text-white whitespace-nowrap" href="/pricing">
+                                Pro
+                                <svg
+                                  class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    fill="currentColor"
+                                    d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                                  />
+                                </svg>
+                              </a>
+                            {:else}
+                              {#if item !== undefined && item !== null}
+                                <span>{abbreviateNumber(item)}</span>
+                              {:else}
+                                n/a
+                              {/if}
+                            {/if}
+                          {:else}
+                            {abbreviateNumber(item)}
+                          {/if}
+                        </td>
+                      {/each}
+                      </tr>
+
+
+                      <tr class="bg-primary border-b-[#27272A]">
+                        <th
+                          class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                        >
+                          EPS Surprise
+                        </th>
+                        {#each tableEPSSurprise as item, index}
+                        <td class="text-white text-sm sm:text-[1rem] text-end font-semibold bg-[#09090B]">
+                          {#if index !== 0}
+                            {#if userTier !== "Pro"}
+                              <a class="inline-block ml-0.5 text-white whitespace-nowrap font-normal" href="/pricing">
+                                Pro
+                                <svg
+                                  class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    fill="currentColor"
+                                    d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                                  />
+                                </svg>
+                              </a>
+                            {:else}
+                              {#if item !== undefined && item !== null}
+                              <span
+                                class={item > 0
+                                  ? "text-[#00FC50] before:content-['+']"
+                                  : item < 0
+                                    ? "text-[#FF2F1F]"
+                                    : ""}
+                              >
+                                {abbreviateNumber(item)}%
+                              </span>
+                              {:else}
+                                n/a
+                              {/if}
+                            {/if}
+                          {:else}
+                          <span
+                                class={item > 0
+                                  ? "text-[#00FC50] before:content-['+']"
+                                  : item < 0
+                                    ? "text-[#FF2F1F]"
+                                    : ""}
+                              >
+                                {abbreviateNumber(item)}%
+                              </span>
+                          {/if}
+                        </td>
+                      {/each}
+                      </tr>
+
+                      <tr class="bg-primary border-b-[#27272A]">
+                        <th
+                          class="bg-primary whitespace-nowrap text-sm sm:text-[1rem] text-white text-start font-medium border-b border-[#27272A]"
+                        >
+                          Volatility
+                        </th>
+                        {#each tableVolatility as item, index}
+                        <td class="text-white text-sm sm:text-[1rem] text-end font-semibold bg-[#09090B]">
+                          {#if index !== 0}
+                            {#if userTier !== "Pro"}
+                              <a class="inline-block ml-0.5 text-white whitespace-nowrap font-normal" href="/pricing">
+                                Pro
+                                <svg
+                                  class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    fill="currentColor"
+                                    d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                                  />
+                                </svg>
+                              </a>
+                            {:else}
+                              {#if item !== undefined && item !== null}
+                              ±{abbreviateNumber(item)}%
+                              {:else}
+                                n/a
+                              {/if}
+                            {/if}
+                          {:else}
+                          ±{abbreviateNumber(item)}%
+                          {/if}
+                        </td>
+                      {/each}
+                      </tr>
+               
+  
+               
+                </tbody>
+              </table>
+            </div>
+  
+        
+        
+          {/if}
+        {:else}
+          <div class="flex justify-center items-center h-80">
+            <div class="relative">
+              <label
+                class="bg-secondary rounded-md 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>
+            </div>
+          </div>
+        {/if}
+  
+       
+      </div>
+    </main>
+  </section>
+  
+  <style>
+    .app {
+      height: 300px;
+      max-width: 100%; /* Ensure chart width doesn't exceed the container */
+    }
+  
+    @media (max-width: 640px) {
+      .app {
+        height: 210px;
+      }
+    }
+  
+    .chart {
+      width: 100%;
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/src/routes/stocks/[tickerID]/metrics/+page.svelte b/src/routes/stocks/[tickerID]/metrics/+page.svelte
index dc69b96f..81e8b14b 100644
--- a/src/routes/stocks/[tickerID]/metrics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+page.svelte
@@ -144,7 +144,7 @@
                       <td
                         class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]"
                       >
-                        {value !== null ? abbreviateNumber(value) : "-"}
+                        {value !== null && value !== undefined ? abbreviateNumber(value) : "n/a"}
                       </td>
                     {/each}
                   </tr>
@@ -162,9 +162,9 @@
                             ? 'text-[#FF2F1F]'
                             : 'text-white'} font-medium border-b border-[#09090B]"
                       >
-                        {growthValue > 0 ? "+" : ""}{growthValue !== null
+                        {growthValue > 0 ? "+" : ""}{growthValue !== null && growthValue !== undefined
                           ? growthValue?.toFixed(2) + "%"
-                          : "-"}
+                          : "n/a"}
                       </td>
                     {/each}
                   </tr>