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; holdingsCount = info?.holdingsCount;
avgVolume = info?.avgVolume; avgVolume = info?.avgVolume;
dividendYield = typeof data?.getStockDividend?.dividendYield !== 'undefined' ? data?.getStockDividend?.dividendYield?.toFixed(2)+'%' : '-' 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; provider = info?.etfProvider;
country = info?.domicile ?? '-'; 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> <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
</tr> </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]"> <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-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> <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"/> <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>
<div class="flex flex-col ml-3 w-full"> <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"> <span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'} {#if typeof item?.name !== 'undefined'}
{item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name} {item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name}
@ -69,11 +69,11 @@ export let similarstock;
</td> </td>
<td class="text-white text-end font-semibold "> <td class="text-white text-end text-sm sm:text-[1rem] ">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'} {item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'}
</td> </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) : '-'} {item?.avgVolume !== null ? abbreviateNumber(item?.avgVolume) : '-'}
</td> </td>
{/if} {/if}

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

@ -131,7 +131,7 @@ $: {
</tr> </tr>
<tr class="text-white border-b border-[#27272A]"> <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-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] 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> <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
</tr> </tr>

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

@ -10,7 +10,7 @@
async function etfSelector(state) async function etfSelector(state)
{ {
window?.scroll({ top: 0, left: 0, behavior: 'smooth' }); //window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
goto("/etf/"+state+"/") goto("/etf/"+state+"/")
} }
@ -47,13 +47,13 @@
</thead> </thead>
<tbody> <tbody>
{#each topETFHolder as item, index} {#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} {#if index <=6}
<td > <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"> <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"> <span class="text-white text-sm">
{#if typeof item?.name !== 'undefined'} {#if typeof item?.name !== 'undefined'}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name} {item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
@ -62,16 +62,16 @@
{/if} {/if}
</span> </span>
</div> </div>
</div> </a>
</td> </td>
<td class="text-white text-end font-semibold"> <td class="text-white text-end text-sm sm:text-[1rem]">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'} {item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets) : '-'}
</td> </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) : '-'}% {item?.weightPercentage !== null ? item?.weightPercentage?.toFixed(2) : '-'}%
</td> </td>
{/if} {/if}
@ -148,7 +148,7 @@
</td> </td>
<td class="text-white text-end font-semibold "> <td class="text-white text-end font-semibold ">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'} {item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets) : '-'}
</td> </td>
<td class="text-white font-semibold text-end"> <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' } { condition: "over", name: "marketCap", value: '100M' }
] ]
}, },
topAIStocks: {
name : 'Top AI Stocks',
rules: [
{ condition: "", name: "score", value: 'Strong Buy' },
]
},
momentumTAStocks: { momentumTAStocks: {
name: 'Momentum TA Stocks', name: 'Momentum TA Stocks',
rules: [ rules: [
@ -953,7 +959,7 @@ function handleInput(event) {
Top Shorted Stocks Top Shorted Stocks
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item on:click={() => popularStrategy('topAIStocks')} class="cursor-pointer hover:bg-[#27272A]"> <DropdownMenu.Item on:click={() => popularStrategy('topAIStocks')} class="cursor-pointer hover:bg-[#27272A]">
Best AI Forecast Top AI Stocks
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item on:click={() => popularStrategy('momentumTAStocks')} class="cursor-pointer hover:bg-[#27272A]"> <DropdownMenu.Item on:click={() => popularStrategy('momentumTAStocks')} class="cursor-pointer hover:bg-[#27272A]">
Momentum TA Stocks Momentum TA Stocks

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

@ -189,7 +189,7 @@
</label> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <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> </div>
<div class="p-4 bp:p-5 sm:p-6 border-r border-contrast "> <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' })} {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"> <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>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"> <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'} {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> <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="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"> <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>
<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"> <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" <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> <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="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"> <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>
<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"> <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" <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> </div>
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"> <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> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0"> <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> <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="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"> <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>
<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"> <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" <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> </div>
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"> <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> </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"> <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)} {abbreviateNumber(item?.securitiesTransacted)}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"> <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>
<td class="font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"> <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"> <div class="flex flex-row items-center justify-end">
{#if transactionStyles[item?.transactionType]} {#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"> <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} {transactionStyles[item?.transactionType].text}
</div> </div>