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;
}; };

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

@ -130,128 +130,141 @@
</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 <div class="items-center justify-between lg:flex">
class="flex flex-row items-center -ml-10 sm:ml-0 justify-center sm:justify-start" <div
> class="flex space-x-3 border-b-[2px] border-below-title pb-3 lg:border-none lg:pb-0"
<svg
class="w-16 h-16"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
><path
fill="#D4D4D4"
d="M16 8a5 5 0 1 0 5 5a5 5 0 0 0-5-5"
/><path
fill="#D4D4D4"
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="flex-shrink-0">
<div class="text-xl font-bold text-gray-200">{analystName}</div> <svg
<div class="text-[1rem] text-gray-200"> class="h-16 w-16 sm:h-20 sm:w-20 text-gray-200"
Analyst at {companyName} fill="currentColor"
viewBox="0 0 24 24"
style="max-width:100px"
><path
fill-rule="evenodd"
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"
clip-rule="evenodd"
></path></svg
>
</div> </div>
<div class="flex flex-row items-center mt-1"> <div class="mt-0 pt-0.5 text-left">
{#each Array.from({ length: 5 }) as _, i} <h1 class="mb-0 text-2xl font-bold text-white">
{#if i < Math.floor(analystScore)} {analystName}
<svg </h1>
class="w-5 h-5 text-[#FBCE3C]" <p class="mb-0.5 text-sm font-semibold text-gray-300">
aria-hidden="true" Stock Analyst at {companyName}
xmlns="http://www.w3.org/2000/svg" </p>
fill="currentColor" <div class="inline-flex items-center">
viewBox="0 0 22 20" <div class="flex flex-row items-center mt-1">
> {#each Array.from({ length: 5 }) as _, i}
<path {#if i < Math.floor(analystScore)}
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" <svg
/> class="w-5 h-5 text-[#FBCE3C]"
</svg> aria-hidden="true"
{:else} xmlns="http://www.w3.org/2000/svg"
<svg fill="currentColor"
class="w-5 h-5 text-gray-300 dark:text-gray-500" viewBox="0 0 22 20"
aria-hidden="true" >
xmlns="http://www.w3.org/2000/svg" <path
fill="currentColor" d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
viewBox="0 0 22 20" />
> </svg>
<path {:else}
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" <svg
/> class="w-5 h-5 text-gray-300 dark:text-gray-500"
</svg> aria-hidden="true"
{/if} xmlns="http://www.w3.org/2000/svg"
{/each} fill="currentColor"
viewBox="0 0 22 20"
<span class="ml-1 text-sm sm:text-[1rem] text-gray-400"> >
({analystScore}) <path
</span> d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
/>
</svg>
{/if}
{/each}
</div>
<span class="ml-1 text-sm text-white">({analystScore})</span
>
</div>
</div> </div>
</div> </div>
</div>
<div class="p-2 sm:p-0">
<div <div
class="stats stats-horizontal bg-[#09090B] w-full rounded-none sm:rounded-lg mt-12 mb-5" 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="grid grid-cols-2 sm:grid-cols-4"> <div class="flex flex-col px-4 py-2 bp:px-6 md:py-6">
<div class="stat"> <div class="text-2xl font-semibold tracking-tight text-white">
<div class="text-2xl font-bold text-gray-200"># {rank}</div> # {rank}
<div class="text-gray-200 text-sm">
Out of {numOfAnalysts} analysts
</div>
</div> </div>
<div class="text-sm font-semibold leading-6 text-gray-300">
<div class="stat"> Out of {numOfAnalysts} analysts
<div class="text-2xl font-bold text-gray-200">
{totalRatings}
</div>
<div class="text-gray-200 text-sm">Total Ratings</div>
</div> </div>
</div>
<div class="stat"> <div
<div class="flex flex-col px-4 py-2 bp:px-6 sm:border-l sm:border-gray-600 md:py-6"
class="text-2xl font-bold {successRate >= 0 >
? 'text-[#36D984]' <div class="text-2xl font-bold tracking-tight text-white">
: 'text-[#EF4444]'}" {totalRatings}
</div>
<div class="text-sm font-semibold leading-6 text-gray-300">
Total ratings
</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">
<span
class={successRate >= 0
? "before:content-['+'] text-[#36D984]"
: "text-[#EF4444]"}>{successRate?.toFixed(2)}%</span
> >
{successRate >= 0 ? "+" : ""}{successRate?.toFixed(2)}%
</div>
<div class="text-gray-200 text-sm">Success Rate</div>
</div> </div>
<div class="text-sm font-semibold leading-6 text-gray-300">
<div class="stat"> Success rate
<div </div>
class="text-2xl font-bold {avgReturn >= 0 </div>
? 'text-[#36D984]' <div
: 'text-[#EF4444]'}" 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
> >
{avgReturn >= 0 ? "+" : ""}{avgReturn?.toFixed(2)}% </div>
</div> <div class="text-sm font-semibold leading-6 text-gray-300">
<div class="text-gray-200 text-sm">Avg Return</div> 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 () => {