diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte index de8503b4..46bda370 100644 --- a/src/routes/etf/[tickerID]/dividends/+page.svelte +++ b/src/routes/etf/[tickerID]/dividends/+page.svelte @@ -31,80 +31,64 @@ - async function plotDividend(dividendList, growthList, dateList) { - const options = { - tooltip: { - trigger: 'axis', - hideDelay: 100, // Set the delay in milliseconds + async function plotDividend(dividendList, dateList) { + const options = { + tooltip: { + trigger: 'axis', + hideDelay: 100, // Set the delay in milliseconds + }, + animation: false, + grid: { + left: '2%', + right: '0%', + bottom: '10%', + top: '10%', + containLabel: true + }, + xAxis: { + data: dateList, + type: 'category', + axisLabel: { + color: '#fff', + }, + splitLine: { + show: false, // Disable x-axis grid lines + }, }, - animation: false, - grid: { - left: '2%', - right: '2%', - bottom: '2%', - top: '5%', - containLabel: true - }, - xAxis: { - data: dateList, - type: 'category', - axisLabel: { - color: '#fff', + yAxis: [ + { + type: 'value', + axisLabel: { + color: '#fff', }, splitLine: { - show: false, // Disable x-axis grid lines + show: false, // Disable x-axis grid lines + }, + }, + { + type: 'value', + axisLabel: { + show: false, + formatter: '{value} %', + }, + splitLine: { + show: false, }, }, - yAxis: [ - { - type: 'value', - axisLabel: { - color: '#fff', - }, - splitLine: { - show: false, // Disable x-axis grid lines - }, - }, - { - type: 'value', - axisLabel: { - show: false, - formatter: '{value} %', - }, - splitLine: { - show: false, - }, - }, - ], - series: [ - { - name: 'Dividend per Share', - data: dividendList, - type: 'line', - itemStyle: { - color: '#fff' // Change bar color to white - }, - showSymbol: false - }, - { - name: 'Growth Rate (%)', - data: growthList, - type: 'bar', - barWidth: '80%', - yAxisIndex: 1, - itemStyle: { - color: (params) => { - // Set color based on positive or negative value - return params.data >= 0 ? '#22C55E' : '#E11D48'; - }, - }, - }, - ], - }; - - - return options; - } + ], + series: [ + { + name: 'Dividend per Share', + data: dividendList, + type: 'bar', + smooth: true, + }, + ], + }; + + + return options; +} @@ -125,9 +109,9 @@ growthList = finalData?.growthList; dateList = finalData?.dateList; annualDividend = finalData?.annualDividend; - optionsDividend = await plotDividend(dividendList, growthList, dateList) + optionsDividend = await plotDividend(dividendList, dateList) //console.log('Message from worker:', chartData); - + console.log(dateList) }; const loadWorker = async () => { @@ -212,87 +196,61 @@ {#if stockDividends?.length !== 0} -
- -
-
- - Dividend Yield - -
- - - {dividendYield !== '0.00' ? dividendYield : '0'}% - -
- - - -
-
- - 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'} - -
- - - -
-
- - Payout Ratio - -
- - {payoutRatio !== '0.00' ? payoutRatio : '0'}% - -
- - - -
-
- - Dividend Growth - -
- - {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} - -
- - -
+
+
+
+ Dividend Yield +
+
+ {dividendYield !== '0.00' ? dividendYield : '0'}% +
+
+
+
+ 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'} +
+
+ +
+
+ Payout Ratio +
+
+ {payoutRatio !== '0.00' ? payoutRatio : '0'}% +
+
+ +
+
+ Dividend Growth +
+
+ {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} +
+
+ + +
@@ -306,7 +264,7 @@ {#if stockDividends?.length !== 0 && optionsDividend} -
+
@@ -374,22 +332,21 @@ - - \ No newline at end of file + .chart { + width: 100%; + } + \ 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 index 233fc55f..fb0351a9 100644 --- a/src/routes/etf/[tickerID]/dividends/workers/dividendWorker.ts +++ b/src/routes/etf/[tickerID]/dividends/workers/dividendWorker.ts @@ -14,22 +14,22 @@ function plotDividend(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; + const currentDividend = reverseData[i]?.dividend; + const previousDividend = i === 0 ? 0 : reverseData[i - 1]?.dividend; - dateList.push(reverseData[i]?.paymentDate); - dividendList?.push(currentDividend); + dateList.push(reverseData[i]?.date); + dividendList?.push(currentDividend?.toFixed(2)); - 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 - } + 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}; } diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte index acc917e7..5dcd604f 100644 --- a/src/routes/stocks/[tickerID]/dividends/+page.svelte +++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte @@ -195,88 +195,63 @@ onMount(async() => {
{#if stockDividends?.length !== 0} - -
- -
-
- - Dividend Yield - -
- - - {dividendYield !== '0.00' ? dividendYield : '0'}% - -
- - - -
-
- - 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'} - -
- - - -
-
- - Payout Ratio - -
- - {payoutRatio !== '0.00' ? payoutRatio : '0'}% - -
- - - -
-
- - Dividend Growth - -
- - {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} - -
- - -
+
+
+
+ Dividend Yield +
+
+ {dividendYield !== '0.00' ? dividendYield : '0'}% +
+
+
+
+ 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'} +
+
+ +
+
+ Payout Ratio +
+
+ {payoutRatio !== '0.00' ? payoutRatio : '0'}% +
+
+ +
+
+ Dividend Growth +
+
+ {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} +
+
+ + +
+ +