From 6303dbee869a03c2963f51a23279bd14b2727103 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 27 Aug 2024 14:19:58 +0200
Subject: [PATCH] add more content to tickerinfo card

---
 src/lib/components/AnalystCard.svelte         |  2 +-
 src/lib/components/CryptoProfileCard.svelte   |  2 +-
 src/lib/components/DividendCard.svelte        |  2 +-
 src/lib/components/ESGCard.svelte             |  2 +-
 src/lib/components/ETFProfileCard.svelte      |  2 +-
 src/lib/components/Sidecard.svelte            |  4 +-
 src/lib/components/SimilarETFCard.svelte      |  2 +-
 src/lib/components/SimilarTickerCard.svelte   |  2 +-
 src/lib/components/StockKeyInformation.svelte |  2 +-
 src/lib/components/TickerInfoCard.svelte      | 71 ++++++++++---------
 src/lib/components/TopETFTickerHolder.svelte  |  2 +-
 src/lib/components/TopHoldingCard.svelte      |  2 +-
 src/routes/stocks/[tickerID]/+layout.svelte   |  1 +
 .../stocks/[tickerID]/stats/+page.svelte      | 68 ------------------
 14 files changed, 52 insertions(+), 112 deletions(-)

diff --git a/src/lib/components/AnalystCard.svelte b/src/lib/components/AnalystCard.svelte
index 1f330e78..4022547d 100644
--- a/src/lib/components/AnalystCard.svelte
+++ b/src/lib/components/AnalystCard.svelte
@@ -45,7 +45,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
   
   <!--Start Analyst Card -->
   <div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">  
-    <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px] -mx-1 sm:mx-0">
+    <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] -mx-1 sm:mx-0">
      
       <!--Start Content-->
       <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
diff --git a/src/lib/components/CryptoProfileCard.svelte b/src/lib/components/CryptoProfileCard.svelte
index 8d000827..f4ce9f43 100644
--- a/src/lib/components/CryptoProfileCard.svelte
+++ b/src/lib/components/CryptoProfileCard.svelte
@@ -47,7 +47,7 @@
   </script>
   
   <div class="sm:space-y-3">  
