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-28 13:48:00 +01:00
parent 3f47285dd4
commit 6c26959106
6 changed files with 57 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/components/Sidecard.svelte
View File

@ -20,6 +20,7 @@
let numOfAnalyst = 0; let numOfAnalyst = 0;
let consensusRating = "n/a"; let consensusRating = "n/a";
let changesPercentage = 0; let changesPercentage = 0;
let ipoDate = "n/a";
let showFullText = false; let showFullText = false;
@ -87,7 +88,16 @@
$: { $: {
if ($stockTicker && typeof window !== "undefined") { if ($stockTicker && typeof window !== "undefined") {
info = data?.getStockDeck?.at(0); info = data?.getStockDeck;
ipoDate =
info?.ipoDate !== null
? new Date(info?.ipoDate)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})
: "n/a";
//ceoName = info?.ceoName?.length !== 0 ? getAbbreviatedName(info?.ceoName) : "-"; //ceoName = info?.ceoName?.length !== 0 ? getAbbreviatedName(info?.ceoName) : "-";
sector = info?.sector ?? "-"; sector = info?.sector ?? "-";
@ -175,7 +185,7 @@
</div> </div>
<div class="col-span-1 text-gray-200"> <div class="col-span-1 text-gray-200">
<span class="block font-semibold">IPO Date</span> <span class="block font-semibold">IPO Date</span>
<span>Jan 22, 1999</span> <span>{ipoDate}</span>
</div> </div>
<div class="col-span-1 text-gray-200"> <div class="col-span-1 text-gray-200">
<span class="block font-semibold">Employees</span> <span class="block font-semibold">Employees</span>

2
src/routes/stocks/[tickerID]/+layout.server.ts
View File

@ -93,6 +93,6 @@ export const load = async ({ params, locals }) => {
getDividendAnnouncement, getDividendAnnouncement,
getNews, getNews,
getUserWatchlist, getUserWatchlist,
companyName: cleanString(getStockDeck?.at(0)?.companyName), companyName: cleanString(getStockDeck?.companyName),
}; };
}; };

5
src/routes/stocks/[tickerID]/+layout.svelte
View File

