From fd9d373c6632469b43d39c07769e46afb14aeb0d Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 23 Aug 2024 10:58:41 +0200
Subject: [PATCH] update dashboard by adding dividends

---
 src/routes/home/+page.svelte                  | 62 ++++++++++++++++++-
 src/routes/list/amex-stocks/+page.svelte      | 12 +---
 .../list/basic-materials-sector/+page.svelte  | 12 +---
 src/routes/list/bitcoin-etfs/+page.svelte     | 12 +---
 .../list/canadian-stocks-us/+page.svelte      | 12 +---
 .../list/chinese-stocks-us/+page.svelte       | 12 +---
 .../+page.svelte                              | 12 +---
 .../consumer-cyclical-sector/+page.svelte     | 12 +---
 .../consumer-defensive-sector/+page.svelte    | 12 +---
 src/routes/list/dow-jones-stocks/+page.svelte | 12 +---
 src/routes/list/energy-sector/+page.svelte    | 12 +---
 src/routes/list/financial-sector/+page.svelte | 12 +---
 src/routes/list/german-stocks-us/+page.svelte | 12 +---
 .../list/healthcare-sector/+page.svelte       | 12 +---
 src/routes/list/indian-stocks-us/+page.svelte | 12 +---
 .../list/industrials-sector/+page.svelte      | 12 +---
 .../list/israeli-stocks-us/+page.svelte       | 12 +---
 .../list/japanese-stocks-us/+page.svelte      | 12 +---
 .../list/magnificent-seven/+page.svelte       | 12 +---
 .../list/nasdaq-100-stocks/+page.svelte       | 12 +---
 src/routes/list/nasdaq-stocks/+page.svelte    | 12 +---
 src/routes/list/nyse-stocks/+page.svelte      | 12 +---
 .../list/real-estate-sector/+page.svelte      | 12 +---
 src/routes/list/sp-500-stocks/+page.svelte    | 12 +---
 .../list/technology-sector/+page.svelte       | 12 +---
 src/routes/list/uk-stocks-us/+page.svelte     | 12 +---
 src/routes/list/utilities-sector/+page.svelte | 12 +---
 src/routes/list/xetra-stocks/+page.svelte     | 12 +---
 28 files changed, 87 insertions(+), 299 deletions(-)

diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index f17019e5..247a0012 100644
--- a/src/routes/home/+page.svelte
+++ b/src/routes/home/+page.svelte
@@ -13,6 +13,7 @@
   
   import {  numberOfUnreadNotification} from '$lib/store';
 
+  /*
   import { Chart } from 'svelte-echarts'
   import { init, use } from 'echarts/core'
   import { BarChart } from 'echarts/charts'
@@ -21,6 +22,7 @@
 
   // now with tree-shaking
   use([BarChart, GridComponent, CanvasRenderer])
+  */
 
 
   export let data;
@@ -60,9 +62,24 @@ function reformatDate(dateString) {
 }
 
 
