AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dividend page

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-13 20:06:10 +02:00
parent 8619216760
commit 6a9ddf29d2
3 changed files with 197 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,7 @@
async function plotDividend(dividendList, growthList, dateList) { async function plotDividend(dividendList, dateList) {
const options = { const options = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -40,9 +40,9 @@
animation: false, animation: false,
grid: { grid: {
left: '2%', left: '2%',
right: '2%', right: '0%',
bottom: '2%', bottom: '10%',
top: '5%', top: '10%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
@ -80,24 +80,8 @@
{ {
name: 'Dividend per Share', name: 'Dividend per Share',
data: dividendList, data: dividendList,
type: 'line',
itemStyle: {
color: '#fff' // Change bar color to white
},
showSymbol: false
},
{
name: 'Growth Rate (%)',
data: growthList,
type: 'bar', type: 'bar',
barWidth: '80%', smooth: true,
yAxisIndex: 1,
itemStyle: {
color: (params) => {
// Set color based on positive or negative value
return params.data >= 0 ? '#22C55E' : '#E11D48';
},
},
}, },
], ],
}; };
@ -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,85 +196,59 @@
{#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">
<span class="text-gray-300 font-medium text-[1rem]">
Dividend Yield Dividend Yield
</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">
{dividendYield !== '0.00' ? dividendYield : '0'}% {dividendYield !== '0.00' ? dividendYield : '0'}%
</span>
</div> </div>
<!--End Column Title--> </div>
<div class="p-4 bp:p-5 sm:p-6">
<!--Start Column Win Rate--> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-col">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem] ">
Annual Dividend Annual Dividend
</span>
</div> </div>
<span class="text-white text-[1rem] font-semibold"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
${annualDividend !== '0.00' ? annualDividend : '0'} ${annualDividend !== '0.00' ? annualDividend : '0'}
</span>
</div> </div>
<!--End Column Win Rate--> </div>
<div class="p-4 bp:p-5 sm:p-6 ">
<!--Start Column Performance--> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-col">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Ex-Dividend Date Ex-Dividend Date
</span>
</div> </div>
<span class="text-white text-[1rem] font-semibold"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</span>
</div> </div>
<!--End Column--> </div>
<!--Start Column--> <div class="p-4 bp:p-5 sm:p-6 ">
<div class="flex flex-col sm:mt-5"> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Payout Frequency Payout Frequency
</span>
</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'} {payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
</span>
</div> </div>
<!--End Column--> </div>
<!--Start Column--> <div class="p-4 bp:p-5 sm:p-6 ">
<div class="flex flex-col sm:mt-5"> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Payout Ratio Payout Ratio
</span>
</div> </div>
<span class="text-white text-[1rem] font-semibold"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{payoutRatio !== '0.00' ? payoutRatio : '0'}% {payoutRatio !== '0.00' ? payoutRatio : '0'}%
</span>
</div> </div>
<!--End Column--> </div>
<!--Start Column--> <div class="p-4 bp:p-5 sm:p-6 ">
<div class="flex flex-col sm:mt-5"> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Dividend Growth Dividend Growth
</span>
</div> </div>
<span class="text-white text-[1rem] font-semibold"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
</span>
</div> </div>
<!--End Column--> </div>
</div> </div>
@ -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>
@ -377,19 +335,18 @@
<style> <style>
.app { .app {
height: 300px; height: 400px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */ width: 100%;
} }
@media (max-width: 640px) { @media (max-width: 560px) {
.app { .app {
height: 200px; width: 100%;
height: 300px;
} }
} }
.chart { .chart {
width: 100%; width: 100%;
} }
</style> </style>

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

@ -17,8 +17,8 @@ function plotDividend(stockDividends) {
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) {

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

@ -195,89 +195,64 @@ 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">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Dividend Yield Dividend Yield
</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">
{dividendYield !== '0.00' ? dividendYield : '0'}% {dividendYield !== '0.00' ? dividendYield : '0'}%
</span>
</div> </div>
<!--End Column Title--> </div>
<div class="p-4 bp:p-5 sm:p-6">
<!--Start Column Win Rate--> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-col">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem] ">
Annual Dividend Annual Dividend
</span>
</div> </div>
<span class="text-white text-[1rem] font-semibold"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
${annualDividend !== '0.00' ? annualDividend : '0'} ${annualDividend !== '0.00' ? annualDividend : '0'}
</span>
</div> </div>
<!--End Column Win Rate--> </div>
<div class="p-4 bp:p-5 sm:p-6 ">
<!--Start Column Performance--> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-col">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Ex-Dividend Date Ex-Dividend Date
</span>
</div> </div>
<span class="text-white text-[1rem] font-semibold"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</span>
</div> </div>
<!--End Column--> </div>
<!--Start Column--> <div class="p-4 bp:p-5 sm:p-6 ">
<div class="flex flex-col sm:mt-5"> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Payout Frequency Payout Frequency
</span>
</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'} {payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
</span>
</div> </div>
<!--End Column--> </div>
<!--Start Column--> <div class="p-4 bp:p-5 sm:p-6 ">
<div class="flex flex-col sm:mt-5"> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Payout Ratio Payout Ratio
</span>
</div> </div>
<span class="text-white text-[1rem] font-semibold"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{payoutRatio !== '0.00' ? payoutRatio : '0'}% {payoutRatio !== '0.00' ? payoutRatio : '0'}%
</span>
</div> </div>
<!--End Column--> </div>
<!--Start Column--> <div class="p-4 bp:p-5 sm:p-6 ">
<div class="flex flex-col sm:mt-5"> <div class="text-sm font-normal text-default xs:text-base">
<div class="flex flex-row items-center">
<span class="text-gray-300 font-medium text-[1rem]">
Dividend Growth Dividend Growth
</span>
</div> </div>
<span class="text-white text-[1rem] font-semibold"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
</span>
</div> </div>
<!--End Column--> </div>
</div> </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">
<h3 class="text-xl text-white font-semibold "> <h3 class="text-xl text-white font-semibold ">