From 2dd9a0601c72de9686e191f3608f35baeb1a6726 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 30 Sep 2024 02:32:10 +0200
Subject: [PATCH] update insider page

---
 .../stocks/[tickerID]/insider/+page.server.ts |  4 +-
 .../stocks/[tickerID]/insider/+page.svelte    | 75 +++++++++++++++----
 .../insider/transcripts/+page.svelte          | 19 +----
 3 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/insider/+page.server.ts b/src/routes/stocks/[tickerID]/insider/+page.server.ts
index 21f15870..0217a02c 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.server.ts
+++ b/src/routes/stocks/[tickerID]/insider/+page.server.ts
@@ -57,6 +57,7 @@ export const load = async ({ locals, params }) => {
     return output;
   };
 
+  /*
   const getInsiderTradingStatistics = async () => {
     const postData = {
       ticker: params.tickerID,
@@ -76,10 +77,11 @@ export const load = async ({ locals, params }) => {
 
     return output;
   };
+  */
 
   // Make sure to return a promise
   return {
     getInsiderTrading: await getInsiderTrading(),
-    getInsiderTradingStatistics: await getInsiderTradingStatistics(),
+    //getInsiderTradingStatistics: await getInsiderTradingStatistics(),
   };
 };
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index b30858a9..d69b9054 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -8,20 +8,58 @@ import { onMount } from 'svelte';
 
   export let data;
   let isLoaded = false;
-  let statistics = data?.getInsiderTradingStatistics ?? {};
+ 
 
-  let buySellRatio = statistics?.totalBought/statistics?.totalSold
-  let buyShares = statistics?.totalBought
-  let soldShares = statistics?.totalSold
-  let buySharesPercentage = Math.floor(buyShares/(buyShares+soldShares)*100);
-  let soldSharesPercentage = 100 - buySharesPercentage;
+  let statistics = {};
 
 
+  function calculateInsiderTradingStatistics(data) {
+  const now = new Date();
+  const year = now.getFullYear();
+  const quarter = Math.floor(now.getMonth() / 3) + 1;
+
+  // Helper function to check if the transaction date is within the current quarter
+  const isInCurrentQuarter = (transactionDate) => {
+    const date = new Date(transactionDate);
+    return date.getFullYear() === year && Math.floor(date.getMonth() / 3) + 1 === quarter;
+  };
+
+  // Initialize statistics object
+  let statistics = {
+    soldShares: 0,
+    buyShares: 0,
+    buySharesPercentage: 0,
+    soldSharesPercentage: 0,
+    quarter: quarter,
+    year: year,
+  };
+
+  // Summing up bought and sold shares efficiently in a single loop
+  data.forEach(({ transactionType, securitiesTransacted, price, transactionDate }) => {
+    if (price > 0 && isInCurrentQuarter(transactionDate)) {
+      if (transactionType === "Sold") {
+        statistics.soldShares += securitiesTransacted;
+      } else if (transactionType === "Bought") {
+        statistics.buyShares += securitiesTransacted;
+      }
+    }
+  });
+
+  const totalShares = statistics.buyShares + statistics.soldShares;
+
+  if (totalShares > 0) {
+    statistics.buySharesPercentage = Math.floor((statistics.buyShares / totalShares) * 100);
+    statistics.soldSharesPercentage = 100 - statistics.buySharesPercentage;
+  }
+
+  return statistics;
+}
+
   let rawData = data?.getInsiderTrading?.sort(
     (a, b) => new Date(b?.transactionDate) - new Date(a?.transactionDate)
   );
-  let insiderTradingList = rawData?.slice(0,20)
 
