857 lines
35 KiB
Svelte
857 lines
35 KiB
Svelte
<svelte:options immutable={true} />
|
|
|
|
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
|
|
import * as Card from "$lib/components/shadcn/card/index.ts";
|
|
import * as Table from "$lib/components/shadcn/table/index.ts";
|
|
import ArrowUpRight from "lucide-svelte/icons/arrow-up-right";
|
|
import { abbreviateNumber } from "$lib/utils";
|
|
import * as Tabs from "$lib/components/shadcn/tabs/index.js";
|
|
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
|
|
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
|
|
|
/*
|
|
import { Chart } from 'svelte-echarts'
|
|
import { init, use } from 'echarts/core'
|
|
import { BarChart } from 'echarts/charts'
|
|
import { GridComponent } from 'echarts/components'
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
|
|
// now with tree-shaking
|
|
use([BarChart, GridComponent, CanvasRenderer])
|
|
*/
|
|
|
|
export let data;
|
|
let isLoaded = false;
|
|
let optionsMode = "premium";
|
|
|
|
function compareTimes(time1, time2) {
|
|
const [hours1, minutes1] = time1.split(":").map(Number);
|
|
const [hours2, minutes2] = time2.split(":").map(Number);
|
|
|
|
if (hours1 > hours2) return 1;
|
|
if (hours1 < hours2) return -1;
|
|
if (minutes1 > minutes2) return 1;
|
|
if (minutes1 < minutes2) return -1;
|
|
return 0;
|
|
}
|
|
|
|
function formatTime(timeString) {
|
|
// Split the time string into components
|
|
const [hours, minutes, seconds] = timeString.split(":").map(Number);
|
|
|
|
// Determine AM or PM
|
|
const period = hours >= 12 ? "PM" : "AM";
|
|
|
|
// Convert hours from 24-hour to 12-hour format
|
|
const formattedHours = hours % 12 || 12; // Converts 0 to 12 for midnight
|
|
|
|
// Format the time string
|
|
const formattedTimeString = `${formattedHours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${period}`;
|
|
|
|
return formattedTimeString;
|
|
}
|
|
|
|
function reformatDate(dateString) {
|
|
return (
|
|
dateString.substring(5, 7) +
|
|
"/" +
|
|
dateString.substring(8) +
|
|
"/" +
|
|
dateString.substring(2, 4)
|
|
);
|
|
}
|
|
|
|
function convertTimestamp(unixTimestamp) {
|
|
// Multiply by 1000 because JavaScript's Date object expects milliseconds
|
|
const date = new Date(unixTimestamp * 1000);
|
|
|
|
// Formatting the date to a human-readable format
|
|
const formattedDate = date.toLocaleString("en-US", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: true,
|
|
});
|
|
|
|
return formattedDate;
|
|
}
|
|
|
|
let optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
|
|
let gainersList = data?.getDashboard?.marketMovers?.gainers || [];
|
|
let losersList = data?.getDashboard?.marketMovers?.losers || [];
|
|
let marketStatus = data?.getDashboard?.marketStatus ?? 0;
|
|
|
|
function changeTable(state) {
|
|
optionsMode = state;
|
|
if (optionsMode === "premium") {
|
|
optionsTable = data?.getDashboard?.optionsFlow?.premium || [];
|
|
} else if (optionsMode === "volume") {
|
|
optionsTable = data?.getDashboard?.optionsFlow?.volume || [];
|
|
} else {
|
|
optionsTable = data?.getDashboard?.optionsFlow?.openInterest || [];
|
|
}
|
|
}
|
|
let Feedback;
|
|
|
|
onMount(async () => {
|
|
isLoaded = true;
|
|
Feedback = (await import("$lib/components/Feedback.svelte")).default;
|
|
});
|
|
|
|
$: charNumber = $screenWidth < 640 ? 20 : 20;
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>
|
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Free
|
|
Stock Analysis Information for Small Investors · stocknear
|
|
</title>
|
|
|
|
<meta
|
|
name="description"
|
|
content="Stocknear has everything you need to analyze stocks with help of AI, including detailed financial data, statistics, news and charts."
|
|
/>
|
|
<!-- Other meta tags -->
|
|
<meta
|
|
property="og:title"
|
|
content="Free Stock Analysis Information for Small Investors · stocknear"
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="Stocknear has everything you need to analyze stocks with help of AI, including detailed financial data, statistics, news and charts."
|
|
/>
|
|
<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="Free Stock Analysis Information for Small Investors · stocknear"
|
|
/>
|
|
<meta
|
|
name="twitter:description"
|
|
content="Stocknear has everything you need to analyze stocks with help of AI, including detailed financial data, statistics, news and charts."
|
|
/>
|
|
<!-- Add more Twitter meta tags as needed -->
|
|
</svelte:head>
|
|
|
|
<div
|
|
class="w-full xl:max-w-screen-2xl overflow-hidden m-auto min-h-screen bg-[#09090B] mb-40"
|
|
>
|
|
<!--
|
|
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial === true}
|
|
<div
|
|
class="mb-5 relative isolate sm:rounded text-center flex justify-center items-center gap-x-6 overflow-hidden bg-[#fff] px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1"
|
|
>
|
|
<div
|
|
class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
|
|
style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
|
|
style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="w-full m-auto flex flex-col sm:flex-row justify-center items-center gap-x-4 gap-y-2"
|
|
>
|
|
<p class="text-[1rem] text-white">
|
|
<strong class="font-semibold text-lg text-[1rem] text-white"
|
|
>🎃 Limited Halloween Special</strong
|
|
><svg
|
|
viewBox="0 0 2 2"
|
|
class="mx-2 inline h-0.5 w-0.5 fill-current"
|
|
aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg
|
|
>
|
|
Save <strong class="text-[#fff]">16%</strong> on Pro Subscription and
|
|
boost your investing game!
|
|
</p>
|
|
<a
|
|
href="/pricing"
|
|
class="flex-none rounded-full m-auto sm:m-0 px-3.5 py-1 text-[1rem] font-semibold text-black shadow-sm bg-[#fff] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
|
|
>
|
|
Get Pro Now <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
-->
|
|
<div class="flex flex-col m-auto justify-center items-center">
|
|
<div class="text-center mb-10 w-full px-4 sm:px-3 mt-10">
|
|
{#if Feedback}
|
|
<Feedback {data} />
|
|
{/if}
|
|
<!--
|
|
<div class="text-center mb-10 relative w-fit flex justify-center m-auto">
|
|
<a
|
|
href="/insider-tracker"
|
|
class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded m-auto font-medium text-[1rem] flex items-center"
|
|
>
|
|
<span class="text-white sm:hover:text-blue-400"
|
|
>Realtime Insider Tracker</span
|
|
>
|
|
</a>
|
|
<div class="absolute top-[-1.2rem] -right-5 sm:-right-8 rotate-[7deg]">
|
|
<span
|
|
class="bg-[#fff] text-black text-sm sm:text-[0.9rem] rounded font-semibold sm:me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"
|
|
>
|
|
New
|
|
</span>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<h1
|
|
class="hidden sm:block text-3xl lg:text-4xl text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto"
|
|
>
|
|
Clear & <span class="italic text-[#fff]">Simple</span> Market Insight.
|
|
</h1>
|
|
|
|
<h1
|
|
class="text-white text-2xl font-semibold text-start w-full pb-4 sm:pl-4 sm:pb-2"
|
|
>
|
|
Dashboard
|
|
</h1>
|
|
|
|
<main class="flex flex-1 flex-col gap-4 sm:p-4 md:gap-8">
|
|
<div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start">
|
|
<Card.Root
|
|
class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar max-h-[450px]"
|
|
>
|
|
<Card.Header class="flex flex-row items-center">
|
|
<div class="flex flex-col items-start w-full">
|
|
<div class="flex flex-row w-full items-center">
|
|
<Card.Title
|
|
><a
|
|
href={`/market-mover/${marketStatus === 0 ? "gainers" : marketStatus === 1 ? "premarket" : "afterhours"}`}
|
|
class="text-xl sm:text-2xl tex-white font-semibold cursor-pointer sm:hover:underline sm:hover:underline-offset-4"
|
|
>
|
|
{marketStatus === 0
|
|
? "Top"
|
|
: marketStatus === 1
|
|
? "Pre-Market"
|
|
: "Afterhours"} Gainers
|
|
<svg
|
|
class="h-5 w-5 inline-block"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
style="max-width:40px"
|
|
aria-hidden="true"
|
|
><path
|
|
fill-rule="evenodd"
|
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
clip-rule="evenodd"
|
|
></path></svg
|
|
></a
|
|
>
|
|
</Card.Title>
|
|
</div>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<Table.Root class="overflow-x-scroll w-full">
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.Head class="text-white font-semibold"
|
|
>Symbol</Table.Head
|
|
>
|
|
<Table.Head
|
|
class="hidden sm:table-cell text-white font-semibold"
|
|
>Name</Table.Head
|
|
>
|
|
<Table.Head class="text-white text-right font-semibold"
|
|
>Price</Table.Head
|
|
>
|
|
<Table.Head class="text-white text-right font-semibold"
|
|
>Change</Table.Head
|
|
>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{#each gainersList as item}
|
|
<Table.Row>
|
|
<Table.Cell>
|
|
<HoverStockChart symbol={item?.symbol} />
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
|
>
|
|
{item?.name?.length > charNumber
|
|
? item?.name?.slice(0, charNumber) + "..."
|
|
: item?.name}
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
|
>
|
|
{item?.price?.toFixed(2)}
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
|
|
>
|
|
{#if item?.changesPercentage >= 0}
|
|
<span class="text-[#00FC50]"
|
|
>+{item?.changesPercentage >= 1000
|
|
? abbreviateNumber(item?.changesPercentage)
|
|
: item?.changesPercentage?.toFixed(2)}%</span
|
|
>
|
|
{:else}
|
|
<span class="text-[#FF2F1F]"
|
|
>{item?.changesPercentage <= -1000
|
|
? abbreviateNumber(item?.changesPercentage)
|
|
: item?.changesPercentage?.toFixed(2)}%
|
|
</span>
|
|
{/if}
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
<Card.Root
|
|
class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar max-h-[450px]"
|
|
>
|
|
<Card.Header class="flex flex-row items-center">
|
|
<div class="flex flex-col items-start w-full">
|
|
<div class="flex flex-row w-full items-center">
|
|
<Card.Title>
|
|
<a
|
|
href={`/market-mover/${marketStatus === 0 ? "losers" : marketStatus === 1 ? "premarket" : "afterhours"}`}
|
|
class="text-xl sm:text-2xl tex-white font-semibold cursor-pointer sm:hover:underline sm:hover:underline-offset-4"
|
|
>
|
|
{marketStatus === 0
|
|
? "Top"
|
|
: marketStatus === 1
|
|
? "Pre-Market"
|
|
: "Afterhours"} Losers
|
|
<svg
|
|
class="h-5 w-5 inline-block"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
style="max-width:40px"
|
|
aria-hidden="true"
|
|
><path
|
|
fill-rule="evenodd"
|
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
clip-rule="evenodd"
|
|
></path></svg
|
|
>
|
|
</a></Card.Title
|
|
>
|
|
</div>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<Table.Root class="overflow-x-scroll w-full">
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.Head class="text-white font-semibold"
|
|
>Symbol</Table.Head
|
|
>
|
|
<Table.Head
|
|
class="hidden sm:table-cell text-white font-semibold"
|
|
>Name</Table.Head
|
|
>
|
|
<Table.Head class="text-white text-right font-semibold"
|
|
>Price</Table.Head
|
|
>
|
|
<Table.Head class="text-white text-right font-semibold"
|
|
>Change</Table.Head
|
|
>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{#each losersList as item}
|
|
<Table.Row>
|
|
<Table.Cell>
|
|
<HoverStockChart symbol={item?.symbol} />
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
|
|
>
|
|
{item?.name?.length > charNumber
|
|
? item?.name?.slice(0, charNumber) + "..."
|
|
: item?.name}
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
|
>
|
|
{item?.price?.toFixed(2)}
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
|
|
>
|
|
{#if item?.changesPercentage >= 0}
|
|
<span class="text-[#00FC50]"
|
|
>+{item?.changesPercentage >= 1000
|
|
? abbreviateNumber(item?.changesPercentage)
|
|
: item?.changesPercentage?.toFixed(2)}%</span
|
|
>
|
|
{:else}
|
|
<span class="text-[#FF2F1F]"
|
|
>{item?.changesPercentage <= -1000
|
|
? abbreviateNumber(item?.changesPercentage)
|
|
: item?.changesPercentage?.toFixed(2)}%
|
|
</span>
|
|
{/if}
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start">
|
|
<Card.Root
|
|
class="overflow-x-scroll overflow-hidden overflow-y-scroll"
|
|
>
|
|
<Card.Header class="flex flex-row items-center">
|
|
<div class="flex flex-col items-start w-full">
|
|
<div class="flex flex-row w-full items-center">
|
|
<Card.Title
|
|
class="text-xl sm:text-2xl tex-white font-semibold"
|
|
>Hottest Options Contract</Card.Title
|
|
>
|
|
<a
|
|
href="/options-flow"
|
|
class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#fff] text-black"
|
|
>
|
|
View All
|
|
<ArrowUpRight
|
|
class="hidden sm:inline-block h-4 w-4 shrink-0 -mt-1 ml-0.5"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<Card.Description class="mt-2 text-sm sm:text-[1rem]"
|
|
>Recent hedge fund options with the highest ...</Card.Description
|
|
>
|
|
<Tabs.Root value="premium" class="w-fit mt-5 ">
|
|
<Tabs.List class="grid w-full grid-cols-3 bg-[#313131]">
|
|
<Tabs.Trigger
|
|
on:click={() => changeTable("premium")}
|
|
value="premium"
|
|
class="text-sm">Premium</Tabs.Trigger
|
|
>
|
|
<Tabs.Trigger
|
|
on:click={() => changeTable("volume")}
|
|
value="volume"
|
|
class="text-sm">Volume</Tabs.Trigger
|
|
>
|
|
<Tabs.Trigger
|
|
on:click={() => changeTable("openInterest")}
|
|
value="openInterest"
|
|
class="text-sm"
|
|
>{$screenWidth < 640
|
|
? "OI"
|
|
: "Open Interest"}</Tabs.Trigger
|
|
>
|
|
</Tabs.List>
|
|
</Tabs.Root>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<Table.Root class="overflow-x-scroll w-full">
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.Head class="text-white font-semibold"
|
|
>Symbol</Table.Head
|
|
>
|
|
<Table.Head class="text-white text-right font-semibold"
|
|
>Prem</Table.Head
|
|
>
|
|
<Table.Head class="text-white text-right font-semibold"
|
|
>Strike</Table.Head
|
|
>
|
|
<Table.Head class="text-white text-right font-semibold"
|
|
>{optionsMode === "openInterest"
|
|
? "OI"
|
|
: "Vol"}</Table.Head
|
|
>
|
|
<Table.Head class="text-white text-right font-semibold"
|
|
>C/P</Table.Head
|
|
>
|
|
<Table.Head class="text-right text-white font-semibold"
|
|
>Expiry</Table.Head
|
|
>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{#each optionsTable as item}
|
|
<Table.Row>
|
|
<Table.Cell>
|
|
<HoverStockChart
|
|
symbol={item?.ticker}
|
|
assetType={item?.underlying_type}
|
|
/>
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="text-right xl:table.-column text-sm sm:text-[1rem] {item?.put_call ===
|
|
'Calls'
|
|
? 'text-[#00FC50]'
|
|
: 'text-[#FF2F1F]'}"
|
|
>
|
|
{abbreviateNumber(item?.cost_basis, true)}
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="text-right xl:table.-column text-sm sm:text-[1rem]"
|
|
>
|
|
${item?.strike_price}
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
|
|
>
|
|
{abbreviateNumber(
|
|
optionsMode === "openInterest"
|
|
? item?.open_interest
|
|
: item?.volume,
|
|
)}
|
|
</Table.Cell>
|
|
<Table.Cell
|
|
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] {item?.put_call ===
|
|
'Calls'
|
|
? 'text-[#00FC50]'
|
|
: 'text-[#FF2F1F]'}"
|
|
>
|
|
{item?.put_call}
|
|
</Table.Cell>
|
|
|
|
<Table.Cell class="text-right text-sm sm:text-[1rem]"
|
|
>{reformatDate(item?.date_expiration)}</Table.Cell
|
|
>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
|
|
<Card.Root
|
|
class="order-3 sm:order-1 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[470px]"
|
|
>
|
|
<Card.Header class="flex flex-row items-center">
|
|
<div class="flex flex-col items-start w-full">
|
|
<div class="flex flex-row w-full items-center">
|
|
<Card.Title
|
|
class="text-xl sm:text-2xl tex-white font-semibold"
|
|
>Dividend Announcement <span class="text-sm text-gray-300"
|
|
>(NYSE Time)</span
|
|
></Card.Title
|
|
>
|
|
</div>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
{#if data?.getDashboard?.recentDividends?.length !== 0}
|
|
<ul style="padding-left: 5px;">
|
|
{#each data?.getDashboard?.recentDividends as item}
|
|
<strong>{item?.name}</strong> (<HoverStockChart
|
|
symbol={item?.symbol}
|
|
/>) has announced its upcoming dividend details as of {convertTimestamp(
|
|
item?.updated,
|
|
)}:
|
|
|
|
<li
|
|
style="color: #fff; line-height: 22px; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
|
>
|
|
<span class="font-bold">Dividend:</span> ${item?.dividend}
|
|
per share ({item?.dividend / item?.dividendPrior - 1 > 0
|
|
? "+"
|
|
: ""}{(
|
|
(item?.dividend / item?.dividendPrior - 1) *
|
|
100
|
|
)?.toFixed(2)}% YoY)
|
|
</li>
|
|
<li
|
|
style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
|
>
|
|
<span class="font-bold">Dividend Yield:</span>
|
|
{item?.dividendYield?.toFixed(2)}%
|
|
</li>
|
|
<li
|
|
style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
|
>
|
|
<span class="font-bold">Ex-Dividend Date:</span>
|
|
{new Date(item?.exDividendDate)?.toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
daySuffix: "2-digit",
|
|
})}
|
|
</li>
|
|
<li
|
|
style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
|
>
|
|
<span class="font-bold">Payable Date:</span>
|
|
{new Date(item?.payableDate)?.toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
daySuffix: "2-digit",
|
|
})}
|
|
</li>
|
|
<li
|
|
style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 30px; list-style-type: disc;"
|
|
>
|
|
<span class="font-bold">Record Date:</span>
|
|
{new Date(item?.recordDate)?.toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
daySuffix: "2-digit",
|
|
})}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<div
|
|
class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-slate-800 text-[1rem]"
|
|
>
|
|
<svg
|
|
class="hidden sm:inline-block w-6 h-6 flex-shrink-0 sm:mr-2"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 256 256"
|
|
><path
|
|
fill="#fff"
|
|
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
|
|
>
|
|
Currently, there are no dividend announcement reports available.
|
|
</div>
|
|
{/if}
|
|
</Card.Content>
|
|
</Card.Root>
|
|
|
|
<Card.Root
|
|
class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[550px]"
|
|
>
|
|
<Card.Header class="flex flex-row items-center">
|
|
<div class="flex flex-col items-start w-full">
|
|
<div class="flex flex-row w-full items-center">
|
|
<Card.Title
|
|
class="text-xl sm:text-2xl tex-white font-semibold"
|
|
>Upcoming Earnings</Card.Title
|
|
>
|
|
<a
|
|
href="/earnings-calendar"
|
|
class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#fff] text-black"
|
|
>
|
|
View All
|
|
<ArrowUpRight
|
|
class="hidden sm:inline-block h-4 w-4 shrink-0 -mt-1 ml-0.5"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
{#if data?.getDashboard?.upcomingEarnings?.length !== 0}
|
|
<ul style="padding-left: 5px;">
|
|
{#each data?.getDashboard?.upcomingEarnings as item}
|
|
<li
|
|
style="margin-left: 8px; line-height: 22px; margin-bottom: 30px; list-style-type: disc;"
|
|
>
|
|
<strong>{item?.name}</strong> (<HoverStockChart
|
|
symbol={item?.symbol}
|
|
/>)
|
|
{item?.isToday === true
|
|
? "will report today"
|
|
: [
|
|
"Monday",
|
|
"Tuesday",
|
|
"Wednesday",
|
|
"Thursday",
|
|
].includes(
|
|
new Date().toLocaleDateString("en-US", {
|
|
weekday: "long",
|
|
}),
|
|
)
|
|
? "will report tomorrow"
|
|
: "will report monday"}
|
|
{#if item?.time}
|
|
{#if compareTimes(item?.time, "16:00") >= 0}
|
|
after market closes.
|
|
{:else if compareTimes(item?.time, "09:30") <= 0}
|
|
before market opens.
|
|
{:else}
|
|
during market.
|
|
{/if}
|
|
{/if}Analysts estimate {abbreviateNumber(
|
|
item?.revenueEst,
|
|
true,
|
|
)} in revenue ({(
|
|
(item?.revenueEst / item?.revenuePrior - 1) *
|
|
100
|
|
)?.toFixed(2)}% YoY) and ${item?.epsEst} in earnings per share
|
|
({((item?.epsEst / item?.epsPrior - 1) * 100)?.toFixed(
|
|
2,
|
|
)}% YoY).
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<div
|
|
class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-slate-800 text-[1rem]"
|
|
>
|
|
<svg
|
|
class="hidden sm:inline-block w-6 h-6 flex-shrink-0 sm:mr-2"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 256 256"
|
|
><path
|
|
fill="#fff"
|
|
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
|
|
>
|
|
Currently, there are no upcoming earnings reports available that
|
|
include the latest analyst estimates.
|
|
</div>
|
|
{/if}
|
|
</Card.Content>
|
|
</Card.Root>
|
|
|
|
<Card.Root
|
|
class="order-2 sm:order-3 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[550px]"
|
|
>
|
|
<Card.Header class="flex flex-row items-center">
|
|
<div class="flex flex-col items-start w-full">
|
|
<div class="flex flex-row w-full items-center">
|
|
<Card.Title
|
|
class="text-xl sm:text-2xl tex-white font-semibold"
|
|
>Recent Earnings <span class="text-sm text-gray-300"
|
|
>(NYSE Time)</span
|
|
></Card.Title
|
|
>
|
|
</div>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
{#if data?.getDashboard?.recentEarnings?.length !== 0}
|
|
<ul style="padding-left: 5px;">
|
|
{#each data?.getDashboard?.recentEarnings as item}
|
|
<strong>{item?.name}</strong> (<HoverStockChart
|
|
symbol={item?.symbol}
|
|
/>) has released its quarterly earnings at {formatTime(
|
|
item?.time,
|
|
)}:
|
|
|
|
<li
|
|
style="color: #fff; line-height: 22px; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
|
|
>
|
|
Revenue of {abbreviateNumber(item?.revenue, true)}
|
|
{item?.revenueSurprise > 0 ? "exceeds" : "misses"} estimates
|
|
by {abbreviateNumber(
|
|
Math.abs(item?.revenueSurprise),
|
|
true,
|
|
)}, with {(
|
|
(item?.revenue / item?.revenuePrior - 1) *
|
|
100
|
|
)?.toFixed(2)}% YoY {item?.revenue / item?.revenuePrior -
|
|
1 <
|
|
0
|
|
? "decline"
|
|
: "growth"}.
|
|
</li>
|
|
<li
|
|
style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 30px; list-style-type: disc;"
|
|
>
|
|
EPS of ${item?.eps}
|
|
{item?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by
|
|
${item?.epsSurprise?.toFixed(2)}, with {(
|
|
((item?.eps - item?.epsPrior) /
|
|
Math.abs(item?.epsPrior)) *
|
|
100
|
|
)?.toFixed(2)}% YoY {(item?.eps - item?.epsPrior) /
|
|
Math.abs(item?.epsPrior) <
|
|
0
|
|
? "decline"
|
|
: "growth"}.
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<div
|
|
class="text-left text-white sm:p-5 w-fit rounded-md flex flex-row items-center sm:border sm:border-slate-800 text-[1rem]"
|
|
>
|
|
<svg
|
|
class="hidden sm:inline-block w-6 h-6 flex-shrink-0 sm:mr-2"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 256 256"
|
|
><path
|
|
fill="#fff"
|
|
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
|
|
>
|
|
Currently, there are no recent earnings reports available.
|
|
</div>
|
|
{/if}
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.app {
|
|
height: 250px;
|
|
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.app {
|
|
height: 210px;
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
}
|
|
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
.scrollbar {
|
|
display: grid;
|
|
grid-gap: 90px;
|
|
grid-template-columns: repeat(auto-fill, minmax(80px, 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 */
|
|
}
|
|
|
|
.stroke-text {
|
|
font-size: 56px; /* Adjust the font size as needed */
|
|
font-weight: bold; /* Adjust the font weight as needed */
|
|
color: transparent; /* Make the text transparent */
|
|
-webkit-text-stroke: 1px #cbd5e1; /* Add a black stroke outline with a thickness of 2px */
|
|
}
|
|
</style>
|