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-12-01 20:44:03 +01:00
parent a20bd27438
commit 4309cfdb4d
2 changed files with 53 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/News.svelte
View File

@ -23,15 +23,24 @@
const minutes = Math.abs(Math.round(difference / (1000 * 60))); const minutes = Math.abs(Math.round(difference / (1000 * 60)));
if (minutes < 60) { if (minutes < 60) {
return `${minutes} minutes`; return `${minutes} minute${minutes !== 1 ? "s" : ""}`;
} else if (minutes < 1440) { } else if (minutes < 1440) {
const hours = Math.round(minutes / 60); const hours = Math.round(minutes / 60);
return `${hours} hour${hours !== 1 ? "s" : ""}`; return `${hours} hour${hours !== 1 ? "s" : ""}`;
} else { } else if (minutes < 10080) {
const days = Math.round(minutes / 1440); const days = Math.round(minutes / 1440);
if (days > 6) {
return "1 week";
}
return `${days} day${days !== 1 ? "s" : ""}`; return `${days} day${days !== 1 ? "s" : ""}`;
} else if (minutes < 20160) {
return "2 weeks";
} else {
const weeks = Math.round(minutes / 10080);
return `${weeks} week${weeks !== 1 ? "s" : ""}`;
} }
}; };
/* /*
let videoId = null; let videoId = null;

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

@ -1113,20 +1113,20 @@
{/if} {/if}
<div <div
class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 tiny:space-x-3 xs:space-x-4" class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
> >
<table <table
class="w-[50%] text-sm text-white tiny:text-small lg:w-full lg:min-w-[210px]" class="w-[50%] text-sm text-white sm:text-[1rem] lg:w-full lg:min-w-[210px]"
> >
<tbody <tbody
><tr ><tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Bid</td >Bid</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{$wsBidPrice !== 0 && $wsBidPrice !== null >{$wsBidPrice !== 0 && $wsBidPrice !== null
? $wsBidPrice ? $wsBidPrice
: ((data?.getStockQuote?.bid !== 0 : ((data?.getStockQuote?.bid !== 0
@ -1137,22 +1137,22 @@
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Market Cap</td >Market Cap</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{abbreviateNumber(data?.getStockQuote?.marketCap)}</td >{abbreviateNumber(data?.getStockQuote?.marketCap)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Revenue (ttm)</td >Revenue (ttm)</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{stockDeck?.revenueTTM !== null && >{stockDeck?.revenueTTM !== null &&
stockDeck?.revenueTTM !== 0 stockDeck?.revenueTTM !== 0
? abbreviateNumber(stockDeck?.revenueTTM) ? abbreviateNumber(stockDeck?.revenueTTM)
@ -1162,11 +1162,11 @@
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Net Income (ttm)</td >Net Income (ttm)</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{stockDeck?.netIncomeTTM !== null >{stockDeck?.netIncomeTTM !== null
? abbreviateNumber(stockDeck?.netIncomeTTM) ? abbreviateNumber(stockDeck?.netIncomeTTM)
: "n/a"}</td : "n/a"}</td
@ -1176,44 +1176,44 @@
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>EPS (ttm)</td >EPS (ttm)</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{data?.getStockQuote?.eps}</td >{data?.getStockQuote?.eps}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>PE Ratio (ttm)</td >PE Ratio (ttm)</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{data?.getStockQuote?.pe}</td >{data?.getStockQuote?.pe}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Forward PE</td >Forward PE</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{stockDeck?.forwardPE ?? "n/a"}</td >{stockDeck?.forwardPE ?? "n/a"}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Shares Out >Shares Out
</td> </td>
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{data?.getStockQuote?.sharesOutstanding !== null >{data?.getStockQuote?.sharesOutstanding !== null
? abbreviateNumber( ? abbreviateNumber(
data?.getStockQuote?.sharesOutstanding, data?.getStockQuote?.sharesOutstanding,
@ -1224,11 +1224,11 @@
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Short % of Shares Out</td >Short % of Shares Out</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{stockDeck?.shortOutStandingPercent !== null >{stockDeck?.shortOutStandingPercent !== null
? stockDeck?.shortOutStandingPercent + "%" ? stockDeck?.shortOutStandingPercent + "%"
: "n/a"}</td : "n/a"}</td
@ -1237,18 +1237,17 @@
</tbody> </tbody>
</table> </table>
<table <table
class="w-[48%] text-sm text-white tiny:text-small lg:w-auto lg:min-w-[210px]" class="w-[50%] text-sm text-white lg:w-auto lg:min-w-[210px]"
data-test="overview-quote"
> >
<tbody <tbody
><tr ><tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Ask</td >Ask</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{$wsAskPrice !== 0 && $wsAskPrice !== null >{$wsAskPrice !== 0 && $wsAskPrice !== null
? $wsAskPrice ? $wsAskPrice
: ((data?.getStockQuote?.ask !== 0 : ((data?.getStockQuote?.ask !== 0
@ -1259,44 +1258,46 @@
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Volume</td >Volume</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{abbreviateNumber(data?.getStockQuote?.volume)}</td >{data?.getStockQuote?.volume?.toLocaleString(
"en-us",
)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Open</td >Open</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{data?.getStockQuote?.open?.toFixed(2)}</td >{data?.getStockQuote?.open?.toFixed(2)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Previous Close</td >Previous Close</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{data?.getStockQuote?.previousClose?.toFixed(2)}</td >{data?.getStockQuote?.previousClose?.toFixed(2)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Day's Range</td >Day's Range</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed( >{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(
2, 2,
)}</td )}</td
@ -1305,11 +1306,11 @@
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>52-Week Range</td >52-Week Range</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed( >{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(
2, 2,
)}</td )}</td
@ -1318,22 +1319,22 @@
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Beta</td >Beta</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{stockDeck?.beta?.toFixed(2)}</td >{stockDeck?.beta?.toFixed(2)}</td
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Shares Float >Shares Float
</td> </td>
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{stockDeck?.floatShares !== null >{stockDeck?.floatShares !== null
? abbreviateNumber(stockDeck?.floatShares) ? abbreviateNumber(stockDeck?.floatShares)
: "n/a"}</td : "n/a"}</td
@ -1342,11 +1343,11 @@
<tr <tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]"
>Short % of Float</td >Short % of Float</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{stockDeck?.shortFloatPercent !== null >{stockDeck?.shortFloatPercent !== null
? stockDeck?.shortFloatPercent + "%" ? stockDeck?.shortFloatPercent + "%"
: "n/a"}</td : "n/a"}</td