-    <div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[400px] lg:pt-0">
+    <div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
 
          <!--Start Header-->
         <div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$cryptoTicker?.toUpperCase()}.jpg`});">
diff --git a/src/lib/components/DividendCard.svelte b/src/lib/components/DividendCard.svelte
index 01cc5df8..86f46c52 100644
--- a/src/lib/components/DividendCard.svelte
+++ b/src/lib/components/DividendCard.svelte
@@ -25,7 +25,7 @@
           
           <div class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0 ? '' : 'hidden'}">  
           
-          <div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[400px]">
+          <div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
           
             <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
               <div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
diff --git a/src/lib/components/ESGCard.svelte b/src/lib/components/ESGCard.svelte
index 9d9b1f07..e20be0bf 100644
--- a/src/lib/components/ESGCard.svelte
+++ b/src/lib/components/ESGCard.svelte
@@ -50,7 +50,7 @@ $: {
 
 <!--Start ESG Card -->
 <div class="space-y-3 lg:pt-5 hidden lg:block lg:{esgScore && esgRiskRating && environmentalScore && governanceScore !== 'n/a' ? '' : 'hidden'}">  
-  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px] -mx-1 sm:mx-0">
+  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] -mx-1 sm:mx-0">
    
     <!--Start Content-->
     <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
diff --git a/src/lib/components/ETFProfileCard.svelte b/src/lib/components/ETFProfileCard.svelte
index 05a02e53..02e77313 100644
--- a/src/lib/components/ETFProfileCard.svelte
+++ b/src/lib/components/ETFProfileCard.svelte
@@ -56,7 +56,7 @@ let showFullText = false;
   </script>
   
   <div class="sm:space-y-3">  
-    <div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[400px] lg:pt-0">
+    <div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
 
          <!--Start Header-->
          <div class="lg:rounded-t-sm w-full h-[130px] bg-[#09090B] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url('{defaultImage}');">
diff --git a/src/lib/components/Sidecard.svelte b/src/lib/components/Sidecard.svelte
index e0c95679..2418e7af 100644
--- a/src/lib/components/Sidecard.svelte
+++ b/src/lib/components/Sidecard.svelte
@@ -6,7 +6,7 @@ import ESGCard from '$lib/components/ESGCard.svelte';
 import SimilarTickerCard from '$lib/components/SimilarTickerCard.svelte';
 import TopETFTickerHolder from '$lib/components/TopETFTickerHolder.svelte';
 
-
+export let data;
 export let stockDeck;
 export let lastPrice;
 export let similarstock;
@@ -18,7 +18,7 @@ export let analystRating
 
 
   
-<TickerInfoCard stockDeck={stockDeck}  />
+<TickerInfoCard data={data} stockDeck={stockDeck}  />
 
 
 <AnalystCard lastPrice={lastPrice} analystRating={analystRating} />
diff --git a/src/lib/components/SimilarETFCard.svelte b/src/lib/components/SimilarETFCard.svelte
index faeb93d0..4240a66d 100644
--- a/src/lib/components/SimilarETFCard.svelte
+++ b/src/lib/components/SimilarETFCard.svelte
@@ -26,7 +26,7 @@ export let similarTicker;
 
 <div class="space-y-3 sm:pt-5  hidden lg:block sm:{similarTicker?.length !== 0 ? '' : 'hidden'}">  
 
-<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px]">
+<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
 
   <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
     <h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 p-3">
diff --git a/src/lib/components/SimilarTickerCard.svelte b/src/lib/components/SimilarTickerCard.svelte
index be0c592e..3687a294 100644
--- a/src/lib/components/SimilarTickerCard.svelte
+++ b/src/lib/components/SimilarTickerCard.svelte
@@ -26,7 +26,7 @@ export let similarstock;
   
   <div class="space-y-3 sm:pt-5 hidden lg:block lg:{similarstock?.length !== 0 ? '' : 'hidden'}">  
   
-  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px]">
+  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
   
     <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
       <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
diff --git a/src/lib/components/StockKeyInformation.svelte b/src/lib/components/StockKeyInformation.svelte
index 1265c7ba..aa535e7d 100644
--- a/src/lib/components/StockKeyInformation.svelte
+++ b/src/lib/components/StockKeyInformation.svelte
@@ -130,7 +130,7 @@ $: {
     
     <div class="w-screen overflow-y-scroll" >
   
-      <TickerInfoCard stockDeck={data?.getStockDeck}/>
+      <TickerInfoCard data={data} stockDeck={data?.getStockDeck}/>
   
           
     </div>
diff --git a/src/lib/components/TickerInfoCard.svelte b/src/lib/components/TickerInfoCard.svelte
index 1533ff3a..689d9d98 100644
--- a/src/lib/components/TickerInfoCard.svelte
+++ b/src/lib/components/TickerInfoCard.svelte
@@ -5,7 +5,7 @@
   import { fade } from 'svelte/transition';
   
   export let stockDeck;
-
+  export let data;
 
   let info;
 
@@ -22,14 +22,9 @@
   let country = '-';
   let description = '';
   let website = '-';
-  let marketCap = '-';
-  let avgVolume = '-';
   let snippet;
-  let epsTTM = '-';
-  let peTTM = '-';
-  let sharesOutstanding = '-';
   let forwardPE = '-';
-
+  let beta = '-';
 
 
   let showFullText = false;
@@ -77,13 +72,9 @@ $: {
     country = info?.country ?? '-';
     description = info?.description ?? 'A detailed description of the company is not yet available.';
     website = info?.website;
-    marketCap = abbreviateNumber(info?.marketCap,true) ?? '-';
-    avgVolume = abbreviateNumber(info?.avgVolume) ?? '-'
     snippet= description?.slice(0, 150) + "...";
-    epsTTM = info?.eps;
-    peTTM = info?.pe;
-    sharesOutstanding = info?.sharesOutstanding;
     forwardPE = info?.forwardPE;
+    beta = info?.beta;
   }
 
 }
@@ -91,8 +82,8 @@ $: {
 
 </script>
 
-<div class="sm:space-y-3">  
-    <div class="sm:rounded-lg shadow-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[400px] lg:pt-0">
+<div class="sm:space-y-3 overflow-hidden">  
+    <div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
 
       <!--Start Header-->
       <div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});">
@@ -123,44 +114,60 @@ $: {
         <h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">Company Info</h2>
         <div class="flex justify-center items-center w-full m-auto">
           <table class="table table-sm table-compact">
-            <tbody >
-              <!-- row 1 -->
+            <tbody>
               <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
                 <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">CEO</td>
                 <td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{ceoName}</td>
                 <td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Country</td>
                 <td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{country}</td>
               </tr>
-              <!-- row 2 -->
+              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Market Cap</td>
+                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.marketCap,true)}</td>
+                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Volume</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
+              </tr>
+              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Beta</td>
+                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{beta}</td>
+                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Avg. Volume</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td>
+              </tr>
               <tr class="text-white " style="font-size: 0.75rem">
                 <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white whitespace-pre-line font-semibold whitespace-nowrap">Sector</td>
                 <td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-pre-line font-semibold">{sector}</td>
                 <td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Employees</td>
                 <td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] font-semibold">{employees}</td>
               </tr>
-              <!-- row 3 -->
               <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
                 <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Industry</td>
                 <td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{industry}</td>
                 <td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Exchange</td>
                 <td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] font-semibold">{exchange}</td>
-              </tr>
-               <!-- row 4 -->
-               <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
-                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Mkt Cap</td>
-                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{marketCap}</td>
-                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Avg. Volume</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{avgVolume}</td>
               </tr>
               <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
-                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (TTM)</td>
-                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{epsTTM}</td>
-                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (TTM)</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{peTTM}</td>
+                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td>
+                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.open}</td>
+                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Previous Close</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{data?.getStockQuote?.previousClose}</td>
+              </tr>
+              {#if $screenWidth > 640}
+              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Day's Range</td>
+                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.dayLow} - {data?.getStockQuote?.dayHigh}</td>
+                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">52-Week Range</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{data?.getStockQuote?.yearLow} - {data?.getStockQuote?.yearHigh}</td>
+              </tr>
+              {/if}
+              <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
+                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
+                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.eps}</td>
+                <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.pe}</td>
               </tr>
               <tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Shares Out.</td>
-                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(sharesOutstanding)}</td>
+                <td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
                 <td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Forward PE</td>
                 <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{forwardPE === undefined ? '-' : forwardPE}</td>
               </tr>
@@ -168,12 +175,12 @@ $: {
           </table>
         </div>
 
-        <h2 class="text-start ml-4 text-xl font-bold text-white pb-2 pt-3">
+        <h2 class="text-start sm:ml-4 text-xl font-bold text-white pb-2 pt-5 sm:pt-3">
           Description
         </h2>
 
 
-        <p class="text-gray-100 ml-2 text-sm whitespace-normal p-2">
+        <p class="text-gray-100 sm:ml-2 text-sm whitespace-normal sm:p-2">
           {#if showFullText}
           <div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}>
             {description}
diff --git a/src/lib/components/TopETFTickerHolder.svelte b/src/lib/components/TopETFTickerHolder.svelte
index 48a9ca64..acb7ce8b 100644
--- a/src/lib/components/TopETFTickerHolder.svelte
+++ b/src/lib/components/TopETFTickerHolder.svelte
@@ -22,7 +22,7 @@
       
       <div class="space-y-3 sm:pt-5 hidden lg:block lg:{topETFHolder?.length !== 0 ? '' : 'hidden'}">  
       
-      <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px]">
+      <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
       
         <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
             <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
diff --git a/src/lib/components/TopHoldingCard.svelte b/src/lib/components/TopHoldingCard.svelte
index b6f60e16..3ad95bb3 100644
--- a/src/lib/components/TopHoldingCard.svelte
+++ b/src/lib/components/TopHoldingCard.svelte
@@ -37,7 +37,7 @@ $: {
       
       <div class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}">  
       
-      <div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[400px]">
+      <div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
       
         <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
     
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index ad40b69e..a7d7ba8f 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -675,6 +675,7 @@ $: isScrolled = y > 0;
                       
                               <!--Start Company Info -->
                               <Sidecard
+                                data = {data}
                                 stockDeck = {stockDeck}
                                 lastPrice = {data?.getStockQuote?.price}
                                 analystRating ={data?.getAnalystRating}
diff --git a/src/routes/stocks/[tickerID]/stats/+page.svelte b/src/routes/stocks/[tickerID]/stats/+page.svelte
index 2ae518b4..435b0907 100644
--- a/src/routes/stocks/[tickerID]/stats/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/+page.svelte
@@ -74,29 +74,12 @@ if (progressYearPriceValue < currentPrice) {
         
 */
         
-marketCap = '-';
 
-currentPrice = '-';
-previousClose = '-';
-volume = '-';
-eps = '-';
-pe = '-';
-alpha = '-';
-beta = '-';
 
 stockQuote = data?.getStockQuote;
 quantStats = data?.getQuantStats ?? {};
 
-marketCap = abbreviateNumber(stockQuote?.marketCap);
-volume = abbreviateNumber(stockQuote?.volume);
-currentPrice = stockQuote?.price;
-previousClose = stockQuote?.previousClose;
-eps = stockQuote?.eps;
-pe = stockQuote?.pe;
 
-beta = stockQuote?.beta;
-
-alpha = quantStats[$stockTicker?.toUpperCase()]?.Alpha;
 
 /*
 updateDayRange()
@@ -256,57 +239,6 @@ updateYearRange()
         <div class="grid grid-cols-1 gap-2 mt-10">
           
              
-          
-              
-
-              <h3 class="text-start ml-2 text-lg sm:text-2xl font-bold text-white mt-5 ">
-                Company Stats
-              </h3>
-              
-        
-              <div class="flex justify-start items-center w-full m-auto overflow-x-scroll no-scrollbar">
-                <table class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 m-auto">
-                  <tbody class="">
-                    <!-- row 1 -->
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] text-white ">Mkt Cap</td>
-                      <td class="text-end text-sm sm:text-[1rem]"> ${marketCap}</td>
-                      <td class="text-end text-sm sm:text-[1rem] text-white ">Volume</td>
-                      <td class="text-end text-sm sm:text-[1rem]">{volume}</td>
-                    </tr>
-                    <!-- row 2 -->
-                    <tr class="text-white odd:bg-[#27272A] text-sm sm:text-[1rem] ">
-                      <td class="text-start text-sm sm:text-[1rem]">Price</td>
-                      <td class="text-end text-sm sm:text-[1rem]">${currentPrice}</td>
-                      <td class="text-end text-white text-sm sm:text-[1rem]">Prev. Close</td>
-                      <td class="text-end text-sm sm:text-[1rem]">${previousClose}</td>
-                    </tr>
-                    <!-- row 3 -->
-                    
-                    <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-sm sm:text-[1rem] text-white ">Alpha</td>
-                      <td class="text-end text-sm sm:text-[1rem]">
-                        {typeof alpha !== 'undefined' ? alpha : '-'}
-                      </td>
-                      <td class="text-end text-sm sm:text-[1rem] text-white">Beta</td>
-                      <td class="text-end text-sm sm:text-[1rem]">
-                        {typeof beta !== 'undefined' && !isNaN(beta) ? beta?.toFixed(2) : '-'}
-                      </td>
-                    </tr>
-                    
-
-                    <tr class="text-white font-semibold">
-                      <td class="text-start">EPS</td>
-                      <td class="text-sm text-end">{eps}</td>
-                      <td class="text-end">PE</td>
-                      <td class="text-sm text-end">{pe}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-
-           
-
 
               {#if $stockTicker in quantStats && Object.keys(quantStats[$stockTicker]).length > 0}