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

analyst page update

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-29 20:39:23 +01:00
parent 2ad89c6e05
commit e4330d09f7
6 changed files with 140 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/analysts/+page.server.ts
View File

@ -1,4 +1,4 @@
export const load = async ({ locals, setHeaders }) => { export const load = async ({ locals }) => {
const getTopAnalyst = async () => { const getTopAnalyst = async () => {
const { apiURL, apiKey, user } = locals; const { apiURL, apiKey, user } = locals;
@ -14,8 +14,6 @@ export const load = async ({ locals, setHeaders }) => {
output = user?.tier !== "Pro" ? output?.reverse()?.slice(0, 6) : output; output = user?.tier !== "Pro" ? output?.reverse()?.slice(0, 6) : output;
setHeaders({ "cache-control": "public, max-age=3000" });
return output; return output;
}; };

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

@ -8,8 +8,7 @@
export let data; export let data;
let isLoaded = false; let isLoaded = true;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let rawData = data?.getTopAnalyst; let rawData = data?.getTopAnalyst;
let analytRatingList = rawData?.slice(0, 40) ?? []; let analytRatingList = rawData?.slice(0, 40) ?? [];
@ -25,7 +24,6 @@
} }
onMount(async () => { onMount(async () => {
isLoaded = true;
window.addEventListener("scroll", handleScroll); window.addEventListener("scroll", handleScroll);
return () => { return () => {
window.removeEventListener("scroll", handleScroll); window.removeEventListener("scroll", handleScroll);

8
src/routes/analysts/[slug]/+page.server.ts
View File

@ -1,6 +1,6 @@
export const load = async ({ locals, setHeaders, params }) => { export const load = async ({ locals, params }) => {
const getAnalystStats = async () => { const getAnalystStats = async () => {
const { apiURL, apiKey, user } = locals; const { apiURL, apiKey } = locals;
const postData = { analystId: params.slug }; const postData = { analystId: params.slug };
// make the POST request to the endpoint // make the POST request to the endpoint
@ -13,9 +13,7 @@ export const load = async ({ locals, setHeaders, params }) => {
body: JSON.stringify(postData), body: JSON.stringify(postData),
}); });
let output = await response.json(); const output = await response.json();
setHeaders({ "cache-control": "public, max-age=3000" });
return output; return output;
}; };

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

@ -130,42 +130,49 @@
</svelte:head> </svelte:head>
<section <section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3" class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
> >
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4"> <div class="text-sm sm:text-[1rem] breadcrumbs">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Top Analyst Stocks</li> <li><a href="/analysts" class="text-gray-300">Analyst</a></li>
<li class="text-gray-300">{analystName}</li>
</ul> </ul>
</div> </div>
<div class="w-full overflow-hidden m-auto mt-5"> <div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden"> <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div <div
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main class="w-full lg:w-3/4 lg:pr-5"> <main class="w-full lg:w-3/4 lg:pr-5">
<div class="w-full m-auto mt-12"> <div class="w-full m-auto mt-12">
<div class="items-center justify-between lg:flex">
<div <div
class="flex flex-row items-center -ml-10 sm:ml-0 justify-center sm:justify-start" class="flex space-x-3 border-b-[2px] border-below-title pb-3 lg:border-none lg:pb-0"
> >
<div class="flex-shrink-0">
<svg <svg
class="w-16 h-16" class="h-16 w-16 sm:h-20 sm:w-20 text-gray-200"
xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 32 32" viewBox="0 0 24 24"
style="max-width:100px"
><path ><path
fill="#D4D4D4" fill-rule="evenodd"
d="M16 8a5 5 0 1 0 5 5a5 5 0 0 0-5-5" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
/><path clip-rule="evenodd"
fill="#D4D4D4" ></path></svg
d="M16 2a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2m7.993 22.926A5.002 5.002 0 0 0 19 20h-6a5.002 5.002 0 0 0-4.992 4.926a12 12 0 1 1 15.985 0"
/></svg
> >
<div class="ml-3 flex flex-col items-start">
<div class="text-xl font-bold text-gray-200">{analystName}</div>
<div class="text-[1rem] text-gray-200">
Analyst at {companyName}
</div> </div>
<div class="mt-0 pt-0.5 text-left">
<h1 class="mb-0 text-2xl font-bold text-white">
{analystName}
</h1>
<p class="mb-0.5 text-sm font-semibold text-gray-300">
Stock Analyst at {companyName}
</p>
<div class="inline-flex items-center">
<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(analystScore)} {#if i < Math.floor(analystScore)}
@ -194,64 +201,70 @@
</svg> </svg>
{/if} {/if}
{/each} {/each}
<span class="ml-1 text-sm sm:text-[1rem] text-gray-400">
({analystScore})
</span>
</div> </div>
</div> <span class="ml-1 text-sm text-white">({analystScore})</span
</div>
<div class="p-2 sm:p-0">
<div
class="stats stats-horizontal bg-[#09090B] w-full rounded-none sm:rounded-lg mt-12 mb-5"
> >
<div class="grid grid-cols-2 sm:grid-cols-4"> </div>
<div class="stat"> </div>
<div class="text-2xl font-bold text-gray-200"># {rank}</div> </div>
<div class="text-gray-200 text-sm"> <div
class="mt-4 grid grid-cols-2 overflow-hidden rounded-lg border border-gray-600 py-2 text-center md:grid-cols-4 md:p-0 lg:mt-0 lg:border-none"
>
<div class="flex flex-col px-4 py-2 bp:px-6 md:py-6">
<div class="text-2xl font-semibold tracking-tight text-white">
# {rank}
</div>
<div class="text-sm font-semibold leading-6 text-gray-300">
Out of {numOfAnalysts} analysts Out of {numOfAnalysts} analysts
</div> </div>
</div> </div>
<div
<div class="stat"> class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-600 md:py-6"
<div class="text-2xl font-bold text-gray-200"> >
<div class="text-2xl font-bold tracking-tight text-white">
{totalRatings} {totalRatings}
</div> </div>
<div class="text-gray-200 text-sm">Total Ratings</div> <div class="text-sm font-semibold leading-6 text-gray-300">
Total ratings
</div>
</div> </div>
<div class="stat">
<div <div
class="text-2xl font-bold {successRate >= 0 class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-600 md:py-6"
? 'text-[#36D984]'
: 'text-[#EF4444]'}"
> >
{successRate >= 0 ? "+" : ""}{successRate?.toFixed(2)}% <div class="text-2xl font-bold tracking-tight">
</div> <span
<div class="text-gray-200 text-sm">Success Rate</div> class={successRate >= 0
</div> ? "before:content-['+'] text-[#36D984]"
: "text-[#EF4444]"}>{successRate?.toFixed(2)}%</span
<div class="stat">
<div
class="text-2xl font-bold {avgReturn >= 0
? 'text-[#36D984]'
: 'text-[#EF4444]'}"
> >
{avgReturn >= 0 ? "+" : ""}{avgReturn?.toFixed(2)}%
</div> </div>
<div class="text-gray-200 text-sm">Avg Return</div> <div class="text-sm font-semibold leading-6 text-gray-300">
Success rate
</div>
</div>
<div
class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-600 md:py-6"
>
<div class="text-2xl font-bold tracking-tight text-white">
<span
class={avgReturn >= 0
? "before:content-['+'] text-[#36D984]"
: "text-[#EF4444]"}>{avgReturn?.toFixed(2)}%</span
>
</div>
<div class="text-sm font-semibold leading-6 text-gray-300">
Average return
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="p-2 sm:p-0 mb-10"> <div class="mb-10 mt-10">
<div <div
class="text-white p-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]" class="text-white p-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="text-gray-300 font-bold text-lg smtext-xl"> <span class="text-white font-semibold text-lg sm:text-xl">
Main Sectors: Main Sectors:
</span> </span>
@ -261,7 +274,7 @@
{#each data?.getAnalystStats?.mainSectors as sector} {#each data?.getAnalystStats?.mainSectors as sector}
<a <a
href={"/list/" + sectorSelector(sector)} href={"/list/" + sectorSelector(sector)}
class="cursor-pointer w-fit bg-[#404040] bg-opacity-[0.5] sm:hover:bg-opacity-[0.6] px-3 sm:px-4 py-2 text-sm sm:text-[1rem] font-medium rounded-lg sm:hover:text-white text-blue-400" class="cursor-pointer w-fit border border-gray-600 px-3 sm:px-4 py-2 text-sm sm:text-[1rem] font-medium rounded-md sm:hover:text-blue-400 text-white underline underline-offset-4"
> >
{sector} {sector}
</a> </a>
@ -271,13 +284,13 @@
</div> </div>
</div> </div>
<span class="p-3 text-[#F5F5F5] font-bold text-2xl"> <span class="text-[#F5F5F5] font-bold text-2xl">
{numOfStocks} Stocks {numOfStocks} Stocks
</span> </span>
<div class="w-screen sm:w-full m-auto mt-10"> <div class="w-full m-auto mt-10">
<div <div
class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll" class="w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll"
> >
<table <table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto" class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
@ -285,23 +298,23 @@
<thead> <thead>
<tr class="bg-[#09090B]"> <tr class="bg-[#09090B]">
<th <th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold" class="text-start bg-[#09090B] text-white text-sm font-semibold"
> >
Stock Stock
</th> </th>
<th <th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold" class="text-start bg-[#09090B] text-white text-sm font-semibold"
> >
Action Action
</th> </th>
<th <th
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold" class="text-end bg-[#09090B] text-white text-sm font-semibold"
> >
Price Target Price Target
</th> </th>
<th class="text-white font-semibold text-end text-[1rem]"> <th class="text-white font-semibold text-end text-sm">
Date Updated
</th> </th>
</tr> </tr>
</thead> </thead>
@ -322,7 +335,7 @@
</span> </span>
<div <div
class="ml-px max-w-[130px] truncate text-sm text-default blur group-hover:blur-[6px] lg:max-w-[150px]" class="ml-px max-w-[130px] truncate text-sm text-white blur group-hover:blur-[6px] lg:max-w-[150px]"
> >
XXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX
</div> </div>
@ -343,7 +356,7 @@
</svg> </svg>
<span <span
class="ml-1 font-semibold text-muted group-hover:text-default" class="ml-1 font-semibold text-gray-300 group-hover:text-white"
> >
Upgrade Upgrade
</span> </span>
@ -377,13 +390,16 @@
class="font-medium {[ class="font-medium {[
'Strong Buy', 'Strong Buy',
'Buy', 'Buy',
'Outperform',
]?.includes(item?.rating_current) ]?.includes(item?.rating_current)
? 'text-[#00FC50]' ? 'text-[#00FC50]'
: item?.rating_current === 'Hold' : item?.rating_current === 'Hold'
? 'text-[#FF7070]' ? 'text-[#FF7070]'
: ['Strong Sell', 'Sell']?.includes( : [
item?.rating_current, 'Strong Sell',
) 'Sell',
'Underperform',
]?.includes(item?.rating_current)
? 'text-[#FF2F1F]' ? 'text-[#FF2F1F]'
: 'text-gray-300'}" : 'text-gray-300'}"
> >
@ -398,7 +414,7 @@
<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" <span class="text-gray-100 font-normal"
>${Math?.ceil(item?.adjusted_pt_prior)}</span >{Math?.ceil(item?.adjusted_pt_prior)}</span
> >
<svg <svg
class="w-3 h-3 ml-1 mr-1 inline-block" class="w-3 h-3 ml-1 mr-1 inline-block"
@ -414,12 +430,14 @@
/></svg /></svg
> >
<span class="text-white font-semibold" <span class="text-white font-semibold"
>${Math?.ceil(item?.adjusted_pt_current)}</span >{Math?.ceil(item?.adjusted_pt_current)}</span
> >
{:else if Math?.ceil(item?.adjusted_pt_current) !== 0} {:else if Math?.ceil(item?.adjusted_pt_current) !== 0}
<span class="text-white font-semibold" <span class="text-white font-semibold"
>${Math?.ceil(item?.adjusted_pt_current)}</span >{Math?.ceil(item?.adjusted_pt_current)}</span
> >
{:else}
n/a
{/if} {/if}
</div> </div>
</td> </td>
@ -454,7 +472,7 @@
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥 Pro Subscriptio
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>
@ -474,7 +492,7 @@
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊 Top Analyst
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>
@ -493,7 +511,7 @@
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Top Stocks Picks ⭐ Top Stocks Picks
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>

3
src/routes/analysts/top-stocks/+page.server.ts
View File

@ -1,4 +1,4 @@
export const load = async ({ locals, setHeaders }) => { export const load = async ({ locals }) => {
const getTopAnalystStocks = async () => { const getTopAnalystStocks = async () => {
const { apiURL, apiKey, user } = locals; const { apiURL, apiKey, user } = locals;
@ -14,7 +14,6 @@ export const load = async ({ locals, setHeaders }) => {
output = user?.tier !== "Pro" ? output?.reverse()?.slice(0, 6) : output; output = user?.tier !== "Pro" ? output?.reverse()?.slice(0, 6) : output;
setHeaders({ "cache-control": "public, max-age=3000" });
return output; return output;
}; };

13
src/routes/insider-tracker/+page.svelte
View File

@ -9,9 +9,11 @@
export let data; export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let isLoaded = false; let isLoaded = true;
let rawData = []; let rawData = data?.getInsiderTracker ?? [];
let stockList = []; let stockList = rawData?.slice(0, 50) ?? [];
isLoaded = true;
function formatDateTime(dateTimeStr) { function formatDateTime(dateTimeStr) {
const date = new Date(dateTimeStr); const date = new Date(dateTimeStr);
@ -39,11 +41,6 @@
} }
onMount(() => { onMount(() => {
rawData = data?.getInsiderTracker ?? [];
stockList = rawData?.slice(0, 50) ?? [];
isLoaded = true;
if (data?.user?.tier === "Pro") { if (data?.user?.tier === "Pro") {
window.addEventListener("scroll", handleScroll); window.addEventListener("scroll", handleScroll);
return () => { return () => {