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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-22 13:28:06 +02:00
parent 8ffb1352b6
commit ad92cbeef2
4 changed files with 85 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/routes/etf/[tickerID]/options/+page.svelte
View File

@ -526,15 +526,15 @@ $: {
<!-- row --> <!-- row -->
<tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> <tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
<td class="text-white text-xs sm:text-sm text-start"> <td class="text-white text-xs sm:text-sm text-start whitespace-nowrap">
{formatTime(item?.time)} {formatTime(item?.time)}
</td> </td>
<td class="text-white text-xs sm:text-sm text-start"> <td class="text-white text-xs sm:text-sm text-start whitespace-nowrap">
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
<td class="text-white text-end"> <td class="text-white text-sm text-end">
{item?.dte < 0 ? 'expired' : item?.dte +'d'} {item?.dte < 0 ? 'expired' : item?.dte +'d'}
</td> </td>

10
src/routes/politicians/flow-data/+page.svelte
View File

@ -632,25 +632,25 @@
</th> </th>
<td on:click|stopPropagation={() => assetSelector(item?.ticker, item?.assetType)} class="cursor-pointer text-start text-xs sm:text-sm text-blue-400"> <td on:click|stopPropagation={() => assetSelector(item?.ticker, item?.assetType)} class="cursor-pointer text-start whitespace-nowrap text-sm text-blue-400">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="text-blue-400">{item?.ticker?.length !== 0 ? item?.ticker : '-'}</span> <span class="text-blue-400">{item?.ticker?.length !== 0 ? item?.ticker : '-'}</span>
<span class="text-white">{item?.assetDescription.length > charNumber ? formatString(item?.assetDescription.slice(0,charNumber)) + "..." : formatString(item?.assetDescription)?.replace("- Common Stock", "")?.replace("Common Stock", "")}</span> <span class="text-white">{item?.assetDescription.length > charNumber ? formatString(item?.assetDescription.slice(0,charNumber)) + "..." : formatString(item?.assetDescription)?.replace("- Common Stock", "")?.replace("Common Stock", "")}</span>
</div> </div>
</td> </td>
<td class="text-end text-xs sm:text-sm text-white w-32"> <td class="text-end text-sm text-white whitespace-nowrap">
{new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td> </td>
<td class="text-end text-xs sm:text-sm text-white w-32"> <td class="text-end text-sm text-white whitespace-nowrap">
{new Date(item?.disclosureDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(item?.disclosureDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td> </td>
<td class="text-center text-xs sm:text-sm text-white w-32"> <td class="text-center text-sm text-white whitespace-nowrap">
{item?.amount?.replace("$1,000,001 - $5,000,000","$1Mio - $5Mio")} {item?.amount?.replace("$1,000,001 - $5,000,000","$1Mio - $5Mio")}
</td> </td>
<td class="text-start text-xs text-end sm:text-sm text-white"> <td class="text-start text-sm text-end sm:text-sm text-white">
{#if item?.type === 'Bought'} {#if item?.type === 'Bought'}
<span class="text-[#10DB06]">Bought</span> <span class="text-[#10DB06]">Bought</span>
{:else if item?.type === 'Sold'} {:else if item?.type === 'Sold'}

124
src/routes/stocks/[tickerID]/analyst/+page.svelte
View File

@ -5,6 +5,7 @@ import InfoModal from '$lib/components/InfoModal.svelte';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte'; import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { Motion, AnimateSharedLayout } from "svelte-motion";
export let data; export let data;
@ -17,10 +18,37 @@ let numOfAnalyst = 0;
let consensusRating = 'n/a'; let consensusRating = 'n/a';
let changesPercentage = 0; let changesPercentage = 0;
let filterRule = 'all'; const tabs = [
{
title: "All Analysts",
},
{
title: "Top Analysts",
}
];
let activeIdx = 0;
function changeTab(index) {
activeIdx = index;
if(Object?.keys(analystRating)?.length !== 0) {
numOfAnalyst = analystRating?.numOfAnalyst;
priceTarget = analystRating?.priceTarget
consensusRating = analystRating?.consensusRating;
changesPercentage = ((priceTarget/$currentPortfolioPrice -1)*100)?.toFixed(2) ?? 0;
}
if (activeIdx === 1) {
rawData = data?.getAnalystTickerHistory?.filter(item => item?.analystScore >=4)
historyList = rawData?.slice(0,10)
}
else {
rawData = data?.getAnalystTickerHistory ?? [];
historyList = rawData?.slice(0,10)
}
}
async function infiniteHandler({ detail: { loaded, complete } }) async function infiniteHandler({ detail: { loaded, complete } })
{ {
@ -34,28 +62,6 @@ if (historyList?.length === rawData?.length) {
} }
} }
$: {
if(filterRule) {
if(Object?.keys(analystRating)?.length !== 0) {
numOfAnalyst = analystRating?.numOfAnalyst;
priceTarget = analystRating?.priceTarget
consensusRating = analystRating?.consensusRating;
changesPercentage = ((priceTarget/$currentPortfolioPrice -1)*100)?.toFixed(2) ?? 0;
}
if (filterRule === 'topAnalysts') {
rawData = data?.getAnalystTickerHistory?.filter(item => item?.analystScore >=4)
historyList = rawData?.slice(0,10)
}
else {
rawData = data?.getAnalystTickerHistory ?? [];
historyList = rawData?.slice(0,10)
}
}
}
function latestInfoDate(inputDate) { function latestInfoDate(inputDate) {
@ -75,6 +81,9 @@ function latestInfoDate(inputDate) {
return differenceInDays <=4; return differenceInDays <=4;
} }
changeTab(0)
</script> </script>
@ -227,36 +236,50 @@ function latestInfoDate(inputDate) {
content={"Filter for analysts rated 4+ stars focusing on their win rate and average return per rating. Analysts with 4+ stars typically exhibit both high accuracy and high return per rating."} content={"Filter for analysts rated 4+ stars focusing on their win rate and average return per rating. Analysts with 4+ stars typically exhibit both high accuracy and high return per rating."}
id={"topAnalystsInfo"} id={"topAnalystsInfo"}
/> />
<ul class="text-[0.8rem] font-medium text-center w-full pt-3 sm:w-56 mb-5 sm:ml-auto flex">
<li class="w-full">
<label on:click={() => filterRule = 'all'} class="font-semibold cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'all' ? 'bg-purple-600' : 'bg-[#2A303C]'} border-r border-gray-600" aria-current="page">
All Analysts
</label>
</li>
<li class="w-full">
{#if data?.user?.tier === 'Pro'}
<label on:click={() => filterRule = 'topAnalysts'} class="font-semibold cursor-pointer inline-block w-full py-2.5 {filterRule === 'topAnalysts' ? 'bg-purple-600' : 'bg-[#2A303C]'} text-white rounded-r-lg">
Top Analysts
</label>
{:else}
<a href="/pricing" class="font-semibold flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] text-white rounded-r-lg">
<span class="">Top Analysts</span>
<svg class="ml-1 -mt-0.5 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
</a>
{/if}
</li> <div class="ml-auto">
</ul> <div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-4">
<AnimateSharedLayout>
{#each tabs as item, i}
<button
on:click={() => changeTab(i)}
class="group relative z-[1] rounded-full px-6 py-2 {activeIdx === i
? 'z-0'
: ''} "
>
{#if activeIdx === i}
<Motion
layoutId="clicked-btn"
transition={{ duration: 0.2 }}
let:motion
>
<div
use:motion
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
</Motion>
{/if}
<span
class="relative text-sm block font-medium duration-200 text-white">
{item.title}
</span>
</button>
{/each}
</AnimateSharedLayout>
</div>
</div>
</div> </div>
<div class="w-screen -ml-3 sm:w-full sm:ml-0 flex justify-start items-center m-auto overflow-hidden"> <div class="sm:w-full m-auto mt-10 ">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4">
<div class="w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
<table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<thead class=""> <thead class="">
<tr class=""> <tr class="">
<td class="text-white font-bold text-sm sm:text-[1rem] text-start">Analyst</td> <td class="text-white font-semibold text-sm text-start">Analyst</td>
<td class="text-white font-bold text-sm sm:text-[1rem] text-start">Rating</td> <td class="text-white font-semibold text-sm text-start">Rating</td>
<td class="text-white font-bold text-sm sm:text-[1rem] text-end">Date</td> <td class="text-white font-semibold text-sm text-end">Date</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -291,13 +314,13 @@ function latestInfoDate(inputDate) {
<td class="text-sm text-center text-white"> <td class="text-sm text-center text-white">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="text-sm sm:text-[1rem] 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]' : ''}"> <span class="text-[1rem] 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]' : ''}">
{item?.rating_current} {item?.rating_current}
</span> </span>
<span class="text-[0.8rem] font-medium text-white">{item?.action_company?.replace('Initiates Coverage On','Initiates')}</span> <span class="font-medium text-white">{item?.action_company?.replace('Initiates Coverage On','Initiates')}</span>
<div class="flex flex-row items-center text-sm"> <div class="flex flex-row items-center text-sm">
{#if Math?.ceil(item?.adjusted_pt_prior) !== 0} {#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
<span class="text-gray-100 font-normal">${Math?.ceil(item?.adjusted_pt_prior)}</span> <span class="text-gray-100 font-normal">${Math?.ceil(item?.adjusted_pt_prior)}</span>
<svg class="w-3 h-3 ml-1 mr-1 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12h16m0 0l-6-6m6 6l-6 6"/></svg> <svg class="w-3 h-3 ml-1 mr-1 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12h16m0 0l-6-6m6 6l-6 6"/></svg>
<span class="text-white font-semibold">${Math?.ceil(item?.adjusted_pt_current)}</span> <span class="text-white font-semibold">${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}
@ -327,6 +350,7 @@ function latestInfoDate(inputDate) {
</table> </table>
</div>
</div> </div>
{#if data?.user?.tier === 'Pro'} {#if data?.user?.tier === 'Pro'}
<InfiniteLoading on:infinite={infiniteHandler} /> <InfiniteLoading on:infinite={infiniteHandler} />

4
src/routes/stocks/[tickerID]/options/+page.svelte
View File

@ -523,7 +523,7 @@ $: {
<!-- row --> <!-- row -->
<tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> <tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
<td class="text-white text-xs sm:text-sm text-start"> <td class="text-white text-xs sm:text-sm text-start whitespace-nowrap">
{formatTime(item?.time)} {formatTime(item?.time)}
</td> </td>
@ -531,7 +531,7 @@ $: {
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
<td class="text-white text-end"> <td class="text-white text-sm text-end">
{item?.dte < 0 ? 'expired' : item?.dte +'d'} {item?.dte < 0 ? 'expired' : item?.dte +'d'}
</td> </td>