diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte index f9dcd3e0..13a9415d 100644 --- a/src/routes/etf/[tickerID]/dividends/+page.svelte +++ b/src/routes/etf/[tickerID]/dividends/+page.svelte @@ -1,23 +1,19 @@ @@ -190,7 +178,7 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
-
+
@@ -199,14 +187,14 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer]) -
+
{#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 @@ -230,127 +218,106 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer]) {#if stockDividends?.length !== 0} -
- -
-
- - Dividend Yield - -
+
+ +
+
+ + Dividend Yield + +
+ + + {dividendYield !== '0.00' ? dividendYield : '0'}% + +
+ - - {dividendYield !== '0.00' ? dividendYield : '0'}% - -
- - - -
-
- - Annual Dividend - -
- - ${annualDividend !== '0.00' ? annualDividend?.toFixed(2) : '0'} - -
- - - -
-
- - Ex-Dividend Date + +
+
+ + Annual Dividend + +
+ + ${annualDividend !== '0.00' ? annualDividend : '0'} + +
+ + + +
+
+ + Ex-Dividend Date + +
+ + {new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} + +
+ + + +
+
+ + Payout Frequency + +
+ + {payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
- - {new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} - -
- - - -
-
- - Payout Frequency - -
- - {payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'} - -
- - - -
-
- - Payout Ratio - -
- - {payoutRatio !== '0.00' ? payoutRatio : '0'}% - -
- - - -
-
- - Dividend Growth - -
- - {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} - -
- - -
+ -
- -

- Dividends History -

- - - - -
- - - {#if stockDividends?.length !== 0} - - - {#if mode} -
- + +
+
+ + Payout Ratio + +
+ + {payoutRatio !== '0.00' ? payoutRatio : '0'}% +
+ - - * Dividend amounts are adjusted for stock splits when applicable. - - - {:else} - -
+ +
+
+ + Dividend Growth + +
+ + {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} + +
+ + +
+ +
+ +

+ Dividends History +

+ + + +
+ + {#if stockDividends?.length !== 0 && optionsDividend} + +
+ +
+ + +
@@ -360,7 +327,7 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer]) - - + {#each stockDividends as item} - - - - @@ -391,7 +358,6 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer]) * Dividend amounts are adjusted for stock splits when applicable. - {/if} {:else}

@@ -416,19 +382,20 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer]) \ No newline at end of file diff --git a/src/routes/etf/[tickerID]/dividends/workers/dividendWorker.ts b/src/routes/etf/[tickerID]/dividends/workers/dividendWorker.ts new file mode 100644 index 00000000..233fc55f --- /dev/null +++ b/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 {}; + \ No newline at end of file diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte index 158ad4fd..515ed4c2 100644 --- a/src/routes/stocks/[tickerID]/dividends/+page.svelte +++ b/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() => {

-
+
@@ -383,7 +383,7 @@ onMount(async() => {
Cash Amount Record Date @@ -368,19 +335,19 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
+ {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} + ${item?.adjDividend?.toFixed(2)} {item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} + {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}