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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-09-23 17:14:40 +02:00
parent 87935c6517
commit 214b98eb67
3 changed files with 395 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,11 +33,11 @@
// Combine the data into an array of objects to keep them linked // Combine the data into an array of objects to keep them linked
const combinedData = rawData?.history?.map(item => ({ const combinedData = rawData?.history?.map(item => ({
date: item?.paymentDate, date: item?.paymentDate,
dividend: item?.adjDividend dividend: item?.adjDividend?.toFixed(2)
})); }));
// Sort the combined data array based on the date // 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 // Separate the sorted data back into individual arrays
const dates = combinedData.map(item => item.date); const dates = combinedData.map(item => item.date);
@ -51,7 +51,7 @@
}, },
animation: false, animation: false,
grid: { grid: {
left: '2%', left: '3%',
right: '3%', right: '3%',
bottom: '10%', bottom: '10%',
top: '10%', top: '10%',
@ -70,22 +70,13 @@
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
axisLabel: {
color: '#fff',
},
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
},
{
type: 'value',
axisLabel: { axisLabel: {
show: false, show: false // Hide y-axis labels
formatter: '{value} %', }
},
splitLine: {
show: false,
},
}, },
], ],
series: [ series: [
@ -182,54 +173,58 @@
</div> </div>
{#if rawData?.history?.length !== 0} {#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="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 Dividend Yield
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{dividendYield !== '0.00' ? dividendYield : '0'}% {dividendYield !== '0.00' ? dividendYield : '0'}%
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6"> <div class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast ">
<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]">
Annual Dividend Annual Dividend
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
${annualDividend !== '0.00' ? annualDividend : '0'} ${annualDividend !== '0.00' ? annualDividend : '0'}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 "> <div class="p-4 bp:p-5 sm:p-6 border-r border-contrast ">
<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]">
Ex-Dividend Date Ex-Dividend Date
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <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' })}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 "> <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
<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]">
Payout Frequency Payout Frequency
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <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'}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
<div class="p-4 bp:p-5 sm:p-6 "> <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
<div class="text-sm font-normal text-default xs:text-base">
Payout Ratio Payout Ratio
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{payoutRatio !== '0.00' ? payoutRatio : '0'}% {payoutRatio !== '0.00' ? payoutRatio : '0'}%
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
<div class="p-4 bp:p-5 sm:p-6 "> <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
<div class="text-sm font-normal text-default xs:text-base">
Dividend Growth Dividend Growth
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
</div> </div>

14
src/routes/politicians/[slug]/+page.svelte
View File

