ui fix
This commit is contained in:
MuslemRahimi
parent
87935c6517
commit
214b98eb67
@ -33,11 +33,11 @@
|
||||
// Combine the data into an array of objects to keep them linked
|
||||
const combinedData = rawData?.history?.map(item => ({
|
||||
date: item?.paymentDate,
|
||||
dividend: item?.adjDividend
|
||||
dividend: item?.adjDividend?.toFixed(2)
|
||||
}));
|
||||
|
||||
// Sort the combined data array based on the date
|
||||
combinedData.sort((a, b) => new Date(a.date) - new Date(b.date));
|
||||
combinedData.sort((a, b) => new Date(a?.date) - new Date(b?.date));
|
||||
|
||||
// Separate the sorted data back into individual arrays
|
||||
const dates = combinedData.map(item => item.date);
|
||||
@ -51,7 +51,7 @@
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '2%',
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '10%',
|
||||
top: '10%',
|
||||
@ -70,22 +70,13 @@
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
|
||||
axisLabel: {
|
||||
show: false,
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
show: false // Hide y-axis labels
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
@ -182,54 +173,58 @@
|
||||
</div>
|
||||
|
||||
{#if rawData?.history?.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="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 divide-x">
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Dividend Yield
|
||||
</div>
|
||||
</label>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Annual Dividend
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
${annualDividend !== '0.00' ? annualDividend : '0'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Ex-Dividend Date
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<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' })}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Payout Frequency
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<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'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Payout Ratio
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{payoutRatio !== '0.00' ? payoutRatio : '0'}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Dividend Growth
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
|
||||
</div>
|
||||
|
||||
@ -81,7 +81,7 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
// Handle default case if needed
|
||||
break;
|
||||
}
|
||||
goto("/list/" + path);
|
||||
return path;
|
||||
}
|
||||
|
||||
|
||||
@ -419,10 +419,12 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each rawData?.topSectors as item}
|
||||
{#each Object.entries(item) as [name, value]}
|
||||
<tr on:click={() => sectorSelector(name)} class="text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#141417] border-b border-[#141417]">
|
||||
<td class="text-blue-400 sm:hover:text-white duration-100 text-[1rem] whitespace-nowrap">
|
||||
{#each Object?.entries(item) as [name, value]}
|
||||
<tr class="text-white sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#141417] border-b border-[#141417]">
|
||||
<td class="text-[1rem] whitespace-nowrap">
|
||||
<a href={"/list/"+sectorSelector(name)} class="sm:hover:text-white text-blue-400">
|
||||
{name}
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-white text-[1rem] whitespace-nowrap text-end">
|
||||
{value?.toFixed(2)}%
|
||||
@ -511,7 +513,7 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
</thead>
|
||||
<tbody class="p-0">
|
||||
{#each displayList as item}
|
||||
<tr on:click={() => goto(`/${item?.assetType === 'stock' ? 'stocks' : item?.assetType === 'etf' ? 'etf' : 'crypto'}/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#27272A] cursor-pointer">
|
||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#27272A]">
|
||||
|
||||
<td class="pb-3 border-b border-b-[#27272A] whitespace-nowrap">
|
||||
<div class="flex flex-row items-center">
|
||||
@ -519,7 +521,7 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
|
||||
<img style="clip-path: circle(50%);" class="avatar w-5 h-5" src={`https://financialmodelingprep.com/image-stock/${item?.ticker}.png`} alt="stock logo"/>
|
||||
</div>
|
||||
<div class="flex flex-col ml-2">
|
||||
<span class="text-sm sm:text-[1rem] text-blue-400">{item?.ticker?.replace('_',' ')}</span>
|
||||
<a href={`/${item?.assetType === 'stock' ? 'stocks' : item?.assetType === 'etf' ? 'etf' : 'crypto'}/${item?.ticker}`} class="text-sm sm:text-[1rem] sm:hover:text-white text-blue-400">{item?.ticker?.replace('_',' ')}</a>
|
||||
<span class="text-white text-sm">{item?.name?.length > 20 ? item?.name?.slice(0,20)+'...' : item?.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,43 +1,43 @@
|
||||
<script lang="ts">
|
||||
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
|
||||
import { onMount } from 'svelte';
|
||||
import {numberOfUnreadNotification, displayCompanyName, stockTicker} 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, TooltipComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer])
|
||||
import { Chart } from 'svelte-echarts'
|
||||
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 isLoaded = false;
|
||||
let dateDistance;
|
||||
let rawData = data?.getStockDividend;
|
||||
let optionsDividend;
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
let dateDistance;
|
||||
let rawData = data?.getStockDividend;
|
||||
let optionsDividend;
|
||||
|
||||
|
||||
|
||||
let exDividendDate = rawData?.history?.at(0)?.date;
|
||||
let dividendYield = rawData?.dividendYield;
|
||||
let annualDividend = rawData?.annualDividend;
|
||||
let payoutFrequency = rawData?.payoutFrequency;
|
||||
let payoutRatio = rawData?.payoutRatio;
|
||||
let dividendGrowth = rawData?.dividendGrowth;
|
||||
let exDividendDate = rawData?.history?.at(0)?.date;
|
||||
let dividendYield = rawData?.dividendYield;
|
||||
let annualDividend = rawData?.annualDividend;
|
||||
let payoutFrequency = rawData?.payoutFrequency;
|
||||
let payoutRatio = rawData?.payoutRatio;
|
||||
let dividendGrowth = rawData?.dividendGrowth;
|
||||
|
||||
|
||||
|
||||
|
||||
async function plotDividend() {
|
||||
async function plotDividend() {
|
||||
|
||||
// Combine the data into an array of objects to keep them linked
|
||||
const combinedData = rawData?.history?.map(item => ({
|
||||
date: item?.paymentDate,
|
||||
dividend: item?.adjDividend
|
||||
dividend: item?.adjDividend?.toFixed(2)
|
||||
}));
|
||||
|
||||
// Sort the combined data array based on the date
|
||||
combinedData.sort((a, b) => new Date(a.date) - new Date(b.date));
|
||||
combinedData.sort((a, b) => new Date(a?.date) - new Date(b?.date));
|
||||
|
||||
// Separate the sorted data back into individual arrays
|
||||
const dates = combinedData.map(item => item.date);
|
||||
@ -51,7 +51,7 @@ async function plotDividend() {
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '2%',
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '10%',
|
||||
top: '10%',
|
||||
@ -70,22 +70,13 @@ async function plotDividend() {
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
|
||||
axisLabel: {
|
||||
show: false,
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
show: false // Hide y-axis labels
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
@ -100,22 +91,22 @@ async function plotDividend() {
|
||||
|
||||
|
||||
return options;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMount(async() => {
|
||||
onMount(async() => {
|
||||
optionsDividend = await plotDividend()
|
||||
isLoaded = true;
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<svelte:head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
@ -136,7 +127,7 @@ onMount(async() => {
|
||||
<meta name="twitter:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
@ -182,54 +173,58 @@ onMount(async() => {
|
||||
</div>
|
||||
|
||||
{#if rawData?.history?.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="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 divide-x">
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Dividend Yield
|
||||
</div>
|
||||
</label>
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Annual Dividend
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
${annualDividend !== '0.00' ? annualDividend : '0'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Ex-Dividend Date
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<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' })}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Payout Frequency
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<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'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Payout Ratio
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{payoutRatio !== '0.00' ? payoutRatio : '0'}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bp:p-5 sm:p-6 ">
|
||||
<div class="text-sm font-normal text-default xs:text-base">
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Dividend Growth
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user