From b9ab0ca632857f8d6bfc3cb21a8387ff6074bb4e Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 25 Oct 2024 22:30:36 +0200
Subject: [PATCH] update financial page

---
 src/lib/components/TopETFTickerHolder.svelte  | 319 ++++++++++--------
 .../financials/balance-sheet/+page.svelte     |   2 +-
 .../financials/cash-flow/+page.svelte         |   7 +-
 .../[tickerID]/financials/ratios/+page.svelte |   7 +-
 .../[tickerID]/metrics/[slug]/+page.svelte    | 134 ++++----
 .../stocks/[tickerID]/statistics/+page.svelte |  37 +-
 6 files changed, 249 insertions(+), 257 deletions(-)

diff --git a/src/lib/components/TopETFTickerHolder.svelte b/src/lib/components/TopETFTickerHolder.svelte
index 53fac901..6c7a7181 100644
--- a/src/lib/components/TopETFTickerHolder.svelte
+++ b/src/lib/components/TopETFTickerHolder.svelte
@@ -1,174 +1,203 @@
 <script lang="ts">
+  import { stockTicker, screenWidth } from "$lib/store";
+  import { goto } from "$app/navigation";
+  import { abbreviateNumber } from "$lib/utils";
 
-    import {stockTicker, screenWidth} from '$lib/store';
-    import { goto } from '$app/navigation';
-    import { abbreviateNumber } from '$lib/utils';
-    
-    
-    export let topETFHolder;
-      
-    
-      async function etfSelector(state)
-      {
-        //window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
-        goto("/etf/"+state+"/")
-      }
-      
-      
-      
-    
-      </script>
-      <!--Start ETF Holder Card -->
-      
-      <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-[420px] xl:w-[450px]">
-      
-        <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">
-              Top ETFs Holder
-            </h2>
-            <p class="text-white mb-5 ml-4 mr-1">
-              ETFs with the largest estimated holdings in {$stockTicker}.
-            </p>
-            
-          {#if topETFHolder?.length !== 0} 
-    
-          
-      
-          <div class="flex justify-start items-center w-full m-auto ">
-            <table class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 m-auto">
-              <thead>
-                <tr >
-                  <th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B]">Company Name</th>
-                  <th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">Total Assets</th>
-                  <th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]">% of Fund</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each topETFHolder as item, index}
-                <tr class="sm:hover:text-white text-blue-400 sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
-                  {#if index <=6}
-                 
-                    <td >
-                      <a href={"/etf/"+item?.symbol} class="flex flex-row items-center">
+  export let topETFHolder;
+
+  async function etfSelector(state) {
+    //window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
+    goto("/etf/" + state + "/");
+  }
+</script>
+
+<!--Start ETF Holder Card -->
+
+<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-[420px] xl:w-[450px]"
+  >
+    <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">
+        Top ETFs Holder
+      </h2>
+      <p class="text-white mb-5 ml-4 mr-1">
+        ETFs with the largest estimated holdings in {$stockTicker}.
+      </p>
+
+      {#if topETFHolder?.length !== 0}
+        <div class="flex justify-start items-center w-full m-auto">
+          <table
+            class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 m-auto"
+          >
+            <thead>
+              <tr>
+                <th
+                  class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B]"
+                  >Company Name</th
+                >
+                <th
+                  class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]"
+                  >Total Assets</th
+                >
+                <th
+                  class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B]"
+                  >% of Fund</th
+                >
+              </tr>
+            </thead>
+            <tbody>
+              {#each topETFHolder as item, index}
+                <tr
+                  class="sm:hover:text-white text-blue-400 sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]"
+                >
+                  {#if index <= 6}
+                    <td>
+                      <label
+                        on:click={() => goto("/etf/" + item?.symbol)}
+                        class="flex flex-row items-center cursor-pointer"
+                      >
                         <div class="flex flex-col w-full">
-                          <span class="text-sm sm:text-[1rem]">{item?.symbol}</span>
+                          <span class="text-sm sm:text-[1rem]"
+                            >{item?.symbol}</span
+                          >
                           <span class="text-white text-sm">
-                            {#if typeof item?.name !== 'undefined'}
-                              {item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
+                            {#if typeof item?.name !== "undefined"}
+                              {item?.name?.length > 20
+                                ? item?.name?.slice(0, 20) + "..."
+                                : item?.name}
                             {:else}
                               n/a
                             {/if}
                           </span>
                         </div>
-                      </a>
-                      
-                      
+                      </label>
+                    </td>
+
+                    <td class="text-white text-end text-sm sm:text-[1rem]">
+                      {item?.totalAssets !== null
+                        ? abbreviateNumber(item?.totalAssets)
+                        : "-"}
+                    </td>
+
+                    <td class="text-white text-end text-sm sm:text-[1rem]">
+                      {item?.weightPercentage !== null
+                        ? item?.weightPercentage?.toFixed(2)
+                        : "-"}%
                     </td>
-                
-                  <td class="text-white text-end text-sm sm:text-[1rem]">
-                    {item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets) : '-'}
-                  </td>
-                
-                  <td class="text-white text-end text-sm sm:text-[1rem]">
-                    {item?.weightPercentage !== null ? item?.weightPercentage?.toFixed(2) : '-'}%
-                  </td>
                   {/if}
                 </tr>
-                {/each}
-              </tbody>
-            </table>
-          </div>
-    
-          {:else}
-          <div class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto">
-              No data available
-          </div>
-          {/if}
-      
-        
-      </div>
-      </div>
-      </div>
-      <!--End ETF Holder Card -->    
-      
-    
-    
-    <!--Start Mobile ETF Holder Card-->
-    <div class="lg:hidden space-y-3 sm:pt-5">  
-      
-      <div class="bg-[#000] h-auto w-screen">
-      
-       <!--Start Header-->
-       <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
-        <h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
-          Top ETFs Holder
-        </h2>
-        <div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
-          <span class="text-white text-center text-md">
-            Find the ETFs with the highest portfolio weights for this stock. 
-          </span>
-
+              {/each}
+            </tbody>
+          </table>
         </div>
-    
+      {:else}
+        <div
+          class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto"
+        >
+          No data available
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+<!--End ETF Holder Card -->
+
+<!--Start Mobile ETF Holder Card-->
+<div class="lg:hidden space-y-3 sm:pt-5">
+  <div class="bg-[#000] h-auto w-screen">
+    <!--Start Header-->
+    <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
+      <h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
+        Top ETFs Holder
+      </h2>
+      <div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
+        <span class="text-white text-center text-md">
+          Find the ETFs with the highest portfolio weights for this stock.
+        </span>
       </div>
-      <!--End Header-->
-    
-        {#if topETFHolder?.length !== 0}
-        <div class="flex justify-start items-center w-full m-auto mt-10 overflow-x-scroll">
-          <table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
-            <thead>
-              <tr>
-                <th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
-                <th class="text-white font-semibold text-sm text-end bg-[#000]">Total Assets</th>
-                <th class="text-white font-semibold text-sm text-end bg-[#000]">% of Fund</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each topETFHolder as item, index}
-              <tr on:click={() => etfSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
-                {#if index <=6}
-               
+    </div>
+    <!--End Header-->
+
+    {#if topETFHolder?.length !== 0}
+      <div
+        class="flex justify-start items-center w-full m-auto mt-10 overflow-x-scroll"
+      >
+        <table
+          class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto"
+        >
+          <thead>
+            <tr>
+              <th class="text-white font-semibold text-sm text-start bg-[#000]"
+                >Company</th
+              >
+              <th class="text-white font-semibold text-sm text-end bg-[#000]"
+                >Total Assets</th
+              >
+              <th class="text-white font-semibold text-sm text-end bg-[#000]"
+                >% of Fund</th
+              >
+            </tr>
+          </thead>
+          <tbody>
+            {#each topETFHolder as item, index}
+              <tr
+                on:click={() => etfSelector(item?.symbol)}
+                class="text-white cursor-pointer bg-[#000] border-b border-[#000]"
+              >
+                {#if index <= 6}
                   <td class="text-white whitespace-nowrap">
                     <div class="flex flex-row items-center">
                       <div class="flex flex-col w-full">
-                        <span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
+                        <span class="text-blue-400 text-sm font-medium"
+                          >{item?.symbol}</span
+                        >
                         <span class="text-white text-sm">
-                          {#if typeof item?.name !== 'undefined'}
-                            {item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
+                          {#if typeof item?.name !== "undefined"}
+                            {item?.name?.length > 20
+                              ? item?.name?.slice(0, 20) + "..."
+                              : item?.name}
                           {:else}
                             n/a
                           {/if}
                         </span>
                       </div>
                     </div>
-                    
-                    
                   </td>
-              
-                <td class="text-white text-end font-semibold ">
-                  {item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets) : '-'}
-                </td>
-              
-                <td class="text-white font-semibold text-end">
-                  {item?.weightPercentage !== null ? abbreviateNumber(item?.weightPercentage)?.toFixed(2) : '-'}%
-                </td>
+
+                  <td class="text-white text-end font-semibold">
+                    {item?.totalAssets !== null
+                      ? abbreviateNumber(item?.totalAssets)
+                      : "-"}
+                  </td>
+
+                  <td class="text-white font-semibold text-end">
+                    {item?.weightPercentage !== null
+                      ? abbreviateNumber(item?.weightPercentage)?.toFixed(2)
+                      : "-"}%
+                  </td>
                 {/if}
               </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-    
-        {:else}
-          <div class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto">
-            No data available
-          </div>
-        {/if}
-    
-    
+            {/each}
+          </tbody>
+        </table>
       </div>
+    {:else}
+      <div
+        class=" mt-20 flex justify-center items-center text-2xl font-bold text-slate-700 mb-20 m-auto"
+      >
+        No data available
       </div>
-    <!--End Mobile ETF Holder Card-->
-      
\ No newline at end of file
+    {/if}
+  </div>
+</div>
+<!--End Mobile ETF Holder Card-->
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
index 93013ef1..b5724c07 100644
--- a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
@@ -823,7 +823,7 @@
                   <thead>
                     <tr class="text-white">
                       <td
-                        class="text-start bg-[#09090B] text-white text-sm sm:text-[1rem] font-bold pr-10"
+                        class="text-start bg-[#09090B] text-white text-sm font-semibold pr-10"
                         >Year</td
                       >
                       {#each balanceSheet as balance}
diff --git a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
index 34a82ffa..f616f223 100644
--- a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
@@ -750,11 +750,10 @@
               <div
                 class="w-full rounded-none sm:rounded-lg m-auto overflow-x-auto"
               >
-                <table class="table w-full">
+                <table class="table table-sm table-compact w-full">
                   <thead>
                     <tr class="text-white">
-                      <td
-                        class="text-start text-white text-sm sm:text-[1rem] font-semibold"
+                      <td class="text-start text-white text-sm font-semibold"
                         >Year</td
                       >
                       {#each cashFlow as cash}
@@ -909,7 +908,7 @@
                     </tr>
                     <tr class="text-white odd:bg-[#27272A]">
                       <td
-                        class="text-start border-r border-gray-700 text-sm sm:text-[1rem]"
+                        class="text-start whitespace-nowrap border-r border-gray-700 text-sm sm:text-[1rem]"
                         >Sales Maturities Of Investments</td
                       >
                       {#each cashFlow as cash}
diff --git a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
index eb2c4f92..794e1ab3 100644
--- a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
@@ -698,13 +698,10 @@
               <div
                 class="w-full rounded-none sm:rounded-lg m-auto overflow-x-auto"
               >
-                <table class="table w-full">
+                <table class="table table-sm table-compact w-full">
                   <thead>
                     <tr class="text-white">
-                      <td
-                        class="text-start text-sm sm:text-[1rem] font-bold pr-10"
-                        >Year</td
-                      >
+                      <td class="text-start text-sm font-semibold">Year</td>
                       {#each ratios as item}
                         {#if filterRule === "annual"}
                           <td
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index 35a09182..8d5ac8dc 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -169,80 +169,78 @@
             </div>
 
             {#if rawData?.length !== 0}
-              <div class="grid grid-cols-1 gap-2">
-                <div class="app w-full">
-                  <Chart {init} options={optionsData} class="chart" />
-                </div>
+              <div class="app w-full">
+                <Chart {init} options={optionsData} class="chart" />
+              </div>
 
-                <h2 class="mt-10 text-xl text-gray-200 font-bold">History</h2>
+              <h2 class="mt-10 text-xl text-gray-200 font-bold">History</h2>
 
-                <div class="w-full overflow-x-scroll">
-                  <table
-                    class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
-                  >
-                    <thead>
-                      <tr class="border border-slate-800">
-                        <th
-                          class="text-white font-semibold text-start text-sm sm:text-[1rem]"
-                          >Quarter</th
+              <div class="w-full overflow-x-scroll">
+                <table
+                  class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
+                >
+                  <thead>
+                    <tr class="border border-slate-800">
+                      <th
+                        class="text-white font-semibold text-start text-sm sm:text-[1rem]"
+                        >Quarter</th
+                      >
+                      <th
+                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
+                        >Value</th
+                      >
+                      <th
+                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
+                        >% Change</th
+                      >
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {#each tableList as item}
+                      <!-- row -->
+                      <tr
+                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                      >
+                        <td
+                          class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
                         >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >Value</th
+                          {new Date(item?.date ?? null)?.toLocaleString(
+                            "en-US",
+                            {
+                              month: "short",
+                              day: "numeric",
+                              year: "numeric",
+                            },
+                          )}
+                        </td>
+
+                        <td
+                          class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
                         >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >% Change</th
+                          {item?.value !== null
+                            ? abbreviateNumber(item?.value)
+                            : "-"}
+                        </td>
+
+                        <td
+                          class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
                         >
+                          {#if item?.valueGrowth > 0}
+                            <span class="text-[#37C97D]">
+                              +{item?.valueGrowth?.toFixed(2)}%
+                            </span>
+                          {:else if item?.valueGrowth < 0}
+                            <span class="text-[#FF2F1F]">
+                              {item?.valueGrowth?.toFixed(2)}%
+                            </span>
+                          {:else}
+                            -
+                          {/if}
+                        </td>
                       </tr>
-                    </thead>
-                    <tbody>
-                      {#each tableList as item, index}
-                        <!-- row -->
-                        <tr
-                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
-                        >
-                          <td
-                            class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
-                          >
-                            {new Date(item?.date ?? null)?.toLocaleString(
-                              "en-US",
-                              {
-                                month: "short",
-                                day: "numeric",
-                                year: "numeric",
-                              },
-                            )}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
-                          >
-                            {item?.value !== null
-                              ? abbreviateNumber(item?.value)
-                              : "-"}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
-                          >
-                            {#if item?.valueGrowth > 0}
-                              <span class="text-[#37C97D]">
-                                +{item?.valueGrowth?.toFixed(2)}%
-                              </span>
-                            {:else if item?.valueGrowth < 0}
-                              <span class="text-[#FF2F1F]">
-                                {item?.valueGrowth?.toFixed(2)}%
-                              </span>
-                            {:else}
-                              -
-                            {/if}
-                          </td>
-                        </tr>
-                      {/each}
-                    </tbody>
-                  </table>
-                </div>
+                    {/each}
+                  </tbody>
+                </table>
               </div>
             {:else}
               <h2
diff --git a/src/routes/stocks/[tickerID]/statistics/+page.svelte b/src/routes/stocks/[tickerID]/statistics/+page.svelte
index 19530337..596713c1 100644
--- a/src/routes/stocks/[tickerID]/statistics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+page.svelte
@@ -121,7 +121,7 @@ updateYearRange()
     <div class="mb-6">
       {#if Object?.keys(quantStats)?.length !== 0}
         <div
-          class="space-y-5 xs:space-y-6 lg:grid 2xl:grid-cols-2 lg:space-x-6 2xl:space-x-10 lg:space-y-0"
+          class="space-y-5 xs:space-y-6 lg:grid 2xl:grid-cols-2 2xl:space-x-10 lg:space-y-0"
         >
           <div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
             <div
@@ -164,38 +164,7 @@ updateYearRange()
                 >
               </table>
             </div>
-            <div>
-              <h2 class="mb-2 px-0.5 text-xl font-bold text-white">
-                Important Dates
-              </h2>
-              <p
-                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
-              >
-                The last earnings date was Wednesday, October 23, 2024, after
-                market close.
-              </p>
-              <table class="w-full">
-                <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>Earnings Date</span>
-                    </td>
-                    <td
-                      class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      title="Oct 23, 2024">Oct 23, 2024</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>Ex-Dividend Date</span>
-                    </td>
-                    <td
-                      class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      title="n/a">n/a</td
-                    >
-                  </tr></tbody
-                >
-              </table>
-            </div>
+
             <div>
               <h2 class="mb-2 px-0.5 text-xl font-bold text-white">
                 Share Statistics
@@ -568,7 +537,7 @@ updateYearRange()
             </div>
           </div>
           <div class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8">
-            <div>
+            <div class="mt-9 2xl:mt-0">
               <h2 class="mb-2 px-0.5 text-xl font-bold text-white">
                 Stock Price Statistics
               </h2>