AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-24 18:50:56 +02:00
parent ee2e9d9bff
commit f0c3f4c5dd
4 changed files with 1219 additions and 927 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

399
src/lib/components/TickerInfoCard.svelte
View File

@ -1,9 +1,9 @@
<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 data;
@ -11,91 +11,93 @@
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; // Set a default API URL
let earningDate = null;
let tierList = '-';
let ceoName = '-';
let sector = '-';
let industry = '-';
let exchange = '-';
let employees = '-';
let country = '-';
let description = '';
let website = '-';
let tierList = "-";
//let ceoName = "-";
let sector = "-";
let industry = "-";
let exchange = "-";
let employees = "-";
//let country = "-";
let description = "";
let website = "-";
let snippet;
let forwardPE = '-';
let beta = '-';
let forwardPE = "-";
let beta = "-";
let showFullText = false;
/*
function getAbbreviatedName(fullName) {
try {
const names = fullName?.split(' ');
let firstName = names?.at(0);
// Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.)
if (names?.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i?.test(names?.at(0))) {
firstName = names?.at(1);
names?.splice(0, 1);
}
const initials = names?.slice(0, -1)?.map(name => name?.charAt(0))?.join('. ');
const lastName = names[names?.length - 1];
return `${firstName?.charAt(0)}. ${lastName}`;
} catch(e) {
const names = fullName?.split(" ");
let firstName = names?.at(0);
// Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.)
if (names?.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i?.test(names?.at(0))) {
firstName = names?.at(1);
names?.splice(0, 1);
}
//const initials = names?.slice(0, -1)?.map(name => name?.charAt(0))?.join('. ');
const lastName = names[names?.length - 1];
return `${firstName?.charAt(0)}. ${lastName}`;
} catch (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",
})
: "";
$: {
if ($stockTicker && typeof window !== 'undefined' && typeof stockDeck !== 'undefined' && stockDeck?.length !== 0)
{
info = stockDeck?.at(0)
earningDate = new Date( info?.earning );
earningDate = earningDate?.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 = 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);
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 !== undefined ? info?.beta?.toFixed(2) : "-";
}
}
}
</script>
<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">
<!--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`});">
<div class="flex flex-row pt-1 pb-2">
{#if earningDate}
<div class="badge bg-[#FBCE3C] gap-2 mt-2 font-semibold text-sm text-black">
Earnings Call - {earningDate}
</div>
{/if}
<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"
>
<!--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`});"
>
<div class="flex flex-row pt-1 pb-2">
{#if earningDate}
<div
class="badge bg-[#FBCE3C] gap-2 mt-2 font-semibold text-sm text-black"
>
Earnings Call - {earningDate}
</div>
<!--
{/if}
</div>
<!--
<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 class="tier-text italic m-auto text-xl">
@ -107,15 +109,17 @@ $: {
</div>
-->
</div>
<!--End Header-->
<!--Start Content-->
<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>
<div class="flex justify-center items-center w-full m-auto">
<table class="table table-sm table-compact">
<tbody>
<!--
</div>
<!--End Header-->
<!--Start Content-->
<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>
<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]">
<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>
@ -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>
</tr>
-->
<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 class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsBidPrice !== 0 && $wsBidPrice !== null ? $wsBidPrice : (data?.getStockQuote?.bid ?? '-')}</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Ask</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsAskPrice !== 0 && $wsAskPrice !== null ? $wsAskPrice : (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 border-b border-[#27272A]">
<td
class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
>Bid</td
>
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
>{$wsBidPrice !== 0 && $wsBidPrice !== null
? $wsBidPrice
: (data?.getStockQuote?.bid ?? "-")}</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
>Ask</td
>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
>{$wsAskPrice !== 0 && $wsAskPrice !== null
? $wsAskPrice
: (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 ">
<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>
@ -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>
</tr>
-->
<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 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>
<!--
<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 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}
<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>
@ -171,69 +220,97 @@ $: {
</tr>
{/if}
-->
<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 class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps}</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.pe}</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">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>
<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 class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
>{data?.getStockQuote?.eps}</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
>PE Ratio (ttm)</td
>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
>{data?.getStockQuote?.pe}</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"
>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">
Description
</h2>
<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"
>
Description
</h2>
<p class="text-gray-100 sm:ml-2 text-sm whitespace-normal p-1 sm:p-2">
{#if showFullText}
<p class="text-gray-100 sm:ml-2 text-sm whitespace-normal p-1 sm:p-2">
{#if showFullText}
<div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}>
{description}
</div>
{:else if $screenWidth <= 800}
{description}
{:else}
{:else if $screenWidth <= 800}
{description}
{:else}
{snippet}
{/if}
</p>
{#if description.length !== 0 }
{/if}
</p>
{#if description.length !== 0}
<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}
Show less
Show less
{:else}
Show more
Show more
{/if}
</label>
<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">
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 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"
>
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}
{/if}
</div>
</div>
</div>
</div>

886
src/routes/dividends-calendar/+page.svelte
View File

@ -1,11 +1,16 @@
<script lang="ts">
import { format, startOfWeek, addDays, addWeeks, 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 {
format,
startOfWeek,
addDays,
addWeeks,
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";
export let data;
@ -17,106 +22,115 @@
const today = new Date();
let formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
let formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d");
let formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d");
let formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d");
let formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format( formattedMonday, "EEE, MMM d");
let formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
let formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
let formattedThursday = format(addDays(formattedMonday, 3), "EEE, MMM d");
let formattedFriday = format(addDays(formattedMonday, 4), "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 startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
let endDate = addDays(startDate, 4);
let formattedStartDate = format(startDate, "yyyy-MM-dd");
let formattedEndDate = format(endDate, "yyyy-MM-dd");
let daysOfWeek = [
{
name: "Monday",
date: formattedStartDate,
},
{
name: "Tuesday",
date: format(addDays(startDate, 1), "yyyy-MM-dd"),
},
{
name: "Wednesday",
date: format(addDays(startDate, 2), "yyyy-MM-dd"),
},
{
name: "Thursday",
date: format(addDays(startDate, 3), "yyyy-MM-dd"),
},
{
name: "Friday",
date: formattedEndDate,
},
];
{
name: "Monday",
date: formattedStartDate,
},
{
name: "Tuesday",
date: format(addDays(startDate, 1), "yyyy-MM-dd"),
},
{
name: "Wednesday",
date: format(addDays(startDate, 2), "yyyy-MM-dd"),
},
{
name: "Thursday",
date: format(addDays(startDate, 3), "yyyy-MM-dd"),
},
{
name: "Friday",
date: formattedEndDate,
},
];
let currentDate = new Date();
let currentWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
let selectedWeekday = currentWeekday;
function toggleDate(index)
{
if($screenWidth > 640) {
selectedWeekday = index
function toggleDate(index) {
if ($screenWidth > 640) {
selectedWeekday = index;
}
}
function clickWeekday (state, index) {
if (state==='next' && selectedWeekday+1 <=4)
{
selectedWeekday = selectedWeekday +1;
}
else if( state === 'previous' && selectedWeekday-1 >=0)
{
selectedWeekday --;
}
else if (state=== 'previous' && index === 0 && differenceInWeeks(currentWeek, today) > -maxWeeksChange)
{
changeWeek(state)
function clickWeekday(state, index) {
if (state === "next" && selectedWeekday + 1 <= 4) {
selectedWeekday = selectedWeekday + 1;
} else if (state === "previous" && selectedWeekday - 1 >= 0) {
selectedWeekday--;
} else if (
state === "previous" &&
index === 0 &&
differenceInWeeks(currentWeek, today) > -maxWeeksChange
) {
changeWeek(state);
selectedWeekday = 4;
}
else if (state=== 'next' && index === 4 && differenceInWeeks(currentWeek, today) < maxWeeksChange)
{
changeWeek(state)
} else if (
state === "next" &&
index === 4 &&
differenceInWeeks(currentWeek, today) < maxWeeksChange
) {
changeWeek(state);
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
if (state === 'previous' && differenceInWeeks(currentWeek, today) > -maxWeeksChange) {
currentWeek = subWeeks(currentWeek, 1);
} else if (state === 'next' && differenceInWeeks(currentWeek, today) < maxWeeksChange) {
currentWeek = addWeeks(currentWeek, 1);
}
formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
formattedThursday = format(addDays(formattedMonday, 3), "EEE, MMM d");
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 });
formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d");
formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d");
formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d");
formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d");
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 = [
startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
endDate = addDays(startDate, 4);
formattedStartDate = format(startDate, "yyyy-MM-dd");
formattedEndDate = format(endDate, "yyyy-MM-dd");
daysOfWeek = [
{
name: "Monday",
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) => {
return {
name: day.name,
data: data?.getDividendCalendar?.filter(
(item) => item.date === day.date
),
};
});
if (dividendCalendar?.length) {
if (dividendCalendar?.length) {
// Loop through each day of the week
for (let i = 0; i < dividendCalendar.length; i++) {
const dayData = dividendCalendar[i].data;
@ -158,330 +170,472 @@ async function changeWeek(state) {
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData
.sort((a, b) => b.marketCap - a.marketCap)
weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
}
}
}
}
$: {
if( dividendCalendar)
{
dividendCalendar = daysOfWeek.map((day) => {
$: {
if (dividendCalendar) {
dividendCalendar = daysOfWeek.map((day) => {
return {
name: day.name,
data: data?.getDividendCalendar?.filter(
(item) => item.date === day.date
(item) => item.date === day.date,
),
};
});
if (dividendCalendar?.length) {
// Loop through each day of the week
for (let i = 0; i < dividendCalendar.length; i++) {
const dayData = dividendCalendar[i].data;
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData
.sort((a, b) => b.marketCap - a.marketCap)
}
// Loop through each day of the week
for (let i = 0; i < dividendCalendar.length; i++) {
const dayData = dividendCalendar[i].data;
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
}
}
}
}
$: {
if (currentWeek)
{
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange)
{
previousMax = false;
}
else {
previousMax = true;
}
}
}
$: {
if (currentWeek)
{
if (differenceInWeeks(currentWeek, today) < maxWeeksChange)
{
nextMax = false;
}
else {
nextMax = true;
$: {
if (currentWeek) {
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange) {
previousMax = false;
} else {
previousMax = true;
}
}
}
$: {
if (currentWeek) {
if (differenceInWeeks(currentWeek, today) < maxWeeksChange) {
nextMax = false;
} else {
nextMax = true;
}
}
}
}
</script>
<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" />
<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.`} />
<!-- Other meta tags -->
<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 -->
<!-- Other meta tags -->
<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 -->
</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">
<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-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">
<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>
<!-- 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 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-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>
<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>
<!-- 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-36 -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-2 right-7">
<img class="w-24" src={dividendsLogo} alt="logo" loading="lazy">
<!-- 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-36 -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-2 right-7">
<img
class="w-24"
src={dividendsLogo}
alt="logo"
loading="lazy"
/>
</div>
</div>
<!-- End Column -->
</div>
<!-- End Column -->
</div>
</div>
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<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">
<!-- Content area -->
<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 -->
<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">
<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
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>
{#each weekday as day,index}
<div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
<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 ">
<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>
<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>
{#each weekday as day, index}
<div
class="w-full {index === selectedWeekday
? ''
: 'hidden sm:block'}"
>
<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"
>
<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>
</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}
<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">
<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
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>
</div>
{#each weekday as day,index}
</div>
{#each weekday as day, index}
{#if index === selectedWeekday}
{#if day?.length !== 0}
<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 ">
<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"
>
<thead>
<tr class="whitespace-nowrap border-b border-[#27272A]">
<th class="text-white font-semibold text-sm">Symbol</th>
<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">Revenue</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 text-end">Payment Date</th>
<tr
class="whitespace-nowrap border-b border-[#27272A]"
>
<th class="text-white font-semibold text-sm"
>Symbol</th
>
<th class="text-white font-semibold text-sm"
>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>
</thead>
<tbody>
{#each day as item, index}
<!-- 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">
<td class="text-blue-400 border-b-[#09090B] text-sm sm:text-[1rem]">
{item?.symbol}
</td>
<td class="text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]">
{item?.name.length > 20 ? item?.name.slice(0,20) + "..." : item?.name}
</td>
<td class="text-white border-b-[#09090B] text-sm sm:text-[1rem]">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
>
<td
class="border-b-[#09090B] text-sm sm:text-[1rem]"
>
<a
href={"/stocks/" + item?.symbol}
class="text-blue-400 sm:hover:text-white"
>{item?.symbol}
</a>
</td>
<td class="text-white border-b-[#09090B] text-sm sm:text-[1rem]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td>
<td class="text-center text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]">
{item?.date !== null ? new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : '-'}
<td
class="text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
>
{item?.name.length > 20
? item?.name.slice(0, 20) + "..."
: item?.name}
</td>
<td class="text-white border-b-[#09090B] text-center text-sm sm:text-[1rem]">
{item?.adjDividend !== null ? '$'+item?.adjDividend?.toFixed(2) : 'n/a'}
<td
class="text-white border-b-[#09090B] text-sm text-end sm:text-[1rem]"
>
{item?.marketCap !== null
? abbreviateNumber(item?.marketCap)
: "-"}
</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
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>
</tr>
{/each}
</tbody>
</table>
</div>
{:else}
<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>
No Dividends available for the day.
</div>
{/if}
</table>
</div>
{:else}
<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
>
No Dividends available for the day.
</div>
{/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>
{/if}
{/each}
</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>
</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>
</section>
</div>
</div>
</section>

475
src/routes/ipos/+layout.svelte
View File

@ -1,254 +1,285 @@
<script lang='ts'>
import { page } from '$app/stores';
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
<script lang="ts">
import { page } from "$app/stores";
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from "$app/navigation";
export let data;
export let data;
let navigation = [];
let displaySection = '2024'
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let navigation = [];
let displaySection = "2024";
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}` });
}
}
function scrollToItem(itemId) {
function scrollToItem(itemId) {
const item = document.getElementById(itemId);
if (item) {
item.scrollIntoView({ behavior: 'smooth' });
window.scrollTo(0,0)
item.scrollIntoView({ behavior: "smooth" });
window.scrollTo(0, 0);
}
}
function changeSection(state, item) {
scrollToItem(item);
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';
function changeSection(state, item) {
scrollToItem(item);
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";
}
}
</script>
<!-- HEADER FOR BETTER SEO -->
<svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} IPOs Calendar · stocknear</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} IPOs
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.">
<!-- Other meta tags -->
<meta property="og:title" content="IPOs Calendar · stocknear"/>
<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 -->
<meta
name="description"
content="A list of upcoming ipos on the US stock market."
/>
<!-- Other meta tags -->
<meta property="og:title" content="IPOs Calendar · stocknear" />
<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 -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="IPOs Calendar · stocknear"/>
<meta name="twitter:description" 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 -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="IPOs Calendar · stocknear" />
<meta
name="twitter:description"
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>
<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>
<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>
</section>
</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="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 {
display: grid;
grid-gap: 17px;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
grid-auto-flow: column;
overflow-x: auto;
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
display: grid;
grid-gap: 17px;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
grid-auto-flow: column;
overflow-x: auto;
scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
}
/* Custom scrollbar for Webkit (Chrome, Safari) */
.scrollbar::-webkit-scrollbar {
width: 0; /* Hide the width of the scrollbar */
height: 0; /* Hide the height of the scrollbar */
width: 0; /* Hide the width of the scrollbar */
height: 0; /* Hide the height of the scrollbar */
}
.scrollbar::-webkit-scrollbar-thumb {
background: transparent; /* Make the thumb transparent */
background: transparent; /* Make the thumb transparent */
}
</style>
.navmenu {
display: flex;
width: 100%;
flex-direction: row;
overflow-x: auto;
white-space: nowrap;
}
</style>

