From 2e04240ef2a3515357934b60fd683c893ac6dde2 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 13 Aug 2024 14:01:33 +0200
Subject: [PATCH] ui fix

---
 .../stats/balance-sheet/+page.svelte          | 96 +++++++++---------
 .../[tickerID]/stats/cash-flow/+page.svelte   | 88 ++++++++---------
 .../[tickerID]/stats/income/+page.svelte      |  8 +-
 .../[tickerID]/stats/ratios/+page.svelte      | 98 +++++++++----------
 4 files changed, 143 insertions(+), 147 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
index a0733a4e..8b2c2548 100644
--- a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
@@ -578,54 +578,54 @@ $: {
         
                                     <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]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
-                                              <th class="text-white font-semibold text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
-                                              <th class="text-white font-semibold text-center text-sm sm:text-[1rem]">Change</th>
-                                              <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
-                                            </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]">
-                                                    {item?.date}
-                                                    </td>
-        
-                                                    <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                                                    {abbreviateNumber(item?.value)}
-                                                    </td>
-        
-                                                    <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
-                                                        {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
-                                                    </td>
-        
-                                                    <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
-                                                        {#if index+1-tableList?.length === 0}
-                                                        -
-                                                        {:else}
-                                                        {#if (item?.value- tableList[index+1]?.value) > 0}
-                                                        <span class="text-[#10DB06]">
-                                                          +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                        </span>
-                                                        {:else if (item?.value - tableList[index+1]?.value ) < 0}
-                                                        <span class="text-[#FF2F1F]">
-                                                          -{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                        </span>
-                                                        {:else}
-                                                        -
-                                                        {/if}
-                                                        {/if}
-                                                    </td>
-        
-                                                </tr>
-                                                {/each}
-        
-                                          </tbody>
-                                        </table>
+                                            <thead>
+                                              <tr class="border border-slate-800">
+                                                <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
+                                                <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
+                                                <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Change</th>
+                                                <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
+                                              </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]">
+                                                      {item?.date}
+                                                      </td>
+          
+                                                      <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
+                                                      {abbreviateNumber(item?.value)}
+                                                      </td>
+          
+                                                      <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
+                                                          {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
+                                                      </td>
+          
+                                                      <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
+                                                          {#if index+1-tableList?.length === 0}
+                                                          -
+                                                          {:else}
+                                                          {#if (item?.value- tableList[index+1]?.value) > 0}
+                                                          <span class="text-[#10DB06]">
+                                                            +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
+                                                          </span>
+                                                          {:else if (item?.value - tableList[index+1]?.value ) < 0}
+                                                          <span class="text-[#FF2F1F]">
+                                                            -{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
+                                                          </span>
+                                                          {:else}
+                                                          -
+                                                          {/if}
+                                                          {/if}
+                                                      </td>
+          
+                                                  </tr>
+                                                  {/each}
+          
+                                            </tbody>
+                                          </table>
                             
                                             
                                     </div>
diff --git a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
index 8f4337ce..7ab2ad1c 100644
--- a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
@@ -533,56 +533,54 @@ $: {
 
                         <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]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
-                                  <th class="text-white font-semibold text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
-                                  <th class="text-white font-semibold text-center text-sm sm:text-[1rem]">Change</th>
-                                  <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
-                                </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]">
-                                        {item?.date}
-                                        </td>
+                                <thead>
+                                  <tr class="border border-slate-800">
+                                    <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
+                                    <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
+                                    <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Change</th>
+                                    <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
+                                  </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]">
+                                          {item?.date}
+                                          </td>
 
-                                        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                                        {abbreviateNumber(item?.value)}
-                                        </td>
+                                          <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
+                                          {abbreviateNumber(item?.value)}
+                                          </td>
 
-                                        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
-                                            {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
-                                        </td>
+                                          <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
+                                              {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
+                                          </td>
 
-                                        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
-                                            {#if index+1-tableList?.length === 0}
-                                            -
-                                            {:else}
-                                            {#if (item?.value- tableList[index+1]?.value) > 0}
-                                            <span class="text-[#10DB06]">
-                                              +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                            </span>
-                                            {:else if (item?.value - tableList[index+1]?.value ) < 0}
-                                            <span class="text-[#FF2F1F]">
-                                              -{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                            </span>
-                                            {:else}
-                                            -
-                                            {/if}
-                                            {/if}
-                                        </td>
+                                          <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
+                                              {#if index+1-tableList?.length === 0}
+                                              -
+                                              {:else}
+                                              {#if (item?.value- tableList[index+1]?.value) > 0}
+                                              <span class="text-[#10DB06]">
+                                                +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
+                                              </span>
+                                              {:else if (item?.value - tableList[index+1]?.value ) < 0}
+                                              <span class="text-[#FF2F1F]">
+                                                -{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
+                                              </span>
+                                              {:else}
+                                              -
+                                              {/if}
+                                              {/if}
+                                          </td>
 
-                                    </tr>
-                                    {/each}
+                                      </tr>
+                                      {/each}
 
-                              </tbody>
-                            </table>
-                
-                                
+                                </tbody>
+                              </table>                
                         </div>
 
                         {:else}
diff --git a/src/routes/stocks/[tickerID]/stats/income/+page.svelte b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
index f215d061..17fc984e 100644
--- a/src/routes/stocks/[tickerID]/stats/income/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
@@ -516,8 +516,8 @@ const exportData = (format = 'csv') => {
                                   <thead>
                                     <tr class="border border-slate-800">
                                       <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
-                                      <th class="text-white font-semibold text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
-                                      <th class="text-white font-semibold text-center text-sm sm:text-[1rem]">Change</th>
+                                      <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
+                                      <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Change</th>
                                       <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
                                     </tr>
                                   </thead>
@@ -530,11 +530,11 @@ const exportData = (format = 'csv') => {
                                             {item?.date}
                                             </td>
 
-                                            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+                                            <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
                                             {abbreviateNumber(item?.value)}
                                             </td>
 
-                                            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
+                                            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
                                                 {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
                                             </td>
 
diff --git a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
index 82f88c44..70224f89 100644
--- a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
@@ -469,56 +469,54 @@ $: {
 
                                 <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]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
-                                          <th class="text-white font-semibold text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
-                                          <th class="text-white font-semibold text-center text-sm sm:text-[1rem]">Change</th>
-                                          <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
-                                        </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]">
-                                                {item?.date}
-                                                </td>
-        
-                                                <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                                                {abbreviateNumber(item?.value)}
-                                                </td>
-        
-                                                <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
-                                                    {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
-                                                </td>
-        
-                                                <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
-                                                    {#if index+1-tableList?.length === 0}
-                                                    -
-                                                    {:else}
-                                                    {#if (item?.value- tableList[index+1]?.value) > 0}
-                                                    <span class="text-[#10DB06]">
-                                                      +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                    </span>
-                                                    {:else if (item?.value - tableList[index+1]?.value ) < 0}
-                                                    <span class="text-[#FF2F1F]">
-                                                      -{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
-                                                    </span>
-                                                    {:else}
-                                                    -
-                                                    {/if}
-                                                    {/if}
-                                                </td>
-        
-                                            </tr>
-                                            {/each}
-        
-                                      </tbody>
-                                    </table>
-                        
-                                        
+                                        <thead>
+                                          <tr class="border border-slate-800">
+                                            <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
+                                            <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
+                                            <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Change</th>
+                                            <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
+                                          </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]">
+                                                  {item?.date}
+                                                  </td>
+      
+                                                  <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
+                                                  {abbreviateNumber(item?.value)}
+                                                  </td>
+      
+                                                  <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
+                                                      {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
+                                                  </td>
+      
+                                                  <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
+                                                      {#if index+1-tableList?.length === 0}
+                                                      -
+                                                      {:else}
+                                                      {#if (item?.value- tableList[index+1]?.value) > 0}
+                                                      <span class="text-[#10DB06]">
+                                                        +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
+                                                      </span>
+                                                      {:else if (item?.value - tableList[index+1]?.value ) < 0}
+                                                      <span class="text-[#FF2F1F]">
+                                                        -{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
+                                                      </span>
+                                                      {:else}
+                                                      -
+                                                      {/if}
+                                                      {/if}
+                                                  </td>
+      
+                                              </tr>
+                                              {/each}
+      
+                                        </tbody>
+                                      </table>
                                 </div>
 
                                 {:else}