@ -60,8 +60,6 @@
let displaySection = ""; let displaySection = "";
let stockDeck;
function shareContent(url) { function shareContent(url) {
if (navigator.share) { if (navigator.share) {
navigator navigator
@ -294,7 +292,6 @@ function handleTypeOfTrade(state:string)
typeof window !== "undefined" typeof window !== "undefined"
) { ) {
// add a check to see if running on client-side // add a check to see if running on client-side
stockDeck = data?.getStockDeck;
$currentPortfolioPrice = data?.getStockQuote?.price; $currentPortfolioPrice = data?.getStockQuote?.price;
} }
@ -730,7 +727,7 @@ function handleTypeOfTrade(state:string)
: ''}" : ''}"
> >
<AIScore <AIScore
score={data?.getStockDeck?.at(0)?.score} score={data?.getStockDeck?.score}
tier={data?.user?.tier} tier={data?.user?.tier}
/> />
</div> </div>

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

@ -76,17 +76,8 @@
if (!$isCrosshairMoveActive && $realtimePrice !== null) { if (!$isCrosshairMoveActive && $realtimePrice !== null) {
change = (($realtimePrice / previousClose - 1) * 100)?.toFixed(2); change = (($realtimePrice / previousClose - 1) * 100)?.toFixed(2);
} else { } else {
change = change = (
displayData === "1D" ((currentDataRow?.close ?? currentDataRow?.value) / previousClose -
? (
((currentDataRow?.close ?? currentDataRow?.value) /
previousClose -
1) *
100
)?.toFixed(2)
: (
((currentDataRow?.close ?? currentDataRow?.value) /
displayLastLogicalRangeValue -
1) * 1) *
100 100
)?.toFixed(2); )?.toFixed(2);
@ -104,24 +95,14 @@
}; };
//const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') ? date.toLocaleString('en-GB', options).replace(/\//g, '.') : date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(/\//g, '.'); //const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') ? date.toLocaleString('en-GB', options).replace(/\//g, '.') : date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(/\//g, '.');
const formattedDate = const formattedDate = date?.toLocaleString("en-US", options);
displayData === "1D" || displayData === "1W" || displayData === "1M"
? date.toLocaleString("en-US", options)
: date.toLocaleDateString("en-US", {
day: "2-digit",
month: "short",
year: "numeric",
});
const safeFormattedDate = const safeFormattedDate =
formattedDate === "Invalid Date" formattedDate === "Invalid Date"
? convertTimestamp(data?.getStockQuote?.timestamp) ? convertTimestamp(data?.getStockQuote?.timestamp)
: formattedDate; : formattedDate;
displayLegend = { displayLegend = {
close: close: data?.getStockQuote?.price?.toFixed(2),
currentDataRow?.value === "-" && currentDataRow?.close === undefined
? data?.getStockQuote?.price
: (currentDataRow?.close ?? currentDataRow?.value),
date: safeFormattedDate, date: safeFormattedDate,
change: change, change: change,
}; };
@ -481,7 +462,6 @@
case 3: // TickMarkType.Time: case 3: // TickMarkType.Time:
formatOptions.hour12 = true; // Use 12-hour clock formatOptions.hour12 = true; // Use 12-hour clock
formatOptions.hour = "numeric"; // Use numeric hour without leading zero formatOptions.hour = "numeric"; // Use numeric hour without leading zero
formatOptions.minute = "2-digit"; // Always show minutes with leading zero
break; break;
case 4: // TickMarkType.TimeWithSeconds: case 4: // TickMarkType.TimeWithSeconds:
formatOptions.hour12 = true; // Use 12-hour clock formatOptions.hour12 = true; // Use 12-hour clock
@ -1011,16 +991,18 @@
<!--End Ticker Section--> <!--End Ticker Section-->
<!-- Start Graph --> <!-- Start Graph -->
<div class="sm:pl-7 mt-4 lg:flex lg:flex-row lg:gap-x-4 w-full"> <div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full">
{#if dataMapping[displayData]?.length === 0} {#if dataMapping[displayData]?.length === 0}
<div <div
class="order-1 lg:order-5 m-auto grow overflow-hidden border-t border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b" class="order-1 lg:order-5 m-auto grow overflow-hidden border-t border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
> >
<div class="h-[250px] sm:h-[300px]"> <div class="h-[250px] sm:h-[400px]">
<div <div
class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-600 p-6 text-center md:p-12" class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-800 p-6 text-center md:p-12"
>
<div
class="mb-4 text-white text-[1rem] sm:text-xl font-semibold"
> >
<div class="mb-4 text-white text-xl font-semibold">
No {displayData} chart data available No {displayData} chart data available
</div> </div>
</div> </div>
@ -1039,7 +1021,7 @@
<li> <li>
<button <button
on:click={() => changeData(interval)} on:click={() => changeData(interval)}
class="px-1 py-1 text-smaller xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3" class="px-1 py-1 text-sm sm:text-[1rem] xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
> >
<span <span
class="block {displayData === interval class="block {displayData === interval
@ -1057,7 +1039,7 @@
</ul> </ul>
</div> </div>
<div <div
class="flex shrink flex-row space-x-1 pr-1 text-smaller sm:text-base" class="flex shrink flex-row space-x-1 pr-1 text-sm sm:text-[1rem]"
> >
<span <span
class={displayLegend?.change >= 0 class={displayLegend?.change >= 0
@ -1258,11 +1240,9 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{data?.getStockDeck?.at(0)?.revenueTTM !== undefined >{data?.getStockDeck?.revenueTTM !== null
? abbreviateNumber( ? abbreviateNumber(data?.getStockDeck?.revenueTTM)
data?.getStockDeck?.at(0)?.revenueTTM, : "n/a"}</td
)
: "-"}</td
></tr ></tr
> >
<tr <tr
@ -1273,11 +1253,9 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{data?.getStockDeck?.at(0)?.netIncomeTTM !== undefined >{data?.getStockDeck?.netIncomeTTM !== null
? abbreviateNumber( ? abbreviateNumber(data?.getStockDeck?.netIncomeTTM)
data?.getStockDeck?.at(0)?.netIncomeTTM, : "n/a"}</td
)
: "-"}</td
></tr ></tr
> >
@ -1311,7 +1289,7 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{data?.getStockDeck?.at(0)?.forwardPE ?? "-"}</td >{data?.getStockDeck?.forwardPE ?? "n/a"}</td
></tr ></tr
> >
<tr <tr
@ -1322,9 +1300,11 @@
</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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{abbreviateNumber( >{data?.getStockQuote?.sharesOutstanding !== null
? abbreviateNumber(
data?.getStockQuote?.sharesOutstanding, data?.getStockQuote?.sharesOutstanding,
)}</td )
: "n/a"}</td
></tr ></tr
> >
<tr <tr
@ -1335,7 +1315,7 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>1.2%</td >{data?.getStockDeck?.shortOutStandingPercent}%</td
></tr ></tr
> >
</tbody> </tbody>
@ -1377,7 +1357,7 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{data?.getStockQuote?.open}</td >{data?.getStockQuote?.open?.toFixed(2)}</td
></tr ></tr
> >
<tr <tr
@ -1388,7 +1368,7 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{data?.getStockQuote?.previousClose}</td >{data?.getStockQuote?.previousClose?.toFixed(2)}</td
></tr ></tr
> >
<tr <tr
@ -1399,8 +1379,9 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{data?.getStockQuote?.dayLow} - {data?.getStockQuote >{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(
?.dayHigh}</td 2,
)}</td
></tr ></tr
> >
<tr <tr
@ -1411,8 +1392,9 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{data?.getStockQuote?.yearLow} - {data?.getStockQuote >{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(
?.yearHigh}</td 2,
)}</td
></tr ></tr
> >
<tr <tr
@ -1423,7 +1405,7 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{data?.getStockDeck?.at(0)?.beta?.toFixed(2)}</td >{data?.getStockDeck?.beta?.toFixed(2)}</td
></tr ></tr
> >
<tr <tr
@ -1434,9 +1416,9 @@
</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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>{abbreviateNumber( >{data?.getStockDeck?.floatShares !== null
data?.getStockQuote?.sharesOutstanding, ? abbreviateNumber(data?.getStockDeck?.floatShares)
)}</td : "n/a"}</td
></tr ></tr
> >
<tr <tr
@ -1447,7 +1429,7 @@
> >
<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-smaller font-semibold tiny:text-base xs:px-1 sm:py-2 sm:text-right sm:text-small"
>1.2%</td >{data?.getStockDeck?.shortFloatPercent}%</td
></tr ></tr
> >
</tbody> </tbody>

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

@ -356,9 +356,7 @@
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<section <section class="bg-[#09090B] w-full overflow-hidden text-white h-full">
class="bg-[#09090B] w-full overflow-hidden text-white h-full mb-40 sm:mb-0"
>
<div class="w-full flex justify-center m-auto h-full overflow-hidden"> <div class="w-full flex justify-center m-auto h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"

4
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -322,9 +322,7 @@
/> />
</svelte:head> </svelte:head>
<section <section class="bg-[#09090B] w-full overflow-hidden text-white h-full">
class="bg-[#09090B] w-full overflow-hidden text-white h-full pb-40 sm:mb-0"
>
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden"> <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"