386
src/routes/ipos/[slug]/+page.svelte
View File

@ -1,123 +1,112 @@
<script lang='ts'>
import { goto } from '$app/navigation';
import {formatString, abbreviateNumber} from '$lib/utils';
import { screenWidth } from '$lib/store';
<script lang="ts">
import { goto } from "$app/navigation";
import { formatString, abbreviateNumber } from "$lib/utils";
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 totalIPOs = 0;
let ipoList;
let year;
let isLoaded = false;
let displayMonth = 'all'
let rawData;
let totalIPOs = 0;
let ipoList;
let year;
let isLoaded = false;
let displayMonth = "all";
async function infiniteHandler({ detail: { loaded, complete } })
{
if (ipoList?.length === rawData?.length) {
async function infiniteHandler({ detail: { loaded, complete } }) {
if (ipoList?.length === rawData?.length) {
complete();
}
else {
} else {
const nextIndex = ipoList?.length;
const newHoldings = rawData?.slice(nextIndex, nextIndex + 50);
ipoList = [...ipoList, ...newHoldings];
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 = {
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)
{
async function changeTimePeriod(event) {
isLoaded = false;
displayMonth = event.target.value;
const monthValue = monthMap[displayMonth];
if (displayMonth !== 'all') {
rawData = data?.getIPOCalendar?.filter(item => item?.date?.includes(`-${monthValue}-`));
}
else {
if (displayMonth !== "all") {
rawData = data?.getIPOCalendar?.filter((item) =>
item?.date?.includes(`-${monthValue}-`),
);
} else {
rawData = data?.getIPOCalendar;
}
ipoList = rawData?.slice(0, 50);
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;
}
$: {
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;
ipoList = rawData?.slice(0,50);
year = data?.getYear;
isLoaded = true
}
}
let charNumber = 40;
$: {
if ($screenWidth < 640)
{
charNumber = 20;
}
else {
charNumber = 40;
totalIPOs = data?.getIPOCalendar?.length;
ipoList = rawData?.slice(0, 50);
year = data?.getYear;
isLoaded = true;
}
}
$: charNumber = $screenWidth < 640 ? 20 : 40;
</script>
<section class="w-full overflow-hidden m-auto ">
<section class="w-full overflow-hidden m-auto">
{#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="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="mr-auto flex flex-col jusitfy-start items-start ml-2 mb-5 mt-5">
<div class="text-white text-sm sm:text-[1rem] font-medium mr-2">
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}>
<div
class="mr-auto flex flex-col jusitfy-start items-start ml-2 mb-5 mt-5"
>
<div class="text-white text-sm sm:text-[1rem] font-medium mr-2">
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 value="all" selected>All</option>
<option value="jan">January</option>
@ -132,99 +121,140 @@ $: {
<option value="oct">October</option>
<option value="nov">November</option>
<option value="dec">December</option>
</select>
</select>
</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}
<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-medium text-[1rem] text-start">IPO Date</th>
<th class="text-white font-medium text-[1rem] text-start">Symbol</th>
<th class="text-white font-medium text-[1rem]">Name</th>
<th class="text-white font-medium text-end text-[1rem]">IPO Price</th>
<th class="text-white font-medium text-end text-[1rem]">Current Price</th>
<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-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
>
<a
href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400"
>
{item?.symbol}
</a>
</td>
<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>
<td
class="text-gray-200 border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
>
<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">
{item?.symbol}
</td>
<td
class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
>
{item?.currentPrice !== null ? item?.currentPrice : "-"}
</td>
<td class="text-gray-200 border-b-[#09090B] whitespace-nowrap">
<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-white border-b-[#09090B] text-end">
{item?.currentPrice !== null ? '$'+item?.currentPrice : '-'}
</td>
<td class="text-white border-b-[#09090B] text-end flex flex-row items-center justify-end font-semibold">
{#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 class="inline-block text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap">{abbreviateNumber(item?.return)}% </span>
{:else}
<span class="inline-block text-white text-sm sm:text-[1rem] whitespace-nowrap">
-
</span>
{/if}
</td>
</tr>
{/each}
<InfiniteLoading on:infinite={infiniteHandler} />
</tbody>
</table>
</div>
{:else}
<div class="flex justify-center items-center m-auto mt-10 mb-6">
<div class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4">
<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.
</div>
</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>
<td
class="text-white border-b-[#09090B] text-end flex flex-row items-center justify-end"
>
{#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
class="inline-block text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap"
>{abbreviateNumber(item?.return)}%
</span>
{:else}
<span
class="inline-block text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
-
</span>
{/if}
</td>
</tr>
{/each}
<InfiniteLoading on:infinite={infiniteHandler} />
</tbody>
</table>
</div>
{:else}
<div class="flex justify-center items-center m-auto mt-10 mb-6">
<div
class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4"
>
<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.
</div>
</div>
{/if}
</div>
</div>
{/if}
</section>
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"></span>
</label>
</div>
</div>
{/if}
</section>