From 918e670bd1dd856af56fcb24a4c73c107d9c6e09 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 5 Aug 2024 10:59:52 +0200
Subject: [PATCH] bugfixing && ui fix

---
 src/lib/components/ReturnCard.svelte          | 62 +++++++++--------
 .../stocks/[tickerID]/stats/+page.svelte      | 66 ++++++++++---------
 2 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/src/lib/components/ReturnCard.svelte b/src/lib/components/ReturnCard.svelte
index 072bfd22..2f80dfc1 100644
--- a/src/lib/components/ReturnCard.svelte
+++ b/src/lib/components/ReturnCard.svelte
@@ -57,8 +57,8 @@
        
             const options = {
                 grid: {
-                    left: "0%",
-                    right: "7%",
+                    left: "2%",
+                    right: "2%",
                     bottom: '0%',
                     height: "90%",
                     containLabel: true,
@@ -185,7 +185,10 @@
                 {
                 name: 'Frequency of Return',
                 type: 'bar',
-                barWidth: '100%',
+                barWidth: '80%',
+                itemStyle: {
+                    color: 'white',
+                },
                 data: histogramData
                 }
             ],
@@ -259,7 +262,7 @@
             </div>
 
 
-            <div class="rounded-2xl pl-3 sm:pr-0 pt-3 w-full m-auto flex flex-col justify-center items-center mt-4">
+            <div class="rounded-2xl pl-3 sm:pr-0 pt-3 w-full mt-4">
 
                 {#if displayReturn === 'annualReturn'}
                     <h1 class="text-white m-auto font-bold text-lg  text-center">
@@ -288,8 +291,8 @@
                     </div>
 
                     <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-                        <div class="app w-[90vw] sm:w-[50vw] mb-20 mt-6">
-                            <Chart options={optionsAnnualReturn} class="chart w-full" />
+                        <div class="app w-full h-[300px] mt-5 mb-16">
+                            <Chart options={optionsAnnualReturn} class="chart" />
                         </div>
                     </Lazy>
 
@@ -300,9 +303,11 @@
                         Distribution of Monthly Returns
                     </h1>
 
-                    <div class="app w-[90vw] sm:w-[50vw] mb-4">
-                        <Chart options={optionsMonthlyDistributionReturn} class="chart w-full" />  
-                    </div>
+                    <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
+                        <div class="app w-full h-[300px] mt-5 mb-16">
+                            <Chart options={optionsMonthlyDistributionReturn} class="chart" />
+                        </div>
+                    </Lazy>
                 {/if}
             </div>
     
@@ -310,23 +315,22 @@
             </div>
           </section>
     
-    <style>
-    
-    
-    .app {
-        height: 300px;
-        max-width: 100%; /* Ensure chart width doesn't exceed the container */
-    
-      }
-    
-      @media (max-width: 640px) {
-        .app {
-          height: 180px;
-        }
-      }
-    
-      .chart {
-        width: 100%;
-      }
-      
-      </style>
\ No newline at end of file
+<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]/stats/+page.svelte b/src/routes/stocks/[tickerID]/stats/+page.svelte
index fa3d3631..5bae3978 100644
--- a/src/routes/stocks/[tickerID]/stats/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/+page.svelte
@@ -287,38 +287,40 @@ updateYearRange()
               <h3 class="text-start w-full mt-8 mb-2 text-lg sm:text-2xl font-bold text-white">
                 Worst 10 Drawdowns of {$stockTicker}
               </h3>
-              <table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
-                <thead>
-                  <tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold">
-                    <th class="text-start text-sm w-36 sm:w-56">Started</th>
-                    <th class="text-sm text-end">Recovered</th>
-                    <th class="text-sm text-end">Drawdown</th>
-                    <th class="text-sm text-end ">Days</th>
-                  </tr>
-                </thead>
-                <tbody class="shadow-md">
-                  {#each quantStats[$stockTicker?.toUpperCase()]['Worst 10 Drawdowns'] as item}
-                    <tr class="text-white border-y border-gray-800 odd:bg-[#27272A]">
-                      <td class="text-start text-sm text-white w-36 sm:w-56">
-                        {new Date(item['Started']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                      </td>
-                      <td class="text-sm  text-white text-end">
-                        {#if ongoingDD(item['Recovered']) === true}
-                        continuing
-                        {:else}
-                        {new Date(item['Recovered']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                        {/if}
-                      </td>
-                      <td class="text-start font-semibold text-white text-end">
-                        {item['Drawdown']?.toFixed(2)}%
-                      </td> 
-                      <td class="text-end font-semibold text-white">
-                        {item['Days']}
-                      </td>
+              <div class="w-full overflow-x-scroll">
+                <table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
+                  <thead>
+                    <tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold">
+                      <th class="text-start text-sm w-36 sm:w-56">Started</th>
+                      <th class="text-sm text-end">Recovered</th>
+                      <th class="text-sm text-end">Drawdown</th>
+                      <th class="text-sm text-end ">Days</th>
                     </tr>
-                  {/each}
-                </tbody>
-              </table>
+                  </thead>
+                  <tbody class="shadow-md">
+                    {#each quantStats[$stockTicker?.toUpperCase()]['Worst 10 Drawdowns'] as item}
+                      <tr class="text-white border-y border-gray-800 odd:bg-[#27272A]">
+                        <td class="text-start text-sm text-white whitespace-nowrap">
+                          {new Date(item['Started']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
+                        </td>
+                        <td class="text-sm  text-white text-end whitespace-nowrap">
+                          {#if ongoingDD(item['Recovered']) === true}
+                          continuing
+                          {:else}
+                          {new Date(item['Recovered']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
+                          {/if}
+                        </td>
+                        <td class="text-start font-semibold text-white text-end">
+                          {item['Drawdown']?.toFixed(2)}%
+                        </td> 
+                        <td class="text-end font-semibold text-white">
+                          {item['Days']}
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              </div>
 
               
               <h2 class="text-start ml-2 text-lg sm:text-2xl font-bold text-white mt-8 ">
@@ -330,7 +332,7 @@ updateYearRange()
                 Comparison of company stats against the S&P500 Index.                                  
               </p>
 
-              <span class="ml-2 text-start italic text-sm text-gray-300 mb-2 sm:mb-5">
+              <span class="ml-2 text-start italic text-xs text-gray-300 mt-5 mb-2 sm:mb-5">
                 Time Period between {new Date(quantStats[$stockTicker?.toUpperCase()]["Start Period"]).toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} 
                 - 
                 {new Date(quantStats[$stockTicker?.toUpperCase()]["End Period"]).toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}