-const tickerGraphName = data?.getDashboard?.retailTracker?.map(item => item?.symbol) || [];
-const tradedList = data?.getDashboard?.retailTracker?.map(item => item?.traded) || [];
+function convertTimestamp(unixTimestamp) {
+    // Multiply by 1000 because JavaScript's Date object expects milliseconds
+    const date = new Date(unixTimestamp * 1000);
 
+    // Formatting the date to a human-readable format
+    const formattedDate = date.toLocaleString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true,
+    });
+
+    return formattedDate;
+}
+
+//const tickerGraphName = data?.getDashboard?.retailTracker?.map(item => item?.symbol) || [];
+//const tradedList = data?.getDashboard?.retailTracker?.map(item => item?.traded) || [];
+
+/*
 const optionsGraph = {
   animation: false,
   grid: {
@@ -120,6 +137,7 @@ const optionsGraph = {
     }
   ]
 };
+*/
 
 function latestInfoDate(inputDate) {
     // Convert the input date string to milliseconds since epoch
@@ -184,6 +202,7 @@ onMount( async() => {
           <Feedback data={data} />
         {/if}
         
+        <!--
         <div class="text-center mb-10 relative w-fit flex justify-center m-auto">
           <a href="/corporate-lobbying-tracker" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-lg m-auto font-medium text-[1rem] flex items-center">
             <span class="font-semibold">Corporate Lobbying Tracker</span>
@@ -194,6 +213,7 @@ onMount( async() => {
             </span>
           </div>
         </div>
+      -->
 
         <h1 class="text-white text-3xl font-semibold text-start w-full pl-4 pb-4 sm:pb-2">
           Dashboard
@@ -339,6 +359,42 @@ onMount( async() => {
               </Card.Content>
             </Card.Root>
             
+            <Card.Root class="overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[400px]">
+              <Card.Header class="flex flex-row items-center">
+                <div class="flex flex-col items-start w-full">
+                  <div class="flex flex-row w-full items-center">
+                    <Card.Title class="text-xl sm:text-2xl tex-white font-semibold">Dividend Announcement <span class="text-sm text-gray-300">(NYSE Time)</span></Card.Title>
+                  </div>
+                </div>
+              </Card.Header>
+              <Card.Content>
+                <ul style="padding-left: 5px;">
+                  {#each data?.getDashboard?.recentDividends as item}
+                  <strong>{item?.name}</strong> (<a href="/stocks/{item?.symbol}" class="sm:hover:text-white text-blue-400">{item?.symbol}</a>) has announced its upcoming dividend details as of {convertTimestamp(item?.updated)}:
+
+                  <li style="color: #fff; line-height: 22px; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;">
+                     <span class="font-bold">Dividend:</span> ${item?.dividend} per share ({(item?.dividend/item?.dividendPrior-1) > 0 ? '+' :''}{((item?.dividend/item?.dividendPrior-1)*100)?.toFixed(2)}% YoY)
+                  </li>
+                  <li style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;">
+                    <span class="font-bold">Dividend Yield:</span> {item?.dividendYield?.toFixed(2)}%
+                  </li>
+                  <li style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;">
+                    <span class="font-bold">Ex-Dividend Date</span> {new Date(item?.exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
+                  </li>
+                  <li style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;">
+                    <span class="font-bold">Payable Date</span> {new Date(item?.payableDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
+                  </li>
+                  <li style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 30px; list-style-type: disc;">
+                    <span class="font-bold">Record Date</span> {new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
+                  </li>
+
+                  {/each}
+              </ul>
+             
+              </Card.Content>
+            </Card.Root>
+
+            <!--
             <Card.Root class="overflow-hidden">
               <Card.Header class="flex flex-row items-center">
                 <div class="flex flex-col items-start w-full">
@@ -368,6 +424,8 @@ onMount( async() => {
                   {/if}
               </Card.Content>
             </Card.Root>
+            -->
+
           </div>
 
 
diff --git a/src/routes/list/amex-stocks/+page.svelte b/src/routes/list/amex-stocks/+page.svelte
index 15b67499..cacc362b 100644
--- a/src/routes/list/amex-stocks/+page.svelte
+++ b/src/routes/list/amex-stocks/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
   <section class="w-full overflow-hidden m-auto">
                 
diff --git a/src/routes/list/basic-materials-sector/+page.svelte b/src/routes/list/basic-materials-sector/+page.svelte
index 188a0a14..67604de0 100644
--- a/src/routes/list/basic-materials-sector/+page.svelte
+++ b/src/routes/list/basic-materials-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/bitcoin-etfs/+page.svelte b/src/routes/list/bitcoin-etfs/+page.svelte
index 0ac3c732..01d846a5 100644
--- a/src/routes/list/bitcoin-etfs/+page.svelte
+++ b/src/routes/list/bitcoin-etfs/+page.svelte
@@ -13,17 +13,7 @@ const avgExpenseRatio = rawData?.reduce(
 0
 ) / rawData?.length;
 
-let charNumber = 40;
-
-$: {
-    if ($screenWidth < 640)
-    {
-      charNumber = 15;
-    }
-    else {
-      charNumber = 40;
-    }
-  }
+$: charNumber = $screenWidth < 640 ? 15 : 20;
 </script>
         
 <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/canadian-stocks-us/+page.svelte b/src/routes/list/canadian-stocks-us/+page.svelte
index e11b243a..cfcb3a26 100644
--- a/src/routes/list/canadian-stocks-us/+page.svelte
+++ b/src/routes/list/canadian-stocks-us/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/chinese-stocks-us/+page.svelte b/src/routes/list/chinese-stocks-us/+page.svelte
index 2043c58f..532ef5a7 100644
--- a/src/routes/list/chinese-stocks-us/+page.svelte
+++ b/src/routes/list/chinese-stocks-us/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/communication-services-sector/+page.svelte b/src/routes/list/communication-services-sector/+page.svelte
index f3c4bca6..3840f41e 100644
--- a/src/routes/list/communication-services-sector/+page.svelte
+++ b/src/routes/list/communication-services-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/consumer-cyclical-sector/+page.svelte b/src/routes/list/consumer-cyclical-sector/+page.svelte
index 62cc5f8a..6c4e78fa 100644
--- a/src/routes/list/consumer-cyclical-sector/+page.svelte
+++ b/src/routes/list/consumer-cyclical-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/consumer-defensive-sector/+page.svelte b/src/routes/list/consumer-defensive-sector/+page.svelte
index 6e6054be..dce25d3d 100644
--- a/src/routes/list/consumer-defensive-sector/+page.svelte
+++ b/src/routes/list/consumer-defensive-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/dow-jones-stocks/+page.svelte b/src/routes/list/dow-jones-stocks/+page.svelte
index 183622c1..b7b92c77 100644
--- a/src/routes/list/dow-jones-stocks/+page.svelte
+++ b/src/routes/list/dow-jones-stocks/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
   <section class="w-full overflow-hidden m-auto">
                 
diff --git a/src/routes/list/energy-sector/+page.svelte b/src/routes/list/energy-sector/+page.svelte
index 7fc9bb68..26346533 100644
--- a/src/routes/list/energy-sector/+page.svelte
+++ b/src/routes/list/energy-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/financial-sector/+page.svelte b/src/routes/list/financial-sector/+page.svelte
index f239c582..8d5ca430 100644
--- a/src/routes/list/financial-sector/+page.svelte
+++ b/src/routes/list/financial-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/german-stocks-us/+page.svelte b/src/routes/list/german-stocks-us/+page.svelte
index 9ef2045a..b7f32fd5 100644
--- a/src/routes/list/german-stocks-us/+page.svelte
+++ b/src/routes/list/german-stocks-us/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/healthcare-sector/+page.svelte b/src/routes/list/healthcare-sector/+page.svelte
index 25f76ef9..e4ef22ef 100644
--- a/src/routes/list/healthcare-sector/+page.svelte
+++ b/src/routes/list/healthcare-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/indian-stocks-us/+page.svelte b/src/routes/list/indian-stocks-us/+page.svelte
index 22668997..68759287 100644
--- a/src/routes/list/indian-stocks-us/+page.svelte
+++ b/src/routes/list/indian-stocks-us/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/industrials-sector/+page.svelte b/src/routes/list/industrials-sector/+page.svelte
index 132c961a..4d83e18f 100644
--- a/src/routes/list/industrials-sector/+page.svelte
+++ b/src/routes/list/industrials-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/israeli-stocks-us/+page.svelte b/src/routes/list/israeli-stocks-us/+page.svelte
index fa07001e..5fbb5454 100644
--- a/src/routes/list/israeli-stocks-us/+page.svelte
+++ b/src/routes/list/israeli-stocks-us/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/japanese-stocks-us/+page.svelte b/src/routes/list/japanese-stocks-us/+page.svelte
index 56032321..4adf65e7 100644
--- a/src/routes/list/japanese-stocks-us/+page.svelte
+++ b/src/routes/list/japanese-stocks-us/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/magnificent-seven/+page.svelte b/src/routes/list/magnificent-seven/+page.svelte
index 7495c00d..0e380bff 100644
--- a/src/routes/list/magnificent-seven/+page.svelte
+++ b/src/routes/list/magnificent-seven/+page.svelte
@@ -14,17 +14,7 @@
   let avgPERatio = ((rawData?.reduce((total, stock) => total + stock?.pe, 0) ?? 0)/rawData?.length)?.toFixed(2);
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/nasdaq-100-stocks/+page.svelte b/src/routes/list/nasdaq-100-stocks/+page.svelte
index bcab7754..1c8caa04 100644
--- a/src/routes/list/nasdaq-100-stocks/+page.svelte
+++ b/src/routes/list/nasdaq-100-stocks/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
   <section class="w-full overflow-hidden m-auto">
                 
diff --git a/src/routes/list/nasdaq-stocks/+page.svelte b/src/routes/list/nasdaq-stocks/+page.svelte
index 4b55321a..5904a59f 100644
--- a/src/routes/list/nasdaq-stocks/+page.svelte
+++ b/src/routes/list/nasdaq-stocks/+page.svelte
@@ -30,17 +30,7 @@ let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap,
 let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
 let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
-let charNumber = 40;
-
-$: {
-  if ($screenWidth < 640)
-  {
-  charNumber = 15;
-  }
-  else {
-  charNumber = 40;
-  }
-}
+$: charNumber = $screenWidth < 640 ? 15 : 20;
 </script>
 <section class="w-full overflow-hidden m-auto">
               
diff --git a/src/routes/list/nyse-stocks/+page.svelte b/src/routes/list/nyse-stocks/+page.svelte
index 205442a7..c4e68481 100644
--- a/src/routes/list/nyse-stocks/+page.svelte
+++ b/src/routes/list/nyse-stocks/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
   <section class="w-full overflow-hidden m-auto">
                 
diff --git a/src/routes/list/real-estate-sector/+page.svelte b/src/routes/list/real-estate-sector/+page.svelte
index f05803ae..1f5cda02 100644
--- a/src/routes/list/real-estate-sector/+page.svelte
+++ b/src/routes/list/real-estate-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/sp-500-stocks/+page.svelte b/src/routes/list/sp-500-stocks/+page.svelte
index a757e020..b7bdfb4b 100644
--- a/src/routes/list/sp-500-stocks/+page.svelte
+++ b/src/routes/list/sp-500-stocks/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
   <section class="w-full overflow-hidden m-auto">
                 
diff --git a/src/routes/list/technology-sector/+page.svelte b/src/routes/list/technology-sector/+page.svelte
index 310a63de..427c4205 100644
--- a/src/routes/list/technology-sector/+page.svelte
+++ b/src/routes/list/technology-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/uk-stocks-us/+page.svelte b/src/routes/list/uk-stocks-us/+page.svelte
index b257ef19..3a1e06da 100644
--- a/src/routes/list/uk-stocks-us/+page.svelte
+++ b/src/routes/list/uk-stocks-us/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/utilities-sector/+page.svelte b/src/routes/list/utilities-sector/+page.svelte
index 755dfbd9..a6333f0b 100644
--- a/src/routes/list/utilities-sector/+page.svelte
+++ b/src/routes/list/utilities-sector/+page.svelte
@@ -33,17 +33,7 @@
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
 
   
-  let charNumber = 40;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
       
       <section class="w-full overflow-hidden m-auto">
diff --git a/src/routes/list/xetra-stocks/+page.svelte b/src/routes/list/xetra-stocks/+page.svelte
index 3b2f67e5..41470a12 100644
--- a/src/routes/list/xetra-stocks/+page.svelte
+++ b/src/routes/list/xetra-stocks/+page.svelte
@@ -30,17 +30,7 @@
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
   
-  let charNumber = 40;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
   </script>
   <section class="w-full overflow-hidden m-auto">