bugfixng watchlist
This commit is contained in:
MuslemRahimi
parent
7942d843cb
commit
c29d613774
@ -15,11 +15,11 @@
|
||||
const bottomLineColor = '#FF7070';
|
||||
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
|
||||
let height = 50;
|
||||
let height = $screenWidth < 640 ? 50 : 60;
|
||||
|
||||
let observer;
|
||||
let ref;
|
||||
|
||||
@ -1,27 +1,14 @@
|
||||
<script lang='ts'>
|
||||
import { onMount } from 'svelte';
|
||||
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 InfoModal from '$lib/components/InfoModal.svelte';
|
||||
|
||||
export let watchListId;
|
||||
|
||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
export let apiKey;
|
||||
export let apiURL;
|
||||
|
||||
|
||||
|
||||
const sortTickersByName = (tickerList) => {
|
||||
@ -148,6 +135,7 @@ async function getWatchlistData()
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
console.log(output)
|
||||
|
||||
try {
|
||||
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}
|
||||
|
||||
|
||||
<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">
|
||||
<label for="performanceInfo" class="ml-2 cursor-pointer text-xl font-bold text-gray-300">
|
||||
Performance
|
||||
@ -405,13 +393,13 @@ if(watchList && isLoaded)
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr class="">
|
||||
<th class="text-white hidden sm:table-cell font-medium text-sm ">Symbol</th>
|
||||
<th class="text-white font-medium text-sm ">Company</th>
|
||||
<th class="text-white font-medium text-center text-sm {$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-medium text-center text-sm {$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-medium text-end text-sm ">Price</th>
|
||||
<th class="text-white hidden sm:table-cell font-semibold text-[1rem] ">Symbol</th>
|
||||
<th class="text-white font-semibold text-[1rem] ">Company</th>
|
||||
<th class="text-white font-semibold text-center text-[1rem] {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">EPS</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-semibold text-center text-[1rem] {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">Volume</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-semibold text-end text-[1rem] ">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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">
|
||||
|
||||
|
||||
<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}
|
||||
</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>
|
||||
<div class="sm:hidden flex flex-row">
|
||||
<div class="flex flex-col">
|
||||
@ -434,27 +422,27 @@ if(watchList && isLoaded)
|
||||
</div>
|
||||
</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) : '-'}
|
||||
</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) : '-'}
|
||||
</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", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
}).format(item?.volume)}
|
||||
</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)}
|
||||
</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-col mt-3">
|
||||
|
||||
@ -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]">
|
||||
|
||||
<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.Trigger asChild let:builder>
|
||||
@ -1005,7 +957,6 @@ $: {
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Analysts</li>
|
||||
</ul>
|
||||
</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">
|
||||
<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">
|
||||
|
||||
<!-- 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">
|
||||
<thead>
|
||||
<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 class="text-start bg-[#09090B] text-white text-sm font-semibold">
|
||||
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
Analyst
|
||||
</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
|
||||
</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
|
||||
</th>
|
||||
<th class="text-white font-semibold text-end text-sm">
|
||||
<th class="text-white font-semibold text-end text-[1rem]">
|
||||
Total Ratings
|
||||
</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
|
||||
</th>
|
||||
<th class="text-white font-semibold text-end text-sm">
|
||||
<th class="text-white font-semibold text-end text-[1rem]">
|
||||
Last Rating
|
||||
</th>
|
||||
|
||||
@ -170,10 +170,10 @@ $: {
|
||||
{item?.rank}
|
||||
</td>
|
||||
|
||||
<td class="text-sm text-start">
|
||||
<div class="flex flex-col items-star w-32">
|
||||
<span class="text-blue-400 text-sm font-medium">{item?.analystName} </span>
|
||||
<span class="text-white text-xs">{item?.companyName} </span>
|
||||
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-blue-400 font-medium">{item?.analystName} </span>
|
||||
<span class="text-white ">{item?.companyName} </span>
|
||||
<div class="flex flex-row items-center mt-1">
|
||||
{#each Array.from({ length: 5 }) as _, i}
|
||||
{#if i < Math.floor(item?.analystScore)}
|
||||
@ -187,7 +187,7 @@ $: {
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<span class="ml-1 text-sm text-gray-400">
|
||||
<span class="ml-1 text-gray-400">
|
||||
({item?.analystScore !== null ? item?.analystScore : 0})
|
||||
</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}
|
||||
<span class="text-[#37C97D]">{Number(item?.successRate)?.toFixed(2)}%</span>
|
||||
{/if}
|
||||
</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}
|
||||
<span class="text-[#37C97D]">{Number(item?.avgReturn)?.toFixed(2)}%</span>
|
||||
{:else}
|
||||
@ -212,16 +212,16 @@ $: {
|
||||
{/if}
|
||||
</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}
|
||||
</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)}
|
||||
</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'}
|
||||
</td>
|
||||
|
||||
|
||||
@ -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>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li><a href="/analysts" class="text-gray-300">Analysts</a></li>
|
||||
@ -133,9 +133,9 @@ function sectorSelector(sector) {
|
||||
</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">
|
||||
<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">
|
||||
<thead>
|
||||
<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
|
||||
</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
|
||||
</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
|
||||
</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
|
||||
</th>
|
||||
</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">
|
||||
|
||||
<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 ">
|
||||
<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>
|
||||
|
||||
</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">
|
||||
<span class="text-sm 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 text-white mr-1">{item?.action_company}:</span>
|
||||
<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}
|
||||
</span>
|
||||
</div>
|
||||
</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">
|
||||
{#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
|
||||
<span class="text-gray-100 font-normal">${Math?.ceil(item?.adjusted_pt_prior)}</span>
|
||||
@ -281,7 +281,7 @@ function sectorSelector(sector) {
|
||||
</div>
|
||||
</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' })}
|
||||
</td>
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
<!-- Start Column -->
|
||||
@ -171,11 +171,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<div class="relative flex flex-col flex-1 overflow-hidden">
|
||||
|
||||
|
||||
@ -255,7 +255,7 @@ $: {
|
||||
|
||||
</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">
|
||||
@ -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">
|
||||
|
||||
<!-- Start Column -->
|
||||
@ -318,7 +318,7 @@ $: {
|
||||
</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 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="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
|
||||
<MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
|
||||
|
||||
@ -265,18 +265,17 @@
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-4 pb-40">
|
||||
<!--
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
<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 sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Stock Splits Calendar</li>
|
||||
</ul>
|
||||
</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">
|
||||
|
||||
<!-- Start Column -->
|
||||
@ -324,7 +323,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 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}
|
||||
{#if index === selectedWeekday}
|
||||
{#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>
|
||||
<tr>
|
||||
<th class="text-slate-200 font-medium text-sm text-start">Symbol</th>
|
||||
<th class="text-slate-200 font-medium text-sm 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-medium text-sm 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 text-[1rem] text-start">Symbol</th>
|
||||
<th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-start">Company Name</th>
|
||||
<th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-start">Earnings per Share</th>
|
||||
<th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-start">Market Cap</th>
|
||||
<th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-end">Split</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -381,23 +381,23 @@
|
||||
<!-- 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">
|
||||
|
||||
<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}
|
||||
</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}
|
||||
</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 : '-'}
|
||||
</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) : '-'}
|
||||
</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>
|
||||
</td>
|
||||
|
||||
@ -410,70 +410,8 @@
|
||||
{/each}
|
||||
</tbody>
|
||||
</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}
|
||||
<h2 class="mt-20 flex justify-center items-center text-xl sm:text-2xl font-bold text-slate-700 mb-5 m-auto">
|
||||
|
||||
@ -7,23 +7,12 @@ import { Drawer } from "vaul-svelte";
|
||||
|
||||
import Input from '$lib/components/Input.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';
|
||||
|
||||
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;
|
||||
|
||||
@ -122,7 +111,7 @@ async function createWatchList(event) {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(fastifyURL + '/create-watchlist', {
|
||||
const response = await fetch(data?.fastifyURL + '/create-watchlist', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
@ -188,7 +177,7 @@ async function editNameWatchList(event) {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(fastifyURL + '/edit-name-watchlist', {
|
||||
const response = await fetch(data?.fastifyURL + '/edit-name-watchlist', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
@ -249,7 +238,7 @@ async function deleteWatchList(event) {
|
||||
|
||||
try {
|
||||
|
||||
const response = await fetch(fastifyURL + '/delete-watchlist', {
|
||||
const response = await fetch(data?.fastifyURL + '/delete-watchlist', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
@ -296,7 +285,7 @@ async function deleteWatchList(event) {
|
||||
async function getAllListData()
|
||||
{
|
||||
const postData = {'userId': data?.user?.id}
|
||||
const response = await fetch(fastifyURL+'/all-watchlists', {
|
||||
const response = await fetch(data?.fastifyURL+'/all-watchlists', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"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">
|
||||
@ -424,7 +413,7 @@ onDestroy( () => {
|
||||
{#if isLoaded}
|
||||
|
||||
<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="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
|
||||
<MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
|
||||
@ -500,6 +489,8 @@ onDestroy( () => {
|
||||
|
||||
<WatchListCard
|
||||
watchListId={displayWatchList?.id}
|
||||
apiURL = {data?.apiURL}
|
||||
apiKey = {data?.apiKey}
|
||||
/>
|
||||
|
||||
|
||||
@ -515,7 +506,7 @@ onDestroy( () => {
|
||||
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user