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

refactor code

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-24 23:07:05 +02:00
parent 37cbd599ff
commit 3f1ac5ef40
13 changed files with 4129 additions and 3114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/routes/analysts/+page.svelte
View File

@ -1,12 +1,10 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { numberOfUnreadNotification } from "$lib/store";
import { numberOfUnreadNotification } from '$lib/store'; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { sortTableData } from '$lib/utils'; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte'; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import ArrowLogo from 'lucide-svelte/icons/move-up-right';
import TableHeader from '$lib/components/Table/TableHeader.svelte';
import { onMount } from 'svelte'; import { onMount } from "svelte";
export let data; export let data;
@ -28,28 +26,28 @@
onMount(async () => { onMount(async () => {
isLoaded = true; isLoaded = true;
window.addEventListener('scroll', handleScroll); window.addEventListener("scroll", handleScroll);
return () => { return () => {
window.removeEventListener('scroll', handleScroll); window.removeEventListener("scroll", handleScroll);
}; };
}); });
let columns = [ let columns = [
{ key: 'rank', label: 'Rank', align: 'left' }, { key: "rank", label: "Rank", align: "left" },
{ key: 'analystName', label: 'Analyst', align: 'left' }, { key: "analystName", label: "Analyst", align: "left" },
{ key: 'successRate', label: 'Success Rate', align: 'right' }, { key: "successRate", label: "Success Rate", align: "right" },
{ key: 'avgReturn', label: 'Avg. Return', align: 'right' }, { key: "avgReturn", label: "Avg. Return", align: "right" },
{ key: 'totalRatings', label: 'Total Ratings', align: 'right' }, { key: "totalRatings", label: "Total Ratings", align: "right" },
{ key: 'lastRating', label: 'Last Rating', align: 'right' }, { key: "lastRating", label: "Last Rating", align: "right" },
]; ];
let sortOrders = { let sortOrders = {
rank: { order: 'none', type: 'number' }, rank: { order: "none", type: "number" },
analystName: { order: 'none', type: 'string' }, analystName: { order: "none", type: "string" },
successRate: { order: 'none', type: 'number' }, successRate: { order: "none", type: "number" },
avgReturn: { order: 'none', type: 'number' }, avgReturn: { order: "none", type: "number" },
totalRatings: { order: 'none', type: 'number' }, totalRatings: { order: "none", type: "number" },
lastRating: { order: 'none', type: 'date' }, lastRating: { order: "none", type: "date" },
}; };
const sortData = (key) => { const sortData = (key) => {
@ -57,12 +55,12 @@
let finalList = []; let finalList = [];
for (const k in sortOrders) { for (const k in sortOrders) {
if (k !== key) { if (k !== key) {
sortOrders[k].order = 'none'; sortOrders[k].order = "none";
} }
} }
// Cycle through 'none', 'asc', 'desc' for the clicked key // Cycle through 'none', 'asc', 'desc' for the clicked key
const orderCycle = ['none', 'asc', 'desc']; const orderCycle = ["none", "asc", "desc"];
const originalData = rawData?.slice(0, 40); const originalData = rawData?.slice(0, 40);
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order); const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order = sortOrders[key].order =
@ -70,7 +68,7 @@
const sortOrder = sortOrders[key].order; const sortOrder = sortOrders[key].order;
// Reset to original data when 'none' and stop further sorting // Reset to original data when 'none' and stop further sorting
if (sortOrder === 'none') { if (sortOrder === "none") {
analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation) analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation)
return; return;
} }
@ -81,24 +79,24 @@
let valueA, valueB; let valueA, valueB;
switch (type) { switch (type) {
case 'date': case "date":
valueA = new Date(a[key]); valueA = new Date(a[key]);
valueB = new Date(b[key]); valueB = new Date(b[key]);
break; break;
case 'string': case "string":
valueA = a[key].toUpperCase(); valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase(); valueB = b[key].toUpperCase();
return sortOrder === 'asc' return sortOrder === "asc"
? valueA.localeCompare(valueB) ? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA); : valueB.localeCompare(valueA);
case 'number': case "number":
default: default:
valueA = parseFloat(a[key]); valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]); valueB = parseFloat(b[key]);
break; break;
} }
if (sortOrder === 'asc') { if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0; return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else { } else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0; return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
@ -114,7 +112,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Top {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
Wall Street Stock Analysts · stocknear Wall Street Stock Analysts · stocknear
</title> </title>
<meta <meta
@ -214,7 +212,7 @@
<div class="z-1 absolute top-4"> <div class="z-1 absolute top-4">
<img <img
class="w-36 ml-2" class="w-36 ml-2"
src={cloudFrontUrl + '/assets/analyst_logo.png'} src={cloudFrontUrl + "/assets/analyst_logo.png"}
alt="logo" alt="logo"
loading="lazy" loading="lazy"
/> />
@ -255,7 +253,7 @@
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<a <a
href={'/analysts/' + item?.analystId} href={"/analysts/" + item?.analystId}
class="sm:hover:text-white text-blue-400 font-medium" class="sm:hover:text-white text-blue-400 font-medium"
>{item?.analystName} >{item?.analystName}
</a> </a>
@ -339,15 +337,15 @@
> >
{item?.lastRating !== null {item?.lastRating !== null
? new Date(item?.lastRating)?.toLocaleString( ? new Date(item?.lastRating)?.toLocaleString(
'en-US', "en-US",
{ {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
daySuffix: '2-digit', daySuffix: "2-digit",
}, },
) )
: 'n/a'} : "n/a"}
</td> </td>
</tr> </tr>
{/each} {/each}
@ -375,12 +373,12 @@
</div> </div>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div <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" 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 <a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0" 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"> <div class="w-full flex justify-between items-center p-3 mt-3">
@ -392,15 +390,17 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools Upgrade now for unlimited access to all data and tools
</span> </span>
</div> </a>
</div> </div>
{/if} {/if}
<div <div
on:click={() => goto('/analysts/top-stocks')}
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" 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"> <a
href={"/analysts/top-stocks"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Top Stocks Picks ⭐ Top Stocks Picks ⭐
@ -410,14 +410,16 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings. Get the latest top Wall Street analyst ratings.
</span> </span>
</div> </a>
</div> </div>
<div <div
on:click={() => goto('/most-shorted-stocks')}
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" 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"> <a
href={"/most-shorted-stocks"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Top Shorted Stocks 🍋 Top Shorted Stocks 🍋
@ -427,7 +429,7 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Never miss out another short squeeze Never miss out another short squeeze
</span> </span>
</div> </a>
</div> </div>
</aside> </aside>
</div> </div>

312
src/routes/analysts/top-stocks/+page.svelte
View File

@ -1,23 +1,20 @@
<script lang='ts'> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from '$lib/store'; import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { abbreviateNumber } from '$lib/utils'; import { abbreviateNumber } from "$lib/utils";
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte'; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { onMount } from 'svelte'; import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import TableHeader from '$lib/components/Table/TableHeader.svelte'; import TableHeader from "$lib/components/Table/TableHeader.svelte";
export let data; export let data;
let isLoaded = false; let isLoaded = false;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let rawData = data?.getTopAnalystStocks; let rawData = data?.getTopAnalystStocks;
let analytRatingList = rawData?.slice(0, 50) ?? []; let analytRatingList = rawData?.slice(0, 50) ?? [];
async function handleScroll() { async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold; const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
@ -29,35 +26,33 @@
} }
onMount(async () => { onMount(async () => {
isLoaded = true; isLoaded = true;
window.addEventListener('scroll', handleScroll); window.addEventListener("scroll", handleScroll);
return () => { return () => {
window.removeEventListener('scroll', handleScroll); window.removeEventListener("scroll", handleScroll);
}; };
}) });
let columns = [ let columns = [
{ key: 'rank', label: 'Rank', align: 'left' }, { key: "rank", label: "Rank", align: "left" },
{ key: 'ticker', label: 'Symbol', align: 'left' }, { key: "ticker", label: "Symbol", align: "left" },
{ key: 'name', label: 'Name', align: 'left' }, { key: "name", label: "Name", align: "left" },
{ key: 'counter', label: 'Ratings Count', align: 'right' }, { key: "counter", label: "Ratings Count", align: "right" },
{ key: 'priceTarget', label: 'Price Target', align: 'right' }, { key: "priceTarget", label: "Price Target", align: "right" },
{ key: 'price', label: 'Current Price', align: 'right' }, { key: "price", label: "Current Price", align: "right" },
{ key: 'marketCap', label: 'Market Cap', align: 'right' }, { key: "marketCap", label: "Market Cap", align: "right" },
{ key: 'upside', label: 'Upside', align: 'right' }, { key: "upside", label: "Upside", align: "right" },
]; ];
let sortOrders = { let sortOrders = {
rank: { order: 'none', type: 'number' }, rank: { order: "none", type: "number" },
ticker: { order: 'none', type: 'string' }, ticker: { order: "none", type: "string" },
name: { order: 'none', type: 'string' }, name: { order: "none", type: "string" },
counter: { order: 'none', type: 'number' }, counter: { order: "none", type: "number" },
priceTarget: { order: 'none', type: 'number' }, priceTarget: { order: "none", type: "number" },
price: { order: 'none', type: 'number' }, price: { order: "none", type: "number" },
marketCap: { order: 'none', type: 'number' }, marketCap: { order: "none", type: "number" },
upside: { order: 'none', type: 'number' }, upside: { order: "none", type: "number" },
}; };
const sortData = (key) => { const sortData = (key) => {
@ -65,12 +60,12 @@ window.addEventListener('scroll', handleScroll);
let finalList = []; let finalList = [];
for (const k in sortOrders) { for (const k in sortOrders) {
if (k !== key) { if (k !== key) {
sortOrders[k].order = 'none'; sortOrders[k].order = "none";
} }
} }
// Cycle through 'none', 'asc', 'desc' for the clicked key // Cycle through 'none', 'asc', 'desc' for the clicked key
const orderCycle = ['none', 'asc', 'desc']; const orderCycle = ["none", "asc", "desc"];
const originalData = rawData?.slice(0, 40); const originalData = rawData?.slice(0, 40);
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order); const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order = sortOrders[key].order =
@ -78,7 +73,7 @@ window.addEventListener('scroll', handleScroll);
const sortOrder = sortOrders[key].order; const sortOrder = sortOrders[key].order;
// Reset to original data when 'none' and stop further sorting // Reset to original data when 'none' and stop further sorting
if (sortOrder === 'none') { if (sortOrder === "none") {
analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation) analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation)
return; return;
} }
@ -89,24 +84,24 @@ window.addEventListener('scroll', handleScroll);
let valueA, valueB; let valueA, valueB;
switch (type) { switch (type) {
case 'date': case "date":
valueA = new Date(a[key]); valueA = new Date(a[key]);
valueB = new Date(b[key]); valueB = new Date(b[key]);
break; break;
case 'string': case "string":
valueA = a[key].toUpperCase(); valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase(); valueB = b[key].toUpperCase();
return sortOrder === 'asc' return sortOrder === "asc"
? valueA.localeCompare(valueB) ? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA); : valueB.localeCompare(valueA);
case 'number': case "number":
default: default:
valueA = parseFloat(a[key]); valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]); valueB = parseFloat(b[key]);
break; break;
} }
if (sortOrder === 'asc') { if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0; return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else { } else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0; return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
@ -118,38 +113,45 @@ window.addEventListener('scroll', handleScroll);
}; };
$: charNumber = $screenWidth < 640 ? 30 : 20; $: charNumber = $screenWidth < 640 ? 30 : 20;
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Top 100 Strong Buy Stocks · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
100 Strong Buy Stocks · stocknear
</title> </title>
<meta name="description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} /> <meta
name="description"
content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`Top 100 Strong Buy Stocks · stocknear`} /> <meta property="og:title" content={`Top 100 Strong Buy Stocks · stocknear`} />
<meta property="og:description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} /> <meta
property="og:description"
content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`}
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`Top 100 Strong Buy Stocks · stocknear`}/> <meta
<meta name="twitter:description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} /> name="twitter:title"
content={`Top 100 Strong Buy Stocks · stocknear`}
/>
<meta
name="twitter:description"
content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`}
/>
<!-- Add more Twitter meta tags as needed --> <!-- 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 lg:px-3"
>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4"> <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
@ -158,35 +160,42 @@ window.addEventListener('scroll', handleScroll);
</div> </div>
<div class="w-full overflow-hidden m-auto mt-5"> <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="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="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5"> <main class="w-full lg:w-3/4 lg:pr-5">
<div
<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"> 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"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row justify-center items-center"> <div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"> <h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Top Stocks Top Stocks
</h1> </h1>
</div> </div>
<span class="text-white text-md font-medium text-center flex justify-center items-center "> <span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Uncover 'Strong Buy' stocks from 5-star Wall Street analysts Uncover 'Strong Buy' stocks from 5-star Wall Street analysts
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"> <div
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 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> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" /> <feGaussianBlur stdDeviation="5" result="glow" />
@ -196,104 +205,162 @@ window.addEventListener('scroll', handleScroll);
</feMerge> </feMerge>
</filter> </filter>
</defs> </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)" /> <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> </svg>
<div class="z-1 absolute top-0"> <div class="z-1 absolute top-0">
<img class="w-28 ml-6" src={cloudFrontUrl+'/assets/wsb_diamond_hands_logo.png'} alt="logo" loading="lazy"> <img
class="w-28 ml-6"
src={cloudFrontUrl + "/assets/wsb_diamond_hands_logo.png"}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-lg h-auto p-5 "> <div
<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> class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-lg h-auto p-5"
Strong Buy stocks by top-rated analysts with a star rating of 4 or above, known for their exceptional accuracy and returns. Stocks are ranked based on the volume of analyst ratings. >
<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
>
Strong Buy stocks by top-rated analysts with a star rating of 4 or above,
known for their exceptional accuracy and returns. Stocks are ranked based
on the volume of analyst ratings.
</div> </div>
<div class="w-screen sm:w-full m-auto mt-10"> <div class="w-screen sm:w-full m-auto mt-10">
{#if isLoaded} {#if isLoaded}
<div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"> <div
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"> class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"
>
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
>
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
</thead> </thead>
<tbody> <tbody>
{#each analytRatingList as item, index} {#each analytRatingList as item, index}
<tr
<tr class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center"> 1 ===
rawData?.length && data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center"
>
{item?.rank} {item?.rank}
</td> </td>
<td class="text-sm sm:text-[1rem] whitespace-nowrap text-start"> <td
<a href={"/stocks/"+item?.ticker} class="sm:hover:text-white text-blue-400"> class="text-sm sm:text-[1rem] whitespace-nowrap text-start"
>
<a
href={"/stocks/" + item?.ticker}
class="sm:hover:text-white text-blue-400"
>
{item?.ticker} {item?.ticker}
</a> </a>
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"> <td
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
: item?.name}
</td> </td>
<td
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"> class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.counter} {item?.counter}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"> <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.priceTarget?.toFixed(2)} {item?.priceTarget?.toFixed(2)}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"> <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.price?.toFixed(2)} {item?.price?.toFixed(2)}
</td> </td>
<td class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap"> <td
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'} class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.marketCap !== null
? abbreviateNumber(item?.marketCap)
: "-"}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"> <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{#if Number(item?.upside) >= 0} {#if Number(item?.upside) >= 0}
<span class="text-[#37C97D]">+{Number(item?.upside)?.toFixed(2)}%</span> <span class="text-[#37C97D]"
>+{Number(item?.upside)?.toFixed(2)}%</span
>
{:else} {:else}
<span class="text-[#B84242]">{Number(item?.upside)?.toFixed(2)}%</span> <span class="text-[#B84242]"
>{Number(item?.upside)?.toFixed(2)}%</span
>
{/if} {/if}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<UpgradeToPro data={data} title="Get stock forecasts from Wall Street's highest rated professionals"/> <UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <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"> <label
<span class="loading loading-spinner loading-md text-gray-400"></span> 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> </label>
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} <div
<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"> 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"> >
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥 Pro Subscription 🔥
@ -303,12 +370,17 @@ window.addEventListener('scroll', handleScroll);
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools Upgrade now for unlimited access to all data and tools
</span> </span>
</div> </a>
</div> </div>
{/if} {/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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/analysts"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊 Top Analyst 📊
@ -318,11 +390,16 @@ window.addEventListener('scroll', handleScroll);
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings Get the latest top Wall Street analyst ratings
</span> </span>
</div> </a>
</div> </div>
<div on:click={() => goto('/most-shorted-stocks')} 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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/most-shorted-stocks"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Top Shorted Stocks 🍋 Top Shorted Stocks 🍋
@ -332,19 +409,10 @@ window.addEventListener('scroll', handleScroll);
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Never miss out another short squeeze Never miss out another short squeeze
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section> </section>

311
src/routes/corporate-lobbying-tracker/+page.svelte
View File

@ -1,36 +1,30 @@
<script lang='ts'> <script lang="ts">
import { goto } from '$app/navigation'; import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { numberOfUnreadNotification, screenWidth } from '$lib/store'; import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from "svelte";
import { onMount } from 'svelte'; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data; export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let isLoaded = false; let isLoaded = false;
let rawData = [] let rawData = [];
let displayList = []; let displayList = [];
let order = 'highToLow'; let order = "highToLow";
const sortByAmount = (tickerList) => { const sortByAmount = (tickerList) => {
return tickerList?.sort(function (a, b) { return tickerList?.sort(function (a, b) {
if(order === 'highToLow') if (order === "highToLow") {
{
return b?.amount - a?.amount; return b?.amount - a?.amount;
} } else {
else {
return a?.amount - b?.amount; return a?.amount - b?.amount;
} }
}); });
} };
async function infiniteHandler({ detail: { loaded, complete } }) async function infiniteHandler({ detail: { loaded, complete } }) {
{
if (displayList?.length === rawData?.length) { if (displayList?.length === rawData?.length) {
complete(); complete();
} else { } else {
@ -45,68 +39,74 @@
const date = new Date(dateString); const date = new Date(dateString);
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Months are zero-based
const day = date.getDate().toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, "0");
const hours = date.getHours() % 12 || 12; // Convert to 12-hour format const hours = date.getHours() % 12 || 12; // Convert to 12-hour format
const minutes = date.getMinutes().toString().padStart(2, '0'); const minutes = date.getMinutes().toString().padStart(2, "0");
const ampm = date.getHours() >= 12 ? 'PM' : 'AM'; const ampm = date.getHours() >= 12 ? "PM" : "AM";
return `${year}/${month}/${day} ${hours}:${minutes} ${ampm}`; return `${year}/${month}/${day} ${hours}:${minutes} ${ampm}`;
} }
onMount(() => { onMount(() => {
rawData = data?.getCorporateLobbyingTracker ?? []; rawData = data?.getCorporateLobbyingTracker ?? [];
displayList = rawData?.slice(0,50) ?? [] displayList = rawData?.slice(0, 50) ?? [];
isLoaded = true; isLoaded = true;
}) });
function changeOrder(state: string) { function changeOrder(state: string) {
if (state === 'highToLow') if (state === "highToLow") {
{ order = "lowToHigh";
order = 'lowToHigh'; } else {
} order = "highToLow";
else {
order = 'highToLow';
} }
displayList = sortByAmount(rawData)?.slice(0, 50); displayList = sortByAmount(rawData)?.slice(0, 50);
} }
$: charNumber = $screenWidth < 640 ? 15 : 20; $: charNumber = $screenWidth < 640 ? 15 : 20;
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Latest Lobbiyng Disclosure Tracker · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Latest
Lobbiyng Disclosure Tracker · stocknear
</title> </title>
<meta name="description" content={`Track the latest senate lobbying spending of US companies.`} /> <meta
name="description"
content={`Track the latest senate lobbying spending of US companies.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`Latest Lobbiyng Disclosure Tracker · stocknear`}/> <meta
<meta property="og:description" content={`Track the latest senate lobbying spending of US companies.`} /> property="og:title"
content={`Latest Lobbiyng Disclosure Tracker · stocknear`}
/>
<meta
property="og:description"
content={`Track the latest senate lobbying spending of US companies.`}
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`Latest Lobbiyng Disclosure Tracker · stocknear`}/> <meta
<meta name="twitter:description" content={`Track the latest senate lobbying spending of US companies.`} /> name="twitter:title"
content={`Latest Lobbiyng Disclosure Tracker · stocknear`}
/>
<meta
name="twitter:description"
content={`Track the latest senate lobbying spending of US companies.`}
/>
<!-- Add more Twitter meta tags as needed --> <!-- 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 lg:px-3"
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"> >
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4"> <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
@ -115,36 +115,42 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
</div> </div>
<div class="w-full overflow-hidden m-auto mt-5"> <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="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="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5"> <main class="w-full lg:w-3/4 lg:pr-5">
<div
<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"> 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"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row justify-center items-center"> <div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"> <h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Lobbying Tracker Lobbying Tracker
</h1> </h1>
</div> </div>
<span class="text-white text-md font-medium text-center flex justify-center items-center "> <span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Track the latest lobbying spendings of US stock companies Track the latest lobbying spendings of US stock companies
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"> <div
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 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> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" /> <feGaussianBlur stdDeviation="5" result="glow" />
@ -154,75 +160,120 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
</feMerge> </feMerge>
</filter> </filter>
</defs> </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)" /> <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> </svg>
<div class="z-1 absolute top-4"> <div class="z-1 absolute top-4">
<img class="w-fit" src={cloudFrontUrl+'/assets/lobbying_logo.png'} alt="logo" loading="lazy"> <img
class="w-fit"
src={cloudFrontUrl + "/assets/lobbying_logo.png"}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
{#if isLoaded} {#if isLoaded}
<div
class="w-screen sm:w-full flex flex-row items-start mt-20 sm:mt-10"
>
<div class="w-screen sm:w-full flex flex-row items-start mt-20 sm:mt-10"> <div
class="w-screen sm:w-full rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden"
>
<div class="w-screen sm:w-full rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden"> <table
<table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"> class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
>
<thead> <thead>
<tr class="bg-[#09090B] border-b border-[#27272A]"> <tr class="bg-[#09090B] border-b border-[#27272A]">
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"> <th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Date Date
</th> </th>
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"> <th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Symbol Symbol
</th> </th>
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"> <th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Name Name
</th> </th>
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"> <th
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Sector Sector
</th> </th>
<th on:click={() => { changeOrder(order); }} class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold"> <th
on:click={() => {
changeOrder(order);
}}
class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Amount Amount
<svg class="w-5 h-5 inline-block {order === 'highToLow' ? '' : 'rotate-180'}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> <svg
class="w-5 h-5 inline-block {order === 'highToLow'
? ''
: 'rotate-180'}"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
><path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path></svg
>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each displayList as item, index} {#each displayList as item, index}
<tr
<tr class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
1 ===
displayList?.length && data?.user?.tier !== 'Pro'
<td class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap"> ? 'opacity-[0.1]'
: ''}"
>
<td
class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap"
>
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
<td class="text-blue-400 text-sm sm:text-[1rem] text-start"> <td
<a href={"/stocks/"+item?.ticker} class="sm:hover:text-white text-blue-400"> class="text-blue-400 text-sm sm:text-[1rem] text-start"
>
<a
href={"/stocks/" + item?.ticker}
class="sm:hover:text-white text-blue-400"
>
{item?.ticker} {item?.ticker}
</a> </a>
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"> <td
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
: item?.name}
</td> </td>
<td
class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"
<td class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"> >
{item?.sector} {item?.sector}
</td> </td>
@ -232,90 +283,92 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
maximumFractionDigits: 0, maximumFractionDigits: 0,
}).format(item?.amount)} }).format(item?.amount)}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<InfiniteLoading on:infinite={infiniteHandler} /> <InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>
<UpgradeToPro data={data} title="Get the latest lobbying spendings in realtime of US stock companies"/> <UpgradeToPro
{data}
title="Get the latest lobbying spendings in realtime of US stock companies"
/>
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <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"> <label
<span class="loading loading-spinner loading-md text-gray-400"></span> 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> </label>
</div> </div>
</div> </div>
{/if} {/if}
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} <div
<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"> 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"> >
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription Pro Subscription 🔥
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools. Upgrade now for unlimited access to all data and tools.
</span> </span>
</div> </a>
</div> </div>
{/if} {/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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/analysts"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Wallstreet Analyst Top Analyst 📊
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings. Get the latest top Wall Street analyst ratings
</span> </span>
</div> </a>
</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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/politicians"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Congress Trading Congress Trading 🇺🇸
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Congress trading insights. Get the latest top Congress trading insights.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section> </section>

25
src/routes/cramer-tracker/+page.svelte
View File

@ -1,9 +1,7 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from "$lib/store"; import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { onMount } from "svelte"; import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import * as Card from "$lib/components/shadcn/card/index.ts";
export let data; export let data;
@ -12,7 +10,6 @@
let isLoaded = false; let isLoaded = false;
let rawData = data?.getCramerTracker ?? []; let rawData = data?.getCramerTracker ?? [];
let displayList = rawData?.slice(0, 50) ?? []; let displayList = rawData?.slice(0, 50) ?? [];
let cumulativeList = [];
let winRate; let winRate;
function sectorSelector(sector) { function sectorSelector(sector) {
@ -421,10 +418,10 @@
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial} {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div <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" 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 <a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0" 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"> <div class="w-full flex justify-between items-center p-3 mt-3">
@ -436,15 +433,17 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools. Upgrade now for unlimited access to all data and tools.
</span> </span>
</div> </a>
</div> </div>
{/if} {/if}
<div <div
on:click={() => goto("/reddit-tracker")}
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" 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"> <a
href={"/reddit-tracker"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Reddit Tracker 🚀 Reddit Tracker 🚀
@ -454,14 +453,16 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest trends of r/Wallstreetbets Get the latest trends of r/Wallstreetbets
</span> </span>
</div> </a>
</div> </div>
<div <div
on:click={() => goto("/sentiment-tracker")}
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" 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"> <a
href={"/sentiment-tracker"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Sentiment Tracker <svg Sentiment Tracker <svg
@ -491,7 +492,7 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Follow the daily trends of retail investors Follow the daily trends of retail investors
</span> </span>
</div> </a>
</div> </div>
</aside> </aside>
</div> </div>

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

@ -9,7 +9,6 @@
} from "date-fns"; } from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store"; import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import dividendsLogo from "$lib/images/dividends_calendar_logo.png"; import dividendsLogo from "$lib/images/dividends_calendar_logo.png";
import { goto } from "$app/navigation";
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
@ -582,30 +581,32 @@
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial} {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div <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" 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 <a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0" 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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription Pro Subscription 🔥
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools. Upgrade now for unlimited access to all data and tools.
</span> </span>
</div> </a>
</div> </div>
{/if} {/if}
<div <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" 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"> <a
href={"/earnings-calendar"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Earnings Calendar 🌟 Earnings Calendar 🌟
@ -615,14 +616,16 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest Earnings of companies Get the latest Earnings of companies
</span> </span>
</div> </a>
</div> </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" 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"> <a
href={"/economic-calendar"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Economic Events 🌍 Economic Events 🌍
@ -632,7 +635,7 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Economic Events worldwide. Stay updated on upcoming Economic Events worldwide.
</span> </span>
</div> </a>
</div> </div>
</aside> </aside>
</div> </div>

578
src/routes/earnings-calendar/+page.svelte
View File

@ -1,16 +1,19 @@
<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 { goto } from '$app/navigation'; addDays,
import { abbreviateNumber } from '$lib/utils'; addWeeks,
subWeeks,
differenceInWeeks,
} from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
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;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let currentWeek = startOfWeek(new Date(), { weekStartsOn: 1 }); let currentWeek = startOfWeek(new Date(), { weekStartsOn: 1 });
let earningsCalendar = data?.getEarningsCalendar; let earningsCalendar = data?.getEarningsCalendar;
const maxWeeksChange = 4; // Maximum allowed week change const maxWeeksChange = 4; // Maximum allowed week change
@ -25,10 +28,15 @@
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");
@ -56,54 +64,52 @@
}, },
]; ];
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; selectedWeekday = selectedWeekday + 1;
} } else if (state === "previous" && selectedWeekday - 1 >= 0) {
else if( state === 'previous' && selectedWeekday-1 >=0)
{
selectedWeekday--; selectedWeekday--;
} } else if (
state === "previous" &&
else if (state=== 'previous' && index === 0 && differenceInWeeks(currentWeek, today) > -maxWeeksChange) index === 0 &&
{ differenceInWeeks(currentWeek, today) > -maxWeeksChange
changeWeek(state) ) {
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 //Limit the user to go back max 4 weeks and look forward 4 weeks
if (state === 'previous' && differenceInWeeks(currentWeek, today) > -maxWeeksChange) { if (
state === "previous" &&
differenceInWeeks(currentWeek, today) > -maxWeeksChange
) {
currentWeek = subWeeks(currentWeek, 1); currentWeek = subWeeks(currentWeek, 1);
} else if (state === 'next' && differenceInWeeks(currentWeek, today) < maxWeeksChange) { } else if (
state === "next" &&
differenceInWeeks(currentWeek, today) < maxWeeksChange
) {
currentWeek = addWeeks(currentWeek, 1); currentWeek = addWeeks(currentWeek, 1);
} }
formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 }); formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d"); formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d"); formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
@ -111,7 +117,13 @@ async function changeWeek(state) {
formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d"); formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format(formattedMonday, "EEE, MMM d"); formattedMonday = format(formattedMonday, "EEE, MMM d");
formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday]; formattedWeekday = [
formattedMonday,
formattedTuesday,
formattedWednesday,
formattedThursday,
formattedFriday,
];
weekday = []; weekday = [];
startDate = startOfWeek(currentWeek, { weekStartsOn: 1 }); startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
@ -141,43 +153,11 @@ async function changeWeek(state) {
}, },
]; ];
earningsCalendar = daysOfWeek?.map((day) => { earningsCalendar = daysOfWeek?.map((day) => {
return { return {
name: day.name, name: day.name,
data: data?.getEarningsCalendar?.filter( data: data?.getEarningsCalendar?.filter(
(item) => item?.date === day?.date (item) => item?.date === day?.date,
),
};
});
if (earningsCalendar?.length) {
// Loop through each day of the week
for (let i = 0; i < earningsCalendar.length; i++) {
const dayData = earningsCalendar[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( earningsCalendar)
{
earningsCalendar = daysOfWeek?.map((day) => {
return {
name: day.name,
data: data?.getEarningsCalendar?.filter(
(item) => item?.date === day?.date
), ),
}; };
}); });
@ -190,71 +170,91 @@ $: {
// 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 (earningsCalendar) {
{ earningsCalendar = daysOfWeek?.map((day) => {
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange) return {
{ name: day.name,
data: data?.getEarningsCalendar?.filter(
(item) => item?.date === day?.date,
),
};
});
if (earningsCalendar?.length) {
// Loop through each day of the week
for (let i = 0; i < earningsCalendar.length; i++) {
const dayData = earningsCalendar[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; previousMax = false;
} } else {
else {
previousMax = true; previousMax = true;
} }
} }
} }
$: { $: {
if (currentWeek) if (currentWeek) {
{ if (differenceInWeeks(currentWeek, today) < maxWeeksChange) {
if (differenceInWeeks(currentWeek, today) < maxWeeksChange)
{
nextMax = false; nextMax = false;
} } else {
else {
nextMax = true; nextMax = true;
} }
} }
} }
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Earnings Calendar · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Earnings
Calendar · stocknear
</title> </title>
<meta name="description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} /> <meta
name="description"
content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`Earnings Calendar · stocknear`} /> <meta property="og:title" content={`Earnings Calendar · stocknear`} />
<meta property="og:description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} /> <meta
property="og:description"
content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`}
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`Earnings Calendar · stocknear`} /> <meta name="twitter:title" content={`Earnings Calendar · stocknear`} />
<meta name="twitter:description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} /> <meta
name="twitter:description"
content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`}
/>
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<section
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"> 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"> <div class="text-sm sm:text-[1rem] breadcrumbs">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
@ -263,35 +263,42 @@ $: {
</div> </div>
<div class="w-full overflow-hidden m-auto mt-5"> <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="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="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5"> <main class="w-full lg:w-3/4 lg:pr-5">
<div
<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"> 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"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row justify-center items-center"> <div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"> <h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Earnings Calendar Earnings Calendar
</h1> </h1>
</div> </div>
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center "> <span
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
>
Stay updated on upcoming Earnings Calls in the stock market. Stay updated on upcoming Earnings Calls in the stock market.
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"> <div
<svg class="w-36 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 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" />
@ -301,176 +308,332 @@ $: {
</feMerge> </feMerge>
</filter> </filter>
</defs> </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)" /> <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> </svg>
<div class="z-1 absolute top-0"> <div class="z-1 absolute top-0">
<img class="w-20 ml-5" src={cloudFrontUrl+"/assets/earnings_calender_logo.png"} alt="logo" loading="lazy"> <img
class="w-20 ml-5"
src={cloudFrontUrl + "/assets/earnings_calender_logo.png"}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </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 --> <!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden"> <div class="relative flex flex-col flex-1 overflow-hidden">
<!-- Cards --> <!-- Cards -->
<div 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 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 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
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 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> </label>
<div class="flex flex-col items-center text-white truncate m-auto p-1"> <div
<span class="font-medium text-md">{formattedWeekday[index]}</span> class="flex flex-col items-center text-white truncate m-auto p-1"
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1"> {day?.length} Earnings</span> >
<span class="font-medium text-md"
>{formattedWeekday[index]}</span
>
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
{day?.length} Earnings</span
>
</div> </div>
<label on:click={() => clickWeekday('next', index) } class="{nextMax === true && index === 4? 'opacity-20' : ''} sm:hidden mr-auto"> <label
<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> 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> </label>
</div> </div>
</label> </label>
</div> </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-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 "> <table
class="table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
>
<thead> <thead>
<tr class="whitespace-nowrap"> <tr class="whitespace-nowrap">
<th class="text-start text-white font-semibold text-sm">Symbol</th> <th
<th class="text-start text-white font-semibold text-sm">Company Name</th> class="text-start text-white font-semibold text-sm"
<th class="text-white font-semibold text-sm text-end">Market Cap</th> >Symbol</th
<th class="text-white font-semibold text-sm text-end">Revenue Estimate</th> >
<th class="text-white font-semibold text-sm text-end">EPS Estimate</th> <th
<th class="text-white font-semibold text-sm text-end text-end">Earnings Time</th> class="text-start 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 Estimate</th
>
<th
class="text-white font-semibold text-sm text-end"
>EPS Estimate</th
>
<th
class="text-white font-semibold text-sm text-end text-end"
>Earnings Time</th
>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each day as item, index} {#each day as item, index}
<!-- row --> <!-- row -->
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"> <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-start text-sm sm:text-[1rem]"> >
<a href={"/stocks/"+item?.symbol} class="sm:hover:text-white text-blue-400">{item?.symbol}</a> <td
class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]"
>
<a
href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400"
>{item?.symbol}</a
>
</td> </td>
<td class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]"> <td
{item?.name.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name} class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]"
>
{item?.name.length > 20
? item?.name?.slice(0, 20) + "..."
: item?.name}
</td> </td>
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem]"> <td
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'} class="text-white border-b-[#09090B] text-end text-sm 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
<div class="flex flex-row items-center justify-end"> class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
>
<div
class="flex flex-row items-center justify-end"
>
<span> <span>
{(item?.revenueEst !== null) ? abbreviateNumber(item?.revenueEst) : '-'} {item?.revenueEst !== null
? abbreviateNumber(item?.revenueEst)
: "-"}
</span> </span>
{#if item?.revenueEst !== null && item?.revenueEst !== null} {#if item?.revenueEst !== null && item?.revenueEst !== null}
{#if (item?.revenueEst/item?.revenuePrior-1) >= 0} {#if item?.revenueEst / item?.revenuePrior - 1 >= 0}
<span class="ml-1 text-[#22C55E]"> <span class="ml-1 text-[#22C55E]">
+{((item?.revenueEst/item?.revenuePrior-1)*100)?.toFixed(2)}% +{(
(item?.revenueEst /
item?.revenuePrior -
1) *
100
)?.toFixed(2)}%
</span> </span>
{:else} {:else}
<span class="ml-1 text-[#FF2F1F]"> <span class="ml-1 text-[#FF2F1F]">
{((item?.revenueEst/item?.revenuePrior-1)*100)?.toFixed(2)}% {(
(item?.revenueEst /
item?.revenuePrior -
1) *
100
)?.toFixed(2)}%
</span> </span>
{/if} {/if}
{/if} {/if}
</div> </div>
</td> </td>
<td class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"> <td
<div class="flex flex-row items-center justify-end"> class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
>
<div
class="flex flex-row items-center justify-end"
>
<span> <span>
{item?.epsEst !== null ? item?.epsEst?.toFixed(2) : '-'} {item?.epsEst !== null
? item?.epsEst?.toFixed(2)
: "-"}
</span> </span>
{#if item?.epsEst !== null && item?.epsPrior !== null} {#if item?.epsEst !== null && item?.epsPrior !== null}
{#if (item?.epsEst/item?.epsPrior-1) >= 0} {#if item?.epsEst / item?.epsPrior - 1 >= 0}
<span class="ml-1 text-[#22C55E]"> <span class="ml-1 text-[#22C55E]">
+{((item?.epsEst/item?.epsPrior-1)*100)?.toFixed(2)}% +{(
(item?.epsEst / item?.epsPrior - 1) *
100
)?.toFixed(2)}%
</span> </span>
{:else} {:else}
<span class="ml-1 text-[#FF2F1F]"> <span class="ml-1 text-[#FF2F1F]">
{((item?.epsEst/item?.epsPrior-1)*100)?.toFixed(2)}% {(
(item?.epsEst / item?.epsPrior - 1) *
100
)?.toFixed(2)}%
</span> </span>
{/if} {/if}
{/if} {/if}
</div> </div>
</td> </td>
<td
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"> class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
{#if item?.release === 'amc'} >
<svg class="w-4 h-4 inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#70A1EF" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg> {#if item?.release === "amc"}
<svg
class="w-4 h-4 inline-block mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#70A1EF"
d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
/></svg
>
After Close After Close
{:else} {:else}
<svg class="w-4 h-4 inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><g fill="#FEC001"><path d="M184 128a56 56 0 1 1-56-56a56 56 0 0 1 56 56Z" opacity=".2"/><path d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"/></g></svg> <svg
class="w-4 h-4 inline-block mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><g fill="#FEC001"
><path
d="M184 128a56 56 0 1 1-56-56a56 56 0 0 1 56 56Z"
opacity=".2"
/><path
d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"
/></g
></svg
>
Before Open Before Open
{/if} {/if}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
{:else} {: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]"> <div
<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> 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 Earnings available for the day. No Earnings available for the day.
</div> </div>
{/if} {/if}
{/if} {/if}
{/each} {/each}
</div>
</div>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} <div
<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"> 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"> >
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥 Pro Subscription 🔥
@ -480,12 +643,17 @@ $: {
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools. Upgrade now for unlimited access to all data and tools.
</span> </span>
</div> </a>
</div> </div>
{/if} {/if}
<div on:click={() => goto('/dividends-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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/dividends-calendar"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Dividend Calendar 💸 Dividend Calendar 💸
@ -495,11 +663,16 @@ $: {
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Dividends in the stock market. Stay updated on upcoming Dividends in the stock market.
</span> </span>
</div> </a>
</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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/economic-calendar"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Economic Events 🌍 Economic Events 🌍
@ -509,17 +682,10 @@ $: {
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Economic Events worldwide. Stay updated on upcoming Economic Events worldwide.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section> </section>

680
src/routes/economic-calendar/+page.svelte
View File

@ -1,13 +1,19 @@
<script lang="ts"> <script lang="ts">
import { format, startOfWeek, addDays, addWeeks, subWeeks, differenceInWeeks } from 'date-fns'; import {
import { screenWidth, numberOfUnreadNotification } from '$lib/store'; format,
import logo from '$lib/images/transcripts_logo.png'; startOfWeek,
import { abbreviateNumber, listOfRelevantCountries } from '$lib/utils'; addDays,
addWeeks,
subWeeks,
differenceInWeeks,
} from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import logo from "$lib/images/transcripts_logo.png";
import { abbreviateNumber, listOfRelevantCountries } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from '$app/navigation';
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js"; import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
import { Button } from "$lib/components/shadcn/button/index.js"; import { Button } from "$lib/components/shadcn/button/index.js";
import { onMount } from 'svelte'; import { onMount } from "svelte";
export let data; export let data;
@ -21,12 +27,12 @@
let currentWeek = startOfWeek(today, { weekStartsOn: 1 }); let currentWeek = startOfWeek(today, { weekStartsOn: 1 });
let previousMax = false; let previousMax = false;
let nextMax = false; let nextMax = false;
let searchQuery = ''; let searchQuery = "";
$: testList = []; $: testList = [];
$: economicCalendar = data?.getEconomicCalendar; $: economicCalendar = data?.getEconomicCalendar;
$: daysOfWeek = getDaysOfWeek(currentWeek); $: daysOfWeek = getDaysOfWeek(currentWeek);
$: formattedWeekday = daysOfWeek.map(day => format(day.date, "EEE, MMM d")); $: formattedWeekday = daysOfWeek.map((day) => format(day.date, "EEE, MMM d"));
$: weekday = getWeekdayData(economicCalendar, daysOfWeek); $: weekday = getWeekdayData(economicCalendar, daysOfWeek);
$: rawData = weekday; $: rawData = weekday;
$: previousMax = differenceInWeeks(currentWeek, today) <= -maxWeeksChange; $: previousMax = differenceInWeeks(currentWeek, today) <= -maxWeeksChange;
@ -38,20 +44,24 @@
function getDaysOfWeek(week) { function getDaysOfWeek(week) {
const startDate = startOfWeek(week, { weekStartsOn: 1 }); const startDate = startOfWeek(week, { weekStartsOn: 1 });
return Array.from({ length: 5 }, (_, i) => ({ return Array.from({ length: 5 }, (_, i) => ({
name: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'][i], name: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"][i],
date: addDays(startDate, i) date: addDays(startDate, i),
})); }));
} }
function getWeekdayData(calendar, days) { function getWeekdayData(calendar, days) {
if (!calendar) return []; if (!calendar) return [];
return days.map(day => { return days.map((day) => {
const dayData = calendar.filter(item => item.date === format(day.date, "yyyy-MM-dd")); const dayData = calendar.filter(
return dayData.sort((a, b) => new Date(`1970-01-01T${a.time}`) - new Date(`1970-01-01T${b.time}`)); (item) => item.date === format(day.date, "yyyy-MM-dd"),
);
return dayData.sort(
(a, b) =>
new Date(`1970-01-01T${a.time}`) - new Date(`1970-01-01T${b.time}`),
);
}); });
} }
const handleMessage = (event) => { const handleMessage = (event) => {
weekdayFiltered = event.data?.finalData?.output ?? []; weekdayFiltered = event.data?.finalData?.output ?? [];
}; };
@ -67,41 +77,44 @@
} }
function clickWeekday(state, index) { function clickWeekday(state, index) {
if (state === 'next' && selectedWeekday < 4) { if (state === "next" && selectedWeekday < 4) {
selectedWeekday++; selectedWeekday++;
} else if (state === 'previous' && selectedWeekday > 0) { } else if (state === "previous" && selectedWeekday > 0) {
selectedWeekday--; selectedWeekday--;
} else if (state === 'previous' && index === 0 && !previousMax) { } else if (state === "previous" && index === 0 && !previousMax) {
changeWeek('previous'); changeWeek("previous");
selectedWeekday = 4; selectedWeekday = 4;
} else if (state === 'next' && index === 4 && !nextMax) { } else if (state === "next" && index === 4 && !nextMax) {
changeWeek('next'); changeWeek("next");
selectedWeekday = 0; selectedWeekday = 0;
} }
} }
function changeWeek(state) { function changeWeek(state) {
currentWeek = state === 'previous' ? subWeeks(currentWeek, 1) : addWeeks(currentWeek, 1); currentWeek =
state === "previous"
? subWeeks(currentWeek, 1)
: addWeeks(currentWeek, 1);
} }
onMount(async () => { onMount(async () => {
if (!syncWorker) { if (!syncWorker) {
const SyncWorker = await import('./workers/filterWorker?worker'); const SyncWorker = await import("./workers/filterWorker?worker");
syncWorker = new SyncWorker.default(); syncWorker = new SyncWorker.default();
syncWorker.onmessage = handleMessage; syncWorker.onmessage = handleMessage;
} }
}) });
function handleInput(event) { function handleInput(event) {
const searchQuery = event.target.value?.toLowerCase() || ''; const searchQuery = event.target.value?.toLowerCase() || "";
setTimeout(() => { setTimeout(() => {
testList = []; testList = [];
if (searchQuery.length > 0) { if (searchQuery.length > 0) {
const rawList = listOfRelevantCountries; const rawList = listOfRelevantCountries;
testList = rawList?.filter(item => { testList =
rawList?.filter((item) => {
const index = item?.toLowerCase(); const index = item?.toLowerCase();
// Check if country starts with searchQuery // Check if country starts with searchQuery
return index?.startsWith(searchQuery); return index?.startsWith(searchQuery);
@ -110,11 +123,8 @@ function handleInput(event) {
}, 50); }, 50);
} }
$: checkedItems = new Set(); $: checkedItems = new Set();
async function handleChangeValue(value) { async function handleChangeValue(value) {
if (checkedItems.has(value)) { if (checkedItems.has(value)) {
checkedItems.delete(value); checkedItems.delete(value);
@ -130,7 +140,6 @@ async function handleChangeValue(value) {
} else { } else {
weekday = rawData; weekday = rawData;
} }
} }
function handleReset() { function handleReset() {
@ -139,46 +148,57 @@ function handleReset() {
economicCalendar = data?.getEconomicCalendar; economicCalendar = data?.getEconomicCalendar;
daysOfWeek = getDaysOfWeek(currentWeek); daysOfWeek = getDaysOfWeek(currentWeek);
formattedWeekday = daysOfWeek.map(day => format(day.date, "EEE, MMM d")); formattedWeekday = daysOfWeek.map((day) => format(day.date, "EEE, MMM d"));
weekday = getWeekdayData(economicCalendar, daysOfWeek); weekday = getWeekdayData(economicCalendar, daysOfWeek);
rawData = weekday; rawData = weekday;
previousMax = differenceInWeeks(currentWeek, today) <= -maxWeeksChange; previousMax = differenceInWeeks(currentWeek, today) <= -maxWeeksChange;
nextMax = differenceInWeeks(currentWeek, today) >= maxWeeksChange; nextMax = differenceInWeeks(currentWeek, today) >= maxWeeksChange;
currentWeek = startOfWeek(today, { weekStartsOn: 1 }); currentWeek = startOfWeek(today, { weekStartsOn: 1 });
selectedWeekday = Math.min((currentDate.getDay() + 6) % 7, 4) selectedWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
} }
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Worldwide Economic Calendar · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Worldwide
Economic Calendar · stocknear
</title> </title>
<meta name="description" content={`A list of upcoming economic events on the US stock market, with dates, times and estimation.`} /> <meta
name="description"
content={`A list of upcoming economic events on the US stock market, with dates, times and estimation.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`Worldwide Economic Calendar · stocknear`}/> <meta
<meta property="og:description" content={`A list of upcoming economic events on the US stock market, with dates, times and estimation.`} /> property="og:title"
content={`Worldwide Economic Calendar · stocknear`}
/>
<meta
property="og:description"
content={`A list of upcoming economic events on the US stock market, with dates, times and estimation.`}
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`Worldwide Economic Calendar · stocknear`}/> <meta
<meta name="twitter:description" content={`A list of upcoming economic events on the US stock market, with dates, times and estimation.`} /> name="twitter:title"
content={`Worldwide Economic Calendar · stocknear`}
/>
<meta
name="twitter:description"
content={`A list of upcoming economic events on the US stock market, with dates, times and estimation.`}
/>
<!-- Add more Twitter meta tags as needed --> <!-- 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"
<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 sm:ml-0"> <div class="text-sm sm:text-[1rem] breadcrumbs ml-4 sm:ml-0">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
@ -187,35 +207,42 @@ function handleReset() {
</div> </div>
<div class="w-full overflow-hidden m-auto mt-5"> <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="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="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5"> <main class="w-full lg:w-3/4 lg:pr-5">
<div
<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"> 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"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row justify-center items-center"> <div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"> <h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Economic Calendar Economic Calendar
</h1> </h1>
</div> </div>
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center "> <span
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
>
Stay updated on upcoming Economic Events worldwide. Stay updated on upcoming Economic Events worldwide.
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"> <div
<svg class="w-36 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 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" />
@ -225,90 +252,185 @@ function handleReset() {
</feMerge> </feMerge>
</filter> </filter>
</defs> </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)" /> <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> </svg>
<div class="z-1 absolute top-0"> <div class="z-1 absolute top-0">
<img class="w-24 ml-5" src={logo} alt="logo" loading="lazy"> <img class="w-24 ml-5" src={logo} alt="logo" loading="lazy" />
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </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 --> <!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden"> <div class="relative flex flex-col flex-1 overflow-hidden">
<!-- Cards --> <!-- Cards -->
<div 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 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 (filterList?.length === 0 ? weekday : weekdayFiltered) as day,index} {#each filterList?.length === 0 ? weekday : weekdayFiltered 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 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="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
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 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="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 class="flex flex-col items-center text-white truncate m-auto p-1"> <div
<span class="font-medium text-md">{formattedWeekday[index]}</span> class="flex flex-col items-center text-white truncate m-auto p-1"
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1"> {day?.length} Events</span> >
<span class="font-medium text-md"
>{formattedWeekday[index]}</span
>
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
{day?.length} Events</span
>
</div> </div>
<label on:click={() => clickWeekday('next', index) } class="sm:hidden mr-auto"> <label
<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> on:click={() => clickWeekday("next", index)}
class="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> </label>
</div> </div>
</label> </label>
</div> </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>
<div
class="flex flex-row items-center w-fit m-auto sm:m-0 pt-6 pb-3"
>
<div class="flex flex-row items-center w-fit m-auto sm:m-0 pt-6 pb-3"> <div
class="grid grid-cols-2 sm:grid-cols-3 gap-y-3 sm:gap-y-0 gap-x-2.5 lg:grid-cols-3 w-full mt-3"
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-3 sm:gap-y-0 gap-x-2.5 lg:grid-cols-3 w-full mt-3 "> >
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"> <Button
builders={[builder]}
class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
>
<span class="truncate text-white">Filter Country</span> <span class="truncate text-white">Filter Country</span>
<svg class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true"> <svg
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg> </svg>
</Button> </Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content class="w-56 h-fit max-h-72 overflow-y-auto scroller"> <DropdownMenu.Content
<div class="relative sticky z-40 focus:outline-none -top-1" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
tabindex="0" role="menu" style=""> >
<input bind:value={searchQuery} <div
class="relative sticky z-40 focus:outline-none -top-1"
tabindex="0"
role="menu"
style=""
>
<input
bind:value={searchQuery}
on:input={handleInput} on:input={handleInput}
autocomplete="off" autocomplete="off"
class=" absolute fixed sticky w-full border-0 bg-[#09090B] border-b border-gray-200 class=" absolute fixed sticky w-full border-0 bg-[#09090B] border-b border-gray-200
focus:border-gray-200 focus:ring-0 text-white placeholder:text-gray-300" focus:border-gray-200 focus:ring-0 text-white placeholder:text-gray-300"
type="search" type="search"
placeholder="Search..."> placeholder="Search..."
/>
</div> </div>
<DropdownMenu.Group> <DropdownMenu.Group>
{#each (testList.length > 0 && searchQuery?.length > 0 ? testList : searchQuery?.length > 0 && testList?.length === 0 ? [] : listOfRelevantCountries ) as item} {#each testList.length > 0 && searchQuery?.length > 0 ? testList : searchQuery?.length > 0 && testList?.length === 0 ? [] : listOfRelevantCountries as item}
<DropdownMenu.Item class="sm:hover:bg-[#27272A]"> <DropdownMenu.Item class="sm:hover:bg-[#27272A]">
<div class="flex items-center"> <div class="flex items-center">
<label on:click={() => {handleChangeValue(item)}} class="cursor-pointer text-white" for={item}> <label
<input type="checkbox" checked={checkedItems?.has(item)}> on:click={() => {
handleChangeValue(item);
}}
class="cursor-pointer text-white"
for={item}
>
<input
type="checkbox"
checked={checkedItems?.has(item)}
/>
<span class="ml-2">{item}</span> <span class="ml-2">{item}</span>
</label> </label>
</div> </div>
@ -320,34 +442,78 @@ function handleReset() {
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"> <Button
<span class="truncate text-white">Filter Importance</span> builders={[builder]}
<svg class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true"> class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> >
<span class="truncate text-white"
>Filter Importance</span
>
<svg
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg> </svg>
</Button> </Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content class="w-56 h-fit max-h-72 overflow-y-auto scroller"> <DropdownMenu.Content
<div class="relative sticky z-40 focus:outline-none -top-1" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
tabindex="0" role="menu" style=""> >
<div
</div> class="relative sticky z-40 focus:outline-none -top-1"
tabindex="0"
role="menu"
style=""
></div>
<DropdownMenu.Group> <DropdownMenu.Group>
{#each [1, 2, 3] as i} {#each [1, 2, 3] as i}
<DropdownMenu.Item class="sm:hover:bg-[#27272A]"> <DropdownMenu.Item class="sm:hover:bg-[#27272A]">
<div class="flex items-center"> <div class="flex items-center">
<label on:click={() => { handleChangeValue(i) }} class="flex flex-row items-center cursor-pointer text-white" for={i}> <label
<input type="checkbox" checked={checkedItems?.has(i)} /> on:click={() => {
handleChangeValue(i);
}}
class="flex flex-row items-center cursor-pointer text-white"
for={i}
>
<input
type="checkbox"
checked={checkedItems?.has(i)}
/>
<div class="ml-2 flex flex-row items-center"> <div class="ml-2 flex flex-row items-center">
{#if i > 0} {#if i > 0}
{#each Array(i).fill() as _, index} {#each Array(i).fill() as _, index}
<svg class="w-4 h-4 text-[#FBCE3C]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20"> <svg
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/> class="w-4 h-4 text-[#FBCE3C]"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
/>
</svg> </svg>
{/each} {/each}
{#each Array(3 - i).fill() as _} {#each Array(3 - i).fill() as _}
<svg class="w-4 h-4 text-gray-300 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20"> <svg
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/> class="w-4 h-4 text-gray-300 dark:text-gray-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
/>
</svg> </svg>
{/each} {/each}
{/if} {/if}
@ -356,140 +522,259 @@ function handleReset() {
</div> </div>
</DropdownMenu.Item> </DropdownMenu.Item>
{/each} {/each}
</DropdownMenu.Group> </DropdownMenu.Group>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>
{#if filterList?.length !== 0} {#if filterList?.length !== 0}
<Button on:click={() => handleReset()} class="w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-start items-center px-3 py-2 text-white rounded-lg truncate"> <Button
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 mr-2" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M3.578 6.487A8 8 0 1 1 2.5 10.5"/><path d="M7.5 6.5h-4v-4"/></g></svg> on:click={() => handleReset()}
class="w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-start items-center px-3 py-2 text-white rounded-lg truncate"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="inline-block w-4 h-4 mr-2"
viewBox="0 0 21 21"
><g
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
><path d="M3.578 6.487A8 8 0 1 1 2.5 10.5" /><path
d="M7.5 6.5h-4v-4"
/></g
></svg
>
Reset All Reset All
</Button> </Button>
{/if} {/if}
</div> </div>
</div> </div>
<div class="z-0 mb-40"> <div class="z-0 mb-40">
{#each (filterList?.length === 0 ? weekday : weekdayFiltered) as day,index} {#each filterList?.length === 0 ? weekday : weekdayFiltered 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-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 "> <table
class="table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
>
<thead> <thead>
<tr class="whitespace-nowrap"> <tr class="whitespace-nowrap">
<th class="text-start text-white font-semibold text-sm">Time</th> <th
class="text-start text-white font-semibold text-sm"
>Time</th
>
<th class="text-start text-white font-semibold text-sm sm:text-[1rem]">Country</th> <th
<th class="text-start text-white font-semibold text-sm sm:text-[1rem]">Event</th> class="text-start text-white font-semibold text-sm sm:text-[1rem]"
<th class="text-end text-white font-semibold text-sm sm:text-[1rem]">Actual</th> >Country</th
<th class="text-end text-white font-semibold text-sm sm:text-[1rem]">Forecast</th> >
<th class="text-end text-white font-semibold text-sm sm:text-[1rem]">Previous</th> <th
<th class="text-white font-semibold text-sm sm:text-[1rem] text-end">Importance</th> class="text-start text-white font-semibold text-sm sm:text-[1rem]"
>Event</th
>
<th
class="text-end text-white font-semibold text-sm sm:text-[1rem]"
>Actual</th
>
<th
class="text-end text-white font-semibold text-sm sm:text-[1rem]"
>Forecast</th
>
<th
class="text-end text-white font-semibold text-sm sm:text-[1rem]"
>Previous</th
>
<th
class="text-white font-semibold text-sm sm:text-[1rem] text-end"
>Importance</th
>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each day as item} {#each day as item}
<!-- row --> <!-- row -->
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"> <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
<td class="text-white text-sm sm:text-[1rem] border-b-[#09090B] "> >
<td
class="text-white text-sm sm:text-[1rem] border-b-[#09090B]"
>
<label class="p-1.5 rounded-lg"> <label class="p-1.5 rounded-lg">
{item?.time} {item?.time}
</label> </label>
</td> </td>
<td class="flex flex-row items-center text-sm sm:text-[1rem] whitespace-nowrap"> <td
{#if item?.country === 'EU'} class="flex flex-row items-center text-sm sm:text-[1rem] whitespace-nowrap"
<svg style="clip-path: circle(50%);" class="w-4 h-4 sm:w-6 sm:h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><mask id="circleFlagsEu0"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#circleFlagsEu0)"><path fill="#0052b4" d="M0 0h512v512H0z"/><path fill="#ffda44" d="m256 100.2l8.3 25.5H291l-21.7 15.7l8.3 25.6l-21.7-15.8l-21.7 15.8l8.3-25.6l-21.7-15.7h26.8zm-110.2 45.6l24 12.2l18.9-19l-4.2 26.5l23.9 12.2l-26.5 4.2l-4.2 26.5l-12.2-24l-26.5 4.3l19-19zM100.2 256l25.5-8.3V221l15.7 21.7l25.6-8.3l-15.8 21.7l15.8 21.7l-25.6-8.3l-15.7 21.7v-26.8zm45.6 110.2l12.2-24l-19-18.9l26.5 4.2l12.2-23.9l4.2 26.5l26.5 4.2l-24 12.2l4.3 26.5l-19-19zM256 411.8l-8.3-25.5H221l21.7-15.7l-8.3-25.6l21.7 15.8l21.7-15.8l-8.3 25.6l21.7 15.7h-26.8zm110.2-45.6l-24-12.2l-18.9 19l4.2-26.5l-23.9-12.2l26.5-4.2l4.2-26.5l12.2 24l26.5-4.3l-19 19zM411.8 256l-25.5 8.3V291l-15.7-21.7l-25.6 8.3l15.8-21.7l-15.8-21.7l25.6 8.3l15.7-21.7v26.8zm-45.6-110.2l-12.2 24l19 18.9l-26.5-4.2l-12.2 23.9l-4.2-26.5l-26.5-4.2l24-12.2l-4.3-26.5l19 19z"/></g></svg> >
{:else if item?.country === 'UK'} {#if item?.country === "EU"}
<svg style="clip-path: circle(50%);" class="w-4 h-4 sm:w-6 sm:h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><mask id="circleFlagsUk0"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#circleFlagsUk0)"><path fill="#eee" d="m0 0l8 22l-8 23v23l32 54l-32 54v32l32 48l-32 48v32l32 54l-32 54v68l22-8l23 8h23l54-32l54 32h32l48-32l48 32h32l54-32l54 32h68l-8-22l8-23v-23l-32-54l32-54v-32l-32-48l32-48v-32l-32-54l32-54V0l-22 8l-23-8h-23l-54 32l-54-32h-32l-48 32l-48-32h-32l-54 32L68 0z"/><path fill="#0052b4" d="M336 0v108L444 0Zm176 68L404 176h108zM0 176h108L0 68ZM68 0l108 108V0Zm108 512V404L68 512ZM0 444l108-108H0Zm512-108H404l108 108Zm-68 176L336 404v108z"/><path fill="#d80027" d="M0 0v45l131 131h45zm208 0v208H0v96h208v208h96V304h208v-96H304V0zm259 0L336 131v45L512 0zM176 336L0 512h45l131-131zm160 0l176 176v-45L381 336z"/></g></svg> <svg
style="clip-path: circle(50%);"
class="w-4 h-4 sm:w-6 sm:h-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
><mask id="circleFlagsEu0"
><circle
cx="256"
cy="256"
r="256"
fill="#fff"
/></mask
><g mask="url(#circleFlagsEu0)"
><path
fill="#0052b4"
d="M0 0h512v512H0z"
/><path
fill="#ffda44"
d="m256 100.2l8.3 25.5H291l-21.7 15.7l8.3 25.6l-21.7-15.8l-21.7 15.8l8.3-25.6l-21.7-15.7h26.8zm-110.2 45.6l24 12.2l18.9-19l-4.2 26.5l23.9 12.2l-26.5 4.2l-4.2 26.5l-12.2-24l-26.5 4.3l19-19zM100.2 256l25.5-8.3V221l15.7 21.7l25.6-8.3l-15.8 21.7l15.8 21.7l-25.6-8.3l-15.7 21.7v-26.8zm45.6 110.2l12.2-24l-19-18.9l26.5 4.2l12.2-23.9l4.2 26.5l26.5 4.2l-24 12.2l4.3 26.5l-19-19zM256 411.8l-8.3-25.5H221l21.7-15.7l-8.3-25.6l21.7 15.8l21.7-15.8l-8.3 25.6l21.7 15.7h-26.8zm110.2-45.6l-24-12.2l-18.9 19l4.2-26.5l-23.9-12.2l26.5-4.2l4.2-26.5l12.2 24l26.5-4.3l-19 19zM411.8 256l-25.5 8.3V291l-15.7-21.7l-25.6 8.3l15.8-21.7l-15.8-21.7l25.6 8.3l15.7-21.7v26.8zm-45.6-110.2l-12.2 24l19 18.9l-26.5-4.2l-12.2 23.9l-4.2-26.5l-26.5-4.2l24-12.2l-4.3-26.5l19 19z"
/></g
></svg
>
{:else if item?.country === "UK"}
<svg
style="clip-path: circle(50%);"
class="w-4 h-4 sm:w-6 sm:h-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
><mask id="circleFlagsUk0"
><circle
cx="256"
cy="256"
r="256"
fill="#fff"
/></mask
><g mask="url(#circleFlagsUk0)"
><path
fill="#eee"
d="m0 0l8 22l-8 23v23l32 54l-32 54v32l32 48l-32 48v32l32 54l-32 54v68l22-8l23 8h23l54-32l54 32h32l48-32l48 32h32l54-32l54 32h68l-8-22l8-23v-23l-32-54l32-54v-32l-32-48l32-48v-32l-32-54l32-54V0l-22 8l-23-8h-23l-54 32l-54-32h-32l-48 32l-48-32h-32l-54 32L68 0z"
/><path
fill="#0052b4"
d="M336 0v108L444 0Zm176 68L404 176h108zM0 176h108L0 68ZM68 0l108 108V0Zm108 512V404L68 512ZM0 444l108-108H0Zm512-108H404l108 108Zm-68 176L336 404v108z"
/><path
fill="#d80027"
d="M0 0v45l131 131h45zm208 0v208H0v96h208v208h96V304h208v-96H304V0zm259 0L336 131v45L512 0zM176 336L0 512h45l131-131zm160 0l176 176v-45L381 336z"
/></g
></svg
>
{:else} {:else}
<img style="clip-path: circle(50%);" class="w-4 h-4 sm:w-6 sm:h-6" src={`https://hatscripts.github.io/circle-flags/flags/${item?.countryCode}.svg`} /> <img
style="clip-path: circle(50%);"
class="w-4 h-4 sm:w-6 sm:h-6"
src={`https://hatscripts.github.io/circle-flags/flags/${item?.countryCode}.svg`}
/>
{/if} {/if}
<span class="text-white ml-2"> <span class="text-white ml-2">
{item?.country} {item?.country}
</span> </span>
</td> </td>
<td
class="text-start text-white border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
<td class="text-start text-white border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"> >
{item?.event?.length > 40 ? item?.event?.slice(0,40) + '...' : item?.event} {item?.event?.length > 40
? item?.event?.slice(0, 40) + "..."
: item?.event}
</td> </td>
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"> <td
{item?.actual !== (null || '') ? abbreviateNumber(item?.actual) : '-'} class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.actual !== (null || "")
? abbreviateNumber(item?.actual)
: "-"}
</td> </td>
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"> <td
{item?.consensus !== (null || '') ? abbreviateNumber(item?.consensus) : '-'} class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.consensus !== (null || "")
? abbreviateNumber(item?.consensus)
: "-"}
</td> </td>
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"> <td
{item?.prior !== (null || '') ? abbreviateNumber(item?.prior) : '-'} class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.prior !== (null || "")
? abbreviateNumber(item?.prior)
: "-"}
</td> </td>
<td
class="text-white text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
<div
<td class="text-white text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> class="flex flex-row items-center justify-end"
<div class="flex flex-row items-center justify-end"> >
{#each Array.from({ length: 3 }) as _, i} {#each Array.from({ length: 3 }) as _, i}
{#if i < Math.floor(item?.importance)} {#if i < Math.floor(item?.importance)}
<svg class="w-4 h-4 text-[#FBCE3C]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20"> <svg
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/> class="w-4 h-4 text-[#FBCE3C]"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
/>
</svg> </svg>
{:else} {:else}
<svg class="w-4 h-4 text-gray-300 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20"> <svg
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/> class="w-4 h-4 text-gray-300 dark:text-gray-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 22 20"
>
<path
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
/>
</svg> </svg>
{/if} {/if}
{/each} {/each}
</div> </div>
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
{:else} {: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]"> <div
<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> 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 Events available for the day. No Events available for the day.
</div> </div>
{/if} {/if}
{/if} {/if}
{/each} {/each}
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} <div
<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"> 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"> >
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥 Pro Subscription 🔥
@ -499,12 +784,17 @@ function handleReset() {
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools. Upgrade now for unlimited access to all data and tools.
</span> </span>
</div> </a>
</div> </div>
{/if} {/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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/earnings-calendar"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Earnings Calendar 🌟 Earnings Calendar 🌟
@ -514,11 +804,16 @@ function handleReset() {
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest Earnings of companies Get the latest Earnings of companies
</span> </span>
</div> </a>
</div> </div>
<div on:click={() => goto('/dividends-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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/dividends-calendar"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Dividend Calendar 💸 Dividend Calendar 💸
@ -528,15 +823,10 @@ function handleReset() {
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest dividend announcement Get the latest dividend announcement
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div>
</section> </section>

273
src/routes/list/+layout.svelte
View File

@ -1,244 +1,250 @@
<script lang='ts'> <script lang="ts">
import { numberOfUnreadNotification } from '$lib/store'; import { numberOfUnreadNotification } from "$lib/store";
import { page } from '$app/stores'; import { page } from "$app/stores";
import { industryList } from '$lib/utils'; import { industryList } from "$lib/utils";
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;
function formatFilename(industryName) { function formatFilename(industryName) {
let formattedName = industryName?.replace(/ /g, '-') let formattedName = industryName
.replace(/&/g, 'and') ?.replace(/ /g, "-")
.replace(/-{2,}/g, '-') .replace(/&/g, "and")
.replace(/-{2,}/g, "-")
.toLowerCase(); .toLowerCase();
return formattedName; return formattedName;
} }
let navigationIndustry = industryList.map(industry => ({ let navigationIndustry = industryList.map((industry) => ({
title: industry, title: industry,
link: `/list/industry/${formatFilename(industry)}` link: `/list/industry/${formatFilename(industry)}`,
})); }));
let navigation = [ let navigation = [
{ {
title: 'Stock Lists', title: "Stock Lists",
link: '/list' link: "/list",
}, },
{ {
title: 'Mega-Cap Stocks', title: "Mega-Cap Stocks",
link: '/list/mega-cap-stocks' link: "/list/mega-cap-stocks",
}, },
{ {
title: 'Large-Cap Stocks', title: "Large-Cap Stocks",
link: '/list/large-cap-stocks' link: "/list/large-cap-stocks",
}, },
{ {
title: 'Mid-Cap Stocks', title: "Mid-Cap Stocks",
link: '/list/mid-cap-stocks' link: "/list/mid-cap-stocks",
}, },
{ {
title: 'Small-Cap Stocks', title: "Small-Cap Stocks",
link: '/list/small-cap-stocks' link: "/list/small-cap-stocks",
}, },
{ {
title: 'Micro-Cap Stocks', title: "Micro-Cap Stocks",
link: '/list/micro-cap-stocks' link: "/list/micro-cap-stocks",
}, },
{ {
title: 'Nano-Cap Stocks', title: "Nano-Cap Stocks",
link: '/list/nano-cap-stocks' link: "/list/nano-cap-stocks",
}, },
{ {
title: 'All Stocks Listed on the NASDAQ', title: "All Stocks Listed on the NASDAQ",
link: '/list/nasdaq-stocks' link: "/list/nasdaq-stocks",
}, },
{ {
title: 'All Stocks Listed on the NYSE', title: "All Stocks Listed on the NYSE",
link: '/list/nyse-stocks' link: "/list/nyse-stocks",
}, },
{ {
title: 'All Stocks Listed on XETRA', title: "All Stocks Listed on XETRA",
link: '/list/xetra-stocks' link: "/list/xetra-stocks",
}, },
{ {
title: 'All Stocks Listed on AMEX', title: "All Stocks Listed on AMEX",
link: '/list/amex-stocks' link: "/list/amex-stocks",
}, },
{ {
title: 'Dow Jones Industrial Average Stocks List', title: "Dow Jones Industrial Average Stocks List",
link: '/list/dow-jones-stocks' link: "/list/dow-jones-stocks",
}, },
{ {
title: 'NASDAQ 100 Index Stocks List', title: "NASDAQ 100 Index Stocks List",
link: '/list/nasdaq-100-stocks' link: "/list/nasdaq-100-stocks",
}, },
{ {
title: 'S&P 500 Index Stocks List', title: "S&P 500 Index Stocks List",
link: '/list/sp-500-stocks' link: "/list/sp-500-stocks",
}, },
{ {
title: 'German Companies on the US Stock Market', title: "German Companies on the US Stock Market",
link: '/list/german-stocks-us' link: "/list/german-stocks-us",
}, },
{ {
title: 'Canadian Companies on the US Stock Market', title: "Canadian Companies on the US Stock Market",
link: '/list/canadian-stocks-us' link: "/list/canadian-stocks-us",
}, },
{ {
title: 'Chinese Companies on the US Stock Market', title: "Chinese Companies on the US Stock Market",
link: '/list/chinese-stocks-us' link: "/list/chinese-stocks-us",
}, },
{ {
title: 'Indian Companies on the US Stock Market', title: "Indian Companies on the US Stock Market",
link: '/list/indian-stocks-us' link: "/list/indian-stocks-us",
}, },
{ {
title: 'Israeli Companies on the US Stock Market', title: "Israeli Companies on the US Stock Market",
link: '/list/israeli-stocks-us' link: "/list/israeli-stocks-us",
}, },
{ {
title: 'UK Companies on the US Stock Market', title: "UK Companies on the US Stock Market",
link: '/list/uk-stocks-us' link: "/list/uk-stocks-us",
}, },
{ {
title: 'Japanese Companies on the US Stock Market', title: "Japanese Companies on the US Stock Market",
link: '/list/japanese-stocks-us' link: "/list/japanese-stocks-us",
}, },
{ {
title: 'Financials Sector Stocks', title: "Financials Sector Stocks",
link: '/list/financial-sector' link: "/list/financial-sector",
}, },
{ {
title: 'Healthcare Sector Stocks', title: "Healthcare Sector Stocks",
link: '/list/healthcare-sector' link: "/list/healthcare-sector",
}, },
{ {
title: 'Technology Sector Stocks', title: "Technology Sector Stocks",
link: '/list/technology-sector' link: "/list/technology-sector",
}, },
{ {
title: 'Industrials Sector Stocks', title: "Industrials Sector Stocks",
link: '/list/industrials-sector' link: "/list/industrials-sector",
}, },
{ {
title: 'Energy Sector Stocks', title: "Energy Sector Stocks",
link: '/list/energy-sector' link: "/list/energy-sector",
}, },
{ {
title: 'Utilities Sector Stocks', title: "Utilities Sector Stocks",
link: '/list/utilities-sector' link: "/list/utilities-sector",
}, },
{ {
title: 'Consumer Cyclical Sector Stocks', title: "Consumer Cyclical Sector Stocks",
link: '/list/consumer-cyclical-sector' link: "/list/consumer-cyclical-sector",
}, },
{ {
title: 'Real Estate Sector Stocks', title: "Real Estate Sector Stocks",
link: '/list/real-estate-sector' link: "/list/real-estate-sector",
}, },
{ {
title: 'Basic Materials Sector Stocks', title: "Basic Materials Sector Stocks",
link: '/list/basic-materials-sector' link: "/list/basic-materials-sector",
}, },
{ {
title: 'Communication Services Sector Stocks', title: "Communication Services Sector Stocks",
link: '/list/communication-services-sector' link: "/list/communication-services-sector",
}, },
{ {
title: 'Consumer Defensive Sector Stocks', title: "Consumer Defensive Sector Stocks",
link: '/list/consumer-defensive-sector' link: "/list/consumer-defensive-sector",
}, },
{ {
title: 'Delisted Companies', title: "Delisted Companies",
link: '/list/delisted-stocks' link: "/list/delisted-stocks",
}, },
{ {
title: 'Bitcoin ETFs', title: "Bitcoin ETFs",
link: '/list/bitcoin-etfs' link: "/list/bitcoin-etfs",
}, },
{ {
title: 'Magnificent Seven Stocks', title: "Magnificent Seven Stocks",
link: '/list/magnificent-seven' link: "/list/magnificent-seven",
}, },
{ {
title: 'Dividend Kings', title: "Dividend Kings",
link: '/list/dividend-kings' link: "/list/dividend-kings",
}, },
{ {
title: 'Dividend Aristocrats', title: "Dividend Aristocrats",
link: '/list/dividend-aristocrats' link: "/list/dividend-aristocrats",
}, },
{ {
title: 'All Active REITs on the US Stock Market', title: "All Active REITs on the US Stock Market",
link: '/list/reit-stocks' link: "/list/reit-stocks",
}, },
]; ];
navigation = [...navigationIndustry, ...navigation]; navigation = [...navigationIndustry, ...navigation];
let updatedNavigation = navigation?.map(item => { let updatedNavigation = navigation?.map((item) => {
return { return {
...item, ...item,
link: item.link + '/' link: item.link + "/",
}; };
}); });
const combinedNavigation = navigation?.concat(updatedNavigation); const combinedNavigation = navigation?.concat(updatedNavigation);
</script> </script>
<svelte:head> <svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Stock Lists · stocknear</title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Stock
Lists · stocknear</title
>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="description" content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."> <meta
name="description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content="Stock Lists · stocknear" /> <meta property="og:title" content="Stock Lists · stocknear" />
<meta property="og:description" content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."> <meta
property="og:description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Stock Lists · stocknear" /> <meta name="twitter:title" content="Stock Lists · stocknear" />
<meta name="twitter:description" content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."> <meta
name="twitter:description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<!-- Add more Twitter meta tags as needed --> <!-- 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"
<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-3 lg:ml-10"> <div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
{#if $page.url.pathname.startsWith('/list/industry')} {#if $page.url.pathname.startsWith("/list/industry")}
<li><a href="/industry" class="text-gray-300">Industry</a></li> <li><a href="/industry" class="text-gray-300">Industry</a></li>
{:else} {:else}
<li><a href="/list/" class="text-gray-300">Lists</a></li> <li><a href="/list/" class="text-gray-300">Lists</a></li>
{/if} {/if}
{#if $page.url.pathname.startsWith('/list/')} {#if $page.url.pathname.startsWith("/list/")}
<li> <li>
<span class="text-gray-300"> <span class="text-gray-300">
{combinedNavigation?.find((item) => item?.link === $page.url.pathname)?.title} {combinedNavigation?.find(
(item) => item?.link === $page.url.pathname,
)?.title}
</span> </span>
</li> </li>
{/if} {/if}
</ul> </ul>
</div> </div>
<div
class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden"
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden"> >
<!--Start Top Winners/Losers--> <!--Start Top Winners/Losers-->
<div class="flex flex-col justify-center items-center"> <div class="flex flex-col justify-center items-center">
<div class="ml-2 text-start w-full text-white mb-2"> <div class="ml-2 text-start w-full text-white mb-2">
{#each navigation as item} {#each navigation as item}
{#if item?.link === $page.url.pathname} {#if item?.link === $page.url.pathname}
@ -252,16 +258,19 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
<div class="border-b mt-2 border-blue-400 w-full mb-7" /> <div class="border-b mt-2 border-blue-400 w-full mb-7" />
<div class="flex justify-center w-full m-auto overflow-hidden"> <div class="flex justify-center w-full m-auto overflow-hidden">
<main class="w-full lg:w-3/4 lg:pr-10"> <main class="w-full lg:w-3/4 lg:pr-10">
<slot /> <slot />
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 -mt-4"> <aside class="hidden lg:block relative fixed w-1/4 -mt-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} <div
<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"> 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"> >
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥 Pro Subscription 🔥
@ -271,12 +280,17 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools. Upgrade now for unlimited access to all data and tools.
</span> </span>
</div> </a>
</div> </div>
{/if} {/if}
<div on:click={() => goto('/watchlist/stocks')} 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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/watchlist/stocks"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Watchlist ⭐ Watchlist ⭐
@ -286,11 +300,16 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Build your watchlist to keep track of their performance. Build your watchlist to keep track of their performance.
</span> </span>
</div> </a>
</div> </div>
<div on:click={() => goto('/stock-screener')} 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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/stock-screener"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎 Stock Screener 🔎
@ -300,22 +319,10 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks. Build your Stock Screener to find profitable stocks.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section> </section>

24
src/routes/most-shorted-stocks/+page.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from "$lib/store"; import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import { onMount } from "svelte"; import { onMount } from "svelte";
@ -249,7 +248,6 @@
<tbody> <tbody>
{#each stockList as item, index} {#each stockList as item, index}
<tr <tr
on:click={() => goto(`/stocks/${item?.symbol}`)}
class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index + class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
1 === 1 ===
stockList?.length && data?.user?.tier !== 'Pro' stockList?.length && data?.user?.tier !== 'Pro'
@ -330,10 +328,10 @@
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial} {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div <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" 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 <a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0" 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"> <div class="w-full flex justify-between items-center p-3 mt-3">
@ -345,15 +343,17 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools Upgrade now for unlimited access to all data and tools
</span> </span>
</div> </a>
</div> </div>
{/if} {/if}
<div <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" 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"> <a
href={"/analysts"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊 Top Analyst 📊
@ -363,14 +363,16 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings Get the latest top Wall Street analyst ratings
</span> </span>
</div> </a>
</div> </div>
<div <div
on:click={() => goto("/analysts/top-stocks")}
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" 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"> <a
href={"/analysts/top-stocks"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Top Stocks Picks ⭐ Top Stocks Picks ⭐
@ -380,7 +382,7 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings. Get the latest top Wall Street analyst ratings.
</span> </span>
</div> </a>
</div> </div>
</aside> </aside>
</div> </div>

1006
src/routes/politicians/flow-data/+page.svelte
View File

File diff suppressed because it is too large Load Diff

539
src/routes/price-alert/+page.svelte
View File

@ -1,13 +1,14 @@
<script lang='ts'> <script lang="ts">
import { numberOfUnreadNotification } from '$lib/store'; import { numberOfUnreadNotification } from "$lib/store";
//import { enhance } from '$app/forms'; import { abbreviateNumber } from "$lib/utils";
import toast from 'svelte-french-toast';
import { goto } from '$app/navigation';
import {screenWidth } from '$lib/store';
import MiniPlot from '$lib/components/MiniPlot.svelte';
import { onMount } from 'svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
//import { enhance } from '$app/forms';
import toast from "svelte-french-toast";
import { goto } from "$app/navigation";
import { screenWidth } from "$lib/store";
import MiniPlot from "$lib/components/MiniPlot.svelte";
import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@ -20,14 +21,29 @@ function getCurrentDateFormatted() {
let date = new Date(); let date = new Date();
// If today is Saturday or Sunday, move to the previous Friday // If today is Saturday or Sunday, move to the previous Friday
if (date.getDay() === 6) { // Saturday if (date.getDay() === 6) {
// Saturday
date.setDate(date.getDate() - 1); date.setDate(date.getDate() - 1);
} else if (date.getDay() === 0) { // Sunday } else if (date.getDay() === 0) {
// Sunday
date.setDate(date.getDate() - 2); date.setDate(date.getDate() - 2);
} }
// Define months array for formatting // Define months array for formatting
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
// Get formatted date components // Get formatted date components
const month = months[date.getMonth()]; const month = months[date.getMonth()];
@ -48,31 +64,67 @@ let priceDataDowJones;
let priceDataRussel2000; let priceDataRussel2000;
let changeSP500, changeNasdaq, changeDowJones, changeRussel2000; let changeSP500, changeNasdaq, changeDowJones, changeRussel2000;
let previousCloseSP500, previousCloseNasdaq, previousCloseDowJones, previousCloseRussel2000; let previousCloseSP500,
previousCloseNasdaq,
previousCloseDowJones,
previousCloseRussel2000;
// Assign values based on the symbol // Assign values based on the symbol
rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => { rawData?.forEach(
({ symbol, priceData, changesPercentage, previousClose }) => {
switch (symbol) { switch (symbol) {
case "SPY": case "SPY":
priceDataSP500 = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); priceDataSP500 = priceData?.map(({ time, value }) => ({
priceDataSP500 = priceDataSP500?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) time: Date?.parse(time),
value,
}));
priceDataSP500 = priceDataSP500?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeSP500 = changesPercentage; changeSP500 = changesPercentage;
previousCloseSP500 = previousClose; previousCloseSP500 = previousClose;
break; break;
case "QQQ": case "QQQ":
priceDataNasdaq = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); priceDataNasdaq = priceData?.map(({ time, value }) => ({
priceDataNasdaq = priceDataNasdaq?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) time: Date?.parse(time),
value,
}));
priceDataNasdaq = priceDataNasdaq?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeNasdaq = changesPercentage; changeNasdaq = changesPercentage;
previousCloseNasdaq = previousClose; previousCloseNasdaq = previousClose;
break; break;
case "DIA": case "DIA":
priceDataDowJones = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); priceDataDowJones = priceData?.map(({ time, value }) => ({
priceDataDowJones = priceDataDowJones?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) time: Date?.parse(time),
changeDowJones = changesPercentage value,
}));
priceDataDowJones = priceDataDowJones?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeDowJones = changesPercentage;
previousCloseDowJones = previousClose; previousCloseDowJones = previousClose;
break; break;
case "IWM": case "IWM":
priceDataRussel2000 = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); priceDataRussel2000 = priceData?.map(({ time, value }) => ({
priceDataRussel2000 = priceDataRussel2000?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) time: Date?.parse(time),
value,
}));
priceDataRussel2000 = priceDataRussel2000?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeRussel2000 = changesPercentage; changeRussel2000 = changesPercentage;
previousCloseRussel2000 = previousClose; previousCloseRussel2000 = previousClose;
break; break;
@ -80,25 +132,22 @@ rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => {
// Handle unknown symbol // Handle unknown symbol
break; break;
} }
}); },
);
let isLoaded = false; let isLoaded = false;
let priceAlertList = data?.getPriceAlert; let priceAlertList = data?.getPriceAlert;
function stockSelector(symbol, assetType) { function stockSelector(symbol, assetType) {
if (editMode) { if (editMode) {
} } else {
else { goto(
goto(`/${assetType === 'stock' ? 'stocks' : assetType === 'etf' ? 'etf' : 'crypto'}/${symbol}`) `/${assetType === "stock" ? "stocks" : assetType === "etf" ? "etf" : "crypto"}/${symbol}`,
);
} }
} }
async function handleFilter(priceAlertId) { async function handleFilter(priceAlertId) {
const filterSet = new Set(deletePriceAlertList); const filterSet = new Set(deletePriceAlertList);
// Check if the new filter already exists in the list // Check if the new filter already exists in the list
@ -108,92 +157,83 @@ async function handleFilter(priceAlertId) {
} else { } else {
// If it doesn't exist, add it to the list // If it doesn't exist, add it to the list
filterSet?.add(priceAlertId); filterSet?.add(priceAlertId);
} }
deletePriceAlertList = Array?.from(filterSet); deletePriceAlertList = Array?.from(filterSet);
numberOfChecked = deletePriceAlertList?.length; numberOfChecked = deletePriceAlertList?.length;
} }
async function handleDelete() { async function handleDelete() {
if (numberOfChecked === 0) { if (numberOfChecked === 0) {
toast.error(`You need to select symbols before you can delete them`, { toast.error(`You need to select symbols before you can delete them`, {
style: 'border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);', style:
"border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
}); });
} } else {
else { priceAlertList = priceAlertList?.filter(
(item) => !deletePriceAlertList?.includes(item?.id),
priceAlertList = priceAlertList?.filter(item => !deletePriceAlertList?.includes(item?.id)); );
priceAlertList = [...priceAlertList]; priceAlertList = [...priceAlertList];
const postData = { const postData = {
'priceAlertIdList': deletePriceAlertList, priceAlertIdList: deletePriceAlertList,
'path': 'delete-price-alert' path: "delete-price-alert",
} };
const response = await fetch('/api/fastify-post-data', { const response = await fetch("/api/fastify-post-data", {
method: 'POST', method: "POST",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(postData) body: JSON.stringify(postData),
}); });
deletePriceAlertList = []; deletePriceAlertList = [];
numberOfChecked = 0; numberOfChecked = 0;
editMode = !editMode editMode = !editMode;
} }
} }
onMount(async () => { onMount(async () => {
isLoaded = true; isLoaded = true;
}); });
$: charNumber = $screenWidth < 640 ? 15 : 40; $: charNumber = $screenWidth < 640 ? 15 : 40;
</script> </script>
<svelte:head> <svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Price Alert · stocknear</title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Price
Alert · stocknear</title
>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="description" content="Set a price alert and get instant notification."> <meta
name="description"
content="Set a price alert and get instant notification."
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content="Price Alert · stocknear" /> <meta property="og:title" content="Price Alert · stocknear" />
<meta property="og:description" content="Set a price alert and get instant notification."> <meta
property="og:description"
content="Set a price alert and get instant notification."
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Price Alert · stocknear" /> <meta name="twitter:title" content="Price Alert · stocknear" />
<meta name="twitter:description" content="Set a price alert and get instant notification."> <meta
name="twitter:description"
content="Set a price alert and get instant notification."
/>
<!-- Add more Twitter meta tags as needed --> <!-- 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 lg:px-3"
>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4"> <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
@ -202,17 +242,15 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</div> </div>
<div class="w-full overflow-hidden m-auto mt-5"> <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="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="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5"> <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="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"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row justify-center items-center"> <div class="flex flex-row justify-center items-center">
@ -221,15 +259,24 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</h1> </h1>
</div> </div>
<span class="text-white text-md font-medium text-center flex justify-center items-center "> <span
Get email notifications instantly when your alert goes off, so you never miss out! class="text-white text-md font-medium text-center flex justify-center items-center"
>
Get email notifications instantly when your alert goes off, so
you never miss out!
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"> <div
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 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> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" /> <feGaussianBlur stdDeviation="5" result="glow" />
@ -239,178 +286,290 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</feMerge> </feMerge>
</filter> </filter>
</defs> </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)" /> <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> </svg>
<div class="z-1 absolute top-2"> <div class="z-1 absolute top-2">
<img class="w-[120px] h-fit ml-10" src={cloudFrontUrl+"/assets/price_alert_logo.png"} alt="logo" loading='lazy'> <img
class="w-[120px] h-fit ml-10"
src={cloudFrontUrl + "/assets/price_alert_logo.png"}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
{#if isLoaded} {#if isLoaded}
<div class="sm:hidden"> <div class="sm:hidden">
<div class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0"> <div
class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0"
>
Stock Indexes - {getCurrentDateFormatted()} Stock Indexes - {getCurrentDateFormatted()}
</div> </div>
<div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0"> <div
<div class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 "> class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0"
<MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/> >
<MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/> <div
<MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/> class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3"
<MiniPlot title="Russel" priceData = {priceDataRussel2000} changesPercentage={changeRussel2000} previousClose={previousCloseRussel2000}/> >
<MiniPlot
title="S&P500"
priceData={priceDataSP500}
changesPercentage={changeSP500}
previousClose={previousCloseSP500}
/>
<MiniPlot
title="Nasdaq"
priceData={priceDataNasdaq}
changesPercentage={changeNasdaq}
previousClose={previousCloseNasdaq}
/>
<MiniPlot
title="Dow"
priceData={priceDataDowJones}
changesPercentage={changeDowJones}
previousClose={previousCloseDowJones}
/>
<MiniPlot
title="Russel"
priceData={priceDataRussel2000}
changesPercentage={changeRussel2000}
previousClose={previousCloseRussel2000}
/>
</div> </div>
</div> </div>
</div> </div>
{#if priceAlertList?.length === 0} {#if priceAlertList?.length === 0}
<div class="flex flex-col justify-center items-center m-auto pt-8"> <div
<span class="text-white font-bold text-white text-xl sm:text-3xl"> class="flex flex-col justify-center items-center m-auto pt-8"
>
<span
class="text-white font-bold text-white text-xl sm:text-3xl"
>
No Alerts set No Alerts set
</span> </span>
<span class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center"> <span
Create price alerts for your stocks that have the most potential in your opinion. class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center"
>
Create price alerts for your stocks that have the most
potential in your opinion.
</span> </span>
{#if !data?.user} {#if !data?.user}
<a class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group" href="/register"> <a
class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
href="/register"
>
Get Started Get Started
<span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"> <span
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg> class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
>
<svg
class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><g transform="rotate(90 12 12)"
><g fill="none"
><path
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
/><path
fill="white"
d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
/></g
></g
></svg
>
</span> </span>
</a> </a>
{/if} {/if}
</div> </div>
{:else} {:else}
<div
<div class="flex flex-row justify-end items-center pr-4 sm:pr-0 pb-2"> class="flex flex-row justify-end items-center pr-4 sm:pr-0 pb-2"
>
{#if editMode} {#if editMode}
<label on:click={handleDelete} class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"> <label
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"/></svg> on:click={handleDelete}
class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
>
<svg
class="inline-block w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"
/></svg
>
<span class="ml-1 text-white text-sm"> <span class="ml-1 text-white text-sm">
{numberOfChecked} {numberOfChecked}
</span> </span>
</label> </label>
{/if} {/if}
<label on:click={() => editMode = !editMode} class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"> <label
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="white" d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"/><path fill="white" d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"/></svg> on:click={() => (editMode = !editMode)}
class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
>
<svg
class="inline-block w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
><path
fill="white"
d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
/><path
fill="white"
d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
/></svg
>
{#if !editMode} {#if !editMode}
<span class="ml-1 text-white text-sm"> <span class="ml-1 text-white text-sm"> Edit </span>
Edit
</span>
{:else} {:else}
<span class="ml-1 text-white text-sm"> <span class="ml-1 text-white text-sm"> Cancel </span>
Cancel
</span>
{/if} {/if}
</label> </label>
</div> </div>
<!--Start Table--> <!--Start Table-->
<div class="w-screen sm:w-full rounded-lg overflow-hidden overflow-x-scroll no-scrollbar"> <div
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 "> class="w-screen sm:w-full rounded-lg overflow-hidden overflow-x-scroll no-scrollbar"
>
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
>
<!-- head --> <!-- head -->
<thead> <thead>
<tr class=""> <tr class="">
<th class="text-white font-semibold text-[1rem] ">Symbol</th> <th class="text-white font-semibold text-[1rem]"
<th class="text-white font-semibold text-[1rem] ">Company</th> >Symbol</th
<th class="text-white font-semibold text-end text-[1rem] ">Volume</th> >
<th class="text-white font-semibold text-end text-[1rem] ">Price when Created</th> <th class="text-white font-semibold text-[1rem]"
<th class="text-white font-semibold text-end text-[1rem] ">Price Target</th> >Company</th
<th class="text-white font-semibold text-end text-[1rem] ">Current Price</th> >
<th class="text-white font-semibold text-end text-[1rem] ">Change</th> <th class="text-white font-semibold text-end text-[1rem]"
>Volume</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Price when Created</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Price Target</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Current Price</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Change</th
>
</tr> </tr>
</thead> </thead>
<tbody class="p-3"> <tbody class="p-3">
{#each priceAlertList as item, index} {#each priceAlertList as item, index}
<!-- row --> <!-- row -->
<tr on:click={() => stockSelector(item?.symbol, item?.assetType)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"> <tr
on:click={() =>
<td on:click={() => handleFilter(item?.id)} class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center"> stockSelector(item?.symbol, item?.assetType)}
<input type="checkbox" checked={deletePriceAlertList?.includes(item?.id) ?? false} class="{!editMode ? 'hidden' : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3" /> class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"
>
<td
on:click={() => handleFilter(item?.id)}
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center"
>
<input
type="checkbox"
checked={deletePriceAlertList?.includes(item?.id) ??
false}
class="{!editMode
? 'hidden'
: ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3"
/>
{item?.symbol} {item?.symbol}
</td> </td>
<td on:click={() => handleFilter(item?.id)} class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} on:click={() => handleFilter(item?.id)}
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
: item?.name}
</td> </td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> <td
{new Intl.NumberFormat("en", { class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
minimumFractionDigits: 2, >
maximumFractionDigits: 2 {abbreviateNumber(item?.volume)}
}).format(item?.volume)}
</td> </td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> <td
${item?.priceWhenCreated} class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{item?.priceWhenCreated}
</td> </td>
<td
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
${item?.targetPrice} >
{item?.targetPrice}
</td> </td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> <td
${item.price?.toFixed(2)} class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{item.price?.toFixed(2)}
</td> </td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> <td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{#if item?.changesPercentage >= 0} {#if item?.changesPercentage >= 0}
<span class="text-[#37C97D]">+{item?.changesPercentage?.toFixed(2)}%</span> <span class="text-[#37C97D]"
>+{item?.changesPercentage?.toFixed(2)}%</span
>
{:else} {:else}
<span class="text-[#FF2F1F]">{item?.changesPercentage?.toFixed(2)}% </span> <span class="text-[#FF2F1F]"
>{item?.changesPercentage?.toFixed(2)}%
</span>
{/if} {/if}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<!--End Table--> <!--End Table-->
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <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"> <label
<span class="loading loading-spinner loading-md text-gray-400"></span> 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> </label>
</div> </div>
</div> </div>
{/if} {/if}
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} <div
<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"> on:click={() => goto("/pricing")}
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥 Pro Subscription 🔥
@ -424,8 +583,13 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</div> </div>
{/if} {/if}
<div on:click={() => goto('/watchlist/stocks')} 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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/watchlist/stocks"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Watchlist ⭐ Watchlist ⭐
@ -435,11 +599,16 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Build your watchlist to keep track of their performance. Build your watchlist to keep track of their performance.
</span> </span>
</div> </a>
</div> </div>
<div on:click={() => goto('/stock-screener')} 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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/stock-screener"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎 Stock Screener 🔎
@ -449,18 +618,10 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks. Build your Stock Screener to find profitable stocks.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section> </section>

1
src/routes/sitemap.xml/+server.ts
View File

@ -15,6 +15,7 @@ const pages = [
{ title: "/donation" }, { title: "/donation" },
//{title: "/portfolio"}, //{title: "/portfolio"},
{ title: "/sentiment-tracker" }, { title: "/sentiment-tracker" },
{ title: "/insider-tracker" },
{ title: "/industry" }, { title: "/industry" },
{ title: "/industry/sectors" }, { title: "/industry/sectors" },
{ title: "/industry/all" }, { title: "/industry/all" },

145
src/routes/watchlist/+layout.svelte
View File

@ -1,19 +1,17 @@
<script lang='ts'> <script lang="ts">
import ScrollToTop from '$lib/components/ScrollToTop.svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
import { page } from '$app/stores'; import { page } from "$app/stores";
export let data; export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
function handleMode(i) { function handleMode(i) {
activeIdx = i; activeIdx = i;
if (activeIdx === 0) { if (activeIdx === 0) {
goto("/watchlist/stocks") goto("/watchlist/stocks");
} else if (activeIdx === 1) { } else if (activeIdx === 1) {
goto("/watchlist/options") goto("/watchlist/options");
} }
} }
@ -29,12 +27,11 @@ function handleMode(i) {
let activeIdx = 0; let activeIdx = 0;
// Subscribe to the $page store to reactively update the activeIdx based on the URL // Subscribe to the $page store to reactively update the activeIdx based on the URL
$: if ($page.url.pathname === '/watchlist/stocks') { $: if ($page.url.pathname === "/watchlist/stocks") {
activeIdx = 0; activeIdx = 0;
} else if ($page.url.pathname.startsWith('/watchlist/options')) { } else if ($page.url.pathname.startsWith("/watchlist/options")) {
activeIdx = 1; activeIdx = 1;
} }
</script> </script>
<!-- HEADER FOR BETTER SEO --> <!-- HEADER FOR BETTER SEO -->
@ -43,11 +40,9 @@ let activeIdx = 0;
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
</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 lg:px-3"
>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4"> <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
@ -56,14 +51,14 @@ let activeIdx = 0;
</div> </div>
<div class="w-full overflow-hidden m-auto mt-5"> <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="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="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5"> <main class="w-full lg:w-3/4 lg:pr-5">
<div
<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"> 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"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column --> <!-- Start Column -->
<div> <div>
@ -73,15 +68,24 @@ let activeIdx = 0;
</h1> </h1>
</div> </div>
<span class="text-white text-md font-medium text-center flex justify-center items-center "> <span
Monitor the performance and recent updates of your favorite options. class="text-white text-md font-medium text-center flex justify-center items-center"
>
Monitor the performance and recent updates of your favorite
options.
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"> <div
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 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> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" /> <feGaussianBlur stdDeviation="5" result="glow" />
@ -91,58 +95,68 @@ let activeIdx = 0;
</feMerge> </feMerge>
</filter> </filter>
</defs> </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)" /> <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> </svg>
<div class="z-1 absolute top-3 right-10"> <div class="z-1 absolute top-3 right-10">
<img class="w-24" src={cloudFrontUrl+(activeIdx === 0 ? "/assets/watchlist_logo.png" : "/assets/options_logo.png") } alt="logo" loading='lazy'> <img
class="w-24"
src={cloudFrontUrl +
(activeIdx === 0
? "/assets/watchlist_logo.png"
: "/assets/options_logo.png")}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
<div
class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3"
<div class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3"> >
{#each tabs as item, i} {#each tabs as item, i}
<a href={i === 0 ? '/watchlist/stocks' : '/watchlist/options'} <a
href={i === 0 ? "/watchlist/stocks" : "/watchlist/options"}
on:click={() => handleMode(i)} on:click={() => handleMode(i)}
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
i
? 'z-0' ? 'z-0'
: ''} " : ''} "
> >
{#if activeIdx === i} {#if activeIdx === i}
<div <div class="absolute inset-0 rounded-lg bg-purple-600"></div>
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
{/if} {/if}
<span class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white"> <span
class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white"
>
{item.title} {item.title}
</span> </span>
</a> </a>
{/each} {/each}
</div> </div>
<div class="sm:border-b mt-5 border-slate-700" /> <div class="sm:border-b mt-5 border-slate-700" />
<slot /> <slot />
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} <div
<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"> on:click={() => goto("/pricing")}
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥 Pro Subscription 🔥
@ -156,8 +170,13 @@ let activeIdx = 0;
</div> </div>
{/if} {/if}
<div on:click={() => goto('/price-alert')} 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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/price-alert"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰ Price Alert ⏰
@ -167,11 +186,16 @@ let activeIdx = 0;
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Customize your alerts to never miss out again Customize your alerts to never miss out again
</span> </span>
</div> </a>
</div> </div>
<div on:click={() => goto('/stock-screener')} 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
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<a
href={"/stock-screener"}
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎 Stock Screener 🔎
@ -181,21 +205,10 @@ let activeIdx = 0;
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks. Build your Stock Screener to find profitable stocks.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section> </section>