+  let insiderTradingList = rawData?.slice(0,50)
 
 
   function backToTop() {
@@ -61,6 +99,9 @@ async function handleScroll() {
 
 
 onMount(() => {
+
+  statistics = calculateInsiderTradingStatistics(rawData);
+
   isLoaded = true;
    window.addEventListener('scroll', handleScroll);
       return () => {
@@ -148,7 +189,7 @@ const transactionStyles = {
                           <div class="flex flex-col items-start">
                               <span class="font-medium text-gray-200 text-sm sm:text-[1rem]">Buy/Sell</span>
                               <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
-                                {buySellRatio?.toFixed(3) }
+                                {(statistics?.buyShares/statistics?.soldShares)?.toFixed(2) }
                               </span>
                           </div>
                           <!-- Circular Progress -->
@@ -158,12 +199,12 @@ const transactionStyles = {
                                 <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
                                 <!-- Progress Circle inside a group with rotation -->
                                 <g class="origin-center -rotate-90 transform">
-                                  <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={buySellRatio>= 1 ? 0 : 100-(buySellRatio*100)?.toFixed(2)}></circle>
+                                  <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={statistics?.buyShares/statistics?.soldShares>= 1 ? 0 : 100-(statistics?.buyShares/statistics?.soldShares*100)?.toFixed(2)}></circle>
                                 </g>
                               </svg>
                               <!-- Percentage Text -->
                               <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                <span class="text-center text-white text-sm sm:text-[1rem]">{buySellRatio?.toFixed(2)}</span>
+                                <span class="text-center text-white text-sm sm:text-[1rem]">{(statistics?.buyShares/statistics?.soldShares)?.toFixed(2)}</span>
                               </div>
                             </div>
                           <!-- End Circular Progress -->
@@ -178,7 +219,7 @@ const transactionStyles = {
                               {new Intl.NumberFormat("en", {
                                 minimumFractionDigits: 0,
                                 maximumFractionDigits: 0
-                            }).format(buyShares)}
+                            }).format(statistics?.buyShares)}
                             </span>
                         </div>
                         <!-- Circular Progress -->
@@ -188,12 +229,12 @@ const transactionStyles = {
                             <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
                             <!-- Progress Circle inside a group with rotation -->
                             <g class="origin-center -rotate-90 transform">
-                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#00FC50]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-buySharesPercentage}></circle>
+                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#00FC50]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-statistics?.buySharesPercentage}></circle>
                             </g>
                           </svg>
                           <!-- Percentage Text -->
                           <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                            <span class="text-center text-white text-sm sm:text-[1rem]">{buySharesPercentage}%</span>
+                            <span class="text-center text-white text-sm sm:text-[1rem]">{statistics?.buySharesPercentage}%</span>
                           </div>
                         </div>
                         <!-- End Circular Progress -->
@@ -207,7 +248,7 @@ const transactionStyles = {
                               {new Intl.NumberFormat("en", {
                                 minimumFractionDigits: 0,
                                 maximumFractionDigits: 0
-                            }).format(soldShares)}
+                            }).format(statistics?.soldShares)}
                             </span>
                         </div>
                         <!-- Circular Progress -->
@@ -217,12 +258,12 @@ const transactionStyles = {
                             <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
                             <!-- Progress Circle inside a group with rotation -->
                             <g class="origin-center -rotate-90 transform">
-                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#EE5365]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-soldSharesPercentage}></circle>
+                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#EE5365]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-statistics?.soldSharesPercentage}></circle>
                             </g>
                           </svg>
                           <!-- Percentage Text -->
                           <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                            <span class="text-center text-white text-sm sm:text-[1rem]">{soldSharesPercentage}%</span>
+                            <span class="text-center text-white text-sm sm:text-[1rem]">{statistics?.soldSharesPercentage}%</span>
                           </div>
                         </div>
                         <!-- End Circular Progress -->
@@ -258,6 +299,7 @@ const transactionStyles = {
                             </thead>
                             <tbody>
                               {#each (data?.user?.tier === 'Pro' ? insiderTradingList : insiderTradingList?.slice(0,3)) as item, index}
+                              {#if item?.price > 0}
                               <tr class="text-white odd:bg-[#27272A] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
       
                                 <td class="text-white text-sm sm:text-[1rem] border-b border-[#09090B] whitespace-nowrap">
@@ -291,6 +333,7 @@ const transactionStyles = {
                                   </div>
                                   </td>
                               </tr>
+                              {/if}
                             {/each}
                             </tbody>
                           </table>
diff --git a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
index ff9bf6fd..b9f12704 100644
--- a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
@@ -1,15 +1,11 @@
 <script lang='ts'>
-  import { stockTicker, getCache, setCache, displayCompanyName, screenWidth, numberOfUnreadNotification } from '$lib/store';
-  import { page } from '$app/stores';
+  import { stockTicker, getCache, setCache, displayCompanyName, numberOfUnreadNotification } from '$lib/store';
     
   export let data;
   
   let chats = data?.getTranscripts?.chat ?? [];
   let date = data?.getTranscripts?.date;
-  
-  let notDestroyed = true;
-  
-  let charNumber = 20;
+    
   let displayQuarter = data?.quarter;
   let displayYear = data?.year;
   let quarter = displayQuarter;
@@ -62,17 +58,6 @@
   
     };
   
-  
-  $: {
-      if($screenWidth < 640)
-      {
-      charNumber = 10;
-      }
-      else {
-      charNumber =20;
-      }
-  }
-  
 
   </script>