add dark pool flow
This commit is contained in:
MuslemRahimi
parent
df8a7b3aaf
commit
e33587bb6d
@ -754,14 +754,14 @@ class="fixed 2xl:block top-0 left-0 xl:left-auto w-56 sm:{collapse ? 'w-20' : 'w
|
||||
{#if politicianGuide}
|
||||
<ul class="mt-2">
|
||||
<li on:click={() => showSidebar = !showSidebar} class="mb-1 last:mb-0 hover:bg-[#272727] rounded-md {$page.url.pathname=== '/options-zero-dte' ? 'text-white bg-[#272727] xl:bg-[#0F0F0F] rounded-md ' : ''}">
|
||||
<a href={"/politicians/flow-data"} for="sidebar" class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
||||
<a href={"/politicians/flow-data"} class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
||||
<span class="text-sm font-medium text-white ">
|
||||
Flow Data
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li on:click={() => showSidebar = !showSidebar} class="mb-1 last:mb-0 hover:bg-[#272727] rounded-md {$page.url.pathname=== '/options-flow' ? 'text-white bg-[#272727] xl:bg-[#0F0F0F] rounded-md ' : ''}">
|
||||
<a href={"/politicians"} for="sidebar" class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
||||
<a href={"/politicians"} class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
||||
<span class="text-sm font-medium text-white ">
|
||||
Politicians
|
||||
</span>
|
||||
@ -772,7 +772,20 @@ class="fixed 2xl:block top-0 left-0 xl:left-auto w-56 sm:{collapse ? 'w-20' : 'w
|
||||
</li>
|
||||
|
||||
<li on:click={() => showSidebar = !showSidebar} class="px-1 rounded-sm mb-2 last:mb-0">
|
||||
<a href={"/hedge-funds"} for="sidebar" class="block text-slate-200 hover:text-white truncate transition duration-150 {$page?.url?.pathname?.startsWith('/hedge-funds') ? 'text-white bg-[#272727] xl:bg-[#0F0F0F] rounded-md ' : ''}">
|
||||
<a href="/dark-pool-flow" class="block text-slate-200 hover:text-white truncate transition duration-150 {$page?.url?.pathname?.startsWith('/dark-pool-flow') ? 'text-white bg-[#272727] xl:bg-[#0F0F0F] rounded-md ' : ''}">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#CCCCCC" d="M224 16c-6.7 0-10.8-2.8-15.5-6.1C201.9 5.4 194 0 176 0c-30.5 0-52 43.7-66 89.4c-47.3 8.7-78 22.8-78 38.6c0 14.3 25 27.1 64.6 35.9c-.4 4-.6 8-.6 12.1c0 17 3.3 33.2 9.3 48H45.4C38 224 32 230 32 237.4c0 1.7.3 3.4 1 5l38.8 96.9C28.2 371.8 0 423.8 0 482.3C0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7c0-58.5-28.2-110.4-71.7-143l38.7-96.9c.6-1.6 1-3.3 1-5c0-7.4-6-13.4-13.4-13.4h-59.9c6-14.8 9.3-31 9.3-48c0-4.1-.2-8.1-.6-12.1C391 155.1 416 142.3 416 128c0-15.8-30.7-29.9-78-38.6C324 43.7 302.5 0 272 0c-18 0-25.9 5.4-32.5 9.9c-4.8 3.3-8.8 6.1-15.5 6.1m56 208h-12.4c-16.5 0-31.1-10.6-36.3-26.2c-2.3-7-12.2-7-14.5 0c-5.2 15.6-19.9 26.2-36.3 26.2H168c-22.1 0-40-17.9-40-40v-14.4c28.2 4.1 61 6.4 96 6.4s67.8-2.3 96-6.4V184c0 22.1-17.9 40-40 40m-88 96l16 32l-32 128l-48-192zm128-32l-48 192l-32-128l16-32z"/></svg>
|
||||
<span class="2xl:{collapse ? 'hidden' : ''} text-md font-medium ml-3 duration-200">
|
||||
Dark Pool
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li on:click={() => showSidebar = !showSidebar} class="px-1 rounded-sm mb-2 last:mb-0">
|
||||
<a href={"/hedge-funds"} class="block text-slate-200 hover:text-white truncate transition duration-150 {$page?.url?.pathname?.startsWith('/hedge-funds') ? 'text-white bg-[#272727] xl:bg-[#0F0F0F] rounded-md ' : ''}">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="#CCCCCC" xmlns="http://www.w3.org/2000/svg"><path opacity="0.97" d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM8.31 16.31C7.59 16.31 7 15.72 7 15C7 14.28 7.59 13.69 8.31 13.69C9.03 13.69 9.62 14.28 9.62 15C9.62 15.72 9.03 16.31 8.31 16.31ZM12 10.31C11.28 10.31 10.69 9.72 10.69 9C10.69 8.28 11.28 7.69 12 7.69C12.72 7.69 13.31 8.28 13.31 9C13.31 9.72 12.72 10.31 12 10.31ZM15.69 16.31C14.97 16.31 14.38 15.72 14.38 15C14.38 14.28 14.97 13.69 15.69 13.69C16.41 13.69 17 14.28 17 15C17 15.72 16.41 16.31 15.69 16.31Z" fill="currentColor"></path></svg>
|
||||
@ -787,7 +800,7 @@ class="fixed 2xl:block top-0 left-0 xl:left-auto w-56 sm:{collapse ? 'w-20' : 'w
|
||||
|
||||
|
||||
<li on:click={() => showSidebar = !showSidebar} class="px-1 rounded-sm mb-2 last:mb-0">
|
||||
<a href={'/market-news'} for="sidebar" class="block text-slate-200 hover:text-white truncate transition duration-150 {['/market-news','/market-news/crypto','/market-news/general']?.includes($page.url.pathname) ? 'text-white bg-[#272727] xl:bg-[#0F0F0F] rounded-md ' : ''}">
|
||||
<a href={'/market-news'} class="block text-slate-200 hover:text-white truncate transition duration-150 {['/market-news','/market-news/crypto','/market-news/general']?.includes($page.url.pathname) ? 'text-white bg-[#272727] xl:bg-[#0F0F0F] rounded-md ' : ''}">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#CCCCCC" fill-rule="evenodd" d="M18 4v3h3a1 1 0 0 1 1 1v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1m2 14a1 1 0 1 1-2 0V9h2zM6 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1m2 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>
|
||||
|
||||
409
src/routes/dark-pool-flow/+page.svelte
Normal file
409
src/routes/dark-pool-flow/+page.svelte
Normal file
@ -0,0 +1,409 @@
|
||||
<script lang='ts'>
|
||||
import { goto } from '$app/navigation';
|
||||
import { numberOfUnreadNotification, screenWidth, isOpen } from '$lib/store';
|
||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
|
||||
|
||||
|
||||
export let data;
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
|
||||
let isLoaded = false;
|
||||
let rawData = []
|
||||
let displayList = [];
|
||||
let mostFrequentTicker;
|
||||
let highestVolumeTicker;
|
||||
let highestSizeTicker;
|
||||
let displayDate;
|
||||
|
||||
function getLastDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
|
||||
// Check if it is open
|
||||
if ($isOpen) {
|
||||
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
} else {
|
||||
const dayOfWeek = date.getDay(); // 0 (Sunday) to 6 (Saturday)
|
||||
|
||||
// Check if it is a weekday (Monday to Friday)
|
||||
if (dayOfWeek >= 1 && dayOfWeek <= 5) {
|
||||
// Subtract one day
|
||||
date.setDate(date.getDate() - 1);
|
||||
} else {
|
||||
// Find the last weekday of the week
|
||||
// If it's Saturday, go back to Friday
|
||||
// If it's Sunday, go back to Friday
|
||||
if (dayOfWeek === 6) {
|
||||
date.setDate(date.getDate() - 1);
|
||||
} else if (dayOfWeek === 0) {
|
||||
date.setDate(date.getDate() - 2);
|
||||
}
|
||||
}
|
||||
|
||||
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
}
|
||||
}
|
||||
function formatTime(dateString) {
|
||||
// Parse the date string to a Date object
|
||||
const date = new Date(dateString);
|
||||
|
||||
// Extract hours, minutes, and seconds
|
||||
const hours = String(date.getUTCHours()).padStart(2, '0');
|
||||
const minutes = String(date.getUTCMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getUTCSeconds()).padStart(2, '0');
|
||||
|
||||
// Format time as hh:mm:ss
|
||||
return `${hours}:${minutes}:${seconds}`;
|
||||
|
||||
}
|
||||
|
||||
function findMostFrequentTicker(data) {
|
||||
const tickerCountMap = new Map();
|
||||
// Iterate through the data and update the count for each ticker
|
||||
data?.forEach(item => {
|
||||
const ticker = item?.symbol;
|
||||
if (tickerCountMap?.has(ticker)) {
|
||||
tickerCountMap?.set(ticker, tickerCountMap?.get(ticker) + 1);
|
||||
} else {
|
||||
tickerCountMap?.set(ticker, 1);
|
||||
}
|
||||
});
|
||||
|
||||
let maxTicker;
|
||||
let maxCount = -1;
|
||||
|
||||
// Find the ticker with the highest count
|
||||
tickerCountMap?.forEach((count, ticker) => {
|
||||
if (count > maxCount) {
|
||||
maxCount = count;
|
||||
maxTicker = ticker;
|
||||
}
|
||||
});
|
||||
|
||||
return { ticker: maxTicker, count: maxCount };
|
||||
}
|
||||
|
||||
|
||||
function findHighestVolume(data) {
|
||||
let maxVolume = -1;
|
||||
let maxVolumeTicker = null;
|
||||
|
||||
// Iterate through the data and find the ticker with the highest volume
|
||||
data?.forEach(item => {
|
||||
const volume = parseInt(item?.volume); // Assuming volume is a string, parse it to an integer
|
||||
if (volume > maxVolume) {
|
||||
maxVolume = volume;
|
||||
maxVolumeTicker = item?.symbol;
|
||||
}
|
||||
});
|
||||
|
||||
return { ticker: maxVolumeTicker, volume: maxVolume };
|
||||
}
|
||||
|
||||
function findHighestSize(data) {
|
||||
let maxSize = -1;
|
||||
let maxSizeTicker = null;
|
||||
|
||||
// Iterate through the data and find the ticker with the highest cost basis
|
||||
data?.forEach(item => {
|
||||
if (item?.size > maxSize) {
|
||||
maxSize = item?.size;
|
||||
maxSizeTicker = item?.symbol;
|
||||
}
|
||||
});
|
||||
|
||||
return { ticker: maxSizeTicker, size: maxSize };
|
||||
}
|
||||
|
||||
async function infiniteHandler({ detail: { loaded, complete } })
|
||||
{
|
||||
if (displayList?.length === rawData?.length) {
|
||||
complete();
|
||||
} else {
|
||||
const nextIndex = displayList?.length;
|
||||
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
|
||||
displayList = [...displayList, ...newArticles];
|
||||
loaded();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMount(() => {
|
||||
rawData = data?.getDarkPoolFlow ?? [];
|
||||
displayList = rawData?.slice(0,20) ?? []
|
||||
displayDate = getLastDate(rawData?.at(0)?.date)
|
||||
mostFrequentTicker = findMostFrequentTicker(rawData);
|
||||
highestVolumeTicker = findHighestVolume(rawData);
|
||||
highestSizeTicker = findHighestSize(rawData);
|
||||
isLoaded = true;
|
||||
})
|
||||
|
||||
|
||||
let charNumber = 40;
|
||||
$: {
|
||||
if ($screenWidth < 640)
|
||||
{
|
||||
charNumber = 15;
|
||||
}
|
||||
else {
|
||||
charNumber = 40;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Dark Pool Flow · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`Realtime Dark Pool Trades from Hedge Funds & Major Institutional Traders.`} />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`Dark Pool Flow · stocknear`}/>
|
||||
<meta property="og:description" content={`Realtime Dark Pool Trades from Hedge Funds & Major Institutional Traders.`} />
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`Dark Pool Flow · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Realtime Dark Pool Trades from Hedge Funds & Major Institutional Traders.`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
|
||||
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Dark Pool Flow</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-4xl 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="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-[#202020] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
||||
Dark Pool Flow
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
|
||||
Realtime Dark Pool Trades from Hedge Funds & Major Institutional Traders.
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
|
||||
<!-- Start Column -->
|
||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
||||
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="5" result="glow"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="glow"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="z-1 absolute top-0">
|
||||
<img class="w-auto" src={cloudFrontUrl+'/assets/dark_pool_flow_logo.png'} alt="logo" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-white text-sm sm:text-[1rem] mt-5 text-center sm:text-start w-full ml-2">
|
||||
Real-time trades delayed by 15 minutes.
|
||||
</span>
|
||||
|
||||
<span class="text-white text-sm sm:text-[1rem] italic mt-2 text-center sm:text-start w-full ml-2 mb-5">
|
||||
Live Flow of {displayDate}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full mt-5 mb-10 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 gap-x-3 ">
|
||||
|
||||
<!--Start Most Traded-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-medium text-gray-200 text-sm ">Most Traded Option</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
|
||||
<a href={"/stocks/"+mostFrequentTicker?.ticker} class="text-blue-400 ">
|
||||
{mostFrequentTicker?.ticker}
|
||||
</a>
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(mostFrequentTicker?.count)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Most Traded-->
|
||||
|
||||
|
||||
<!--Start Highest Volume-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-medium text-gray-200 text-sm ">Highest Volume</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
|
||||
<a href={"/stocks/"+highestVolumeTicker?.ticker} class="text-blue-400 ">
|
||||
{highestVolumeTicker?.ticker}
|
||||
</a>
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(highestVolumeTicker?.volume)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Highest Volume-->
|
||||
|
||||
<!--Start Highest Size-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-medium text-gray-200 text-sm ">Highest Size</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
|
||||
<a href={"/stocks/"+highestSizeTicker?.ticker} class="text-blue-400 ">
|
||||
{highestSizeTicker?.ticker}
|
||||
</a>
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(highestSizeTicker?.size)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Highest Size-->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-screen sm:w-full m-auto mt-20 sm:mt-10">
|
||||
|
||||
|
||||
<div 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-[#0F0F0F] border-bg-[#0F0F0F] m-auto">
|
||||
<thead>
|
||||
<tr class="bg-[#0F0F0F] border-b border-blue-400">
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Time
|
||||
</th>
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Company
|
||||
</th>
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Size
|
||||
</th>
|
||||
<th class="text-end bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Volume
|
||||
</th>
|
||||
<th class="text-end bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Price
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each displayList as item, index}
|
||||
|
||||
<tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
|
||||
|
||||
|
||||
<td class="text-start text-sm font-medium text-white">
|
||||
{formatTime(item?.date)}
|
||||
</td>
|
||||
|
||||
<td class="text-sm text-start">
|
||||
<div class="flex flex-col items-start w-32 sm:w-fit">
|
||||
<span class="text-blue-400">{item?.symbol}</span>
|
||||
<span class="text-white">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-start text-sm font-medium text-white">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(item?.size)}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(item?.volume)}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
${item?.price}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
<UpgradeToPro data={data} title="Get the latest dark pool trades in realtime from Hedge Funds & Major Institutional Traders"/>
|
||||
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label class="bg-[#202020] 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"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
69
src/routes/dark-pool-flow/+page.ts
Normal file
69
src/routes/dark-pool-flow/+page.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import { userRegion, getCache, setCache, isOpen } from '$lib/store';
|
||||
|
||||
|
||||
const checkMarketHour = async () => {
|
||||
const holidays = ['2024-01-01', '2024-01-15','2024-02-19','2024-03-29','2024-05-27','2024-06-19','2024-07-04','2024-09-02','2024-11-28','2024-12-25'];
|
||||
const currentDate = new Date().toISOString().split('T')[0];
|
||||
|
||||
// Get the current time in the ET time zone
|
||||
const etTimeZone = 'America/New_York';
|
||||
const currentTime = new Date().toLocaleString('en-US', { timeZone: etTimeZone });
|
||||
|
||||
// Determine if the NYSE is currently open or closed
|
||||
const currentHour = new Date(currentTime).getHours();
|
||||
const isWeekendValue = new Date(currentTime).getDay() === 6 || new Date(currentTime).getDay() === 0;
|
||||
const isBeforeMarketOpenValue = currentHour < 9 || (currentHour === 9 && new Date(currentTime).getMinutes() < 30);
|
||||
const isAfterMarketCloseValue = currentHour >= 16;
|
||||
|
||||
isOpen.set(!(isWeekendValue || isBeforeMarketOpenValue || isAfterMarketCloseValue || holidays?.includes(currentDate)));
|
||||
}
|
||||
|
||||
|
||||
|
||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
||||
|
||||
let apiURL;
|
||||
|
||||
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 const load = async ({parent}) => {
|
||||
const getDarkPoolFlow = async () => {
|
||||
let output;
|
||||
const data = await parent();
|
||||
|
||||
const cachedData = getCache('', 'getDarkPoolFlow');
|
||||
if (cachedData) {
|
||||
output = cachedData;
|
||||
} else {
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + '/dark-pool-flow', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
output = await response.json();
|
||||
|
||||
setCache('', output, 'getDarkPoolFlow');
|
||||
|
||||
}
|
||||
|
||||
output = data?.user?.tier !== 'Pro' ? output?.slice(0,6) : output;
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getDarkPoolFlow: await getDarkPoolFlow()
|
||||
};
|
||||
};
|
||||
@ -1,263 +1,263 @@
|
||||
<script lang='ts'>
|
||||
import { goto } from '$app/navigation';
|
||||
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
|
||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import { onMount } from 'svelte';
|
||||
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
|
||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import { onMount } from 'svelte';
|
||||
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
|
||||
|
||||
|
||||
export let data;
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
|
||||
let isLoaded = false;
|
||||
let rawData = []
|
||||
let displayList = [];
|
||||
|
||||
|
||||
async function infiniteHandler({ detail: { loaded, complete } })
|
||||
{
|
||||
if (displayList?.length === rawData?.length) {
|
||||
complete();
|
||||
} else {
|
||||
const nextIndex = displayList?.length;
|
||||
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
|
||||
displayList = [...displayList, ...newArticles];
|
||||
loaded();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export let data;
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
onMount(() => {
|
||||
rawData = data?.getFDACalendar ?? [];
|
||||
displayList = rawData?.slice(0,20) ?? []
|
||||
isLoaded = true;
|
||||
})
|
||||
|
||||
let isLoaded = false;
|
||||
let rawData = []
|
||||
let displayList = [];
|
||||
|
||||
|
||||
async function infiniteHandler({ detail: { loaded, complete } })
|
||||
|
||||
let charNumber = 15;
|
||||
$: {
|
||||
if ($screenWidth < 640)
|
||||
{
|
||||
if (displayList?.length === rawData?.length) {
|
||||
complete();
|
||||
} else {
|
||||
const nextIndex = displayList?.length;
|
||||
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
|
||||
displayList = [...displayList, ...newArticles];
|
||||
loaded();
|
||||
}
|
||||
charNumber = 15;
|
||||
}
|
||||
|
||||
else {
|
||||
charNumber = 15;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} FDA Calendar · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`FDA Approval to track success rates of Biotech companies in the stock market.`} />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`FDA Calendar · stocknear`}/>
|
||||
<meta property="og:description" content={`FDA Approval to track success rates of Biotech companies in the stock market.`} />
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`FDA Calendar · stocknear`}/>
|
||||
<meta name="twitter:description" content={`FDA Approval to track success rates of Biotech companies in the stock market.`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
|
||||
onMount(() => {
|
||||
rawData = data?.getFDACalendar ?? [];
|
||||
displayList = rawData?.slice(0,20) ?? []
|
||||
isLoaded = true;
|
||||
})
|
||||
|
||||
|
||||
let charNumber = 15;
|
||||
$: {
|
||||
if ($screenWidth < 640)
|
||||
{
|
||||
charNumber = 15;
|
||||
}
|
||||
else {
|
||||
charNumber = 15;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} FDA Calendar · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`FDA Approval to track success rates of Biotech companies in the stock market.`} />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`FDA Calendar · stocknear`}/>
|
||||
<meta property="og:description" content={`FDA Approval to track success rates of Biotech companies in the stock market.`} />
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`FDA Calendar · stocknear`}/>
|
||||
<meta name="twitter:description" content={`FDA Approval to track success rates of Biotech companies in the stock market.`} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
|
||||
|
||||
|
||||
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
|
||||
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">FDA Calendar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-4xl 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="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-[#202020] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
||||
FDA Calendar
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
|
||||
Our FDA Calendar is designed to provide you with future catalysts across biotech & pharma companies, updated on a daily basis for all companies we cover.
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
|
||||
<!-- Start Column -->
|
||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
||||
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="5" result="glow"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="glow"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="z-1 absolute top-0">
|
||||
<img class="w-[90px] ml-10" src={cloudFrontUrl+'/assets/fda_logo.png'} alt="logo" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
|
||||
<div class="w-full max-w-4xl text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#202020] sm:rounded-lg h-auto p-5 ">
|
||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#60a5fa" 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>
|
||||
Biotech companies can be among the most lucrative stocks if you invest wisely. Their stock prices can soar by +100% in a single day or plummet by the same amount, depending on the outcomes of clinical trials.
|
||||
</div>
|
||||
|
||||
<div class="w-screen sm:w-full m-auto mt-20 sm:mt-10">
|
||||
|
||||
|
||||
<div 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-[#0F0F0F] border-bg-[#0F0F0F] m-auto">
|
||||
<thead>
|
||||
<tr class="bg-[#0F0F0F] border-b border-blue-400">
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Symbol
|
||||
</th>
|
||||
<!--
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Name
|
||||
</th>
|
||||
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Source
|
||||
</th>
|
||||
-->
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Drug
|
||||
</th>
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Indication
|
||||
</th>
|
||||
<th class="text-end bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Status
|
||||
</th>
|
||||
<th class="text-end bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Target Date
|
||||
</th>
|
||||
|
||||
<th class="text-end bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Change
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each displayList as item, index}
|
||||
|
||||
<tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
|
||||
<td class="text-sm text-start">
|
||||
<div class="flex flex-col items-start w-32 sm:w-fit">
|
||||
<span class="text-blue-400">{item?.symbol}</span>
|
||||
<span class="text-white sm:hidden">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<!--
|
||||
<td class="hidden sm:table-cell text-white text-sm text-white text-start">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
</td>
|
||||
|
||||
<td class="text-start text-sm font-medium text-white">
|
||||
{item?.sourceType?.length !== 0 ? item?.sourceType : 'n/a'}
|
||||
</td>
|
||||
-->
|
||||
|
||||
<td class="text-start text-sm font-medium text-white">
|
||||
{item?.drugName}
|
||||
</td>
|
||||
|
||||
<td class="text-start text-sm font-medium text-white">
|
||||
{item?.indication}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
{item?.status?.length !== 0 ? item?.status : 'n/a'}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
{item?.targetDate?.length !== 0 ? item?.targetDate : 'n/a'}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-end text-sm font-medium text-white text-sm font-medium">
|
||||
{#if item?.changesPercentage >=0}
|
||||
<span class="text-[#10DB06]">+{item?.changesPercentage}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{item?.changesPercentage}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
<UpgradeToPro data={data} title="Get the latest FDA Approval to never miss out the next big surge of Biotech companies"/>
|
||||
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label class="bg-[#202020] 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"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="text-sm breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">FDA Calendar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-4xl 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="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-[#202020] 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">
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
||||
FDA Calendar
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
|
||||
Our FDA Calendar is designed to provide you with future catalysts across biotech & pharma companies, updated on a daily basis for all companies we cover.
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
|
||||
<!-- Start Column -->
|
||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
||||
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="5" result="glow"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="glow"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="z-1 absolute top-0">
|
||||
<img class="w-[90px] ml-10" src={cloudFrontUrl+'/assets/fda_logo.png'} alt="logo" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
|
||||
<div class="w-full max-w-4xl text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#202020] sm:rounded-lg h-auto p-5 ">
|
||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#60a5fa" 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>
|
||||
Biotech companies can be among the most lucrative stocks if you invest wisely. Their stock prices can soar by +100% in a single day or plummet by the same amount, depending on the outcomes of clinical trials.
|
||||
</div>
|
||||
|
||||
<div class="w-screen sm:w-full m-auto mt-20 sm:mt-10">
|
||||
|
||||
|
||||
<div 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-[#0F0F0F] border-bg-[#0F0F0F] m-auto">
|
||||
<thead>
|
||||
<tr class="bg-[#0F0F0F] border-b border-blue-400">
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Symbol
|
||||
</th>
|
||||
<!--
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Name
|
||||
</th>
|
||||
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Source
|
||||
</th>
|
||||
-->
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Drug
|
||||
</th>
|
||||
<th class="text-start bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Indication
|
||||
</th>
|
||||
<th class="text-end bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Status
|
||||
</th>
|
||||
<th class="text-end bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Target Date
|
||||
</th>
|
||||
|
||||
<th class="text-end bg-[#0F0F0F] text-white text-sm font-semibold">
|
||||
Change
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each displayList as item, index}
|
||||
|
||||
<tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
|
||||
<td class="text-sm text-start">
|
||||
<div class="flex flex-col items-start w-32 sm:w-fit">
|
||||
<span class="text-blue-400">{item?.symbol}</span>
|
||||
<span class="text-white sm:hidden">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<!--
|
||||
<td class="hidden sm:table-cell text-white text-sm text-white text-start">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
</td>
|
||||
|
||||
<td class="text-start text-sm font-medium text-white">
|
||||
{item?.sourceType?.length !== 0 ? item?.sourceType : 'n/a'}
|
||||
</td>
|
||||
-->
|
||||
|
||||
<td class="text-start text-sm font-medium text-white">
|
||||
{item?.drugName}
|
||||
</td>
|
||||
|
||||
<td class="text-start text-sm font-medium text-white">
|
||||
{item?.indication}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
{item?.status?.length !== 0 ? item?.status : 'n/a'}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm font-medium text-white">
|
||||
{item?.targetDate?.length !== 0 ? item?.targetDate : 'n/a'}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-end text-sm font-medium text-white text-sm font-medium">
|
||||
{#if item?.changesPercentage >=0}
|
||||
<span class="text-[#10DB06]">+{item?.changesPercentage}%</span>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]">{item?.changesPercentage}% </span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
<UpgradeToPro data={data} title="Get the latest FDA Approval to never miss out the next big surge of Biotech companies"/>
|
||||
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label class="bg-[#202020] 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"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -213,8 +213,8 @@ async function loadSearchData() {
|
||||
{:else}
|
||||
|
||||
<div class="text-center mb-5 relative w-fit flex justify-center m-auto">
|
||||
<a href="/fda-calendar" class="text-white antialiased bg-[#202020] w-full px-4 py-2 rounded-xl m-auto font-medium text-sm flex items-center">
|
||||
<span class="font-semibold">Stay Ahead of Biotech <span class="font-bold">Surges</span> with the FDA Calendar</span>
|
||||
<a href="/dark-pool-flow" class="text-white antialiased bg-[#202020] w-full px-4 py-2 rounded-xl m-auto font-medium text-sm flex items-center">
|
||||
<span class="font-semibold">Realtime Dark Pool Trades from Hedge Funds</span>
|
||||
</a>
|
||||
<div class="absolute top-[-1.2rem] -right-5 sm:-right-8 rotate-[7deg]">
|
||||
<span class="bg-[#FBCE3C] text-black text-sm sm:text-[0.9rem] rounded-xl font-semibold sm:me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
|
||||
|
||||
@ -395,7 +395,6 @@ const filterExpiringSoon = (data, days) => {
|
||||
$: {
|
||||
if(filterList && typeof window !== 'undefined' && mode === false)
|
||||
{
|
||||
console.log('triggered')
|
||||
if(filterList?.length !== 0)
|
||||
{
|
||||
const newData = filterExpiringSoon(rawData, Math.max(...filterList));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user