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-10-12 18:15:40 +02:00
parent 95a7c8939e
commit aae5ac6a80
8 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/ETFProfileCard.svelte
View File

@ -41,7 +41,7 @@ let showFullText = false;
holdingsCount = info?.holdingsCount;
avgVolume = info?.avgVolume;
dividendYield = typeof data?.getStockDividend?.dividendYield !== 'undefined' ? data?.getStockDividend?.dividendYield?.toFixed(2)+'%' : '-'
payoutRatio = typeof data?.getStockDividend?.payoutRatio !== 'undefined' ? data?.getStockDividend?.payoutRatio?.toFixed(2)+'%' : '-'
payoutRatio = (typeof data?.getStockDividend?.payoutRatio !== 'undefined' && data?.getStockDividend?.payoutRatio !== null) ? data?.getStockDividend?.payoutRatio?.toFixed(2)+'%' : '-'
provider = info?.etfProvider;
country = info?.domicile ?? '-';
@ -130,12 +130,6 @@ let showFullText = false;
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
</tr>
-->
<tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps?.toFixed(2)}</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.pe?.toFixed(2)}</td>
</tr>
<tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Dividend Yield</td>
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{dividendYield}</td>

8
src/lib/components/SimilarTickerCard.svelte
View File

@ -55,7 +55,7 @@ export let similarstock;
<img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy"/>
</div>
<div class="flex flex-col ml-3 w-full">
<span class="text-sm font-medium">{item?.symbol}</span>
<span class="text-sm sm:text-[1rem] font-medium">{item?.symbol}</span>
<span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name}
@ -69,11 +69,11 @@ export let similarstock;
</td>
<td class="text-white text-end font-semibold ">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
<td class="text-white text-end text-sm sm:text-[1rem] ">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'}
</td>
<td class="text-white font-semibold text-end">
<td class="text-white text-sm sm:text-[1rem] text-end">
{item?.avgVolume !== null ? abbreviateNumber(item?.avgVolume) : '-'}
</td>
{/if}

2
src/lib/components/TickerInfoCard.svelte
View File

@ -131,7 +131,7 @@ $: {
</tr>
<tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Mkt Cap</td>
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.marketCap,true)}</td>
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.marketCap)}</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Vol</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
</tr>

18
src/lib/components/TopETFTickerHolder.svelte
View File

@ -10,7 +10,7 @@
async function etfSelector(state)
{
window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
//window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
goto("/etf/"+state+"/")
}
@ -47,13 +47,13 @@
</thead>
<tbody>
{#each topETFHolder as item, index}
<tr on:click={() => etfSelector(item?.symbol)} class="sm:hover:text-white text-blue-400 cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
<tr class="sm:hover:text-white text-blue-400 sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
{#if index <=6}
<td >
<div class="flex flex-row items-center">
<a href={"/etf/"+item?.symbol} class="flex flex-row items-center">
<div class="flex flex-col w-full">
<span class="text-sm font-medium">{item?.symbol}</span>
<span class="text-sm sm:text-[1rem]">{item?.symbol}</span>
<span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
@ -62,16 +62,16 @@
{/if}
</span>
</div>
</div>
</a>
</td>
<td class="text-white text-end font-semibold">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'}
<td class="text-white text-end text-sm sm:text-[1rem]">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets) : '-'}
</td>
<td class="text-white font-semibold text-end">
<td class="text-white text-end text-sm sm:text-[1rem]">
{item?.weightPercentage !== null ? item?.weightPercentage?.toFixed(2) : '-'}%
</td>
{/if}
@ -148,7 +148,7 @@
</td>
<td class="text-white text-end font-semibold ">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'}
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets) : '-'}
</td>
<td class="text-white font-semibold text-end">

8
src/routes/stock-screener/+page.svelte
View File

@ -801,6 +801,12 @@ async function popularStrategy(state: string) {
{ condition: "over", name: "marketCap", value: '100M' }
]
},
topAIStocks: {
name : 'Top AI Stocks',
rules: [
{ condition: "", name: "score", value: 'Strong Buy' },
]
},
momentumTAStocks: {
name: 'Momentum TA Stocks',
rules: [
@ -953,7 +959,7 @@ function handleInput(event) {
Top Shorted Stocks
</DropdownMenu.Item>
<DropdownMenu.Item on:click={() => popularStrategy('topAIStocks')} class="cursor-pointer hover:bg-[#27272A]">
Best AI Forecast
Top AI Stocks
</DropdownMenu.Item>
<DropdownMenu.Item on:click={() => popularStrategy('momentumTAStocks')} class="cursor-pointer hover:bg-[#27272A]">
Momentum TA Stocks

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

@ -189,7 +189,7 @@
</label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
${annualDividend !== '0.00' ? annualDividend : '0'}
{annualDividend !== '0.00' ? annualDividend : '0'}
</div>
</div>
<div class="p-4 bp:p-5 sm:p-6 border-r border-contrast ">
@ -279,7 +279,7 @@
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
${item?.adjDividend?.toFixed(3)}
{item?.adjDividend?.toFixed(3)}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
{item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}

10
src/routes/stocks/[tickerID]/forecast/+page.svelte
View File

@ -95,7 +95,7 @@ if (data?.getAnalystEstimate?.length !== 0) {
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> Revenue </label>
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
<div class="flex items-baseline text-2xl font-semibold text-white">
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg, true)}
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg)}
</div>
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeRevenue > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
@ -112,7 +112,7 @@ if (data?.getAnalystEstimate?.length !== 0) {
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> Net Income </label>
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
<div class="flex items-baseline text-2xl font-semibold text-white">
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg, true)}
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg)}
</div>
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeNetIncome > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
@ -122,14 +122,14 @@ if (data?.getAnalystEstimate?.length !== 0) {
</div>
</div>
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.netIncome, true)}
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.netIncome)}
</div>
</div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> EBITDA </label>
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
<div class="flex items-baseline text-2xl font-semibold text-white">
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg, true)}
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg)}
</div>
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black">
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEBITDA > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true"
@ -139,7 +139,7 @@ if (data?.getAnalystEstimate?.length !== 0) {
</div>
</div>
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block">
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.ebitda, true)}
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.ebitda)}
</div>
</div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">

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

@ -317,13 +317,13 @@ const transactionStyles = {
{abbreviateNumber(item?.securitiesTransacted)}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
${item?.price?.toFixed(2)}
{item?.price?.toFixed(2)}
</td>
<td class="font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
<div class="flex flex-row items-center justify-end">
{#if transactionStyles[item?.transactionType]}
<div class="{transactionStyles[item?.transactionType]?.class}">{abbreviateNumber(item?.securitiesTransacted * item?.price, true)}</div>
<div class="{transactionStyles[item?.transactionType]?.class}">{abbreviateNumber(item?.securitiesTransacted * item?.price)}</div>
<div class="{transactionStyles[item?.transactionType]?.class} {transactionStyles[item?.transactionType]?.border} ml-2 px-1.5 py-1.5 border text-center rounded-lg text-xs font-semibold">
{transactionStyles[item?.transactionType].text}
</div>