update dashboard by adding dividends

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) || [];
+function convertTimestamp(unixTimestamp) {
-const tradedList = data?.getDashboard?.retailTracker?.map(item => item?.traded) || [];
+    // 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>
 
 

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
   <section class="w-full overflow-hidden m-auto">
                 

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

src/routes/list/bitcoin-etfs/+page.svelte

@@ -13,17 +13,7 @@ const avgExpenseRatio = rawData?.reduce(
 0
 ) / rawData?.length;
 
-let charNumber = 40;
+$: charNumber = $screenWidth < 640 ? 15 : 20;
-
-$: {
-    if ($screenWidth < 640)
-    {
-      charNumber = 15;
-    }
-    else {
-      charNumber = 40;
-    }
-  }
 </script>
         
 <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
   <section class="w-full overflow-hidden m-auto">
                 

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
   <section class="w-full overflow-hidden m-auto">
                 

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;
+$: charNumber = $screenWidth < 640 ? 15 : 20;
-
-$: {
-  if ($screenWidth < 640)
-  {
-  charNumber = 15;
-  }
-  else {
-  charNumber = 40;
-  }
-}
 </script>
 <section class="w-full overflow-hidden m-auto">
               

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
   <section class="w-full overflow-hidden m-auto">
                 

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
   <section class="w-full overflow-hidden m-auto">
                 

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-      if ($screenWidth < 640)
-      {
-      charNumber = 15;
-      }
-      else {
-      charNumber = 40;
-      }
-  }
   </script>
       
       <section class="w-full overflow-hidden m-auto">

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;
+  $: charNumber = $screenWidth < 640 ? 15 : 20;
-  
-  $: {
-    if ($screenWidth < 640)
-    {
-    charNumber = 15;
-    }
-    else {
-    charNumber = 40;
-    }
-  }
   </script>
   <section class="w-full overflow-hidden m-auto">