update dividend page
This commit is contained in:
MuslemRahimi
parent
8619216760
commit
6a9ddf29d2
@ -31,80 +31,64 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function plotDividend(dividendList, growthList, dateList) {
|
async function plotDividend(dividendList, dateList) {
|
||||||
const options = {
|
const options = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
hideDelay: 100, // Set the delay in milliseconds
|
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,
|
yAxis: [
|
||||||
grid: {
|
{
|
||||||
left: '2%',
|
type: 'value',
|
||||||
right: '2%',
|
axisLabel: {
|
||||||
bottom: '2%',
|
color: '#fff',
|
||||||
top: '5%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: dateList,
|
|
||||||
type: 'category',
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
},
|
||||||
splitLine: {
|
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: [
|
],
|
||||||
{
|
series: [
|
||||||
type: 'value',
|
{
|
||||||
axisLabel: {
|
name: 'Dividend per Share',
|
||||||
color: '#fff',
|
data: dividendList,
|
||||||
},
|
type: 'bar',
|
||||||
splitLine: {
|
smooth: true,
|
||||||
show: false, // Disable x-axis grid lines
|
},
|
||||||
},
|
],
|
||||||
},
|
};
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
return options;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -125,9 +109,9 @@
|
|||||||
growthList = finalData?.growthList;
|
growthList = finalData?.growthList;
|
||||||
dateList = finalData?.dateList;
|
dateList = finalData?.dateList;
|
||||||
annualDividend = finalData?.annualDividend;
|
annualDividend = finalData?.annualDividend;
|
||||||
optionsDividend = await plotDividend(dividendList, growthList, dateList)
|
optionsDividend = await plotDividend(dividendList, dateList)
|
||||||
//console.log('Message from worker:', chartData);
|
//console.log('Message from worker:', chartData);
|
||||||
|
console.log(dateList)
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadWorker = async () => {
|
const loadWorker = async () => {
|
||||||
@ -212,87 +196,61 @@
|
|||||||
|
|
||||||
{#if stockDividends?.length !== 0}
|
{#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">
|
<div class="mb-4 grid grid-cols-2 grid-rows-2 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1">
|
||||||
<!--Start Column Title-->
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="flex flex-col">
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
<div class="flex flex-row items-center">
|
Dividend Yield
|
||||||
<span class="text-gray-300 font-medium text-[1rem]">
|
</div>
|
||||||
Dividend Yield
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
</span>
|
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<span class="text-white text-[1rem] font-semibold">
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
</span>
|
Annual Dividend
|
||||||
</div>
|
</div>
|
||||||
<!--End Column Title-->
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
|
${annualDividend !== '0.00' ? annualDividend : '0'}
|
||||||
<!--Start Column Win Rate-->
|
</div>
|
||||||
<div class="flex flex-col">
|
</div>
|
||||||
<div class="flex flex-row items-center">
|
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||||
<span class="text-gray-300 font-medium text-[1rem] ">
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
Annual Dividend
|
Ex-Dividend Date
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
<span class="text-white text-[1rem] font-semibold">
|
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||||
${annualDividend !== '0.00' ? annualDividend : '0'}
|
</div>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
<!--End Column Win Rate-->
|
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||||
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
<!--Start Column Performance-->
|
Payout Frequency
|
||||||
<div class="flex flex-col">
|
</div>
|
||||||
<div class="flex flex-row items-center">
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
<span class="text-gray-300 font-medium text-[1rem]">
|
{payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
|
||||||
Ex-Dividend Date
|
</div>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
<span class="text-white text-[1rem] font-semibold">
|
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||||
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
</span>
|
Payout Ratio
|
||||||
</div>
|
</div>
|
||||||
<!--End Column-->
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
|
{payoutRatio !== '0.00' ? payoutRatio : '0'}%
|
||||||
<!--Start Column-->
|
</div>
|
||||||
<div class="flex flex-col sm:mt-5">
|
</div>
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<span class="text-gray-300 font-medium text-[1rem]">
|
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||||
Payout Frequency
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
</span>
|
Dividend Growth
|
||||||
</div>
|
</div>
|
||||||
<span class="text-white text-[1rem] font-semibold">
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
{payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
|
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--End Column-->
|
|
||||||
|
|
||||||
<!--Start Column-->
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
|
<div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
|
||||||
|
|
||||||
@ -306,7 +264,7 @@
|
|||||||
|
|
||||||
{#if stockDividends?.length !== 0 && optionsDividend}
|
{#if stockDividends?.length !== 0 && optionsDividend}
|
||||||
|
|
||||||
<div class="app w-full h-[400px] sm:h-[500px] mb-14">
|
<div class="app w-full">
|
||||||
<Chart {init} options={optionsDividend} class="chart" />
|
<Chart {init} options={optionsDividend} class="chart" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -374,22 +332,21 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.app {
|
.app {
|
||||||
height: 300px;
|
height: 400px;
|
||||||
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.app {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.chart {
|
||||||
|
width: 100%;
|
||||||
@media (max-width: 640px) {
|
}
|
||||||
.app {
|
</style>
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -14,22 +14,22 @@ function plotDividend(stockDividends) {
|
|||||||
const reverseData = sortDividendsByDate(copyData);
|
const reverseData = sortDividendsByDate(copyData);
|
||||||
|
|
||||||
for (let i = 0; i < reverseData?.length; i++) {
|
for (let i = 0; i < reverseData?.length; i++) {
|
||||||
const currentDividend = reverseData[i]?.dividend;
|
const currentDividend = reverseData[i]?.dividend;
|
||||||
const previousDividend = i === 0 ? 0 : reverseData[i - 1]?.dividend;
|
const previousDividend = i === 0 ? 0 : reverseData[i - 1]?.dividend;
|
||||||
|
|
||||||
dateList.push(reverseData[i]?.paymentDate);
|
dateList.push(reverseData[i]?.date);
|
||||||
dividendList?.push(currentDividend);
|
dividendList?.push(currentDividend?.toFixed(2));
|
||||||
|
|
||||||
|
|
||||||
if (currentDividend !== null && previousDividend !== null && previousDividend !== 0) {
|
if (currentDividend !== null && previousDividend !== null && previousDividend !== 0) {
|
||||||
const growthRate = (((currentDividend - previousDividend) / previousDividend) * 100 )?.toFixed(2);
|
const growthRate = (((currentDividend - previousDividend) / previousDividend) * 100 )?.toFixed(2);
|
||||||
growthList?.push(growthRate);
|
growthList?.push(growthRate);
|
||||||
} else {
|
} else {
|
||||||
growthList?.push(0); // Pushing null if the growth calculation is not possible
|
growthList?.push(0); // Pushing null if the growth calculation is not possible
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {dividendList, growthList, dateList};
|
return {dividendList, growthList, dateList};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -195,88 +195,63 @@ onMount(async() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if stockDividends?.length !== 0}
|
{#if stockDividends?.length !== 0}
|
||||||
|
<div class="mb-4 grid grid-cols-2 grid-rows-2 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1">
|
||||||
<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">
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<!--Start Column Title-->
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
<div class="flex flex-col">
|
Dividend Yield
|
||||||
<div class="flex flex-row items-center">
|
</div>
|
||||||
<span class="text-gray-300 font-medium text-[1rem]">
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
Dividend Yield
|
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<span class="text-white text-[1rem] font-semibold">
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
Annual Dividend
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
<!--End Column Title-->
|
${annualDividend !== '0.00' ? annualDividend : '0'}
|
||||||
|
</div>
|
||||||
<!--Start Column Win Rate-->
|
</div>
|
||||||
<div class="flex flex-col">
|
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||||
<div class="flex flex-row items-center">
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
<span class="text-gray-300 font-medium text-[1rem] ">
|
Ex-Dividend Date
|
||||||
Annual Dividend
|
</div>
|
||||||
</span>
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
</div>
|
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||||
<span class="text-white text-[1rem] font-semibold">
|
</div>
|
||||||
${annualDividend !== '0.00' ? annualDividend : '0'}
|
</div>
|
||||||
</span>
|
|
||||||
</div>
|
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||||
<!--End Column Win Rate-->
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
|
Payout Frequency
|
||||||
<!--Start Column Performance-->
|
</div>
|
||||||
<div class="flex flex-col">
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
<div class="flex flex-row items-center">
|
{payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
|
||||||
<span class="text-gray-300 font-medium text-[1rem]">
|
</div>
|
||||||
Ex-Dividend Date
|
</div>
|
||||||
</span>
|
|
||||||
</div>
|
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||||
<span class="text-white text-[1rem] font-semibold">
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
Payout Ratio
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
<!--End Column-->
|
{payoutRatio !== '0.00' ? payoutRatio : '0'}%
|
||||||
|
</div>
|
||||||
<!--Start Column-->
|
</div>
|
||||||
<div class="flex flex-col sm:mt-5">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||||
<span class="text-gray-300 font-medium text-[1rem]">
|
<div class="text-sm font-normal text-default xs:text-base">
|
||||||
Payout Frequency
|
Dividend Growth
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||||
<span class="text-white text-[1rem] font-semibold">
|
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
|
||||||
{payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
|
</div>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
<!--End Column-->
|
|
||||||
|
</div>
|
||||||
<!--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>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
|
<div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user