@ -81,7 +81,7 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
// Handle default case if needed // Handle default case if needed
break; break;
} }
goto("/list/" + path); return path;
} }
@ -419,10 +419,12 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
</thead> </thead>
<tbody> <tbody>
{#each rawData?.topSectors as item} {#each rawData?.topSectors as item}
{#each Object.entries(item) as [name, value]} {#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]"> <tr class="text-white 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"> <td class="text-[1rem] whitespace-nowrap">
<a href={"/list/"+sectorSelector(name)} class="sm:hover:text-white text-blue-400">
{name} {name}
</a>
</td> </td>
<td class="text-white text-[1rem] whitespace-nowrap text-end"> <td class="text-white text-[1rem] whitespace-nowrap text-end">
{value?.toFixed(2)}% {value?.toFixed(2)}%
@ -511,7 +513,7 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
</thead> </thead>
<tbody class="p-0"> <tbody class="p-0">
{#each displayList as item} {#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"> <td class="pb-3 border-b border-b-[#27272A] whitespace-nowrap">
<div class="flex flex-row items-center"> <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"/> <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>
<div class="flex flex-col ml-2"> <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> <span class="text-white text-sm">{item?.name?.length > 20 ? item?.name?.slice(0,20)+'...' : item?.name}</span>
</div> </div>
</div> </div>

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

@ -1,43 +1,43 @@
<script lang="ts"> <script lang="ts">
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store'; import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { Chart } from 'svelte-echarts' import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core' import { init, use } from 'echarts/core'
import { LineChart, BarChart } from 'echarts/charts' import { LineChart, BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components' import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers' import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer]) use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer])
export let data; export let data;
let isLoaded = false; let isLoaded = false;
let dateDistance; let dateDistance;
let rawData = data?.getStockDividend; let rawData = data?.getStockDividend;
let optionsDividend; let optionsDividend;
let exDividendDate = rawData?.history?.at(0)?.date; let exDividendDate = rawData?.history?.at(0)?.date;
let dividendYield = rawData?.dividendYield; let dividendYield = rawData?.dividendYield;
let annualDividend = rawData?.annualDividend; let annualDividend = rawData?.annualDividend;
let payoutFrequency = rawData?.payoutFrequency; let payoutFrequency = rawData?.payoutFrequency;
let payoutRatio = rawData?.payoutRatio; let payoutRatio = rawData?.payoutRatio;
let dividendGrowth = rawData?.dividendGrowth; let dividendGrowth = rawData?.dividendGrowth;
async function plotDividend() { async function plotDividend() {
// Combine the data into an array of objects to keep them linked // Combine the data into an array of objects to keep them linked
const combinedData = rawData?.history?.map(item => ({ const combinedData = rawData?.history?.map(item => ({
date: item?.paymentDate, date: item?.paymentDate,
dividend: item?.adjDividend dividend: item?.adjDividend?.toFixed(2)
})); }));
// Sort the combined data array based on the date // 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 // Separate the sorted data back into individual arrays
const dates = combinedData.map(item => item.date); const dates = combinedData.map(item => item.date);
@ -51,7 +51,7 @@ async function plotDividend() {
}, },
animation: false, animation: false,
grid: { grid: {
left: '2%', left: '3%',
right: '3%', right: '3%',
bottom: '10%', bottom: '10%',
top: '10%', top: '10%',
@ -70,22 +70,13 @@ async function plotDividend() {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
axisLabel: {
color: '#fff',
},
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
},
{
type: 'value',
axisLabel: { axisLabel: {
show: false, show: false // Hide y-axis labels
formatter: '{value} %', }
},
splitLine: {
show: false,
},
}, },
], ],
series: [ series: [
@ -100,22 +91,22 @@ async function plotDividend() {
return options; return options;
} }
onMount(async() => { onMount(async() => {
optionsDividend = await plotDividend() optionsDividend = await plotDividend()
isLoaded = true; isLoaded = true;
}) })
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <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.`} /> <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 --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
@ -182,54 +173,58 @@ onMount(async() => {
</div> </div>
{#if rawData?.history?.length !== 0} {#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="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 Dividend Yield
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{dividendYield !== '0.00' ? dividendYield : '0'}% {dividendYield !== '0.00' ? dividendYield : '0'}%
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6"> <div class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast ">
<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]">
Annual Dividend Annual Dividend
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
${annualDividend !== '0.00' ? annualDividend : '0'} ${annualDividend !== '0.00' ? annualDividend : '0'}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 "> <div class="p-4 bp:p-5 sm:p-6 border-r border-contrast ">
<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]">
Ex-Dividend Date Ex-Dividend Date
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <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' })}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 "> <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
<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]">
Payout Frequency Payout Frequency
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <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'}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
<div class="p-4 bp:p-5 sm:p-6 "> <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
<div class="text-sm font-normal text-default xs:text-base">
Payout Ratio Payout Ratio
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{payoutRatio !== '0.00' ? payoutRatio : '0'}% {payoutRatio !== '0.00' ? payoutRatio : '0'}%
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast ">
<div class="p-4 bp:p-5 sm:p-6 "> <label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
<div class="text-sm font-normal text-default xs:text-base">
Dividend Growth Dividend Growth
</div> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} {dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
</div> </div>