174 lines
6.8 KiB
Svelte
174 lines
6.8 KiB
Svelte
<script lang="ts">
|
|
import { stockTicker } from "$lib/store";
|
|
|
|
import { abbreviateNumber } from "$lib/utils";
|
|
|
|
export let data;
|
|
const similarStocks = data?.getSimilarStocks;
|
|
|
|
let newsList = data?.getNews ?? [];
|
|
|
|
const formatDate = (dateString) => {
|
|
// Create a date object for the input dateString
|
|
const inputDate = new Date(dateString);
|
|
|
|
// Create a date object for the current time in New York City
|
|
const nycTime = new Date().toLocaleString("en-US", {
|
|
timeZone: "America/New_York",
|
|
});
|
|
const currentNYCDate = new Date(nycTime);
|
|
|
|
// Calculate the difference in milliseconds
|
|
const difference = inputDate.getTime() - currentNYCDate.getTime();
|
|
|
|
// Convert the difference to minutes
|
|
const minutes = Math.abs(Math.round(difference / (1000 * 60)));
|
|
|
|
if (minutes < 60) {
|
|
return `${minutes} minutes`;
|
|
} else if (minutes < 1440) {
|
|
const hours = Math.round(minutes / 60);
|
|
return `${hours} hour${hours !== 1 ? "s" : ""}`;
|
|
} else {
|
|
const days = Math.round(minutes / 1440);
|
|
return `${days} day${days !== 1 ? "s" : ""}`;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<section class="w-full overflow-hidden">
|
|
<div class="w-full overflow-hidden m-auto">
|
|
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
|
<div
|
|
class="relative flex flex-col lg:flex-row justify-center items-start overflow-hidden w-full"
|
|
>
|
|
<main class="w-full lg:w-3/4 lg:pr-10">
|
|
<slot />
|
|
</main>
|
|
|
|
<aside class="inline-block relative w-full lg:w-1/4 mt-3">
|
|
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial}
|
|
<div
|
|
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
|
|
>
|
|
<a
|
|
href="/pricing"
|
|
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
|
>
|
|
<div class="w-full flex justify-between items-center p-3 mt-3">
|
|
<h2
|
|
class="text-start text-xl font-semibold text-white sm:ml-3"
|
|
>
|
|
Pro Subscription
|
|
</h2>
|
|
</div>
|
|
<span class="text-white p-3 sm:ml-3 sm:mr-3 -mt-4">
|
|
Upgrade now for unlimited access to all data and tools.
|
|
</span>
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
|
|
<div
|
|
class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4"
|
|
>
|
|
<h3 class="p-2 pt-4 text-xl font-semibold">Revenue Definition</h3>
|
|
<div class="text-white p-2">
|
|
Revenue, also called sales, is the amount of money a company
|
|
receives from its business activities, such as sales of products
|
|
or services. Revenue does not take any expenses into account and
|
|
is therefore different from profits.
|
|
</div>
|
|
<div class="px-2">
|
|
<a
|
|
href="/blog/article/revenue"
|
|
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
|
|
>
|
|
Full Definition
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{#if similarStocks?.length > 0}
|
|
<div
|
|
class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4"
|
|
>
|
|
<h3 class="p-2 pt-4 text-xl font-semibold">Related Stocks</h3>
|
|
<table class="table table-sm table-compact w-full text-white">
|
|
<thead class="text-white"
|
|
><tr
|
|
><th
|
|
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2"
|
|
>Company</th
|
|
>
|
|
<th
|
|
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2"
|
|
>Revenue</th
|
|
></tr
|
|
></thead
|
|
>
|
|
<tbody>
|
|
{#each similarStocks?.slice(0, 8) as item, index}
|
|
{#if item?.revenue > 0}
|
|
<tr
|
|
class="border-gray-800 text-[1rem] {index !==
|
|
similarStocks?.slice(0, 8).length - 1
|
|
? 'border-b'
|
|
: ''}"
|
|
><td class="text-left text-[1rem] px-2"
|
|
><a
|
|
href={`/stocks/${item?.symbol}/statistics/revenue`}
|
|
class="sm:hover:text-white text-blue-400"
|
|
>{item?.name}</a
|
|
></td
|
|
>
|
|
<td class="text-right cursor-normal text-[1rem] px-2"
|
|
>{abbreviateNumber(item?.revenue)}</td
|
|
>
|
|
</tr>
|
|
{/if}
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
<div class="px-2">
|
|
<a
|
|
href="/list/highest-revenue"
|
|
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
|
|
>
|
|
Revenue Rankings
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if newsList?.length !== 0}
|
|
<div
|
|
class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
|
|
>
|
|
<div class="p-4 text-sm">
|
|
<h3 class="text-xl text-white font-semibold mb-3">
|
|
{$stockTicker} News
|
|
</h3>
|
|
<ul class="text-white">
|
|
{#each newsList?.slice(0, 10) as item}
|
|
<li class="mb-3 last:mb-1">
|
|
{formatDate(item?.publishedDate)} ago -
|
|
<a
|
|
class="sm:hover:text-white text-blue-400"
|
|
href={item?.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer nofollow">{item?.title}</a
|
|
>
|
|
- {item?.site}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|