update dividends pageg

src/routes/etf/[tickerID]/dividends/+page.svelte

@@ -1,23 +1,19 @@
 <script lang="ts">
   import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
+  import { onMount } from 'svelte';
+  
   import { Chart } from 'svelte-echarts'
-import { init, use } from 'echarts/core'
+  import { init, use } from 'echarts/core'
-import { LineChart, BarChart } from 'echarts/charts'
+  import { LineChart, BarChart } from 'echarts/charts'
-import { GridComponent } from 'echarts/components'
+  import { GridComponent, TooltipComponent } from 'echarts/components'
-import { CanvasRenderer } from 'echarts/renderers'
+  import { CanvasRenderer } from 'echarts/renderers'
-use([LineChart, BarChart, GridComponent, CanvasRenderer])
+  use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer])
   
   
   export let data;
   
   let dateDistance;
-  
+  let stockDividends = data?.getStockDividend?.at(0);
-  
-  
-  let currentPrice;
-  let eps;
-          
-  let stockDividends = [];
   let optionsDividend;
       
       
@@ -29,57 +25,45 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
   let payoutRatio = 'n/a';
   let dividendGrowth = 'n/a';
       
-      
-      
-      let mode = false;
-      
-      
-      function toggleMode() {
-          mode = !mode;
-      }
-              
-      
-      export const sortDividendsByDate = (dividends) => {
-          return dividends.sort(function(a, b) {
-            return new Date(a.date) - new Date(b.date);
-          });
-        }
-      
-      function plotDividend() {
-          
-        let dateList = [];
   let dividendList = [];
   let growthList = [];
-        let copyData = structuredClone(stockDividends);
+  let dateList = [];
-        const reverseData = sortDividendsByDate(copyData);
-      
-        for (let i = 0; i < reverseData?.length; i++) {
-            const currentDividend = reverseData[i]?.dividend;
-            const previousDividend = i === 0 ? 0 : reverseData[i - 1]?.dividend;
-      
-            dateList.push(reverseData[i]?.paymentDate);
-            dividendList.push(currentDividend);
   
       
-            if (currentDividend !== null && previousDividend !== null && previousDividend !== 0) {
-                const growthRate = (((currentDividend - previousDividend) / previousDividend) * 100 )?.toFixed(2);
-                growthList.push(growthRate);
-            } else {
-                growthList.push(0); // Pushing null if the growth calculation is not possible
-            }
-      
-            
-        }
-      
   
+  async function plotDividend(dividendList, growthList, dateList) {  
     const options = {
+       tooltip: {
+          trigger: 'axis',
+          hideDelay: 100, // Set the delay in milliseconds
+      },
+      animation: false,
+      grid: {
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          top: '5%',
+          containLabel: true
+      },
         xAxis: {
           data: dateList,
           type: 'category',
+          axisLabel: {
+            color: '#fff',
+          },
+          splitLine: {
+              show: false, // Disable x-axis grid lines
+          },
         },
         yAxis: [
           {
             type: 'value',
+          axisLabel: {
+            color: '#fff',
+            },
+            splitLine: {
+              show: false, // Disable x-axis grid lines
+          },
           },
           {
             type: 'value',
@@ -102,27 +86,26 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
             name: 'Dividend per Share',
             data: dividendList,
             type: 'line',
-            smooth: true,
+            itemStyle: {
+                  color: '#fff' // Change bar color to white
+              },
+            showSymbol: false
           },
           {
             name: 'Growth Rate (%)',
             data: growthList,
             type: 'bar',
-            barWidth: '200%',
+            barWidth: '80%',
             smooth: true,
             yAxisIndex: 1,
             itemStyle: {
               color: (params) => {
                 // Set color based on positive or negative value
-                return params.data >= 0 ? '#076E0B' : '#F80102';
+                return params.data >= 0 ? '#22C55E' : '#E11D48';
               },
             },
           },
         ],
-        tooltip: {
-          trigger: 'axis',
-          
-        },
       };
       
       
@@ -132,33 +115,38 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
   
   
   
-  const output = data?.getStockDividend;
+  let syncWorker: Worker | undefined = undefined;
-  stockDividends = output[0];
-  eps = output[1]
-  currentPrice = output[2]
   
-  if(stockDividends?.length !== 0)
+  // Handling messages from the worker
-  {
+  const handleMessage = async (event) => {
-      payoutFrequency =  stockDividends?.filter(entry => entry.date.includes('2022'))?.length;
+      const finalData = event.data?.finalData
-      const amount = stockDividends[0]?.adjDividend;
-      annualDividend = amount * payoutFrequency 
-      dividendYield = ((annualDividend / currentPrice )*100)?.toFixed(2)
-      exDividendDate = stockDividends[0]?.date
-      payoutRatio = ((1 - ( eps - annualDividend)/eps)*100)?.toFixed(2)
   
-      const previousIndex = stockDividends?.findIndex(entry => entry.date.includes('2022'));
+      payoutFrequency = finalData?.payoutFrequency;
+      exDividendDate = finalData?.exDividendDate;
+      dividendYield = finalData?.dividendYield;
+      dividendGrowth = finalData?.dividendGrowth;
+      payoutRatio = finalData?.payoutRatio;
+      dateDistance = finalData?.dateDistance;
+      dividendList = finalData?.dividendList;
+      growthList = finalData?.growthList;
+      dateList = finalData?.dateList;
+      annualDividend = finalData?.annualDividend;
+      optionsDividend = await plotDividend(dividendList, growthList, dateList)
+      //console.log('Message from worker:', chartData);
   
-      const previousAnnualDividend = stockDividends[previousIndex]?.adjDividend * payoutFrequency;
+  };
   
-      dividendGrowth= (( (annualDividend - previousAnnualDividend) / previousAnnualDividend ) *100)?.toFixed(2);
+  const loadWorker = async () => {
-  
+    const SyncWorker = await import('./workers/dividendWorker?worker');
-      optionsDividend = plotDividend()
+    syncWorker = new SyncWorker.default();
-      
+    syncWorker.postMessage({ message: data?.getStockDividend});
-      //Check if the last dividend is older than 12 months
+    syncWorker.onmessage = handleMessage;
-      dateDistance = new Date(stockDividends?.at(0)?.date) < new Date(new Date().setFullYear(new Date().getFullYear() - 1)) ? true : false;
-  }      
   
+  };
   
+  onMount(async() => {
+    await loadWorker()
+  })
   
   
   </script>
@@ -190,7 +178,7 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
   
             
       <section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
-          <div class="flex justify-center m-auto h-full overflow-hidden">
+          <div class="flex h-full overflow-hidden">
               <div class="relative flex justify-center items-center overflow-hidden">
                     <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
                           <div class="mb-6">
@@ -199,14 +187,14 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
                               </h1>
       
                                 
-                          <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
+                          <div class="text-white text-center sm:text-start p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
                             <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
   
                             
                                 {#if stockDividends?.length !== 0}
                                 {#if !dateDistance}
                                     {$displayCompanyName} has an annual dividend of
-                                      ${annualDividend?.toFixed(2)}
+                                      ${annualDividend}
                                     per share, with a forward yield of
                                       {dividendYield}%.
                                     The dividend is paid every
@@ -253,7 +241,7 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
                                     </span>
                                   </div>
                                   <span class="text-white text-[1rem] font-semibold">
-                              ${annualDividend !== '0.00' ? annualDividend?.toFixed(2) : '0'}
+                                    ${annualDividend !== '0.00' ? annualDividend : '0'}
                                   </span>
                                 </div>
                                 <!--End Column Win Rate-->
@@ -319,38 +307,17 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
                               </h3>
           
         
-                            <label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto mt-5 sm:mt-0">
-                              <input on:click={toggleMode} type="checkbox" value={mode} class="sr-only peer">
-                              <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
-                              {#if mode}
-                              <span class="ml-2 text-sm font-medium text-gray-300">
-                                  Cool Mode
-                              </span>
-                              {:else}
-                              <span class="ml-2 text-sm font-medium text-gray-500">
-                                  Boring Mode
-                              </span>
-                              {/if}
-                            </label>
           
                             </div>
         
+                          {#if stockDividends?.length !== 0 && optionsDividend}
         
-                          {#if stockDividends?.length !== 0}
+                          <div class="app w-full h-[400px] sm:h-[500px] mb-14">
-        
-        
-                            {#if mode}
-                              <div class="app w-full ">
                             <Chart {init} options={optionsDividend} class="chart" />
                           </div>
         
-                              <span class="text-gray-200 text-sm italic">
-                                * Dividend amounts are adjusted for stock splits when applicable.
-                              </span>
                           
-                            {:else}
+                              <div class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
-                            
-                              <div class="flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
                                 <table class="table table-sm table-compact flex justify-start items-center w-full m-auto">
                                   <thead>
                                     <tr class="bg-[#09090B] border-b-slate-600 shadow-md">
@@ -360,7 +327,7 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
                                       <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
                                         Cash Amount
                                       </th>
-                                      <th class="text-end bg-[#09090B] border-b border-[#09090B] hidden sm:table-cell text-white text-sm font-semibold">
+                                      <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
                                         Record Date
                                       </th>
                                       <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
@@ -368,19 +335,19 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
                                       </th>
                                     </tr>
                                   </thead>
-                                  <tbody class="">
+                                  <tbody class="shadow-md">
                                     {#each stockDividends as item}
                                     <tr class="text-gray-200 odd:bg-[#27272A]">
-                                      <td class="text-start text-xs sm:text-sm text-white font-medium border-b border-[#09090B]">
+                                      <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]">
                                         {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                       </td>
-                                      <td class="text-end text-xs sm:text-sm text-white border-b border-[#09090B]">
+                                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                         ${item?.adjDividend?.toFixed(2)}
                                       </td>
-                                      <td class="text-end text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#09090B]">
+                                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                         {item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                       </td>
-                                      <td class="text-end text-xs sm:text-sm text-white border-b border-[#09090B]">
+                                      <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                         {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                       </td>
                                     </tr>
@@ -391,7 +358,6 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
                               <span class="text-gray-200 text-sm italic">
                                 * Dividend amounts are adjusted for stock splits when applicable.
                               </span>
-                              {/if}
         
                           {:else}
                           <h1 class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10">
@@ -417,18 +383,19 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
           
   <style>
     .app {
-          height: 700px;
+    height: 300px;
-          max-width: 1500px;
+    max-width: 100%; /* Ensure chart width doesn't exceed the container */
+    
     }
     
-      @media (max-width: 560px) {
+    @media (max-width: 640px) {
     .app {
-              max-width: 520px;
+      height: 300px;
-              height: 500px;
     }
     }
     
     .chart {
     width: 100%;
     }
+    
   </style>

src/routes/etf/[tickerID]/dividends/workers/dividendWorker.ts

@@ -0,0 +1,69 @@
+// lib/workers/test.ts
+const sortDividendsByDate = (dividends) => {
+  return dividends.sort(function(a, b) {
+    return new Date(a?.date) - new Date(b?.date);
+  });
+}
+
+function plotDividend(stockDividends) {
+        
+  let dateList = [];
+  let dividendList = [];
+  let growthList = [];
+  let copyData = structuredClone(stockDividends);
+  const reverseData = sortDividendsByDate(copyData);
+
+  for (let i = 0; i < reverseData?.length; i++) {
+      const currentDividend = reverseData[i]?.dividend;
+      const previousDividend = i === 0 ? 0 : reverseData[i - 1]?.dividend;
+
+      dateList.push(reverseData[i]?.paymentDate);
+      dividendList?.push(currentDividend);
+
+
+      if (currentDividend !== null && previousDividend !== null && previousDividend !== 0) {
+          const growthRate = (((currentDividend - previousDividend) / previousDividend) * 100 )?.toFixed(2);
+          growthList?.push(growthRate);
+      } else {
+          growthList?.push(0); // Pushing null if the growth calculation is not possible
+      }
+
+      
+  }
+
+    return {dividendList, growthList, dateList};
+}
+
+  onmessage = async (event: MessageEvent) => {
+    const data = event.data?.message;
+    const stockDividends = data?.at(0);
+    const eps = data?.at(1);
+    const currentPrice = data?.at(2);
+  
+    const payoutFrequency =  stockDividends?.filter(entry => entry.date.includes('2022'))?.length;
+    const amount = stockDividends[0]?.adjDividend;
+    const annualDividend = (amount * payoutFrequency)?.toFixed(2)
+    const dividendYield = ((annualDividend / currentPrice )*100)?.toFixed(2)
+    const exDividendDate = stockDividends[0]?.date
+    const payoutRatio = ((1 - ( eps - annualDividend)/eps)*100)?.toFixed(2)
+
+    const previousIndex = stockDividends?.findIndex(entry => entry.date.includes('2022'));
+
+    const previousAnnualDividend = stockDividends[previousIndex]?.adjDividend * payoutFrequency;
+
+    const dividendGrowth= (( (annualDividend - previousAnnualDividend) / previousAnnualDividend ) *100)?.toFixed(2);
+
+    const {dividendList, growthList, dateList} = plotDividend(stockDividends)
+    
+    //Check if the last dividend is older than 12 months
+    const dateDistance = new Date(stockDividends?.at(0)?.date) < new Date(new Date().setFullYear(new Date().getFullYear() - 1)) ? true : false;
+    
+    let finalData = { annualDividend, payoutFrequency, exDividendDate, dividendYield, dividendGrowth, payoutRatio , dateDistance, dividendList, growthList, dateList};
+    postMessage({ message: 'success', finalData});
+
+    // Sending data back to the main thread
+    //postMessage({ message: 'Data received in the worker', ticker, apiURL });
+  };
+  
+  export {};
+  

src/routes/stocks/[tickerID]/dividends/+page.svelte

@@ -95,7 +95,7 @@ async function plotDividend(dividendList, growthList, dateList) {
           name: 'Growth Rate (%)',
           data: growthList,
           type: 'bar',
-          barWidth: '200%',
+          barWidth: '80%',
           smooth: true,
           yAxisIndex: 1,
           itemStyle: {
@@ -187,7 +187,7 @@ onMount(async() => {
                             </h1>
     
                               
-                        <div class="text-white text-center p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
+                        <div class="text-white text-center sm:text-start p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
                           <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
 
                           
@@ -383,7 +383,7 @@ onMount(async() => {
         
 <style>
   .app {
-  height: 500px;
+  height: 300px;
   max-width: 100%; /* Ensure chart width doesn't exceed the container */
   
   }