bugfixing ui
This commit is contained in:
MuslemRahimi
parent
1616f92c16
commit
ceda1eaba3
@ -105,6 +105,7 @@ function handleTypeOfTrade(state:string)
|
|||||||
dividends: "/dividends",
|
dividends: "/dividends",
|
||||||
statistics: "/statistics",
|
statistics: "/statistics",
|
||||||
forecast: "/forecast",
|
forecast: "/forecast",
|
||||||
|
financials: "/financials",
|
||||||
news: "/news",
|
news: "/news",
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -759,7 +760,7 @@ function handleTypeOfTrade(state:string)
|
|||||||
: ''} mb-2"
|
: ''} mb-2"
|
||||||
>
|
>
|
||||||
<ul
|
<ul
|
||||||
class="pr-4 sm:pr-0 w-screen sm:w-full overflow-x-scroll font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
|
class="pr-4 sm:pr-0 w-screen overflow-x-scroll 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">
|
<li class="cursor-pointer flex flex-col items-center">
|
||||||
<a
|
<a
|
||||||
|
|||||||
@ -1,14 +1,17 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
|
import {
|
||||||
import { onMount } from 'svelte';
|
numberOfUnreadNotification,
|
||||||
|
displayCompanyName,
|
||||||
import { Chart } from 'svelte-echarts'
|
stockTicker,
|
||||||
import { init, use } from 'echarts/core'
|
} from "$lib/store";
|
||||||
import { LineChart, BarChart } from 'echarts/charts'
|
import { onMount } from "svelte";
|
||||||
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;
|
export let data;
|
||||||
let isLoaded = false;
|
let isLoaded = false;
|
||||||
@ -16,8 +19,6 @@
|
|||||||
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;
|
||||||
@ -25,326 +26,409 @@
|
|||||||
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?.toFixed(2)
|
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);
|
||||||
const dividendList = combinedData.map(item => item.dividend);
|
const dividendList = combinedData.map((item) => item.dividend);
|
||||||
|
|
||||||
|
|
||||||
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,
|
animation: false,
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: "3%",
|
||||||
right: '3%',
|
right: "3%",
|
||||||
bottom: '10%',
|
bottom: "10%",
|
||||||
top: '10%',
|
top: "10%",
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: dates,
|
data: dates,
|
||||||
type: 'category',
|
type: "category",
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
},
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false, // Disable x-axis grid lines
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false, // Disable x-axis grid lines
|
show: false, // Disable x-axis grid lines
|
||||||
|
},
|
||||||
|
|
||||||
|
axisLabel: {
|
||||||
|
show: false, // Hide y-axis labels
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: [
|
],
|
||||||
{
|
series: [
|
||||||
type: 'value',
|
{
|
||||||
splitLine: {
|
name: "Dividend per Share",
|
||||||
show: false, // Disable x-axis grid lines
|
data: dividendList,
|
||||||
},
|
type: "bar",
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
axisLabel: {
|
return options;
|
||||||
show: false // Hide y-axis labels
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: 'Dividend per Share',
|
|
||||||
data: dividendList,
|
|
||||||
type: 'bar',
|
|
||||||
smooth: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return options;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
optionsDividend = await plotDividend();
|
||||||
|
|
||||||
|
|
||||||
onMount(async() => {
|
|
||||||
optionsDividend = await plotDividend()
|
|
||||||
isLoaded = true;
|
isLoaded = true;
|
||||||
})
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<title>
|
||||||
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||||
|
{$displayCompanyName} ({$stockTicker}) Dividend History, Dates & Yield ·
|
||||||
|
stocknear
|
||||||
|
</title>
|
||||||
|
|
||||||
</script>
|
<meta
|
||||||
|
name="description"
|
||||||
|
content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
|
||||||
|
/>
|
||||||
|
<!-- Other meta tags -->
|
||||||
|
<meta
|
||||||
|
property="og:title"
|
||||||
|
content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}), 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} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}
|
||||||
|
/>
|
||||||
|
<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>
|
<section
|
||||||
|
class="w-full max-w-5xl 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>
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
<div
|
||||||
<meta name="viewport" content="width=device-width" />
|
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]"
|
||||||
<title>
|
>
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Dividend History, Dates & Yield · stocknear
|
<svg
|
||||||
</title>
|
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} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}>
|
{#if rawData?.history?.length !== 0}
|
||||||
<!-- Other meta tags -->
|
{#if !dateDistance}
|
||||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}/>
|
{$displayCompanyName} has an annual dividend of ${annualDividend}
|
||||||
<meta property="og:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}), including dividend history, yield, key dates, growth and other metrics.`} />
|
per share, with a forward yield of
|
||||||
<meta property="og:type" content="website"/>
|
{dividendYield}%. The dividend is paid every
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
{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 -->
|
{#if rawData?.history?.length !== 0}
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<div
|
||||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}/>
|
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"
|
||||||
<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 -->
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label
|
||||||
</svelte:head>
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
|
||||||
|
>
|
||||||
|
Dividend Yield
|
||||||
|
</label>
|
||||||
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
|
<div
|
||||||
<div class="w-full flex h-full overflow-hidden">
|
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
|
||||||
<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">
|
{dividendYield !== "0.00" ? dividendYield : "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>
|
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
<style>
|
width: 100%;
|
||||||
.app {
|
}
|
||||||
height: 400px;
|
</style>
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.app {
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -47,7 +47,7 @@
|
|||||||
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
||||||
>
|
>
|
||||||
<div class="m-auto h-full overflow-hidden">
|
<div class="m-auto h-full overflow-hidden">
|
||||||
<main class="w-fit sm:w-full sm:max-w-2xl">
|
<main class="w-full">
|
||||||
<div class="m-auto">
|
<div class="m-auto">
|
||||||
<div
|
<div
|
||||||
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
||||||
|
|||||||
@ -13,9 +13,14 @@
|
|||||||
analyst: "analyst",
|
analyst: "analyst",
|
||||||
};
|
};
|
||||||
|
|
||||||
const foundSection = parts?.find((part) => Object?.values(sectionMap)?.includes(part));
|
const foundSection = parts?.find((part) =>
|
||||||
|
Object?.values(sectionMap)?.includes(part),
|
||||||
|
);
|
||||||
|
|
||||||
displaySubSection = Object?.keys(sectionMap)?.find((key) => sectionMap[key] === foundSection) || "overview";
|
displaySubSection =
|
||||||
|
Object?.keys(sectionMap)?.find(
|
||||||
|
(key) => sectionMap[key] === foundSection,
|
||||||
|
) || "overview";
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeSubSection(state) {
|
function changeSubSection(state) {
|
||||||
@ -39,7 +44,10 @@
|
|||||||
|
|
||||||
const unsubscribe = page.subscribe(($page) => {
|
const unsubscribe = page.subscribe(($page) => {
|
||||||
const splitRoute = $page.url.pathname.split("/");
|
const splitRoute = $page.url.pathname.split("/");
|
||||||
const routeState = splitRoute[splitRoute.length - 1] !== "forecast" ? splitRoute[splitRoute.length - 1] : "overview";
|
const routeState =
|
||||||
|
splitRoute[splitRoute.length - 1] !== "forecast"
|
||||||
|
? splitRoute[splitRoute.length - 1]
|
||||||
|
: "overview";
|
||||||
|
|
||||||
changeSubSection(routeState);
|
changeSubSection(routeState);
|
||||||
});
|
});
|
||||||
@ -49,37 +57,70 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
|
<section
|
||||||
|
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
||||||
|
>
|
||||||
<div class="m-auto h-full overflow-hidden">
|
<div class="m-auto h-full overflow-hidden">
|
||||||
<main class="w-fit sm:w-full sm:max-w-2xl">
|
<main class="w-full">
|
||||||
<div class="m-auto">
|
<div class="m-auto">
|
||||||
<div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : 'no-scrollbar'} mb-2">
|
<div
|
||||||
<ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2">
|
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
||||||
|
? 'overflow-auto scrollbar'
|
||||||
|
: 'no-scrollbar'} mb-2"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
|
||||||
|
>
|
||||||
<li class="cursor-pointer flex flex-col items-center">
|
<li class="cursor-pointer flex flex-col items-center">
|
||||||
<a
|
<a
|
||||||
href={`/stocks/${$stockTicker}/forecast`}
|
href={`/stocks/${$stockTicker}/forecast`}
|
||||||
on:click={() => changeSubSection("overview")}
|
on:click={() => changeSubSection("overview")}
|
||||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'overview' ? 'text-white ' : 'bg-[#09090B]'}"
|
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||||
|
'overview'
|
||||||
|
? 'text-white '
|
||||||
|
: 'bg-[#09090B]'}"
|
||||||
>
|
>
|
||||||
Overview
|
Overview
|
||||||
</a>
|
</a>
|
||||||
<div class="{displaySubSection === 'overview' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
|
<div
|
||||||
|
class="{displaySubSection === 'overview'
|
||||||
|
? 'bg-[#75D377]'
|
||||||
|
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
|
||||||
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li class="cursor-pointer flex flex-col items-center">
|
<li class="cursor-pointer flex flex-col items-center">
|
||||||
<a href={`/stocks/${$stockTicker}/forecast/ai`} on:click={() => changeSubSection("ai")} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ai' ? 'text-white ' : 'bg-[#09090B]'}">
|
<a
|
||||||
|
href={`/stocks/${$stockTicker}/forecast/ai`}
|
||||||
|
on:click={() => changeSubSection("ai")}
|
||||||
|
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||||
|
'ai'
|
||||||
|
? 'text-white '
|
||||||
|
: 'bg-[#09090B]'}"
|
||||||
|
>
|
||||||
AI
|
AI
|
||||||
</a>
|
</a>
|
||||||
<div class="{displaySubSection === 'ai' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
|
<div
|
||||||
|
class="{displaySubSection === 'ai'
|
||||||
|
? 'bg-[#75D377]'
|
||||||
|
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
|
||||||
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li class="cursor-pointer flex flex-col items-center">
|
<li class="cursor-pointer flex flex-col items-center">
|
||||||
<a
|
<a
|
||||||
href={`/stocks/${$stockTicker}/forecast/analyst`}
|
href={`/stocks/${$stockTicker}/forecast/analyst`}
|
||||||
on:click={() => changeSubSection("analyst")}
|
on:click={() => changeSubSection("analyst")}
|
||||||
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'analyst' ? 'text-white ' : 'bg-[#09090B]'}"
|
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||||
|
'analyst'
|
||||||
|
? 'text-white '
|
||||||
|
: 'bg-[#09090B]'}"
|
||||||
>
|
>
|
||||||
Analysts
|
Analysts
|
||||||
</a>
|
</a>
|
||||||
<div class="{displaySubSection === 'analyst' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
|
<div
|
||||||
|
class="{displaySubSection === 'analyst'
|
||||||
|
? 'bg-[#75D377]'
|
||||||
|
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
|
||||||
|
/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,5 +1,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { numberOfUnreadNotification, displayCompanyName, stockTicker, analystEstimateComponent } from "$lib/store";
|
import {
|
||||||
|
numberOfUnreadNotification,
|
||||||
|
displayCompanyName,
|
||||||
|
stockTicker,
|
||||||
|
analystEstimateComponent,
|
||||||
|
} from "$lib/store";
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
@ -9,48 +14,53 @@
|
|||||||
let changeEBITDA = 0;
|
let changeEBITDA = 0;
|
||||||
let changeEPS = 0;
|
let changeEPS = 0;
|
||||||
|
|
||||||
function findIndex(data) {
|
function findIndex(data) {
|
||||||
const currentYear = new Date().getFullYear();
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
||||||
// Find the index where the item's date is greater than the current year and revenue is null
|
// Find the index where the item's date is greater than the current year and revenue is null
|
||||||
const index = data?.findIndex((item) => item?.date > currentYear && item?.revenue === null);
|
const index = data?.findIndex(
|
||||||
|
(item) => item?.date > currentYear && item?.revenue === null,
|
||||||
|
);
|
||||||
|
|
||||||
// If index is found and there is at least one item in the data for the current year with non-null revenue
|
// If index is found and there is at least one item in the data for the current year with non-null revenue
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
const hasNonNullRevenue = data?.some((item) => item?.date === currentYear && item?.revenue !== null);
|
const hasNonNullRevenue = data?.some(
|
||||||
|
(item) => item?.date === currentYear && item?.revenue !== null,
|
||||||
|
);
|
||||||
|
|
||||||
// Add +1 to the index if the condition is met
|
// Add +1 to the index if the condition is met
|
||||||
return hasNonNullRevenue ? index + 1 : index;
|
return hasNonNullRevenue ? index + 1 : index;
|
||||||
|
}
|
||||||
|
|
||||||
|
return index; // Return the index or -1 if not found
|
||||||
}
|
}
|
||||||
|
|
||||||
return index; // Return the index or -1 if not found
|
const calculateChange = (current, previous) => {
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const calculateChange = (current, previous) => {
|
|
||||||
if (previous !== undefined && previous !== 0) {
|
if (previous !== undefined && previous !== 0) {
|
||||||
const change = ((Math.abs(current) / Math.abs(previous)) - 1) * 100;
|
const change = (Math.abs(current) / Math.abs(previous) - 1) * 100;
|
||||||
// Preserve the direction of change (positive/negative)
|
// Preserve the direction of change (positive/negative)
|
||||||
const direction = (current < 0 || previous < 0) ? -1 : 1;
|
const direction = current < 0 || previous < 0 ? -1 : 1;
|
||||||
return change * direction;
|
return change * direction;
|
||||||
} else {
|
} else {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (data?.getAnalystEstimate?.length !== 0) {
|
if (data?.getAnalystEstimate?.length !== 0) {
|
||||||
index = findIndex(data?.getAnalystEstimate);
|
index = findIndex(data?.getAnalystEstimate);
|
||||||
|
|
||||||
|
|
||||||
// Calculate changes using the helper function
|
// Calculate changes using the helper function
|
||||||
const estimatedRevenueAvg = data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg;
|
const estimatedRevenueAvg =
|
||||||
|
data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg;
|
||||||
const revenue = data?.getAnalystEstimate[index - 2]?.revenue;
|
const revenue = data?.getAnalystEstimate[index - 2]?.revenue;
|
||||||
const estimatedNetIncomeAvg = data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg;
|
const estimatedNetIncomeAvg =
|
||||||
|
data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg;
|
||||||
const netIncome = data?.getAnalystEstimate[index - 2]?.netIncome;
|
const netIncome = data?.getAnalystEstimate[index - 2]?.netIncome;
|
||||||
const estimatedEbitdaAvg = data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg;
|
const estimatedEbitdaAvg =
|
||||||
|
data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg;
|
||||||
const ebitda = data?.getAnalystEstimate[index - 2]?.ebitda;
|
const ebitda = data?.getAnalystEstimate[index - 2]?.ebitda;
|
||||||
const estimatedEpsAvg = data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg;
|
const estimatedEpsAvg =
|
||||||
|
data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg;
|
||||||
const eps = data?.getAnalystEstimate[index - 2]?.eps;
|
const eps = data?.getAnalystEstimate[index - 2]?.eps;
|
||||||
|
|
||||||
// Calculate percentage changes for each metric
|
// Calculate percentage changes for each metric
|
||||||
@ -58,8 +68,7 @@ if (data?.getAnalystEstimate?.length !== 0) {
|
|||||||
changeNetIncome = calculateChange(estimatedNetIncomeAvg, netIncome);
|
changeNetIncome = calculateChange(estimatedNetIncomeAvg, netIncome);
|
||||||
changeEBITDA = calculateChange(estimatedEbitdaAvg, ebitda);
|
changeEBITDA = calculateChange(estimatedEbitdaAvg, ebitda);
|
||||||
changeEPS = calculateChange(estimatedEpsAvg, eps);
|
changeEPS = calculateChange(estimatedEpsAvg, eps);
|
||||||
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
@ -69,111 +78,271 @@ if (data?.getAnalystEstimate?.length !== 0) {
|
|||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||||
{$displayCompanyName} ({$stockTicker}) Forecast Overview · stocknear
|
{$displayCompanyName} ({$stockTicker}) Forecast Overview · stocknear
|
||||||
</title>
|
</title>
|
||||||
<meta name="description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
|
<meta
|
||||||
|
name="description"
|
||||||
|
content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Other meta tags -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} />
|
<meta
|
||||||
<meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
|
property="og:title"
|
||||||
|
content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`}
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
|
||||||
|
/>
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
<!-- Twitter specific meta tags -->
|
<!-- Twitter specific meta tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} />
|
<meta
|
||||||
<meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
|
name="twitter:title"
|
||||||
|
content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`}
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
|
||||||
|
/>
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
|
<section
|
||||||
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
|
class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
|
||||||
<div class="relative flex justify-center items-center overflow-hidden w-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:p-7 w-full m-auto mt-2 sm:mt-0">
|
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||||
<h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">Financial Forecast this Year</h2>
|
<div class="w-full mb-6">
|
||||||
{#if data?.getAnalystEstimate?.length !== 0}
|
<h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
|
||||||
<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-4 md:grid-rows-1 md:divide-x">
|
Financial Forecast this Year
|
||||||
<div class="p-4 bp:p-5 sm:p-6">
|
</h2>
|
||||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> Revenue </label>
|
{#if data?.getAnalystEstimate?.length !== 0}
|
||||||
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
<div
|
||||||
<div class="flex items-baseline text-2xl font-semibold text-white">
|
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-4 md:grid-rows-1 md:divide-x"
|
||||||
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg)}
|
|
||||||
</div>
|
|
||||||
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
|
|
||||||
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeRevenue > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
|
|
||||||
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg
|
|
||||||
>
|
|
||||||
{abbreviateNumber(changeRevenue?.toFixed(1))}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
|
|
||||||
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.revenue)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
|
|
||||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> Net Income </label>
|
|
||||||
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
|
||||||
<div class="flex items-baseline text-2xl font-semibold text-white">
|
|
||||||
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg)}
|
|
||||||
</div>
|
|
||||||
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
|
|
||||||
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeNetIncome > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
|
|
||||||
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg
|
|
||||||
>
|
|
||||||
{abbreviateNumber(changeNetIncome?.toFixed(1))}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
|
|
||||||
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.netIncome)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
|
|
||||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> EBITDA </label>
|
|
||||||
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
|
||||||
<div class="flex items-baseline text-2xl font-semibold text-white">
|
|
||||||
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg)}
|
|
||||||
</div>
|
|
||||||
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
|
|
||||||
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEBITDA > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
|
|
||||||
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg
|
|
||||||
>
|
|
||||||
{abbreviateNumber(changeEBITDA?.toFixed(2))}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
|
|
||||||
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.ebitda)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
|
|
||||||
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> EPS </label>
|
|
||||||
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
|
||||||
<div class="flex items-baseline text-2xl font-semibold text-white">
|
|
||||||
{data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg}
|
|
||||||
</div>
|
|
||||||
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
|
|
||||||
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEPS > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
|
|
||||||
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg
|
|
||||||
>
|
|
||||||
{abbreviateNumber(changeEPS?.toFixed(1))}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
|
|
||||||
from {data?.getAnalystEstimate[index - 2]?.eps}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full m-auto sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
|
|
||||||
{#await import("$lib/components/AnalystEstimate.svelte") then { default: Comp }}
|
|
||||||
<svelte:component this={Comp} {data} />
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="text-white 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
|
|
||||||
>
|
>
|
||||||
No analyst forecast available for {$displayCompanyName}.
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
</div>
|
<label
|
||||||
{/if}
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
|
||||||
|
>
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex items-baseline text-2xl font-semibold text-white"
|
||||||
|
>
|
||||||
|
{abbreviateNumber(
|
||||||
|
data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeRevenue >
|
||||||
|
0
|
||||||
|
? ''
|
||||||
|
: 'rotate-180'}"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
style="max-width:40px"
|
||||||
|
aria-hidden="true"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M7 11l5-5m0 0l5 5m-5-5v12"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
{abbreviateNumber(changeRevenue?.toFixed(1))}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
|
||||||
|
>
|
||||||
|
from {abbreviateNumber(
|
||||||
|
data?.getAnalystEstimate[index - 2]?.revenue,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
|
||||||
|
>
|
||||||
|
Net Income
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex items-baseline text-2xl font-semibold text-white"
|
||||||
|
>
|
||||||
|
{abbreviateNumber(
|
||||||
|
data?.getAnalystEstimate[index - 1]
|
||||||
|
?.estimatedNetIncomeAvg,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeNetIncome >
|
||||||
|
0
|
||||||
|
? ''
|
||||||
|
: 'rotate-180'}"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
style="max-width:40px"
|
||||||
|
aria-hidden="true"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M7 11l5-5m0 0l5 5m-5-5v12"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
{abbreviateNumber(changeNetIncome?.toFixed(1))}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
|
||||||
|
>
|
||||||
|
from {abbreviateNumber(
|
||||||
|
data?.getAnalystEstimate[index - 2]?.netIncome,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
|
||||||
|
>
|
||||||
|
EBITDA
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex items-baseline text-2xl font-semibold text-white"
|
||||||
|
>
|
||||||
|
{abbreviateNumber(
|
||||||
|
data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEBITDA >
|
||||||
|
0
|
||||||
|
? ''
|
||||||
|
: 'rotate-180'}"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
style="max-width:40px"
|
||||||
|
aria-hidden="true"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M7 11l5-5m0 0l5 5m-5-5v12"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
{abbreviateNumber(changeEBITDA?.toFixed(2))}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
|
||||||
|
>
|
||||||
|
from {abbreviateNumber(
|
||||||
|
data?.getAnalystEstimate[index - 2]?.ebitda,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
|
||||||
|
>
|
||||||
|
EPS
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex items-baseline text-2xl font-semibold text-white"
|
||||||
|
>
|
||||||
|
{data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEPS >
|
||||||
|
0
|
||||||
|
? ''
|
||||||
|
: 'rotate-180'}"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
style="max-width:40px"
|
||||||
|
aria-hidden="true"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M7 11l5-5m0 0l5 5m-5-5v12"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
{abbreviateNumber(changeEPS?.toFixed(1))}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
|
||||||
|
>
|
||||||
|
from {data?.getAnalystEstimate[index - 2]?.eps}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full m-auto sm:pb-6 sm:pt-6 {!$analystEstimateComponent
|
||||||
|
? 'hidden'
|
||||||
|
: ''}"
|
||||||
|
>
|
||||||
|
{#await import("$lib/components/AnalystEstimate.svelte") then { default: Comp }}
|
||||||
|
<svelte:component this={Comp} {data} />
|
||||||
|
{/await}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="text-white 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
|
||||||
|
>
|
||||||
|
No analyst forecast available for {$displayCompanyName}.
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,122 +1,148 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { stockTicker, screenWidth } from "$lib/store";
|
import { stockTicker, screenWidth } from "$lib/store";
|
||||||
import { page } from "$app/stores";
|
import { page } from "$app/stores";
|
||||||
|
|
||||||
let displaySubSection = '';
|
let displaySubSection = "";
|
||||||
|
|
||||||
|
if (!displaySubSection || displaySubSection.length === 0) {
|
||||||
|
const parts = $page?.url?.pathname.split("/");
|
||||||
|
const sectionMap = {
|
||||||
|
"congress-trading": "congress-trading",
|
||||||
|
transcripts: "transcripts",
|
||||||
|
};
|
||||||
|
|
||||||
|
const foundSection = parts?.find((part) =>
|
||||||
|
Object?.values(sectionMap)?.includes(part),
|
||||||
|
);
|
||||||
|
|
||||||
|
displaySubSection =
|
||||||
|
Object?.keys(sectionMap)?.find(
|
||||||
|
(key) => sectionMap[key] === foundSection,
|
||||||
|
) || "insider";
|
||||||
|
}
|
||||||
|
|
||||||
if (!displaySubSection || displaySubSection.length === 0) {
|
function changeSubSection(state) {
|
||||||
const parts = $page?.url?.pathname.split('/');
|
const subSectionMap = {
|
||||||
const sectionMap = {
|
"congress-trading": "/insider/congress-trading",
|
||||||
'congress-trading': 'congress-trading',
|
transcripts: "/insider/transcripts",
|
||||||
'transcripts': 'transcripts',
|
};
|
||||||
};
|
|
||||||
|
|
||||||
const foundSection = parts?.find(part => Object?.values(sectionMap)?.includes(part));
|
if (state !== "insider" && subSectionMap[state]) {
|
||||||
|
displaySubSection = state;
|
||||||
displaySubSection = Object?.keys(sectionMap)?.find(key => sectionMap[key] === foundSection) || 'insider';
|
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
|
||||||
|
} else {
|
||||||
|
displaySubSection = state;
|
||||||
|
//goto(`/stocks/${$stockTicker}/insider`);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section
|
||||||
|
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
||||||
|
>
|
||||||
|
<div class="h-full overflow-hidden">
|
||||||
|
<main class="w-full">
|
||||||
|
<div
|
||||||
|
class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
||||||
|
? 'overflow-auto scrollbar no-scrollbar'
|
||||||
|
: ''} mb-2"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2"
|
||||||
|
>
|
||||||
|
<li class="cursor-pointer flex flex-col items-center">
|
||||||
|
<a
|
||||||
|
href={`/stocks/${$stockTicker}/insider`}
|
||||||
|
on:click={() => changeSubSection("insider")}
|
||||||
|
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||||
|
'insider'
|
||||||
|
? 'text-white '
|
||||||
|
: 'bg-[#09090B]'}"
|
||||||
|
>
|
||||||
|
Insider Trading
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="{displaySubSection === 'insider'
|
||||||
|
? 'bg-[#75D377]'
|
||||||
|
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li class="cursor-pointer flex flex-col items-center">
|
||||||
|
<a
|
||||||
|
href={`/stocks/${$stockTicker}/insider/congress-trading`}
|
||||||
|
on:click={() => changeSubSection("congress-trading")}
|
||||||
|
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||||
|
'congress-trading'
|
||||||
|
? 'text-white '
|
||||||
|
: 'bg-[#09090B]'}"
|
||||||
|
>
|
||||||
|
Congress Trading
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="{displaySubSection === 'congress-trading'
|
||||||
|
? 'bg-[#75D377]'
|
||||||
|
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li class="cursor-pointer flex flex-col items-center">
|
||||||
|
<a
|
||||||
|
href={`/stocks/${$stockTicker}/insider/transcripts`}
|
||||||
|
on:click={() => changeSubSection("transcripts")}
|
||||||
|
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
|
||||||
|
'transcripts'
|
||||||
|
? 'text-white '
|
||||||
|
: 'bg-[#09090B]'}"
|
||||||
|
>
|
||||||
|
Transcripts
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="{displaySubSection === 'transcripts'
|
||||||
|
? 'bg-[#75D377]'
|
||||||
|
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
function changeSubSection(state) {
|
<style lang="scss">
|
||||||
const subSectionMap = {
|
.scrollbar {
|
||||||
'congress-trading': '/insider/congress-trading',
|
display: grid;
|
||||||
'transcripts': '/insider/transcripts',
|
grid-gap: 17px;
|
||||||
};
|
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||||||
|
grid-auto-flow: column;
|
||||||
|
overflow-x: auto;
|
||||||
|
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
|
||||||
|
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
if (state !== 'insider' && subSectionMap[state]) {
|
/* Custom scrollbar for Webkit (Chrome, Safari) */
|
||||||
displaySubSection = state;
|
.scrollbar::-webkit-scrollbar {
|
||||||
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
|
width: 0; /* Hide the width of the scrollbar */
|
||||||
} else {
|
height: 0; /* Hide the height of the scrollbar */
|
||||||
displaySubSection = state;
|
}
|
||||||
//goto(`/stocks/${$stockTicker}/insider`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: transparent; /* Make the thumb transparent */
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 7px;
|
||||||
|
width: 10px;
|
||||||
|
background: #09090b;
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #6b6f79;
|
||||||
|
-webkit-border-radius: 1ex;
|
||||||
|
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
<section class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
|
::-webkit-scrollbar-corner {
|
||||||
<div class="h-full overflow-hidden">
|
background: #09090b;
|
||||||
<main class="w-full">
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar no-scrollbar' : ''} mb-2" >
|
|
||||||
<ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2">
|
|
||||||
<li class="cursor-pointer flex flex-col items-center">
|
|
||||||
<a href={`/stocks/${$stockTicker}/insider`} on:click={() => (changeSubSection('insider'))} class="text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'insider' ? 'text-white ' : 'bg-[#09090B]'}" >
|
|
||||||
Insider Trading
|
|
||||||
</a>
|
|
||||||
<div class="{displaySubSection === 'insider' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]" />
|
|
||||||
</li>
|
|
||||||
<li class="cursor-pointer flex flex-col items-center">
|
|
||||||
<a href={`/stocks/${$stockTicker}/insider/congress-trading`} on:click={() => (changeSubSection('congress-trading'))} class="text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'congress-trading' ? 'text-white ' : 'bg-[#09090B]'}" >
|
|
||||||
Congress Trading
|
|
||||||
</a>
|
|
||||||
<div class="{displaySubSection === 'congress-trading' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]" />
|
|
||||||
</li>
|
|
||||||
<li class="cursor-pointer flex flex-col items-center">
|
|
||||||
<a href={`/stocks/${$stockTicker}/insider/transcripts`} on:click={() => (changeSubSection('transcripts'))} class="text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'transcripts' ? 'text-white ' : 'bg-[#09090B]'}" >
|
|
||||||
Transcripts
|
|
||||||
</a>
|
|
||||||
<div class="{displaySubSection === 'transcripts' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<slot/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang='scss'>
|
|
||||||
|
|
||||||
|
|
||||||
.scrollbar {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: 17px;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
|
||||||
grid-auto-flow: column;
|
|
||||||
overflow-x: auto;
|
|
||||||
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
|
|
||||||
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom scrollbar for Webkit (Chrome, Safari) */
|
|
||||||
.scrollbar::-webkit-scrollbar {
|
|
||||||
width: 0; /* Hide the width of the scrollbar */
|
|
||||||
height: 0; /* Hide the height of the scrollbar */
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar::-webkit-scrollbar-thumb {
|
|
||||||
background: transparent; /* Make the thumb transparent */
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
height: 7px;
|
|
||||||
width: 10px;
|
|
||||||
background: #09090B;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #6B6F79;
|
|
||||||
-webkit-border-radius: 1ex;
|
|
||||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
background: #09090B;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -11,7 +11,6 @@
|
|||||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||||
|
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let isLoaded = false;
|
let isLoaded = false;
|
||||||
|
|
||||||
@ -22,7 +21,6 @@
|
|||||||
let quarter = Math.floor(now.getMonth() / 3) + 1;
|
let quarter = Math.floor(now.getMonth() / 3) + 1;
|
||||||
let yearRange = [];
|
let yearRange = [];
|
||||||
|
|
||||||
|
|
||||||
function calculateInsiderTradingStatistics(data, year, quarter) {
|
function calculateInsiderTradingStatistics(data, year, quarter) {
|
||||||
// Helper function to check if the transaction date is within the current quarter
|
// Helper function to check if the transaction date is within the current quarter
|
||||||
const isInCurrentQuarter = (transactionDate) => {
|
const isInCurrentQuarter = (transactionDate) => {
|
||||||
@ -114,9 +112,7 @@
|
|||||||
|
|
||||||
yearRange = Array.from(
|
yearRange = Array.from(
|
||||||
new Set(
|
new Set(
|
||||||
rawData?.map((item) =>
|
rawData?.map((item) => new Date(item?.transactionDate)?.getFullYear()),
|
||||||
(new Date(item?.transactionDate))?.getFullYear(),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
)?.sort((a, b) => b - a);
|
)?.sort((a, b) => b - a);
|
||||||
if (yearRange?.length > 0) {
|
if (yearRange?.length > 0) {
|
||||||
@ -150,7 +146,6 @@
|
|||||||
"n/a": { text: "n/a", class: "text-gray-300" },
|
"n/a": { text: "n/a", class: "text-gray-300" },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
let columns = [
|
let columns = [
|
||||||
{ key: "reportingName", label: "Name", align: "left" },
|
{ key: "reportingName", label: "Name", align: "left" },
|
||||||
{ key: "transactionDate", label: "Date", align: "right" },
|
{ key: "transactionDate", label: "Date", align: "right" },
|
||||||
@ -167,8 +162,7 @@
|
|||||||
value: { order: "none", type: "number" },
|
value: { order: "none", type: "number" },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const sortData = (key) => {
|
||||||
const sortData = (key) => {
|
|
||||||
// Reset all other keys to 'none' except the current key
|
// Reset all other keys to 'none' except the current key
|
||||||
for (const k in sortOrders) {
|
for (const k in sortOrders) {
|
||||||
if (k !== key) {
|
if (k !== key) {
|
||||||
@ -188,7 +182,7 @@
|
|||||||
|
|
||||||
// Reset to original data when 'none' and stop further sorting
|
// Reset to original data when 'none' and stop further sorting
|
||||||
if (sortOrder === "none") {
|
if (sortOrder === "none") {
|
||||||
insiderTradingList = [...originalData]?.slice(0,50); // Reset to original data (spread to avoid mutation)
|
insiderTradingList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -223,11 +217,11 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Sort using the generic comparison function
|
// Sort using the generic comparison function
|
||||||
insiderTradingList = [...originalData].sort(compareValues)?.slice(0,50);
|
insiderTradingList = [...originalData].sort(compareValues)?.slice(0, 50);
|
||||||
};
|
};
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if((year || quarter ) && typeof window !== 'undefined') {
|
if ((year || quarter) && typeof window !== "undefined") {
|
||||||
statistics = calculateInsiderTradingStatistics(rawData, year, quarter);
|
statistics = calculateInsiderTradingStatistics(rawData, year, quarter);
|
||||||
buySellRatio =
|
buySellRatio =
|
||||||
statistics?.soldShares !== 0
|
statistics?.soldShares !== 0
|
||||||
@ -276,14 +270,14 @@ $: {
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full"
|
class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
|
||||||
>
|
>
|
||||||
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
|
<div class="w-full flex h-full overflow-hidden">
|
||||||
<div
|
<div
|
||||||
class="relative flex justify-center items-center overflow-hidden w-full"
|
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||||
>
|
>
|
||||||
<div class="xl:p-7 w-full m-auto mt-2">
|
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||||
<div class="mb-6">
|
<div class="w-full mb-6">
|
||||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||||
Insider Trading
|
Insider Trading
|
||||||
</h1>
|
</h1>
|
||||||
@ -391,13 +385,13 @@ $: {
|
|||||||
</DropdownMenu.Label>
|
</DropdownMenu.Label>
|
||||||
<DropdownMenu.Separator />
|
<DropdownMenu.Separator />
|
||||||
<DropdownMenu.Group>
|
<DropdownMenu.Group>
|
||||||
{#each [1,2,3,4] as index}
|
{#each [1, 2, 3, 4] as index}
|
||||||
<DropdownMenu.Item
|
<DropdownMenu.Item
|
||||||
on:click={() => (quarter = index)}
|
on:click={() => (quarter = index)}
|
||||||
class="cursor-pointer hover:bg-[#27272A]"
|
class="cursor-pointer hover:bg-[#27272A]"
|
||||||
>
|
>
|
||||||
Q{index}
|
Q{index}
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
{/each}
|
{/each}
|
||||||
</DropdownMenu.Group>
|
</DropdownMenu.Group>
|
||||||
</DropdownMenu.Content>
|
</DropdownMenu.Content>
|
||||||
@ -613,9 +607,9 @@ $: {
|
|||||||
<table
|
<table
|
||||||
class="table table-sm table-pin-rows table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
|
class="table table-sm table-pin-rows table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
|
||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<TableHeader {columns} {sortOrders} {sortData} />
|
<TableHeader {columns} {sortOrders} {sortData} />
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each data?.user?.tier === "Pro" ? insiderTradingList : insiderTradingList?.slice(0, 3) as item, index}
|
{#each data?.user?.tier === "Pro" ? insiderTradingList : insiderTradingList?.slice(0, 3) as item, index}
|
||||||
{#if item?.price > 0}
|
{#if item?.price > 0}
|
||||||
@ -675,9 +669,7 @@ $: {
|
|||||||
class={transactionStyles[item?.transactionType]
|
class={transactionStyles[item?.transactionType]
|
||||||
?.class}
|
?.class}
|
||||||
>
|
>
|
||||||
{abbreviateNumber(
|
{abbreviateNumber(item?.value)}
|
||||||
item?.value,
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="{transactionStyles[item?.transactionType]
|
class="{transactionStyles[item?.transactionType]
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -43,7 +43,7 @@
|
|||||||
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
||||||
>
|
>
|
||||||
<div class="m-auto h-full overflow-hidden">
|
<div class="m-auto h-full overflow-hidden">
|
||||||
<main class="w-fit sm:w-full sm:max-w-2xl">
|
<main class="w-full">
|
||||||
<div class="m-auto">
|
<div class="m-auto">
|
||||||
<div
|
<div
|
||||||
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user