update dividends pageg
This commit is contained in:
MuslemRahimi
parent
fbc1ffb015
commit
8eb591fe18
@ -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 { LineChart, BarChart } from 'echarts/charts'
|
||||
import { GridComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
use([LineChart, BarChart, GridComponent, CanvasRenderer])
|
||||
import { init, use } from 'echarts/core'
|
||||
import { LineChart, BarChart } from 'echarts/charts'
|
||||
import { GridComponent, TooltipComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer])
|
||||
|
||||
|
||||
export let data;
|
||||
|
||||
let dateDistance;
|
||||
|
||||
|
||||
|
||||
let currentPrice;
|
||||
let eps;
|
||||
|
||||
let stockDividends = [];
|
||||
let stockDividends = data?.getStockDividend?.at(0);
|
||||
let optionsDividend;
|
||||
|
||||
|
||||
@ -29,57 +25,45 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
|
||||
let payoutRatio = 'n/a';
|
||||
let dividendGrowth = 'n/a';
|
||||
|
||||
let dividendList = [];
|
||||
let growthList = [];
|
||||
let dateList = [];
|
||||
|
||||
|
||||
|
||||
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);
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
const options = {
|
||||
|
||||
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,63 +86,67 @@ 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',
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
return options;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const output = data?.getStockDividend;
|
||||
stockDividends = output[0];
|
||||
eps = output[1]
|
||||
currentPrice = output[2]
|
||||
let syncWorker: Worker | undefined = undefined;
|
||||
|
||||
if(stockDividends?.length !== 0)
|
||||
{
|
||||
payoutFrequency = stockDividends?.filter(entry => entry.date.includes('2022'))?.length;
|
||||
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)
|
||||
// Handling messages from the worker
|
||||
const handleMessage = async (event) => {
|
||||
const finalData = event.data?.finalData
|
||||
|
||||
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);
|
||||
|
||||
optionsDividend = plotDividend()
|
||||
|
||||
//Check if the last dividend is older than 12 months
|
||||
dateDistance = new Date(stockDividends?.at(0)?.date) < new Date(new Date().setFullYear(new Date().getFullYear() - 1)) ? true : false;
|
||||
}
|
||||
const loadWorker = async () => {
|
||||
const SyncWorker = await import('./workers/dividendWorker?worker');
|
||||
syncWorker = new SyncWorker.default();
|
||||
syncWorker.postMessage({ message: data?.getStockDividend});
|
||||
syncWorker.onmessage = handleMessage;
|
||||
|
||||
};
|
||||
|
||||
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
|
||||
@ -230,127 +218,106 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
|
||||
|
||||
{#if stockDividends?.length !== 0}
|
||||
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#27272A] shadow-md rounded-lg p-5 flex justify-center items-center mb-2">
|
||||
<!--Start Column Title-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Dividend Yield
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#27272A] shadow-md rounded-lg p-5 flex justify-center items-center mb-2">
|
||||
<!--Start Column Title-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Dividend Yield
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column Title-->
|
||||
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column Title-->
|
||||
|
||||
<!--Start Column Win Rate-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem] ">
|
||||
Annual Dividend
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
${annualDividend !== '0.00' ? annualDividend?.toFixed(2) : '0'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column Win Rate-->
|
||||
|
||||
<!--Start Column Performance-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Ex-Dividend Date
|
||||
<!--Start Column Win Rate-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem] ">
|
||||
Annual Dividend
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
${annualDividend !== '0.00' ? annualDividend : '0'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column Win Rate-->
|
||||
|
||||
<!--Start Column Performance-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Ex-Dividend Date
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Payout Frequency
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Payout Frequency
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Payout Ratio
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{payoutRatio !== '0.00' ? payoutRatio : '0'}%
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Dividend Growth
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
|
||||
|
||||
<h3 class="text-xl text-white font-semibold ">
|
||||
Dividends History
|
||||
</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}
|
||||
|
||||
|
||||
{#if mode}
|
||||
<div class="app w-full ">
|
||||
<Chart {init} options={optionsDividend} class="chart" />
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Payout Ratio
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{payoutRatio !== '0.00' ? payoutRatio : '0'}%
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<span class="text-gray-200 text-sm italic">
|
||||
* Dividend amounts are adjusted for stock splits when applicable.
|
||||
</span>
|
||||
|
||||
{:else}
|
||||
|
||||
<div class="flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Dividend Growth
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
|
||||
|
||||
<h3 class="text-xl text-white font-semibold ">
|
||||
Dividends History
|
||||
</h3>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{#if stockDividends?.length !== 0 && optionsDividend}
|
||||
|
||||
<div class="app w-full h-[400px] sm:h-[500px] mb-14">
|
||||
<Chart {init} options={optionsDividend} class="chart" />
|
||||
</div>
|
||||
|
||||
|
||||
<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">
|
||||
<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">
|
||||
@ -416,19 +382,20 @@ use([LineChart, BarChart, GridComponent, CanvasRenderer])
|
||||
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 700px;
|
||||
max-width: 1500px;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.app {
|
||||
max-width: 520px;
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
.app {
|
||||
height: 300px;
|
||||
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.app {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -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 {};
|
||||
|
||||
@ -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 */
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user