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

bugfixng watchlist

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-11 16:04:55 +02:00
parent 7942d843cb
commit c29d613774
9 changed files with 97 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/MiniPlot.svelte
View File

@ -15,11 +15,11 @@
const bottomLineColor = '#FF7070'; const bottomLineColor = '#FF7070';
const bottomFillColor1 = 'rgba(239, 83, 80, 0.2)'; const bottomFillColor1 = 'rgba(239, 83, 80, 0.2)';
let width = ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80; let width = ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;
//Initial height of graph //Initial height of graph
let height = 50; let height = $screenWidth < 640 ? 50 : 60;
let observer; let observer;
let ref; let ref;

54
src/lib/components/WatchListCard.svelte
View File

@ -1,27 +1,14 @@
<script lang='ts'> <script lang='ts'>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { userRegion, switchWatchList, screenWidth } from '$lib/store'; import { switchWatchList, screenWidth } from '$lib/store';
import { formatDate, abbreviateNumber } from '$lib/utils'; import { formatDate, abbreviateNumber } from '$lib/utils';
import InfoModal from '$lib/components/InfoModal.svelte'; import InfoModal from '$lib/components/InfoModal.svelte';
export let watchListId; export let watchListId;
export let apiKey;
const usRegion = ['cle1','iad1','pdx1','sfo1']; export let apiURL;
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
const sortTickersByName = (tickerList) => { const sortTickersByName = (tickerList) => {
@ -148,6 +135,7 @@ async function getWatchlistData()
}); });
const output = await response.json(); const output = await response.json();
console.log(output)
try { try {
watchList = sortTickersByChange(output[0]); watchList = sortTickersByChange(output[0]);
@ -340,7 +328,7 @@ if(watchList && isLoaded)
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-10 mb-40"> <section class="w-full overflow-hidden m-auto min-h-screen pt-10 mb-40">
@ -349,7 +337,7 @@ if(watchList && isLoaded)
{#if watchList.length !== 0} {#if watchList.length !== 0}
<div class="flex flex-row items-center mb-5"> <div class="flex flex-row items-center mb-5">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<label for="performanceInfo" class="ml-2 cursor-pointer text-xl font-bold text-gray-300"> <label for="performanceInfo" class="ml-2 cursor-pointer text-xl font-bold text-gray-300">
Performance Performance
@ -405,13 +393,13 @@ if(watchList && isLoaded)
<!-- head --> <!-- head -->
<thead> <thead>
<tr class=""> <tr class="">
<th class="text-white hidden sm:table-cell font-medium text-sm ">Symbol</th> <th class="text-white hidden sm:table-cell font-semibold text-[1rem] ">Symbol</th>
<th class="text-white font-medium text-sm ">Company</th> <th class="text-white font-semibold text-[1rem] ">Company</th>
<th class="text-white font-medium text-center text-sm {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">EPS</th> <th class="text-white font-semibold text-center text-[1rem] {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">EPS</th>
<th class="text-white font-medium text-center text-sm {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">PE Ratio</th> <th class="text-white font-semibold text-center text-[1rem] {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">PE Ratio</th>
<th class="text-white font-medium text-center text-sm {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">Volume</th> <th class="text-white font-semibold text-center text-[1rem] {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">Volume</th>
<th class="text-white font-medium text-center text-sm {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">Market Cap</th> <th class="text-white font-semibold text-center text-[1rem] {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">Market Cap</th>
<th class="text-white font-medium text-end text-sm ">Price</th> <th class="text-white font-semibold text-end text-[1rem] ">Price</th>
</tr> </tr>
</thead> </thead>
<tbody class="p-0"> <tbody class="p-0">
@ -420,11 +408,11 @@ if(watchList && isLoaded)
<tr on:click={() => goto(`/${item?.type === 'stock' ? 'stocks' : item?.type === 'etf' ? 'etf' : 'crypto'}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"> <tr on:click={() => goto(`/${item?.type === 'stock' ? 'stocks' : item?.type === 'etf' ? 'etf' : 'crypto'}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 text-sm text-start border-b-[#09090B]"> <td class="hidden sm:table-cell text-blue-400 text-sm sm:text-[1rem] text-start border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-white border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] border-b-[#09090B]">
<span class="hidden sm:block text-white">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span> <span class="hidden sm:block text-white">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
<div class="sm:hidden flex flex-row"> <div class="sm:hidden flex flex-row">
<div class="flex flex-col"> <div class="flex flex-col">
@ -434,27 +422,27 @@ if(watchList && isLoaded)
</div> </div>
</td> </td>
<td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}"> <td class="text-white text-sm sm:text-[1rem] text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">
{item?.eps !== null ? item?.eps?.toFixed(2) : '-'} {item?.eps !== null ? item?.eps?.toFixed(2) : '-'}
</td> </td>
<td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}"> <td class="text-white text-sm sm:text-[1rem] text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">
{item?.pe !== null ? item?.pe?.toFixed(2) : '-'} {item?.pe !== null ? item?.pe?.toFixed(2) : '-'}
</td> </td>
<td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 2, minimumFractionDigits: 2,
maximumFractionDigits: 2 maximumFractionDigits: 2
}).format(item?.volume)} }).format(item?.volume)}
</td> </td>
<td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B] {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">
{abbreviateNumber(item?.marketCap,true)} {abbreviateNumber(item?.marketCap,true)}
</td> </td>
<td class="border-b-[#09090B]"> <td class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
<div class="flex flex-row justify-end items-center"> <div class="flex flex-row justify-end items-center">
<div class="flex flex-col mt-3"> <div class="flex flex-col mt-3">

51
src/routes/+layout.svelte
View File

@ -267,59 +267,11 @@ $: {
{#if !data?.user}
<header
class="sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} inset-x-0 top-0 z-30 mx-auto w-full max-w-screen-md border border-[#202020] py-3 sm:py-4 shadow-lg sm:backdrop-blur-sm bg-[#202020] sm:bg-opacity-80 md:top-3 md:rounded-2xl lg:max-w-screen-lg">
<div class="px-4">
<div class="flex items-center justify-between">
<div class="flex shrink-0">
<a href="/" class="flex-shrink-0 flex flex-row items-center {!data?.user ? 'ml-4' : 'ml-2'}">
<img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"}
alt="stocknear logo" loading="lazy" />
<div class="flex justify-center items-center text-lg sm:text-xl font-medium mr-auto ml-2">
<span class="self-center text-gray-200 font-semibold whitespace-nowrap">Stocknear</span>
</div>
</a>
</div>
<div class="hidden md:flex md:items-center md:justify-center md:gap-5">
<a aria-current="page"
class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white hover:text-white transition-all duration-200 hover:bg-purple-600"
href="/">Home</a>
<a aria-current="page"
class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white hover:text-white transition-all duration-200 hover:bg-purple-600"
href="/about">About Us</a>
<a class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white hover:text-white transition-all duration-200 hover:bg-purple-600"
href="/pricing">Pricing</a>
</div>
<div class="flex items-center justify-end gap-3">
<a class="items-center justify-center rounded-xl bg-gray-200 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition-all duration-150 hover:bg-white sm:inline-flex"
href="/register">Start Trial</a>
<a class="inline-flex items-center justify-center rounded-xl bg-purple-600 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-all duration-150 hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
href="/login">Login</a>
</div>
</div>
</div>
</header>
<main class="w-full">
<slot />
<Toaster class="bg-[#1A1A27] text-white text-medium"/>
{#if Cookie && $showCookieConsent === true}
<Cookie />
{/if}
{#if !hideFooter}
<Footer/>
{/if}
</main>
{:else }
<div class="flex min-h-screen w-full flex-col bg-[#09090B]"> <div class="flex min-h-screen w-full flex-col bg-[#09090B]">
<Splitpanes class="w-full" theme="no-splitter" horizontal dblClickSplitter={false}> <Splitpanes class="w-full" theme="no-splitter" horizontal dblClickSplitter={false}>
<Pane class="w-full navbar sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6" size={6} minSize={10} maxSize={6}> <Pane size={6} minSize={10} maxSize={6} class="w-full navbar sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
<Sheet.Root> <Sheet.Root>
<Sheet.Trigger asChild let:builder> <Sheet.Trigger asChild let:builder>
@ -1005,7 +957,6 @@ $: {
</div> </div>
{/if}
</div> </div>

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

@ -65,22 +65,22 @@ $: {
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-60"> <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
<div class="text-sm 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>
<li class="text-gray-300">Analysts</li> <li class="text-gray-300">Analysts</li>
</ul> </ul>
</div> </div>
<div class="w-full max-w-4xl 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 max-w-4xl"> <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden w-full"> <div class="relative flex justify-center items-center overflow-hidden w-full">
<main class="w-full"> <main class="w-full">
<div class="w-full max-w-4xl 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 -->
@ -136,27 +136,27 @@ $: {
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"> <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<thead> <thead>
<tr class="bg-[#09090B]"> <tr class="bg-[#09090B]">
<th class="text-end bg-[#09090B] text-white text-sm font-semibold"> <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
# #
</th> </th>
<th class="text-start bg-[#09090B] text-white text-sm font-semibold"> <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
Analyst Analyst
</th> </th>
<th class="text-end bg-[#09090B] text-white text-sm font-semibold"> <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Success Rate Success Rate
</th> </th>
<th class="text-end bg-[#09090B] text-white text-sm font-semibold"> <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Average Return Average Return
</th> </th>
<th class="text-white font-semibold text-end text-sm"> <th class="text-white font-semibold text-end text-[1rem]">
Total Ratings Total Ratings
</th> </th>
<th class="text-end bg-[#09090B] text-white text-sm font-semibold"> <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Main Sector Main Sector
</th> </th>
<th class="text-white font-semibold text-end text-sm"> <th class="text-white font-semibold text-end text-[1rem]">
Last Rating Last Rating
</th> </th>
@ -170,10 +170,10 @@ $: {
{item?.rank} {item?.rank}
</td> </td>
<td class="text-sm text-start"> <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
<div class="flex flex-col items-star w-32"> <div class="flex flex-col items-start">
<span class="text-blue-400 text-sm font-medium">{item?.analystName} </span> <span class="text-blue-400 font-medium">{item?.analystName} </span>
<span class="text-white text-xs">{item?.companyName} </span> <span class="text-white ">{item?.companyName} </span>
<div class="flex flex-row items-center mt-1"> <div class="flex flex-row items-center mt-1">
{#each Array.from({ length: 5 }) as _, i} {#each Array.from({ length: 5 }) as _, i}
{#if i < Math.floor(item?.analystScore)} {#if i < Math.floor(item?.analystScore)}
@ -187,7 +187,7 @@ $: {
{/if} {/if}
{/each} {/each}
<span class="ml-1 text-sm text-gray-400"> <span class="ml-1 text-gray-400">
({item?.analystScore !== null ? item?.analystScore : 0}) ({item?.analystScore !== null ? item?.analystScore : 0})
</span> </span>
@ -198,13 +198,13 @@ $: {
<td class="text-end text-sm font-semibold text-white"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold text-white">
{#if Number(item?.successRate) >= 0} {#if Number(item?.successRate) >= 0}
<span class="text-[#37C97D]">{Number(item?.successRate)?.toFixed(2)}%</span> <span class="text-[#37C97D]">{Number(item?.successRate)?.toFixed(2)}%</span>
{/if} {/if}
</td> </td>
<td class="text-end text-sm font-semibold text-white"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold text-white">
{#if Number(item?.avgReturn) >= 0} {#if Number(item?.avgReturn) >= 0}
<span class="text-[#37C97D]">{Number(item?.avgReturn)?.toFixed(2)}%</span> <span class="text-[#37C97D]">{Number(item?.avgReturn)?.toFixed(2)}%</span>
{:else} {:else}
@ -212,16 +212,16 @@ $: {
{/if} {/if}
</td> </td>
<td class="text-end font-semibold text-white text-sm"> <td class="text-end font-semibold text-white text-sm sm:text-[1rem] whitespace-nowrap">
{item?.totalRatings} {item?.totalRatings}
</td> </td>
<td class="text-white text-sm text-white text-end"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-end">
{item?.mainSectors?.at(0)} {item?.mainSectors?.at(0)}
</td> </td>
<td class="text-end text-sm whitespace-nowrap text-white"> <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white">
{item?.lastRating !== null ? new Date(item?.lastRating)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} {item?.lastRating !== null ? new Date(item?.lastRating)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
</td> </td>

30
src/routes/analysts/[slug]/+page.svelte
View File

@ -122,9 +122,9 @@ function sectorSelector(sector) {
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-60"> <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
<div class="text-sm 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>
<li><a href="/analysts" class="text-gray-300">Analysts</a></li> <li><a href="/analysts" class="text-gray-300">Analysts</a></li>
@ -133,9 +133,9 @@ function sectorSelector(sector) {
</div> </div>
<div class="w-full max-w-4xl overflow-hidden m-auto "> <div class="w-full overflow-hidden m-auto ">
<div class="p-0 flex justify-center w-full m-auto overflow-hidden max-w-4xl"> <div class="p-0 flex justify-center w-full m-auto overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden w-full"> <div class="relative flex justify-center items-center overflow-hidden w-full">
<main class="w-full"> <main class="w-full">
@ -231,17 +231,17 @@ function sectorSelector(sector) {
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"> <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<thead> <thead>
<tr class="bg-[#09090B]"> <tr class="bg-[#09090B]">
<th class="text-start bg-[#09090B] text-gray-200 text-sm font-bold"> <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
Stock Stock
</th> </th>
<th class="text-start bg-[#09090B] text-white text-sm font-bold"> <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
Action Action
</th> </th>
<th class="text-end bg-[#09090B] text-white text-sm font-bold"> <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Price Target Price Target
</th> </th>
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]"> <th class="text-white font-semibold text-end text-[1rem]">
Date Date
</th> </th>
</tr> </tr>
@ -251,25 +251,25 @@ function sectorSelector(sector) {
<tr on:click={() => goto(`/stocks/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer"> <tr on:click={() => goto(`/stocks/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
<td class="text-sm text-start whitespace-nowrap"> <td class="text-sm sm:text-[1rem] text-start whitespace-nowrap">
<div class="flex flex-col items-start "> <div class="flex flex-col items-start ">
<span class="text-blue-400 text-sm">{item?.ticker} </span> <span class="text-blue-400 text-sm">{item?.ticker} </span>
<span class="text-white/80 text-xs ">{item?.name} </span> <span class="text-white">{item?.name} </span>
</div> </div>
</td> </td>
<td class="text-sm text-start whitespace-nowrap"> <td class="text-sm sm:text-[1rem] text-start whitespace-nowrap">
<div class="flex flex-col sm:flex-row items-start"> <div class="flex flex-col sm:flex-row items-start">
<span class="text-sm font-medium text-white mr-1">{item?.action_company}:</span> <span class="font-medium text-white mr-1">{item?.action_company}:</span>
<span class="text-xs sm:text-sm font-medium {['Strong Buy', 'Buy']?.includes(item?.rating_current) ? 'text-[#10DB06]' : item?.rating_current === 'Hold' ? 'text-[#FF7070]' : ['Strong Sell','Sell']?.includes(item?.rating_current) ? 'text-[#FF2F1F]' : 'text-gray-300'}"> <span class="font-medium {['Strong Buy', 'Buy']?.includes(item?.rating_current) ? 'text-[#10DB06]' : item?.rating_current === 'Hold' ? 'text-[#FF7070]' : ['Strong Sell','Sell']?.includes(item?.rating_current) ? 'text-[#FF2F1F]' : 'text-gray-300'}">
{item?.rating_current} {item?.rating_current}
</span> </span>
</div> </div>
</td> </td>
<td class="text-white text-sm whitespace-nowrap"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap">
<div class="flex flex-row items-center justify-end"> <div class="flex flex-row items-center justify-end">
{#if Math?.ceil(item?.adjusted_pt_prior) !== 0} {#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
<span class="text-gray-100 font-normal">${Math?.ceil(item?.adjusted_pt_prior)}</span> <span class="text-gray-100 font-normal">${Math?.ceil(item?.adjusted_pt_prior)}</span>
@ -281,7 +281,7 @@ function sectorSelector(sector) {
</div> </div>
</td> </td>
<td class="text-white text-end font-medium text-sm whitespace-nowrap"> <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap">
{new Date(item?.date).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(item?.date).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td> </td>

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

@ -119,11 +119,11 @@
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40"> <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
<div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-10 sm:mt-3 mb-8"> <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-10 sm:mt-3 mb-8">
<div class="grid grid-cols-1 sm:grid-cols-2"> <div class="grid grid-cols-1 sm:grid-cols-2">
<!-- Start Column --> <!-- Start Column -->
@ -171,11 +171,9 @@
</div> </div>
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl 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">

6
src/routes/market-mover/+page.svelte
View File

@ -255,7 +255,7 @@ $: {
</svelte:head> </svelte:head>
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-2 pb-40 bg-[#09090B]"> <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
<!-- <!--
<div class="text-sm breadcrumbs ml-4"> <div class="text-sm breadcrumbs ml-4">
@ -269,7 +269,7 @@ $: {
--> -->
<div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm:mb-8"> <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm: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 -->
@ -318,7 +318,7 @@ $: {
</div> </div>
<div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-center items-center p-3 sm:p-0"> <div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-center items-center p-3 sm:p-0">
<div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 "> <div class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-y-3 lg:gap-y-0 gap-x-3 ">
<MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/> <MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
<MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/> <MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
<MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/> <MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>

100
src/routes/stock-splits-calendar/+page.svelte
View File

@ -265,18 +265,17 @@
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-4 pb-40"> <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
<!--
<div class="text-sm 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>
<li class="text-gray-300">Stock Splits Calendar</li> <li class="text-gray-300">Stock Splits Calendar</li>
</ul> </ul>
</div> </div>
-->
<div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pt-10 sm:pb-10 sm: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:pt-10 sm:pb-10 sm: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 -->
@ -324,7 +323,7 @@
</div> </div>
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -366,14 +365,15 @@
{#each weekday as day,index} {#each weekday as day,index}
{#if index === selectedWeekday} {#if index === selectedWeekday}
{#if day?.length !== 0} {#if day?.length !== 0}
<table class="hidden sm:inline-table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 "> <div class="w-full overflow-x-scroll">
<table class="table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr> <tr>
<th class="text-slate-200 font-medium text-sm text-start">Symbol</th> <th class="text-slate-200 font-semibold text-[1rem] text-start">Symbol</th>
<th class="text-slate-200 font-medium text-sm text-start">Company Name</th> <th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-start">Company Name</th>
<th class="text-slate-200 font-medium hidden sm:table-cell text-sm text-start">Earnings per Share</th> <th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-start">Earnings per Share</th>
<th class="text-slate-200 font-medium text-sm text-start">Market Cap</th> <th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-start">Market Cap</th>
<th class="text-slate-200 font-medium text-sm text-end">Split</th> <th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-end">Split</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -381,23 +381,23 @@
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="text-blue-400 border-b-[#09090B]"> <td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-white border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > 40 ? item?.name?.slice(0,40) + "..." : item?.name} {item?.name?.length > 40 ? item?.name?.slice(0,40) + "..." : item?.name}
</td> </td>
<td class="text-white font-medium hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
{item?.eps !== null ? item?.eps : '-'} {item?.eps !== null ? item?.eps : '-'}
</td> </td>
<td class="text-white font-medium border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
{item?.marketCap !== null ? '$' + abbreviateNumber(item?.marketCap) : '-'} {item?.marketCap !== null ? '$' + abbreviateNumber(item?.marketCap) : '-'}
</td> </td>
<td class="text-white font-medium text-sm text-end mr-1 border-b-[#09090B]"> <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end mr-1 border-b-[#09090B]">
<span class="">From {item?.denominator} to {item?.numerator}</span> <span class="">From {item?.denominator} to {item?.numerator}</span>
</td> </td>
@ -410,70 +410,8 @@
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div>
<div class="relative p-2 sm:hidden pt-5">
{#each day as item}
<div class="bg-[#09090B] rounded-lg border border-slate-800 h-auto pb-3 pl-2 pr-2 pt-4 mb-7">
<div class="flex flex-row items-center">
<div class="rounded-full w-10 h-10 relative bg-[#101112] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy"/>
</div>
<label on:click={() => goto("/stocks/"+item?.symbol)} class="cursor-pointer flex flex-col ml-3 w-40">
<span class="text-blue-400 text-sm">{item?.symbol}</span>
<span class="text-white text-sm">{item?.name}</span>
</label>
<div class="flex flex-col justify-end items-end ml-auto">
<span class="font-medium text-slate-300 text-ends">Split</span>
<span class="text-white text-md text-end">
From {item?.denominator} to {item?.numerator}
</span>
</div>
</div>
<div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
<div class="flex flex-row items-center">
<div class="flex flex-col ml-3 w-40">
<span class="font-medium text-slate-300">Market Cap</span>
<span class="text-white text-md">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
</span>
</div>
<div class="flex flex-col justify-end items-end ml-auto">
<span class="font-medium text-slate-300 text-end">EPS</span>
<span class="text-white text-md text-end">
{item?.eps !== null ? item?.eps : '-'}
</span>
</div>
</div>
<div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
<div class="flex flex-row items-center">
<div class="flex flex-col ml-3 w-40">
<span class="font-medium text-slate-300">Revenue</span>
<span class="text-white text-md">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</span>
</div>
<div class="flex flex-col justify-end items-end ml-auto">
<span class="font-medium text-slate-300 text-ends">Profit</span>
<span class="text-white text-md text-end">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</span>
</div>
</div>
</div>
{/each}
<ScrollToTop />
</div>
{:else} {:else}
<h2 class="mt-20 flex justify-center items-center text-xl sm:text-2xl font-bold text-slate-700 mb-5 m-auto"> <h2 class="mt-20 flex justify-center items-center text-xl sm:text-2xl font-bold text-slate-700 mb-5 m-auto">

29
src/routes/watchlist/+page.svelte
View File

@ -7,23 +7,12 @@ import { Drawer } from "vaul-svelte";
import Input from '$lib/components/Input.svelte'; import Input from '$lib/components/Input.svelte';
import WatchListCard from '$lib/components/WatchListCard.svelte'; import WatchListCard from '$lib/components/WatchListCard.svelte';
import { userRegion, screenWidth, switchWatchList } from '$lib/store'; import {screenWidth, switchWatchList } from '$lib/store';
import MiniPlot from '$lib/components/MiniPlot.svelte'; import MiniPlot from '$lib/components/MiniPlot.svelte';
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let fastifyURL;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
} else {
fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
}
});
export let data; export let data;
@ -122,7 +111,7 @@ async function createWatchList(event) {
} }
try { try {
const response = await fetch(fastifyURL + '/create-watchlist', { const response = await fetch(data?.fastifyURL + '/create-watchlist', {
method: 'POST', method: 'POST',
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
@ -188,7 +177,7 @@ async function editNameWatchList(event) {
} }
try { try {
const response = await fetch(fastifyURL + '/edit-name-watchlist', { const response = await fetch(data?.fastifyURL + '/edit-name-watchlist', {
method: 'POST', method: 'POST',
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
@ -249,7 +238,7 @@ async function deleteWatchList(event) {
try { try {
const response = await fetch(fastifyURL + '/delete-watchlist', { const response = await fetch(data?.fastifyURL + '/delete-watchlist', {
method: 'POST', method: 'POST',
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
@ -296,7 +285,7 @@ async function deleteWatchList(event) {
async function getAllListData() async function getAllListData()
{ {
const postData = {'userId': data?.user?.id} const postData = {'userId': data?.user?.id}
const response = await fetch(fastifyURL+'/all-watchlists', { const response = await fetch(data?.fastifyURL+'/all-watchlists', {
method: 'POST', method: 'POST',
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
@ -376,7 +365,7 @@ onDestroy( () => {
<div class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40"> <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
<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">
@ -424,7 +413,7 @@ onDestroy( () => {
{#if isLoaded} {#if isLoaded}
<div class="w-full -mt-6 mb-8 m-auto flex justify-center items-center p-3"> <div class="w-full -mt-6 mb-8 m-auto flex justify-center items-center p-3">
<div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 "> <div class="w-full grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-y-3 lg:gap-y-0 gap-x-3 ">
<MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/> <MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
<MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/> <MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
<MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/> <MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
@ -500,6 +489,8 @@ onDestroy( () => {
<WatchListCard <WatchListCard
watchListId={displayWatchList?.id} watchListId={displayWatchList?.id}
apiURL = {data?.apiURL}
apiKey = {data?.apiKey}
/> />
@ -515,7 +506,7 @@ onDestroy( () => {
{/if} {/if}
</div> </section>