ui fixes
This commit is contained in:
MuslemRahimi
parent
87c0f355a2
commit
9fedce3f00
@ -161,7 +161,7 @@
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<div class="sm:p-7 w-full mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
|
||||
Congress Trading
|
||||
</h1>
|
||||
|
||||
|
||||
@ -161,7 +161,7 @@
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<div class="sm:p-7 w-full mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
|
||||
Congress Trading
|
||||
</h1>
|
||||
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
<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, TooltipComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer])
|
||||
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, TooltipComponent } from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
@ -16,8 +19,6 @@
|
||||
let rawData = data?.getStockDividend;
|
||||
let optionsDividend;
|
||||
|
||||
|
||||
|
||||
let exDividendDate = rawData?.history?.at(0)?.date;
|
||||
let dividendYield = rawData?.dividendYield;
|
||||
let annualDividend = rawData?.annualDividend;
|
||||
@ -25,326 +26,409 @@
|
||||
let payoutRatio = rawData?.payoutRatio;
|
||||
let dividendGrowth = rawData?.dividendGrowth;
|
||||
|
||||
|
||||
|
||||
|
||||
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?.toFixed(2)
|
||||
const combinedData = rawData?.history?.map((item) => ({
|
||||
date: item?.paymentDate,
|
||||
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));
|
||||
|
||||
// Separate the sorted data back into individual arrays
|
||||
const dates = combinedData.map(item => item.date);
|
||||
const dividendList = combinedData.map(item => item.dividend);
|
||||
|
||||
const dates = combinedData.map((item) => item.date);
|
||||
const dividendList = combinedData.map((item) => item.dividend);
|
||||
|
||||
const options = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
hideDelay: 100, // Set the delay in milliseconds
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
hideDelay: 100, // Set the delay in milliseconds
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '10%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: dates,
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "3%",
|
||||
bottom: "10%",
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: dates,
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
show: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "Dividend per Share",
|
||||
data: dividendList,
|
||||
type: "bar",
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
axisLabel: {
|
||||
show: false // Hide y-axis labels
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Dividend per Share',
|
||||
data: dividendList,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
return options;
|
||||
return options;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMount(async() => {
|
||||
optionsDividend = await plotDividend()
|
||||
onMount(async () => {
|
||||
optionsDividend = await plotDividend();
|
||||
isLoaded = true;
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$etfTicker}) Dividend History, Dates & Yield ·
|
||||
stocknear
|
||||
</title>
|
||||
|
||||
</script>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
|
||||
/>
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}), including dividend history, yield, key dates, growth and other metrics.`}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<svelte:head>
|
||||
<section
|
||||
class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="w-full mb-6">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
|
||||
Dividends
|
||||
</h1>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$etfTicker}) Dividend History, Dates & Yield · stocknear
|
||||
</title>
|
||||
<div
|
||||
class="w-full text-white 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
|
||||
>
|
||||
|
||||
<meta name="description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}>
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/>
|
||||
<meta property="og:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}), including dividend history, yield, key dates, growth and other metrics.`} />
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
{#if rawData?.history?.length !== 0}
|
||||
{#if !dateDistance}
|
||||
{$displayCompanyName} has an annual dividend of ${annualDividend}
|
||||
per share, with a forward yield of
|
||||
{dividendYield}%. The dividend is paid every
|
||||
{payoutFrequency === 4
|
||||
? "3 months"
|
||||
: payoutFrequency === 2
|
||||
? "6 months"
|
||||
: payoutFrequency === 1
|
||||
? "12 months"
|
||||
: "n/a"}
|
||||
and the last ex-dividend date was
|
||||
{new Date(exDividendDate)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
{:else}
|
||||
{$displayCompanyName} issued its most recent dividend on
|
||||
{new Date(rawData?.history?.at(0)?.date)?.toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
},
|
||||
)}. Since then, the company has not distributed any further
|
||||
dividends for over 12 months.
|
||||
{/if}
|
||||
{:else}
|
||||
No dividend history available for {$displayCompanyName}.
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div class="w-full relative flex justify-center items-center overflow-hidden">
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="w-full mb-6">
|
||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
Dividends
|
||||
</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="w-full text-white 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 rawData?.history?.length !== 0}
|
||||
{#if !dateDistance}
|
||||
{$displayCompanyName} has an annual dividend of
|
||||
${annualDividend}
|
||||
per share, with a forward yield of
|
||||
{dividendYield}%.
|
||||
The dividend is paid every
|
||||
{payoutFrequency === 4 ? '3 months' : payoutFrequency === 2 ? '6 months' : payoutFrequency === 1 ? '12 months' : 'n/a'}
|
||||
and the last ex-dividend date was
|
||||
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
{:else}
|
||||
{$displayCompanyName} issued its most recent dividend on
|
||||
{new Date(rawData?.history?.at(0)?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}.
|
||||
Since then, the company has not distributed any further dividends for over 12 months.
|
||||
{/if}
|
||||
|
||||
|
||||
{:else}
|
||||
No dividend history available for {$displayCompanyName}.
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{#if rawData?.history?.length !== 0}
|
||||
|
||||
<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">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Dividend Yield
|
||||
</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 border-l border-b border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Annual Dividend
|
||||
</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 border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Ex-Dividend Date
|
||||
</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 border-t border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Payout Frequency
|
||||
</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 border-t border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Payout Ratio
|
||||
</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 border-t border-r border-contrast ">
|
||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
|
||||
Dividend Growth
|
||||
</label>
|
||||
|
||||
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
|
||||
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</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 isLoaded}
|
||||
{#if rawData?.history?.length !== 0 && optionsDividend}
|
||||
|
||||
<div class="app w-full">
|
||||
<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">
|
||||
<th class="text-start bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
|
||||
Ex-Divid. Date
|
||||
</th>
|
||||
<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] 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">
|
||||
Pay Date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="shadow-md">
|
||||
{#each rawData?.history as item}
|
||||
<tr class="text-gray-200 odd:bg-[#27272A]">
|
||||
<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-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
|
||||
${item?.adjDividend?.toFixed(3)}
|
||||
</td>
|
||||
<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-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>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<span class="text-gray-200 text-sm italic">
|
||||
* Dividend amounts are adjusted for stock splits when applicable.
|
||||
</span>
|
||||
|
||||
{:else}
|
||||
<h1 class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10">
|
||||
No history found
|
||||
</h1>
|
||||
{/if}
|
||||
|
||||
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<span class="loading loading-spinner loading-md text-gray-400"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
{#if rawData?.history?.length !== 0}
|
||||
<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">
|
||||
<label
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||
>
|
||||
Dividend Yield
|
||||
</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 border-l border-b border-contrast">
|
||||
<label
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||
>
|
||||
Annual Dividend
|
||||
</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 border-r border-contrast">
|
||||
<label
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||
>
|
||||
Ex-Dividend Date
|
||||
</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 border-t border-r border-contrast">
|
||||
<label
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||
>
|
||||
Payout Frequency
|
||||
</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 border-t border-r border-contrast">
|
||||
<label
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||
>
|
||||
Payout Ratio
|
||||
</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 border-t border-r border-contrast">
|
||||
<label
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||
>
|
||||
Dividend Growth
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
|
||||
>
|
||||
{dividendGrowth !== "NaN" ? dividendGrowth + "%" : "-"}
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
</section>
|
||||
{#if isLoaded}
|
||||
{#if rawData?.history?.length !== 0 && optionsDividend}
|
||||
<div class="app w-full">
|
||||
<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">
|
||||
<th
|
||||
class="text-start bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"
|
||||
>
|
||||
Ex-Divid. Date
|
||||
</th>
|
||||
<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] 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"
|
||||
>
|
||||
Pay Date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="shadow-md">
|
||||
{#each rawData?.history as item}
|
||||
<tr class="text-gray-200 odd:bg-[#27272A]">
|
||||
<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-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
|
||||
>
|
||||
${item?.adjDividend?.toFixed(3)}
|
||||
</td>
|
||||
<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-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>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<span class="text-gray-200 text-sm italic">
|
||||
* Dividend amounts are adjusted for stock splits when
|
||||
applicable.
|
||||
</span>
|
||||
{:else}
|
||||
<h1
|
||||
class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10"
|
||||
>
|
||||
No history found
|
||||
</h1>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<span class="loading loading-spinner loading-md text-gray-400"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -743,10 +743,10 @@ function handleTypeOfTrade(state:string)
|
||||
|
||||
<!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]" style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
|
||||
<div
|
||||
class="-ml-2 sm:ml-4 w-screen sm:w-full overflow-x-scroll mb-2"
|
||||
class="-ml-2 sm:ml-4 w-screen sm:w-full overflow-x-scroll md:overflow-hidden mb-2"
|
||||
>
|
||||
<ul
|
||||
class="pr-4 w-fit overflow-x-scroll font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
|
||||
class="pr-4 w-fit overflow-x-scroll md:overflow-hidden font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
|
||||
>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
|
||||
@ -139,7 +139,7 @@
|
||||
>
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="w-full mb-6">
|
||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4 w-full">
|
||||
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold mb-4 w-full">
|
||||
Dividends
|
||||
</h1>
|
||||
|
||||
|
||||
@ -374,7 +374,7 @@
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-2xl text-gray-200 font-bold">
|
||||
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
|
||||
{#if $coolMode}
|
||||
{statementConfig?.find(
|
||||
(item) => item?.propertyName === displayStatement,
|
||||
@ -413,12 +413,12 @@
|
||||
</div>
|
||||
|
||||
<ul
|
||||
class="text-[0.8rem] font-medium text-center w-56 sm:w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
|
||||
class="text-[0.8rem] font-medium text-center w-56 w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
|
||||
>
|
||||
<li class="w-full">
|
||||
<label
|
||||
on:click={() => (filterRule = "annual")}
|
||||
class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
|
||||
class="cursor-pointer rounded-l-lg inline-block w-full py-1.5 sm:py-2.5 text-white {filterRule ===
|
||||
'annual'
|
||||
? 'bg-purple-600'
|
||||
: 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
|
||||
@ -431,7 +431,7 @@
|
||||
{#if data?.user?.tier === "Pro"}
|
||||
<label
|
||||
on:click={() => (filterRule = "quartely")}
|
||||
class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
|
||||
class="cursor-pointer inline-block w-full py-1.5 sm:py-2.5 {filterRule ===
|
||||
'quartely'
|
||||
? 'bg-purple-600'
|
||||
: 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
|
||||
|
||||
@ -459,7 +459,7 @@
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-2xl text-gray-200 font-bold">
|
||||
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
|
||||
{#if $coolMode}
|
||||
{statementConfig?.find(
|
||||
(item) => item?.propertyName === displayStatement,
|
||||
|
||||
@ -404,7 +404,7 @@
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-2xl text-gray-200 font-bold">
|
||||
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
|
||||
{#if $coolMode}
|
||||
{statementConfig?.find(
|
||||
(item) => item?.propertyName === displayStatement,
|
||||
|
||||
@ -368,7 +368,7 @@
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-2xl text-gray-200 font-bold">
|
||||
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
|
||||
{#if $coolMode}
|
||||
{statementConfig?.find(
|
||||
(item) => item?.propertyName === displayStatement,
|
||||
|
||||
@ -470,15 +470,13 @@
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section
|
||||
class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
|
||||
>
|
||||
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
<div class="sm:pl-6 sm:pr-7 sm:pt-5 w-full m-auto mt-2 sm:mt-0">
|
||||
<h1 class="mb-px text-2xl font-bold bp:text-3xl sm:pl-1">
|
||||
<h1 class="mb-px text-xl sm:text-2xl font-bold bp:text-3xl sm:pl-1">
|
||||
{$displayCompanyName} Forcast
|
||||
</h1>
|
||||
<div class="w-full mb-6 mt-3">
|
||||
@ -534,7 +532,8 @@
|
||||
class="w-full text-right text-tiny text-white xs:text-sm sm:text-base"
|
||||
>
|
||||
<thead
|
||||
><tr class="border-b border-gray-600 font-normal"
|
||||
><tr
|
||||
class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
|
||||
><th class="py-[3px] text-left font-semibold lg:py-0.5"
|
||||
>Target</th
|
||||
> <th class="font-semibold">Low</th>
|
||||
@ -544,13 +543,14 @@
|
||||
></thead
|
||||
>
|
||||
<tbody
|
||||
><tr class="border-b border-gray-600 font-normal"
|
||||
><tr
|
||||
class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
|
||||
><td class="py-[3px] text-left lg:py-0.5">Price</td>
|
||||
<td>${lowPriceTarget}</td>
|
||||
<td>${avgPriceTarget}</td> <td>${medianPriceTarget}</td>
|
||||
<td>${highPriceTarget}</td></tr
|
||||
>
|
||||
<tr
|
||||
<tr class="text-sm sm:text-[1rem]"
|
||||
><td class="py-[3px] text-left lg:py-0.5">Change</td>
|
||||
<td
|
||||
class={lowChange > 0
|
||||
@ -676,7 +676,7 @@
|
||||
class="mb-4 grid grid-cols-1 overflow-hidden rounded-md border divide-gray-600 border-gray-600 md:grid-cols-2 lg:grid-cols-4"
|
||||
>
|
||||
<div
|
||||
class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b lg:border-b-0"
|
||||
class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b lg:border-b-0 border-gray-600"
|
||||
>
|
||||
<div class="text-base font-normal text-white">
|
||||
Revenue This Year
|
||||
|
||||
@ -267,7 +267,7 @@
|
||||
>
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="w-full mb-6">
|
||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
|
||||
Insider Trading
|
||||
</h1>
|
||||
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<div class="sm:p-7 w-full mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
|
||||
Congress Trading
|
||||
</h1>
|
||||
|
||||
|
||||
@ -120,7 +120,7 @@
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<div class="sm:p-7 w-full mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
|
||||
Transcripts
|
||||
</h1>
|
||||
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
<div
|
||||
class="-mb-2 flex items-start justify-between border-b border-gray-500 md:-mb-4"
|
||||
>
|
||||
<h1 class="mb-3 text-2xl font-bold">
|
||||
<h1 class="mb-3 text-xl sm:text-2xl font-bold">
|
||||
{companyName} Statistics
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
@ -363,12 +363,12 @@
|
||||
>
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl sm:text-2xl text-gray-200 font-bold mb-4">
|
||||
<h2 class="text-xl sm:text-2xl text-gray-200 font-bold mb-4">
|
||||
{$stockTicker} Employees
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="text-white p-3 sm:p-5 mb-5 rounded-md border border-gray-800"
|
||||
class="text-white text-sm sm:text-[1rem] p-3 sm:p-5 mb-5 rounded-md border border-gray-800"
|
||||
>
|
||||
<span class="inline-block align-text-bottom">
|
||||
<svg
|
||||
@ -501,8 +501,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center w-full mt-10 mb-8">
|
||||
<h1 class="text-2xl text-white font-bold">Employees Chart</h1>
|
||||
<div class="flex flex-col sm:flex-row items-center w-full mt-10 mb-8">
|
||||
<h1
|
||||
class="text-xl sm:text-2xl text-white font-bold text-start mr-auto mb-4 sm:mb-0"
|
||||
>
|
||||
Employees Chart
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
|
||||
|
||||
@ -396,7 +396,9 @@
|
||||
<main class="w-full">
|
||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-3">
|
||||
<h1 class="text-2xl text-gray-200 font-bold">Market Cap</h1>
|
||||
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
|
||||
Market Cap
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user