ui fixes
This commit is contained in:
MuslemRahimi
parent
ee2e9d9bff
commit
f0c3f4c5dd
@ -1,9 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {stockTicker, screenWidth, wsBidPrice, wsAskPrice} from '$lib/store';
|
import { stockTicker, screenWidth, wsBidPrice, wsAskPrice } from "$lib/store";
|
||||||
|
|
||||||
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
|
import { fade } from "svelte/transition";
|
||||||
|
|
||||||
import { abbreviateNumber } from '$lib/utils';
|
|
||||||
import { fade } from 'svelte/transition';
|
|
||||||
|
|
||||||
export let stockDeck;
|
export let stockDeck;
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
@ -11,91 +11,93 @@
|
|||||||
|
|
||||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; // Set a default API URL
|
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; // Set a default API URL
|
||||||
|
|
||||||
|
|
||||||
let earningDate = null;
|
let earningDate = null;
|
||||||
let tierList = '-';
|
let tierList = "-";
|
||||||
let ceoName = '-';
|
//let ceoName = "-";
|
||||||
let sector = '-';
|
let sector = "-";
|
||||||
let industry = '-';
|
let industry = "-";
|
||||||
let exchange = '-';
|
let exchange = "-";
|
||||||
let employees = '-';
|
let employees = "-";
|
||||||
let country = '-';
|
//let country = "-";
|
||||||
let description = '';
|
let description = "";
|
||||||
let website = '-';
|
let website = "-";
|
||||||
let snippet;
|
let snippet;
|
||||||
let forwardPE = '-';
|
let forwardPE = "-";
|
||||||
let beta = '-';
|
let beta = "-";
|
||||||
|
|
||||||
|
|
||||||
let showFullText = false;
|
let showFullText = false;
|
||||||
|
/*
|
||||||
|
|
||||||
function getAbbreviatedName(fullName) {
|
function getAbbreviatedName(fullName) {
|
||||||
try {
|
try {
|
||||||
const names = fullName?.split(' ');
|
const names = fullName?.split(" ");
|
||||||
let firstName = names?.at(0);
|
let firstName = names?.at(0);
|
||||||
// Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.)
|
// Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.)
|
||||||
if (names?.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i?.test(names?.at(0))) {
|
if (names?.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i?.test(names?.at(0))) {
|
||||||
firstName = names?.at(1);
|
firstName = names?.at(1);
|
||||||
names?.splice(0, 1);
|
names?.splice(0, 1);
|
||||||
}
|
}
|
||||||
const initials = names?.slice(0, -1)?.map(name => name?.charAt(0))?.join('. ');
|
//const initials = names?.slice(0, -1)?.map(name => name?.charAt(0))?.join('. ');
|
||||||
const lastName = names[names?.length - 1];
|
const lastName = names[names?.length - 1];
|
||||||
return `${firstName?.charAt(0)}. ${lastName}`;
|
return `${firstName?.charAt(0)}. ${lastName}`;
|
||||||
} catch(e) {
|
} catch (e) {
|
||||||
//console.log(e)
|
//console.log(e)
|
||||||
return '-'
|
return "-";
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
$: {
|
||||||
|
if (
|
||||||
|
$stockTicker &&
|
||||||
|
typeof window !== "undefined" &&
|
||||||
|
typeof stockDeck !== "undefined" &&
|
||||||
|
stockDeck?.length !== 0
|
||||||
|
) {
|
||||||
|
info = stockDeck?.at(0);
|
||||||
|
earningDate =
|
||||||
|
info?.earning !== undefined
|
||||||
|
? new Date(info?.earning)?.toLocaleDateString("en-GB", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "long",
|
||||||
|
})
|
||||||
|
: "";
|
||||||
|
|
||||||
|
tierList = info?.tierList;
|
||||||
|
//ceoName = info?.ceoName?.length !== 0 ? getAbbreviatedName(info?.ceoName) : "-";
|
||||||
|
sector = info?.sector ?? "-";
|
||||||
|
industry = info?.industry ?? "-";
|
||||||
|
exchange = info?.exchange;
|
||||||
|
employees = abbreviateNumber(info?.fullTimeEmployees) ?? "-";
|
||||||
$: {
|
//country = info?.country ?? "-";
|
||||||
|
description =
|
||||||
if ($stockTicker && typeof window !== 'undefined' && typeof stockDeck !== 'undefined' && stockDeck?.length !== 0)
|
info?.description ??
|
||||||
{
|
"A detailed description of the company is not yet available.";
|
||||||
|
website = info?.website;
|
||||||
info = stockDeck?.at(0)
|
snippet = description?.slice(0, 150) + "...";
|
||||||
earningDate = new Date( info?.earning );
|
forwardPE = info?.forwardPE;
|
||||||
earningDate = earningDate?.toLocaleDateString('en-GB', { day: 'numeric', month: 'long' });
|
beta = info?.beta !== undefined ? info?.beta?.toFixed(2) : "-";
|
||||||
tierList = info?.tierList;
|
}
|
||||||
ceoName = info?.ceoName?.length !== 0 ? getAbbreviatedName(info?.ceoName) : '-';
|
|
||||||
sector = info?.sector ?? '-';
|
|
||||||
industry = info?.industry ?? '-';
|
|
||||||
exchange = info?.exchange;
|
|
||||||
employees = abbreviateNumber(info?.fullTimeEmployees) ?? '-';
|
|
||||||
country = info?.country ?? '-';
|
|
||||||
description = info?.description ?? 'A detailed description of the company is not yet available.';
|
|
||||||
website = info?.website;
|
|
||||||
snippet= description?.slice(0, 150) + "...";
|
|
||||||
forwardPE = info?.forwardPE;
|
|
||||||
beta = info?.beta?.toFixed(2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="sm:space-y-3">
|
<div class="sm:space-y-3">
|
||||||
<div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0">
|
<div
|
||||||
|
class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
|
||||||
<!--Start Header-->
|
>
|
||||||
<div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});">
|
<!--Start Header-->
|
||||||
|
<div
|
||||||
<div class="flex flex-row pt-1 pb-2">
|
class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat"
|
||||||
{#if earningDate}
|
style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});"
|
||||||
<div class="badge bg-[#FBCE3C] gap-2 mt-2 font-semibold text-sm text-black">
|
>
|
||||||
Earnings Call - {earningDate}
|
<div class="flex flex-row pt-1 pb-2">
|
||||||
</div>
|
{#if earningDate}
|
||||||
{/if}
|
<div
|
||||||
|
class="badge bg-[#FBCE3C] gap-2 mt-2 font-semibold text-sm text-black"
|
||||||
|
>
|
||||||
|
Earnings Call - {earningDate}
|
||||||
</div>
|
</div>
|
||||||
<!--
|
{/if}
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
<div class="flex flex-row justify-end items-center mt-2 relative z-10 -my-5">
|
<div class="flex flex-row justify-end items-center mt-2 relative z-10 -my-5">
|
||||||
<div style={`background-image: url(${tierList === 'S' || tierList === 'S+' || tierList === 'S-' ? sTier : tierList === 'A' || tierList === 'A+' || tierList === 'A-' ? aTier : tierList === 'B' || tierList === 'B+' || tierList === 'B-' ? bTier : defaultTier});`} class="animate-bounce circle-background mr-5 w-20 h-20 z-10">
|
<div style={`background-image: url(${tierList === 'S' || tierList === 'S+' || tierList === 'S-' ? sTier : tierList === 'A' || tierList === 'A+' || tierList === 'A-' ? aTier : tierList === 'B' || tierList === 'B+' || tierList === 'B-' ? bTier : defaultTier});`} class="animate-bounce circle-background mr-5 w-20 h-20 z-10">
|
||||||
<div class="tier-text italic m-auto text-xl">
|
<div class="tier-text italic m-auto text-xl">
|
||||||
@ -107,15 +109,17 @@ $: {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
-->
|
-->
|
||||||
</div>
|
</div>
|
||||||
<!--End Header-->
|
<!--End Header-->
|
||||||
<!--Start Content-->
|
<!--Start Content-->
|
||||||
<div class="w-full flex flex-wrap border-t border-slate-800 px-2">
|
<div class="w-full flex flex-wrap border-t border-slate-800 px-2">
|
||||||
<h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">Company Info</h2>
|
<h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">
|
||||||
<div class="flex justify-center items-center w-full m-auto">
|
Company Info
|
||||||
<table class="table table-sm table-compact">
|
</h2>
|
||||||
<tbody>
|
<div class="flex justify-center items-center w-full m-auto">
|
||||||
<!--
|
<table class="table table-sm table-compact">
|
||||||
|
<tbody>
|
||||||
|
<!--
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
<tr class="text-white border-b border-[#27272A]">
|
||||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">CEO</td>
|
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">CEO</td>
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{ceoName}</td>
|
<td class="text-center sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{ceoName}</td>
|
||||||
@ -123,25 +127,59 @@ $: {
|
|||||||
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{country}</td>
|
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{country}</td>
|
||||||
</tr>
|
</tr>
|
||||||
-->
|
-->
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
<tr class="text-white border-b border-[#27272A]">
|
||||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Bid</td>
|
<td
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsBidPrice !== 0 && $wsBidPrice !== null ? $wsBidPrice : (data?.getStockQuote?.bid ?? '-')}</td>
|
class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Ask</td>
|
>Bid</td
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsAskPrice !== 0 && $wsAskPrice !== null ? $wsAskPrice : (data?.getStockQuote?.ask ?? '-')}</td>
|
>
|
||||||
</tr>
|
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
>{$wsBidPrice !== 0 && $wsBidPrice !== null
|
||||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Mkt Cap</td>
|
? $wsBidPrice
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.marketCap)}</td>
|
: (data?.getStockQuote?.bid ?? "-")}</td
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Vol</td>
|
>
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
|
<td
|
||||||
</tr>
|
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
>Ask</td
|
||||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Beta</td>
|
>
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{beta}</td>
|
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Avg. Vol</td>
|
>{$wsAskPrice !== 0 && $wsAskPrice !== null
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td>
|
? $wsAskPrice
|
||||||
</tr>
|
: (data?.getStockQuote?.ask ?? "-")}</td
|
||||||
<!--
|
>
|
||||||
|
</tr>
|
||||||
|
<tr class="text-white border-b border-[#27272A]">
|
||||||
|
<td
|
||||||
|
class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
|
>Mkt Cap</td
|
||||||
|
>
|
||||||
|
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
|
>{abbreviateNumber(data?.getStockQuote?.marketCap)}</td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
|
>Vol</td
|
||||||
|
>
|
||||||
|
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
|
>{abbreviateNumber(data?.getStockQuote?.volume)}</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
<tr class="text-white border-b border-[#27272A]">
|
||||||
|
<td
|
||||||
|
class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
|
>Beta</td
|
||||||
|
>
|
||||||
|
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
|
>{beta}</td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
|
>Avg. Vol</td
|
||||||
|
>
|
||||||
|
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
|
>{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
<!--
|
||||||
<tr class="text-white ">
|
<tr class="text-white ">
|
||||||
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white whitespace-pre-line font-semibold whitespace-nowrap">Sector</td>
|
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white whitespace-pre-line font-semibold whitespace-nowrap">Sector</td>
|
||||||
<td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-pre-line font-semibold">{sector}</td>
|
<td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-pre-line font-semibold">{sector}</td>
|
||||||
@ -155,13 +193,24 @@ $: {
|
|||||||
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] font-semibold">{exchange}</td>
|
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] font-semibold">{exchange}</td>
|
||||||
</tr>
|
</tr>
|
||||||
-->
|
-->
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
<tr class="text-white border-b border-[#27272A]">
|
||||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td>
|
<td
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.open?.toFixed(2)}</td>
|
class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Prev. Close</td>
|
>Open</td
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2) ?? '-'}</td>
|
>
|
||||||
</tr>
|
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
<!--
|
>{data?.getStockQuote?.open?.toFixed(2)}</td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
|
>Prev. Close</td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap"
|
||||||
|
>{data?.getStockQuote?.previousClose?.toFixed(2) ?? "-"}</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
<!--
|
||||||
{#if $screenWidth > 640}
|
{#if $screenWidth > 640}
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
<tr class="text-white border-b border-[#27272A]">
|
||||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">1D-Range</td>
|
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">1D-Range</td>
|
||||||
@ -171,69 +220,97 @@ $: {
|
|||||||
</tr>
|
</tr>
|
||||||
{/if}
|
{/if}
|
||||||
-->
|
-->
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
<tr class="text-white border-b border-[#27272A]">
|
||||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
|
<td
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps}</td>
|
class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
|
>EPS (ttm)</td
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.pe}</td>
|
>
|
||||||
</tr>
|
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
<tr class="text-white border-b border-[#27272A]">
|
>{data?.getStockQuote?.eps}</td
|
||||||
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Shares Out.</td>
|
>
|
||||||
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
|
<td
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Forward PE</td>
|
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{(forwardPE === undefined || forwardPE === null)? '-' : forwardPE}</td>
|
>PE Ratio (ttm)</td
|
||||||
</tr>
|
>
|
||||||
</tbody>
|
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
</table>
|
>{data?.getStockQuote?.pe}</td
|
||||||
</div>
|
>
|
||||||
|
</tr>
|
||||||
|
<tr class="text-white border-b border-[#27272A]">
|
||||||
|
<td
|
||||||
|
class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
|
>Shares Out.</td
|
||||||
|
>
|
||||||
|
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
|
||||||
|
>{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
|
||||||
|
>Forward PE</td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap"
|
||||||
|
>{forwardPE === undefined || forwardPE === null
|
||||||
|
? "-"
|
||||||
|
: forwardPE}</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h2 class="text-start sm:ml-4 text-xl font-bold text-white pb-2 pt-5 sm:pt-3 p-1 sm:p-0">
|
<h2
|
||||||
Description
|
class="text-start sm:ml-4 text-xl font-bold text-white pb-2 pt-5 sm:pt-3 p-1 sm:p-0"
|
||||||
</h2>
|
>
|
||||||
|
Description
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-gray-100 sm:ml-2 text-sm whitespace-normal p-1 sm:p-2">
|
||||||
<p class="text-gray-100 sm:ml-2 text-sm whitespace-normal p-1 sm:p-2">
|
{#if showFullText}
|
||||||
{#if showFullText}
|
|
||||||
<div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}>
|
<div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}>
|
||||||
{description}
|
{description}
|
||||||
</div>
|
</div>
|
||||||
{:else if $screenWidth <= 800}
|
{:else if $screenWidth <= 800}
|
||||||
{description}
|
{description}
|
||||||
{:else}
|
{:else}
|
||||||
{snippet}
|
{snippet}
|
||||||
{/if}
|
{/if}
|
||||||
</p>
|
</p>
|
||||||
{#if description.length !== 0 }
|
{#if description.length !== 0}
|
||||||
<div class="flex flex-row w-full items-center mt-4 pb-2 mb-2">
|
<div class="flex flex-row w-full items-center mt-4 pb-2 mb-2">
|
||||||
<label on:click={() => showFullText = !showFullText} class="hidden lg:block ml-3 w-full text-md mt-1 cursor-pointer font-medium text-white sm:hover:text-blue-400 sm:hover:underline">
|
<label
|
||||||
|
on:click={() => (showFullText = !showFullText)}
|
||||||
|
class="hidden lg:block ml-3 w-full text-md mt-1 cursor-pointer font-medium text-white sm:hover:text-blue-400 sm:hover:underline"
|
||||||
|
>
|
||||||
{#if showFullText}
|
{#if showFullText}
|
||||||
Show less
|
Show less
|
||||||
{:else}
|
{:else}
|
||||||
Show more
|
Show more
|
||||||
{/if}
|
{/if}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="flex justify-end w-full relative bottom-0 right-0 mr-3">
|
<div class="flex justify-end w-full relative bottom-0 right-0 mr-3">
|
||||||
<a target ="_blank" href={website} class="inline-flex text-sm font-medium text-white sm:hover:text-blue-400 sm:hover:underline">
|
<a
|
||||||
Go to website
|
target="_blank"
|
||||||
<svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg>
|
href={website}
|
||||||
</a>
|
class="inline-flex text-sm font-medium text-white sm:hover:text-blue-400 sm:hover:underline"
|
||||||
|
>
|
||||||
|
Go to website
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 ml-2"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
|
||||||
|
></path><path
|
||||||
|
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
|
||||||
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,11 +1,16 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import {
|
||||||
import { format, startOfWeek, addDays, addWeeks, subWeeks, differenceInWeeks } from 'date-fns'
|
format,
|
||||||
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
|
startOfWeek,
|
||||||
import dividendsLogo from '$lib/images/dividends_calendar_logo.png';
|
addDays,
|
||||||
import { goto } from '$app/navigation';
|
addWeeks,
|
||||||
import { abbreviateNumber } from '$lib/utils';
|
subWeeks,
|
||||||
|
differenceInWeeks,
|
||||||
|
} from "date-fns";
|
||||||
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||||
|
import dividendsLogo from "$lib/images/dividends_calendar_logo.png";
|
||||||
|
import { goto } from "$app/navigation";
|
||||||
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
@ -17,106 +22,115 @@
|
|||||||
const today = new Date();
|
const today = new Date();
|
||||||
|
|
||||||
let formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
let formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
||||||
let formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d");
|
let formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
|
||||||
let formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d");
|
let formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
|
||||||
let formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d");
|
let formattedThursday = format(addDays(formattedMonday, 3), "EEE, MMM d");
|
||||||
let formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d");
|
let formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d");
|
||||||
formattedMonday = format( formattedMonday, "EEE, MMM d");
|
formattedMonday = format(formattedMonday, "EEE, MMM d");
|
||||||
|
|
||||||
let formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday];
|
let formattedWeekday = [
|
||||||
|
formattedMonday,
|
||||||
|
formattedTuesday,
|
||||||
|
formattedWednesday,
|
||||||
|
formattedThursday,
|
||||||
|
formattedFriday,
|
||||||
|
];
|
||||||
let weekday = [];
|
let weekday = [];
|
||||||
|
|
||||||
|
|
||||||
let startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
let startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
||||||
let endDate = addDays(startDate, 4);
|
let endDate = addDays(startDate, 4);
|
||||||
let formattedStartDate = format(startDate, "yyyy-MM-dd");
|
let formattedStartDate = format(startDate, "yyyy-MM-dd");
|
||||||
let formattedEndDate = format(endDate, "yyyy-MM-dd");
|
let formattedEndDate = format(endDate, "yyyy-MM-dd");
|
||||||
let daysOfWeek = [
|
let daysOfWeek = [
|
||||||
{
|
{
|
||||||
name: "Monday",
|
name: "Monday",
|
||||||
date: formattedStartDate,
|
date: formattedStartDate,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Tuesday",
|
name: "Tuesday",
|
||||||
date: format(addDays(startDate, 1), "yyyy-MM-dd"),
|
date: format(addDays(startDate, 1), "yyyy-MM-dd"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Wednesday",
|
name: "Wednesday",
|
||||||
date: format(addDays(startDate, 2), "yyyy-MM-dd"),
|
date: format(addDays(startDate, 2), "yyyy-MM-dd"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Thursday",
|
name: "Thursday",
|
||||||
date: format(addDays(startDate, 3), "yyyy-MM-dd"),
|
date: format(addDays(startDate, 3), "yyyy-MM-dd"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Friday",
|
name: "Friday",
|
||||||
date: formattedEndDate,
|
date: formattedEndDate,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let currentDate = new Date();
|
let currentDate = new Date();
|
||||||
let currentWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
|
let currentWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
|
||||||
let selectedWeekday = currentWeekday;
|
let selectedWeekday = currentWeekday;
|
||||||
|
|
||||||
|
|
||||||
function toggleDate(index)
|
function toggleDate(index) {
|
||||||
{
|
if ($screenWidth > 640) {
|
||||||
if($screenWidth > 640) {
|
selectedWeekday = index;
|
||||||
selectedWeekday = index
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function clickWeekday (state, index) {
|
function clickWeekday(state, index) {
|
||||||
|
if (state === "next" && selectedWeekday + 1 <= 4) {
|
||||||
if (state==='next' && selectedWeekday+1 <=4)
|
selectedWeekday = selectedWeekday + 1;
|
||||||
{
|
} else if (state === "previous" && selectedWeekday - 1 >= 0) {
|
||||||
selectedWeekday = selectedWeekday +1;
|
selectedWeekday--;
|
||||||
}
|
} else if (
|
||||||
else if( state === 'previous' && selectedWeekday-1 >=0)
|
state === "previous" &&
|
||||||
{
|
index === 0 &&
|
||||||
selectedWeekday --;
|
differenceInWeeks(currentWeek, today) > -maxWeeksChange
|
||||||
}
|
) {
|
||||||
|
changeWeek(state);
|
||||||
else if (state=== 'previous' && index === 0 && differenceInWeeks(currentWeek, today) > -maxWeeksChange)
|
|
||||||
{
|
|
||||||
changeWeek(state)
|
|
||||||
selectedWeekday = 4;
|
selectedWeekday = 4;
|
||||||
}
|
} else if (
|
||||||
else if (state=== 'next' && index === 4 && differenceInWeeks(currentWeek, today) < maxWeeksChange)
|
state === "next" &&
|
||||||
{
|
index === 4 &&
|
||||||
changeWeek(state)
|
differenceInWeeks(currentWeek, today) < maxWeeksChange
|
||||||
|
) {
|
||||||
|
changeWeek(state);
|
||||||
selectedWeekday = 0;
|
selectedWeekday = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function changeWeek(state) {
|
async function changeWeek(state) {
|
||||||
|
//Limit the user to go back max 4 weeks and look forward 4 weeks
|
||||||
|
if (
|
||||||
|
state === "previous" &&
|
||||||
|
differenceInWeeks(currentWeek, today) > -maxWeeksChange
|
||||||
|
) {
|
||||||
|
currentWeek = subWeeks(currentWeek, 1);
|
||||||
|
} else if (
|
||||||
|
state === "next" &&
|
||||||
|
differenceInWeeks(currentWeek, today) < maxWeeksChange
|
||||||
|
) {
|
||||||
|
currentWeek = addWeeks(currentWeek, 1);
|
||||||
|
}
|
||||||
|
|
||||||
//Limit the user to go back max 4 weeks and look forward 4 weeks
|
formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
||||||
if (state === 'previous' && differenceInWeeks(currentWeek, today) > -maxWeeksChange) {
|
formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
|
||||||
currentWeek = subWeeks(currentWeek, 1);
|
formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
|
||||||
} else if (state === 'next' && differenceInWeeks(currentWeek, today) < maxWeeksChange) {
|
formattedThursday = format(addDays(formattedMonday, 3), "EEE, MMM d");
|
||||||
currentWeek = addWeeks(currentWeek, 1);
|
formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d");
|
||||||
}
|
formattedMonday = format(formattedMonday, "EEE, MMM d");
|
||||||
|
|
||||||
|
formattedWeekday = [
|
||||||
|
formattedMonday,
|
||||||
|
formattedTuesday,
|
||||||
|
formattedWednesday,
|
||||||
|
formattedThursday,
|
||||||
|
formattedFriday,
|
||||||
|
];
|
||||||
|
weekday = [];
|
||||||
|
|
||||||
formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
||||||
formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d");
|
endDate = addDays(startDate, 4);
|
||||||
formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d");
|
formattedStartDate = format(startDate, "yyyy-MM-dd");
|
||||||
formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d");
|
formattedEndDate = format(endDate, "yyyy-MM-dd");
|
||||||
formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d");
|
daysOfWeek = [
|
||||||
formattedMonday = format( formattedMonday, "EEE, MMM d");
|
|
||||||
|
|
||||||
formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday];
|
|
||||||
weekday = [];
|
|
||||||
|
|
||||||
startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
|
|
||||||
endDate = addDays(startDate, 4);
|
|
||||||
formattedStartDate = format(startDate, "yyyy-MM-dd");
|
|
||||||
formattedEndDate = format(endDate, "yyyy-MM-dd");
|
|
||||||
daysOfWeek = [
|
|
||||||
{
|
{
|
||||||
name: "Monday",
|
name: "Monday",
|
||||||
date: formattedStartDate,
|
date: formattedStartDate,
|
||||||
@ -139,18 +153,16 @@ async function changeWeek(state) {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
dividendCalendar = daysOfWeek.map((day) => {
|
||||||
|
return {
|
||||||
|
name: day.name,
|
||||||
|
data: data?.getDividendCalendar?.filter(
|
||||||
|
(item) => item.date === day.date,
|
||||||
|
),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
dividendCalendar = daysOfWeek.map((day) => {
|
if (dividendCalendar?.length) {
|
||||||
return {
|
|
||||||
name: day.name,
|
|
||||||
data: data?.getDividendCalendar?.filter(
|
|
||||||
(item) => item.date === day.date
|
|
||||||
),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
if (dividendCalendar?.length) {
|
|
||||||
// Loop through each day of the week
|
// Loop through each day of the week
|
||||||
for (let i = 0; i < dividendCalendar.length; i++) {
|
for (let i = 0; i < dividendCalendar.length; i++) {
|
||||||
const dayData = dividendCalendar[i].data;
|
const dayData = dividendCalendar[i].data;
|
||||||
@ -158,330 +170,472 @@ async function changeWeek(state) {
|
|||||||
// Filter out entries with company name "---"
|
// Filter out entries with company name "---"
|
||||||
|
|
||||||
// Sort and map the filtered data
|
// Sort and map the filtered data
|
||||||
weekday[i] = dayData
|
weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
|
||||||
.sort((a, b) => b.marketCap - a.marketCap)
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
}
|
if (dividendCalendar) {
|
||||||
|
dividendCalendar = daysOfWeek.map((day) => {
|
||||||
$: {
|
|
||||||
if( dividendCalendar)
|
|
||||||
{
|
|
||||||
dividendCalendar = daysOfWeek.map((day) => {
|
|
||||||
return {
|
return {
|
||||||
name: day.name,
|
name: day.name,
|
||||||
data: data?.getDividendCalendar?.filter(
|
data: data?.getDividendCalendar?.filter(
|
||||||
(item) => item.date === day.date
|
(item) => item.date === day.date,
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
if (dividendCalendar?.length) {
|
if (dividendCalendar?.length) {
|
||||||
// Loop through each day of the week
|
// Loop through each day of the week
|
||||||
for (let i = 0; i < dividendCalendar.length; i++) {
|
for (let i = 0; i < dividendCalendar.length; i++) {
|
||||||
const dayData = dividendCalendar[i].data;
|
const dayData = dividendCalendar[i].data;
|
||||||
|
|
||||||
// Filter out entries with company name "---"
|
// Filter out entries with company name "---"
|
||||||
|
|
||||||
// Sort and map the filtered data
|
// Sort and map the filtered data
|
||||||
weekday[i] = dayData
|
weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
|
||||||
.sort((a, b) => b.marketCap - a.marketCap)
|
}
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if (currentWeek)
|
|
||||||
{
|
|
||||||
|
|
||||||
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange)
|
|
||||||
{
|
|
||||||
previousMax = false;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
previousMax = true;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (currentWeek)
|
if (currentWeek) {
|
||||||
{
|
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange) {
|
||||||
if (differenceInWeeks(currentWeek, today) < maxWeeksChange)
|
previousMax = false;
|
||||||
{
|
} else {
|
||||||
nextMax = false;
|
previousMax = true;
|
||||||
}
|
}
|
||||||
else {
|
}
|
||||||
nextMax = true;
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (currentWeek) {
|
||||||
|
if (differenceInWeeks(currentWeek, today) < maxWeeksChange) {
|
||||||
|
nextMax = false;
|
||||||
|
} else {
|
||||||
|
nextMax = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<title>
|
||||||
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Dividends
|
||||||
|
Calendar · stocknear
|
||||||
|
</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`}
|
||||||
|
/>
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
<!-- Other meta tags -->
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta property="og:title" content={`Dividends Calendar · stocknear`} />
|
||||||
<title>
|
<meta
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Dividends Calendar · stocknear
|
property="og:description"
|
||||||
</title>
|
content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`}
|
||||||
<meta name="description" content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`} />
|
/>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
<!-- Other meta tags -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
<meta property="og:title" content={`Dividends Calendar · stocknear`}/>
|
|
||||||
<meta property="og:description" content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`} />
|
|
||||||
<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={`Dividends Calendar · stocknear`}/>
|
|
||||||
<meta name="twitter:description" content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`} />
|
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
|
||||||
|
|
||||||
|
<!-- Twitter specific meta tags -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content={`Dividends Calendar · stocknear`} />
|
||||||
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`}
|
||||||
|
/>
|
||||||
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
|
||||||
<ul>
|
|
||||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
|
||||||
<li class="text-gray-300">Dividends Calendar</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full overflow-hidden m-auto mt-5">
|
<section
|
||||||
|
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
|
||||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
>
|
||||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||||
|
<ul>
|
||||||
|
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
<li class="text-gray-300">Dividends Calendar</li>
|
||||||
|
</ul>
|
||||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
</div>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
|
||||||
|
|
||||||
|
<div class="w-full overflow-hidden m-auto mt-5">
|
||||||
<!-- Start Column -->
|
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||||
<div>
|
<div
|
||||||
<div class="flex flex-row justify-center items-center">
|
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
>
|
||||||
Dividends Calendar
|
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||||
</h1>
|
<div
|
||||||
|
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
|
||||||
|
>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||||
|
<!-- Start Column -->
|
||||||
|
<div>
|
||||||
|
<div class="flex flex-row justify-center items-center">
|
||||||
|
<h1
|
||||||
|
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
|
||||||
|
>
|
||||||
|
Dividends Calendar
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
|
||||||
|
>
|
||||||
|
Stay updated on upcoming Dividends in the stock market.
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- End Column -->
|
||||||
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
|
|
||||||
Stay updated on upcoming Dividends in the stock market.
|
<!-- Start Column -->
|
||||||
</span>
|
<div
|
||||||
|
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
|
||||||
|
>
|
||||||
</div>
|
<svg
|
||||||
<!-- End Column -->
|
class="w-36 -my-5"
|
||||||
|
viewBox="0 0 200 200"
|
||||||
<!-- Start Column -->
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
>
|
||||||
<svg class="w-36 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
<defs>
|
||||||
<defs>
|
<filter id="glow">
|
||||||
<filter id="glow">
|
<feGaussianBlur stdDeviation="5" result="glow" />
|
||||||
<feGaussianBlur stdDeviation="5" result="glow"/>
|
<feMerge>
|
||||||
<feMerge>
|
<feMergeNode in="glow" />
|
||||||
<feMergeNode in="glow"/>
|
<feMergeNode in="SourceGraphic" />
|
||||||
<feMergeNode in="SourceGraphic"/>
|
</feMerge>
|
||||||
</feMerge>
|
</filter>
|
||||||
</filter>
|
</defs>
|
||||||
</defs>
|
<path
|
||||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
fill="#1E40AF"
|
||||||
</svg>
|
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
|
||||||
|
transform="translate(100 100)"
|
||||||
|
filter="url(#glow)"
|
||||||
<div class="z-1 absolute top-2 right-7">
|
/>
|
||||||
<img class="w-24" src={dividendsLogo} alt="logo" loading="lazy">
|
</svg>
|
||||||
|
|
||||||
|
<div class="z-1 absolute top-2 right-7">
|
||||||
|
<img
|
||||||
|
class="w-24"
|
||||||
|
src={dividendsLogo}
|
||||||
|
alt="logo"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- End Column -->
|
||||||
</div>
|
</div>
|
||||||
<!-- End Column -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
<!-- Content area -->
|
||||||
|
<div class="w-full overflow-x-scroll">
|
||||||
|
<!-- Cards -->
|
||||||
|
<div
|
||||||
<!-- Content area -->
|
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
|
||||||
<div class="w-full overflow-x-scroll">
|
>
|
||||||
|
|
||||||
|
|
||||||
<!-- Cards -->
|
|
||||||
<div class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0">
|
|
||||||
<!-- Start Columns -->
|
<!-- Start Columns -->
|
||||||
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
|
<label
|
||||||
<svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
|
on:click={() => changeWeek("previous")}
|
||||||
|
class="{previousMax
|
||||||
|
? 'opacity-80'
|
||||||
|
: ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 m-auto rotate-180"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
fill="white"
|
||||||
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
</label>
|
</label>
|
||||||
{#each weekday as day,index}
|
{#each weekday as day, index}
|
||||||
|
<div
|
||||||
<div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
|
class="w-full {index === selectedWeekday
|
||||||
<label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 sm:hover:bg-purple-700' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3">
|
? ''
|
||||||
<div class=" flex flex-row justify-center items-center w-full ">
|
: 'hidden sm:block'}"
|
||||||
<label on:click={() => clickWeekday('previous', index) } class="{previousMax === true && index === 0? 'opacity-20' : ''} sm:hidden ml-auto">
|
>
|
||||||
<svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
|
<label
|
||||||
</label>
|
on:click={() => toggleDate(index)}
|
||||||
<div class="flex flex-col items-center text-white truncate m-auto p-1">
|
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
|
||||||
<span class="font-medium text-[1rem]">{formattedWeekday[index]}</span>
|
selectedWeekday
|
||||||
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1"> {day?.length} Earnings</span>
|
? 'bg-purple-600 sm:hover:bg-purple-700'
|
||||||
</div>
|
: ''} rounded-lg sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
|
||||||
<label on:click={() => clickWeekday('next', index) } class="{nextMax === true && index === 4? 'opacity-20' : ''} sm:hidden mr-auto">
|
>
|
||||||
<svg class="w-8 h-8 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
|
<div
|
||||||
</label>
|
class=" flex flex-row justify-center items-center w-full"
|
||||||
</div>
|
>
|
||||||
|
<label
|
||||||
|
on:click={() => clickWeekday("previous", index)}
|
||||||
|
class="{previousMax === true && index === 0
|
||||||
|
? 'opacity-20'
|
||||||
|
: ''} sm:hidden ml-auto"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-8 h-8 inline-block rotate-180"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
fill="white"
|
||||||
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
<div
|
||||||
|
class="flex flex-col items-center text-white truncate m-auto p-1"
|
||||||
|
>
|
||||||
|
<span class="font-medium text-[1rem]"
|
||||||
|
>{formattedWeekday[index]}</span
|
||||||
|
>
|
||||||
|
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
|
||||||
|
{day?.length} Earnings</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
on:click={() => clickWeekday("next", index)}
|
||||||
|
class="{nextMax === true && index === 4
|
||||||
|
? 'opacity-20'
|
||||||
|
: ''} sm:hidden mr-auto"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-8 h-8 inline-block"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
fill="white"
|
||||||
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
|
<label
|
||||||
<svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
|
on:click={() => changeWeek("next")}
|
||||||
|
class="{nextMax
|
||||||
|
? 'opacity-80'
|
||||||
|
: ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 m-auto"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
fill="white"
|
||||||
|
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{#each weekday as day, index}
|
||||||
{#each weekday as day,index}
|
|
||||||
{#if index === selectedWeekday}
|
{#if index === selectedWeekday}
|
||||||
{#if day?.length !== 0}
|
{#if day?.length !== 0}
|
||||||
<div class="w-full overflow-x-scroll no-scrollbar">
|
<div class="w-full overflow-x-scroll no-scrollbar">
|
||||||
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-[#09090B] m-auto mt-4 ">
|
<table
|
||||||
|
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-[#09090B] m-auto mt-4"
|
||||||
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="whitespace-nowrap border-b border-[#27272A]">
|
<tr
|
||||||
<th class="text-white font-semibold text-sm">Symbol</th>
|
class="whitespace-nowrap border-b border-[#27272A]"
|
||||||
<th class="text-white font-semibold text-sm">Company Name</th>
|
>
|
||||||
<th class="text-white font-semibold text-sm">Market Cap</th>
|
<th class="text-white font-semibold text-sm"
|
||||||
<th class="text-white font-semibold text-sm">Revenue</th>
|
>Symbol</th
|
||||||
<th class="text-white font-semibold text-sm">Ex. Dividend Date</th>
|
>
|
||||||
<th class="text-white font-semibold text-sm">Cash Amount</th>
|
<th class="text-white font-semibold text-sm"
|
||||||
<th class="text-white font-semibold text-sm text-end">Payment Date</th>
|
>Company Name</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-sm text-end"
|
||||||
|
>Market Cap</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-sm text-end"
|
||||||
|
>Revenue</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-sm text-end"
|
||||||
|
>Ex. Dividend Date</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-sm text-end"
|
||||||
|
>Cash Amount</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-sm text-end"
|
||||||
|
>Payment Date</th
|
||||||
|
>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each day as item, index}
|
{#each day as item, index}
|
||||||
<!-- row -->
|
<!-- row -->
|
||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
|
<tr
|
||||||
|
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
||||||
<td class="text-blue-400 border-b-[#09090B] text-sm sm:text-[1rem]">
|
>
|
||||||
{item?.symbol}
|
<td
|
||||||
</td>
|
class="border-b-[#09090B] text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
<td class="text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]">
|
<a
|
||||||
{item?.name.length > 20 ? item?.name.slice(0,20) + "..." : item?.name}
|
href={"/stocks/" + item?.symbol}
|
||||||
</td>
|
class="text-blue-400 sm:hover:text-white"
|
||||||
|
>{item?.symbol}
|
||||||
|
</a>
|
||||||
<td class="text-white border-b-[#09090B] text-sm sm:text-[1rem]">
|
|
||||||
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white border-b-[#09090B] text-sm sm:text-[1rem]">
|
<td
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
class="text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
|
||||||
</td>
|
>
|
||||||
|
{item?.name.length > 20
|
||||||
<td class="text-center text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]">
|
? item?.name.slice(0, 20) + "..."
|
||||||
{item?.date !== null ? new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : '-'}
|
: item?.name}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white border-b-[#09090B] text-center text-sm sm:text-[1rem]">
|
<td
|
||||||
{item?.adjDividend !== null ? '$'+item?.adjDividend?.toFixed(2) : 'n/a'}
|
class="text-white border-b-[#09090B] text-sm text-end sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
{item?.marketCap !== null
|
||||||
|
? abbreviateNumber(item?.marketCap)
|
||||||
|
: "-"}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]">
|
<td
|
||||||
{item?.paymentDate !== null ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : '-'}
|
class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
|
||||||
|
>
|
||||||
|
{item?.revenue !== null
|
||||||
|
? abbreviateNumber(item?.revenue)
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-center text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem] text-end"
|
||||||
|
>
|
||||||
|
{item?.date !== null
|
||||||
|
? new Date(item?.date)?.toLocaleString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
daySuffix: "2-digit",
|
||||||
|
},
|
||||||
|
)
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white border-b-[#09090B] text-center text-sm sm:text-[1rem] text-end"
|
||||||
|
>
|
||||||
|
{item?.adjDividend !== null
|
||||||
|
? item?.adjDividend?.toFixed(2)
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
{item?.paymentDate !== null
|
||||||
|
? new Date(item?.paymentDate)?.toLocaleString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
daySuffix: "2-digit",
|
||||||
|
},
|
||||||
|
)
|
||||||
|
: "-"}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
{:else}
|
class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
|
||||||
<div class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 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>
|
<svg
|
||||||
No Dividends available for the day.
|
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
|
||||||
</div>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
{/if}
|
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 Dividends available for the day.
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/if}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
|
||||||
|
|
||||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
|
||||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
|
||||||
<div 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 ml-3">
|
|
||||||
Pro Subscription
|
|
||||||
</h2>
|
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
||||||
</div>
|
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
|
||||||
Upgrade now for unlimited access to all data and tools.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div on:click={() => goto('/earnings-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
|
||||||
<div 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 ml-3">
|
|
||||||
Earnings Calendar 🌟
|
|
||||||
</h2>
|
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
||||||
</div>
|
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
|
||||||
Get the latest Earnings of companies
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div on:click={() => goto('/economic-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
|
||||||
<div 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 ml-3">
|
|
||||||
Economic Events 🌍
|
|
||||||
</h2>
|
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
||||||
</div>
|
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
|
||||||
Stay updated on upcoming Economic Events worldwide.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
|
||||||
|
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||||
|
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||||
|
<div
|
||||||
|
on:click={() => goto("/pricing")}
|
||||||
|
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
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 ml-3">
|
||||||
|
Pro Subscription
|
||||||
|
</h2>
|
||||||
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
|
</div>
|
||||||
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
|
Upgrade now for unlimited access to all data and tools.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div
|
||||||
|
on:click={() => goto("/earnings-calendar")}
|
||||||
|
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div 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 ml-3">
|
||||||
|
Earnings Calendar 🌟
|
||||||
|
</h2>
|
||||||
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
|
</div>
|
||||||
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
|
Get the latest Earnings of companies
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
on:click={() => goto("/economic-calendar")}
|
||||||
|
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div 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 ml-3">
|
||||||
|
Economic Events 🌍
|
||||||
|
</h2>
|
||||||
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
|
</div>
|
||||||
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
|
Stay updated on upcoming Economic Events worldwide.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,254 +1,285 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { page } from '$app/stores';
|
import { page } from "$app/stores";
|
||||||
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
|
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
|
||||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
|
import { goto } from "$app/navigation";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let navigation = [];
|
let navigation = [];
|
||||||
let displaySection = '2024'
|
let displaySection = "2024";
|
||||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||||
|
|
||||||
|
for (let year = 2024; year >= 2019; year--) {
|
||||||
for(let year = 2024; year >=2019; year--) {
|
|
||||||
|
|
||||||
navigation.push({ title: year, link: `/ipos/${year}` });
|
navigation.push({ title: year, link: `/ipos/${year}` });
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function scrollToItem(itemId) {
|
function scrollToItem(itemId) {
|
||||||
const item = document.getElementById(itemId);
|
const item = document.getElementById(itemId);
|
||||||
if (item) {
|
if (item) {
|
||||||
|
item.scrollIntoView({ behavior: "smooth" });
|
||||||
item.scrollIntoView({ behavior: 'smooth' });
|
window.scrollTo(0, 0);
|
||||||
window.scrollTo(0,0)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function changeSection(state, item) {
|
||||||
function changeSection(state, item) {
|
scrollToItem(item);
|
||||||
scrollToItem(item);
|
displaySection = state;
|
||||||
displaySection = state;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if($page.url.pathname)
|
|
||||||
{
|
|
||||||
const parts = $page?.url?.pathname?.split('/');
|
|
||||||
const sectionMap = {
|
|
||||||
'2024': '2024',
|
|
||||||
'2023': '2023',
|
|
||||||
'2022': '2022',
|
|
||||||
'2021': '2021',
|
|
||||||
'2020': '2020',
|
|
||||||
'2019': '2019'
|
|
||||||
};
|
|
||||||
displaySection = sectionMap[parts?.find(part => Object?.keys(sectionMap)?.includes(part))] || 'overview';
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if ($page.url.pathname) {
|
||||||
|
const parts = $page?.url?.pathname?.split("/");
|
||||||
|
const sectionMap = {
|
||||||
|
"2024": "2024",
|
||||||
|
"2023": "2023",
|
||||||
|
"2022": "2022",
|
||||||
|
"2021": "2021",
|
||||||
|
"2020": "2020",
|
||||||
|
"2019": "2019",
|
||||||
|
};
|
||||||
|
displaySection =
|
||||||
|
sectionMap[
|
||||||
|
parts?.find((part) => Object?.keys(sectionMap)?.includes(part))
|
||||||
|
] || "overview";
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- HEADER FOR BETTER SEO -->
|
<!-- HEADER FOR BETTER SEO -->
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} IPOs Calendar · stocknear</title>
|
<title>
|
||||||
<meta charset="utf-8" />
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} IPOs
|
||||||
<meta name="viewport" content="width=device-width" />
|
Calendar · stocknear</title
|
||||||
|
>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
<meta name="description" content="A list of upcoming ipos on the US stock market.">
|
<meta
|
||||||
<!-- Other meta tags -->
|
name="description"
|
||||||
<meta property="og:title" content="IPOs Calendar · stocknear"/>
|
content="A list of upcoming ipos on the US stock market."
|
||||||
<meta property="og:description" content="A list of upcoming ipos on the US stock market.">
|
/>
|
||||||
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
<!-- Other meta tags -->
|
||||||
<meta property="og:type" content="website"/>
|
<meta property="og:title" content="IPOs Calendar · stocknear" />
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="A list of upcoming ipos on the US stock market."
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:image"
|
||||||
|
content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"
|
||||||
|
/>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<!-- 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="IPOs Calendar · stocknear"/>
|
<meta name="twitter:title" content="IPOs Calendar · stocknear" />
|
||||||
<meta name="twitter:description" content="A list of upcoming ipos on the US stock market.">
|
<meta
|
||||||
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
name="twitter:description"
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
content="A list of upcoming ipos on the US stock market."
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="twitter:image"
|
||||||
|
content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"
|
||||||
|
/>
|
||||||
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
|
|
||||||
<!--
|
|
||||||
<div class="text-sm breadcrumbs ml-4">
|
|
||||||
<ul>
|
|
||||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
|
||||||
<li class="text-gray-300">Analysts</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<div class="w-full overflow-hidden m-auto mt-5">
|
|
||||||
|
|
||||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
|
||||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
|
||||||
|
|
||||||
|
|
||||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-lg h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-12">
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
|
||||||
|
|
||||||
<!-- Start Column -->
|
|
||||||
<div>
|
|
||||||
<div class="flex flex-row justify-center items-center">
|
|
||||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
|
||||||
IPO Calendar
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
|
|
||||||
Stay updated on upcoming IPOs in the stock market.
|
|
||||||
</span>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- End Column -->
|
|
||||||
|
|
||||||
<!-- Start Column -->
|
|
||||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
|
||||||
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<defs>
|
|
||||||
<filter id="glow">
|
|
||||||
<feGaussianBlur stdDeviation="5" result="glow"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode in="glow"/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="z-1 absolute top-0 left-7">
|
|
||||||
<img class="w-[90px] h-fit" src={cloudFrontUrl+"/assets/ipo_logo.png"} alt="logo" loading="lazy">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End Column -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sm:ml-4 w-screen sm:w-full {$page?.url?.pathname === '/ipos' ? 'hidden' : ''} {$screenWidth < 640 ? 'overflow-auto scrollbar' : ''} mb-2" >
|
|
||||||
<ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2">
|
|
||||||
{#each ['2024','2023','2022','2021','2020','2019'] as item, index}
|
|
||||||
<li class="cursor-pointer flex flex-col items-center">
|
|
||||||
<a href={`/ipos/${item}`} id="item1" on:click={() => (changeSection(item,'item1'))} class="px-3 text-lg font-medium text-gray-400 sm:hover:text-white {displaySection === item ? 'text-white ' : 'bg-[#09090B]'}" >
|
|
||||||
{item}
|
|
||||||
</a>
|
|
||||||
<div class="{displaySection === item ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="border-b mt-4 border-slate-700" />
|
|
||||||
|
|
||||||
<slot />
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
|
||||||
|
|
||||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
|
||||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
|
||||||
<div 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 ml-3">
|
|
||||||
Pro Subscription
|
|
||||||
</h2>
|
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
||||||
</div>
|
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
|
||||||
Upgrade now for unlimited access to all data and tools.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
|
||||||
<div 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 ml-3">
|
|
||||||
Wallstreet Analyst
|
|
||||||
</h2>
|
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
||||||
</div>
|
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
|
||||||
Get the latest top Wall Street analyst ratings.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
|
||||||
<div 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 ml-3">
|
|
||||||
Congress Trading
|
|
||||||
</h2>
|
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
||||||
</div>
|
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
|
||||||
Get the latest top Congress trading insights.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
|
<section
|
||||||
|
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
|
||||||
|
>
|
||||||
|
<div class="text-sm breadcrumbs ml-4 sm:ml-2">
|
||||||
|
<ul>
|
||||||
|
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||||
|
<li class="text-gray-300">IPO Calendar</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full overflow-hidden m-auto mt-5">
|
||||||
|
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||||
|
<div
|
||||||
|
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||||
|
>
|
||||||
|
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||||
|
<div
|
||||||
|
class="w-full m-auto sm:bg-[#27272A] sm:rounded-lg h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-12"
|
||||||
|
>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||||
|
<!-- Start Column -->
|
||||||
|
<div>
|
||||||
|
<div class="flex flex-row justify-center items-center">
|
||||||
|
<h1
|
||||||
|
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
|
||||||
|
>
|
||||||
|
IPO Calendar
|
||||||
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-white text-md font-medium text-center flex justify-center items-center"
|
||||||
|
>
|
||||||
|
Stay updated on upcoming IPOs in the stock market.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- End Column -->
|
||||||
|
|
||||||
|
<!-- Start Column -->
|
||||||
|
<div
|
||||||
|
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-40 -my-5"
|
||||||
|
viewBox="0 0 200 200"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<filter id="glow">
|
||||||
|
<feGaussianBlur stdDeviation="5" result="glow" />
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="glow" />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<path
|
||||||
|
fill="#1E40AF"
|
||||||
|
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
|
||||||
|
transform="translate(100 100)"
|
||||||
|
filter="url(#glow)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="z-1 absolute top-0 left-7">
|
||||||
|
<img
|
||||||
|
class="w-[90px] h-fit"
|
||||||
|
src={cloudFrontUrl + "/assets/ipo_logo.png"}
|
||||||
|
alt="logo"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Column -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="sm:ml-4 w-screen sm:w-full {$page?.url?.pathname === '/ipos'
|
||||||
|
? 'hidden'
|
||||||
|
: ''} {$screenWidth < 640 ? 'overflow-auto scrollbar' : ''} mb-2"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="px-3 pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2"
|
||||||
|
>
|
||||||
|
{#each ["2024", "2023", "2022", "2021", "2020", "2019"] as item}
|
||||||
|
<li class="cursor-pointer flex flex-col items-center">
|
||||||
|
<a
|
||||||
|
href={`/ipos/${item}`}
|
||||||
|
id="item1"
|
||||||
|
on:click={() => changeSection(item, "item1")}
|
||||||
|
class="px-3 text-lg rounded {displaySection === item
|
||||||
|
? 'text-black bg-[#75d377] font-semibold '
|
||||||
|
: 'bg-[#09090B] text-gray-300'}"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style lang='scss'>
|
<div class="border-b mt-4 border-slate-700" />
|
||||||
|
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||||
|
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||||
|
<div
|
||||||
|
on:click={() => goto("/pricing")}
|
||||||
|
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
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 ml-3">
|
||||||
|
Pro Subscription
|
||||||
|
</h2>
|
||||||
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
|
</div>
|
||||||
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
|
Upgrade now for unlimited access to all data and tools.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div
|
||||||
|
on:click={() => goto("/analysts")}
|
||||||
|
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div 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 ml-3">
|
||||||
|
Wallstreet Analyst
|
||||||
|
</h2>
|
||||||
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
|
</div>
|
||||||
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
|
Get the latest top Wall Street analyst ratings.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
on:click={() => goto("/politicians")}
|
||||||
|
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div 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 ml-3">
|
||||||
|
Congress Trading
|
||||||
|
</h2>
|
||||||
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
|
</div>
|
||||||
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
|
Get the latest top Congress trading insights.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
.scrollbar {
|
.scrollbar {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 17px;
|
grid-gap: 17px;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
|
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
|
||||||
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
|
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom scrollbar for Webkit (Chrome, Safari) */
|
/* Custom scrollbar for Webkit (Chrome, Safari) */
|
||||||
.scrollbar::-webkit-scrollbar {
|
.scrollbar::-webkit-scrollbar {
|
||||||
width: 0; /* Hide the width of the scrollbar */
|
width: 0; /* Hide the width of the scrollbar */
|
||||||
height: 0; /* Hide the height of the scrollbar */
|
height: 0; /* Hide the height of the scrollbar */
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollbar::-webkit-scrollbar-thumb {
|
.scrollbar::-webkit-scrollbar-thumb {
|
||||||
background: transparent; /* Make the thumb transparent */
|
background: transparent; /* Make the thumb transparent */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navmenu {
|
||||||
</style>
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: row;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,123 +1,112 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from "$app/navigation";
|
||||||
import {formatString, abbreviateNumber} from '$lib/utils';
|
import { formatString, abbreviateNumber } from "$lib/utils";
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from "$lib/store";
|
||||||
|
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let rawData;;
|
let rawData;
|
||||||
let totalIPOs = 0;
|
let totalIPOs = 0;
|
||||||
let ipoList;
|
let ipoList;
|
||||||
let year;
|
let year;
|
||||||
let isLoaded = false;
|
let isLoaded = false;
|
||||||
let displayMonth = 'all'
|
let displayMonth = "all";
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function infiniteHandler({ detail: { loaded, complete } }) {
|
||||||
{
|
if (ipoList?.length === rawData?.length) {
|
||||||
|
|
||||||
if (ipoList?.length === rawData?.length) {
|
|
||||||
complete();
|
complete();
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
const nextIndex = ipoList?.length;
|
const nextIndex = ipoList?.length;
|
||||||
const newHoldings = rawData?.slice(nextIndex, nextIndex + 50);
|
const newHoldings = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
ipoList = [...ipoList, ...newHoldings];
|
ipoList = [...ipoList, ...newHoldings];
|
||||||
loaded();
|
loaded();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const monthMap = {
|
||||||
|
jan: "01",
|
||||||
|
feb: "02",
|
||||||
|
march: "03",
|
||||||
|
april: "04",
|
||||||
|
may: "05",
|
||||||
|
june: "06",
|
||||||
|
july: "07",
|
||||||
|
aug: "08",
|
||||||
|
sept: "09",
|
||||||
|
oct: "10",
|
||||||
|
nov: "11",
|
||||||
|
dec: "12",
|
||||||
|
};
|
||||||
|
|
||||||
const monthMap = {
|
async function changeTimePeriod(event) {
|
||||||
jan: "01",
|
|
||||||
feb: "02",
|
|
||||||
march: "03",
|
|
||||||
april: "04",
|
|
||||||
may: "05",
|
|
||||||
june: "06",
|
|
||||||
july: "07",
|
|
||||||
aug: "08",
|
|
||||||
sept: "09",
|
|
||||||
oct: "10",
|
|
||||||
nov: "11",
|
|
||||||
dec: "12"
|
|
||||||
};
|
|
||||||
|
|
||||||
async function changeTimePeriod(event)
|
|
||||||
{
|
|
||||||
isLoaded = false;
|
isLoaded = false;
|
||||||
displayMonth = event.target.value;
|
displayMonth = event.target.value;
|
||||||
const monthValue = monthMap[displayMonth];
|
const monthValue = monthMap[displayMonth];
|
||||||
if (displayMonth !== 'all') {
|
if (displayMonth !== "all") {
|
||||||
rawData = data?.getIPOCalendar?.filter(item => item?.date?.includes(`-${monthValue}-`));
|
rawData = data?.getIPOCalendar?.filter((item) =>
|
||||||
}
|
item?.date?.includes(`-${monthValue}-`),
|
||||||
else {
|
);
|
||||||
|
} else {
|
||||||
rawData = data?.getIPOCalendar;
|
rawData = data?.getIPOCalendar;
|
||||||
}
|
}
|
||||||
|
|
||||||
ipoList = rawData?.slice(0, 50);
|
ipoList = rawData?.slice(0, 50);
|
||||||
|
|
||||||
|
|
||||||
isLoaded = true;
|
isLoaded = true;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
const monthValue = monthMap[displayMonth];
|
||||||
|
if (displayMonth !== "all") {
|
||||||
|
rawData = data?.getIPOCalendar?.filter((item) =>
|
||||||
|
item?.date?.includes(`-${monthValue}-`),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
rawData = data?.getIPOCalendar;
|
||||||
|
}
|
||||||
|
|
||||||
$: {
|
totalIPOs = data?.getIPOCalendar?.length;
|
||||||
if(typeof window !== 'undefined') {
|
ipoList = rawData?.slice(0, 50);
|
||||||
|
year = data?.getYear;
|
||||||
const monthValue = monthMap[displayMonth];
|
isLoaded = true;
|
||||||
if (displayMonth !== 'all') {
|
|
||||||
rawData = data?.getIPOCalendar?.filter(item => item?.date?.includes(`-${monthValue}-`));
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
rawData = data?.getIPOCalendar;
|
|
||||||
}
|
|
||||||
|
|
||||||
totalIPOs = data?.getIPOCalendar?.length;
|
|
||||||
ipoList = rawData?.slice(0,50);
|
|
||||||
year = data?.getYear;
|
|
||||||
isLoaded = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let charNumber = 40;
|
|
||||||
$: {
|
|
||||||
if ($screenWidth < 640)
|
|
||||||
{
|
|
||||||
charNumber = 20;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
charNumber = 40;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<section class="w-full overflow-hidden m-auto">
|
||||||
<section class="w-full overflow-hidden m-auto ">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{#if isLoaded}
|
{#if isLoaded}
|
||||||
|
<div class="flex flex-col justify-center items-center">
|
||||||
|
<div
|
||||||
|
class="mt-0 sm:mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium border border-gray-800 sm:rounded-lg h-auto p-5"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
|
||||||
|
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
|
||||||
|
>
|
||||||
|
There have been {totalIPOs} IPOs on the US stock market in {year}.
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col justify-center items-center">
|
<div
|
||||||
|
class="mr-auto flex flex-col jusitfy-start items-start ml-2 mb-5 mt-5"
|
||||||
|
>
|
||||||
<div class="mt-0 sm:mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium border border-gray-800 sm:rounded-lg h-auto p-5">
|
<div class="text-white text-sm sm:text-[1rem] font-medium mr-2">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" 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>
|
Select Time period
|
||||||
There have been {totalIPOs} IPOs on the US stock market in {year}.
|
</div>
|
||||||
</div>
|
<div class="relative mt-4">
|
||||||
|
<select
|
||||||
<div class="mr-auto flex flex-col jusitfy-start items-start ml-2 mb-5 mt-5">
|
class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-[#2A303C]"
|
||||||
<div class="text-white text-sm sm:text-[1rem] font-medium mr-2">
|
on:change={changeTimePeriod}
|
||||||
Select Time period
|
>
|
||||||
</div>
|
|
||||||
<div class="relative mt-4">
|
|
||||||
<select class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={changeTimePeriod}>
|
|
||||||
<option disabled>Select time period</option>
|
<option disabled>Select time period</option>
|
||||||
<option value="all" selected>All</option>
|
<option value="all" selected>All</option>
|
||||||
<option value="jan">January</option>
|
<option value="jan">January</option>
|
||||||
@ -132,99 +121,140 @@ $: {
|
|||||||
<option value="oct">October</option>
|
<option value="oct">October</option>
|
||||||
<option value="nov">November</option>
|
<option value="nov">November</option>
|
||||||
<option value="dec">December</option>
|
<option value="dec">December</option>
|
||||||
</select>
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{#if rawData?.length !== 0}
|
||||||
|
<div class="w-full overflow-x-scroll">
|
||||||
|
<table
|
||||||
|
class="mt-5 table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden"
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
<tr class="border-b border-[#27272A]">
|
||||||
|
<th class="text-white font-semibold text-sm text-start"
|
||||||
|
>IPO Date</th
|
||||||
|
>
|
||||||
|
<th class="text-white font-semibold text-sm text-start"
|
||||||
|
>Symbol</th
|
||||||
|
>
|
||||||
|
<th class="text-white font-semibold text-sm">Name</th>
|
||||||
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
|
>IPO Price</th
|
||||||
|
>
|
||||||
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
|
>Current Price</th
|
||||||
|
>
|
||||||
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
|
>Return Since</th
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each ipoList as item}
|
||||||
|
<tr
|
||||||
|
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{new Date(item?.date)?.toLocaleString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
daySuffix: "2-digit",
|
||||||
|
})}
|
||||||
|
</td>
|
||||||
|
|
||||||
{#if rawData?.length !== 0}
|
<td
|
||||||
<div class="w-full overflow-x-scroll">
|
class="text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
|
||||||
<table class="mt-5 table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden">
|
>
|
||||||
<thead>
|
<a
|
||||||
<tr class="border-b border-[#27272A]">
|
href={"/stocks/" + item?.symbol}
|
||||||
<th class="text-white font-medium text-[1rem] text-start">IPO Date</th>
|
class="sm:hover:text-white text-blue-400"
|
||||||
<th class="text-white font-medium text-[1rem] text-start">Symbol</th>
|
>
|
||||||
<th class="text-white font-medium text-[1rem]">Name</th>
|
{item?.symbol}
|
||||||
<th class="text-white font-medium text-end text-[1rem]">IPO Price</th>
|
</a>
|
||||||
<th class="text-white font-medium text-end text-[1rem]">Current Price</th>
|
</td>
|
||||||
<th class="text-white font-medium text-end text-[1rem]">Return Since</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{#each ipoList as item,index}
|
|
||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
|
||||||
|
|
||||||
|
|
||||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap">
|
<td
|
||||||
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
class="text-gray-200 border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
|
||||||
</td>
|
>
|
||||||
|
<span class="text-white"
|
||||||
|
>{item?.name?.length > charNumber
|
||||||
|
? formatString(item?.name?.slice(0, charNumber)) + "..."
|
||||||
|
: formatString(item?.name)}</span
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
|
||||||
|
>
|
||||||
|
{item?.ipoPrice !== null ? item?.ipoPrice : "-"}
|
||||||
|
</td>
|
||||||
|
|
||||||
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap">
|
<td
|
||||||
{item?.symbol}
|
class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
|
||||||
</td>
|
>
|
||||||
|
{item?.currentPrice !== null ? item?.currentPrice : "-"}
|
||||||
|
</td>
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B] whitespace-nowrap">
|
<td
|
||||||
<span class="text-white">{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}</span>
|
class="text-white border-b-[#09090B] text-end flex flex-row items-center justify-end"
|
||||||
</td>
|
>
|
||||||
|
{#if item?.return >= 0 && item?.return !== null}
|
||||||
|
<span
|
||||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end">
|
class="inline-block text-[#37C97D] text-sm sm:text-[1rem] whitespace-nowrap"
|
||||||
{item?.ipoPrice !== null ? '$'+item?.ipoPrice : '-'}
|
>+{abbreviateNumber(item?.return)}%</span
|
||||||
</td>
|
>
|
||||||
|
{:else if item?.return < 0 && item?.return !== null}
|
||||||
<td class="text-white border-b-[#09090B] text-end">
|
<span
|
||||||
{item?.currentPrice !== null ? '$'+item?.currentPrice : '-'}
|
class="inline-block text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap"
|
||||||
</td>
|
>{abbreviateNumber(item?.return)}%
|
||||||
|
</span>
|
||||||
|
{:else}
|
||||||
|
<span
|
||||||
<td class="text-white border-b-[#09090B] text-end flex flex-row items-center justify-end font-semibold">
|
class="inline-block text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||||
{#if item?.return >=0 && item?.return !== null}
|
>
|
||||||
<span class="inline-block text-[#37C97D] text-sm sm:text-[1rem] whitespace-nowrap">{abbreviateNumber(item?.return)}%</span>
|
-
|
||||||
{:else if item?.return < 0 && item?.return !== null}
|
</span>
|
||||||
<span class="inline-block text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap">{abbreviateNumber(item?.return)}% </span>
|
{/if}
|
||||||
{:else}
|
</td>
|
||||||
<span class="inline-block text-white text-sm sm:text-[1rem] whitespace-nowrap">
|
</tr>
|
||||||
-
|
{/each}
|
||||||
</span>
|
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||||
{/if}
|
</tbody>
|
||||||
</td>
|
</table>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
</tr>
|
<div class="flex justify-center items-center m-auto mt-10 mb-6">
|
||||||
{/each}
|
<div
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
</tbody>
|
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
|
||||||
</table>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
</div>
|
><path
|
||||||
{:else}
|
fill="#a474f6"
|
||||||
<div class="flex justify-center items-center m-auto mt-10 mb-6">
|
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"
|
||||||
<div class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4">
|
/></svg
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" 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 IPOs found. Please adjust your search timeframe for the latest {year} IPOs.
|
No IPOs found. Please adjust your search timeframe for the latest {year}
|
||||||
</div>
|
IPOs.
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
|
||||||
|
|
||||||
{: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>
|
||||||
</div>
|
{:else}
|
||||||
|
<div class="flex justify-center items-center h-80">
|
||||||
{/if}
|
<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>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user