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 2025-02-22 18:17:24 +01:00
parent e19b10ef31
commit 95a68023bf
6 changed files with 219 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -42,9 +42,6 @@
let userWatchList = data?.getUserWatchlist ?? []; let userWatchList = data?.getUserWatchlist ?? [];
let isTickerIncluded = false; let isTickerIncluded = false;
//let userPortfolio = data?.getUserPortfolio ?? [];
//let holdingShares = 0;
//let availableCash = 0;
let displaySection = ""; let displaySection = "";
let displayLegend = {}; let displayLegend = {};
@ -363,14 +360,14 @@
<svelte:window bind:scrollY={y} /> <svelte:window bind:scrollY={y} />
<body <body
class="bg-default w-full max-w-screen sm:max-w-[1350px] min-h-screen overflow-hidden" class="bg-default w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
> >
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="mt-5 flex flex-col w-full relative w-full"> <div class="mt-5 flex flex-col w-full relative w-full">
<main class="grow w-full"> <main class="grow w-full">
<section class="w-full"> <section class="w-full">
<div class="w-full"> <div class="w-full">
<div class="sm:flex sm:justify-start w-full"> <div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]">
<!--Start Mobile Navbar--> <!--Start Mobile Navbar-->
<div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden"> <div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden">
<div class="navbar w-full px-4 py-2"> <div class="navbar w-full px-4 py-2">
@ -857,7 +854,7 @@
<!--Start Ticker Section--> <!--Start Ticker Section-->
<nav <nav
class="sm:ml-4 border-b-[2px] overflow-x-scroll md:overflow-hidden whitespace-nowrap" class="sm:ml-4 border-b-[2px] overflow-x-auto whitespace-nowrap no-scrollbar"
> >
<ul <ul
class="flex flex-row items-center w-full text-[1rem] text-white" class="flex flex-row items-center w-full text-[1rem] text-white"

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

@ -4,7 +4,6 @@
import { import {
getCache, getCache,
setCache, setCache,
numberOfUnreadNotification,
globalForm, globalForm,
realtimePrice, realtimePrice,
priceIncrease, priceIncrease,
@ -27,7 +26,7 @@
export let data; export let data;
export let form; export let form;
let stockDeck = {}; let stockDeck = data?.getETFProfile?.at(0);
$: previousClose = data?.getStockQuote?.previousClose; $: previousClose = data?.getStockQuote?.previousClose;
//============================================// //============================================//
@ -164,7 +163,7 @@
} }
} }
let displayData; let displayData = "1D";
let colorChange; let colorChange;
let topColorChange; let topColorChange;
let bottomColorChange; let bottomColorChange;
@ -694,7 +693,7 @@
<div class="sm:pl-7 mt-4 mb-5 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-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-gray-800 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="flex items-center justify-between py-1 sm:pt-0.5"> <div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto"> <div class="hide-scroll overflow-x-auto">
@ -737,7 +736,7 @@
</div> </div>
{:else} {:else}
<div <div
class="order-1 lg:order-5 grow overflow-hidden 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 grow overflow-hidden border-gray-800 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="flex items-center justify-between py-1 sm:pt-0.5"> <div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto"> <div class="hide-scroll overflow-x-auto">
@ -773,7 +772,8 @@
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-[#FF2F1F]"}
> >
{displayLegend?.graphChange}% {displayLegend?.graphChange ??
data?.getStockQuote?.changesPercentage?.toFixed(2)}%
</span> </span>
<span class="hidden text-gray-200 sm:block" <span class="hidden text-gray-200 sm:block"
>({displayData})</span >({displayData})</span
@ -926,54 +926,54 @@
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" 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 sm:text-[1rem] lg:min-w-[250px] 2xl:min-w-[300px]" class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px]"
> >
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Bid</td >Bid</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{$wsBidPrice !== 0 && $wsBidPrice !== null >{$wsBidPrice !== 0 && $wsBidPrice !== null
? $wsBidPrice ? $wsBidPrice
: (data?.getStockQuote?.bid ?? "-")}</td : (data?.getStockQuote?.bid ?? "-")}</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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Market Cap</td >Market Cap</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>AUM</td >AUM</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{stockDeck?.aum !== null >{stockDeck?.aum !== null
? abbreviateNumber(stockDeck?.aum) ? abbreviateNumber(stockDeck?.aum)
: "n/a"}</td : "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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>NAV</td >NAV</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{stockDeck?.nav !== null >{stockDeck?.nav !== null
? abbreviateNumber(stockDeck?.nav) ? abbreviateNumber(stockDeck?.nav)
: "n/a"}</td : "n/a"}</td
@ -981,26 +981,26 @@
> >
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>EPS (ttm)</td >EPS (ttm)</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.eps !== null >{data?.getStockQuote?.eps !== null
? data?.getStockQuote?.eps?.toFixed(2) ? data?.getStockQuote?.eps?.toFixed(2)
: "n/a"}</td : "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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>PE Ratio (ttm)</td >PE Ratio (ttm)</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.pe !== null >{data?.getStockQuote?.pe !== null
? data?.getStockQuote?.pe?.toFixed(2) ? data?.getStockQuote?.pe?.toFixed(2)
: "n/a"}</td : "n/a"}</td
@ -1008,13 +1008,13 @@
> >
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Shares Out >Shares Out
</td> </td>
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.sharesOutstanding !== null >{data?.getStockQuote?.sharesOutstanding !== null
? abbreviateNumber( ? abbreviateNumber(
data?.getStockQuote?.sharesOutstanding, data?.getStockQuote?.sharesOutstanding,
@ -1023,13 +1023,13 @@
></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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Inception Date</td >Inception Date</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{stockDeck?.inceptionDate !== null >{stockDeck?.inceptionDate !== null
? new Date(stockDeck?.inceptionDate)?.toLocaleString( ? new Date(stockDeck?.inceptionDate)?.toLocaleString(
"en-US", "en-US",
@ -1045,77 +1045,75 @@
> >
</tbody> </tbody>
</table> </table>
<table <table class="w-[50%] text-sm text-white lg:min-w-[250px]">
class="w-[50%] text-sm text-white lg:min-w-[250px] 2xl:min-w-[300px]"
>
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Ask</td >Ask</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{$wsAskPrice !== 0 && $wsAskPrice !== null >{$wsAskPrice !== 0 && $wsAskPrice !== null
? $wsAskPrice ? $wsAskPrice
: (data?.getStockQuote?.ask ?? "-")}</td : (data?.getStockQuote?.ask ?? "-")}</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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Volume</td >Volume</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{abbreviateNumber(data?.getStockQuote?.volume)}</td >{abbreviateNumber(data?.getStockQuote?.volume)}</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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Open</td >Open</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Previous Close</td >Previous Close</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Day's Range</td >Day's Range</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed( >{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(
2, 2,
)}</td )}</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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>52-Week Range</td >52-Week Range</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed( >{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(
2, 2,
)}</td )}</td
@ -1123,26 +1121,26 @@
> >
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Holdings >Holdings
</td> </td>
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{stockDeck?.holdingsCount !== null >{stockDeck?.holdingsCount !== null
? abbreviateNumber(stockDeck?.holdingsCount) ? abbreviateNumber(stockDeck?.holdingsCount)
: "n/a"}</td : "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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Expense Ratio</td >Expense Ratio</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{stockDeck?.expenseRatio !== null >{stockDeck?.expenseRatio !== null
? stockDeck?.expenseRatio?.toFixed(2) + "%" ? stockDeck?.expenseRatio?.toFixed(2) + "%"
: "n/a"}</td : "n/a"}</td

4
src/routes/index/[tickerID]/+layout.svelte
View File

@ -361,14 +361,14 @@
<svelte:window bind:scrollY={y} /> <svelte:window bind:scrollY={y} />
<body <body
class="bg-default w-full max-w-screen sm:max-w-[1350px] min-h-screen overflow-hidden" class="bg-default w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
> >
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="mt-5 flex flex-col w-full relative w-full"> <div class="mt-5 flex flex-col w-full relative w-full">
<main class="grow w-full"> <main class="grow w-full">
<section class="w-full"> <section class="w-full">
<div class="w-full"> <div class="w-full">
<div class="sm:flex sm:justify-start w-full"> <div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]">
<!--Start Mobile Navbar--> <!--Start Mobile Navbar-->
<div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden"> <div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden">
<div class="navbar w-full px-4 py-2"> <div class="navbar w-full px-4 py-2">

123
src/routes/index/[tickerID]/+page.svelte
View File

@ -26,7 +26,7 @@
export let data; export let data;
export let form; export let form;
let stockDeck = {}; let stockDeck = data?.getIndexProfile?.at(0);
$: previousClose = data?.getStockQuote?.previousClose; $: previousClose = data?.getStockQuote?.previousClose;
//============================================// //============================================//
@ -163,7 +163,7 @@
} }
} }
let displayData; let displayData = "1D";
let colorChange; let colorChange;
let topColorChange; let topColorChange;
let bottomColorChange; let bottomColorChange;
@ -693,7 +693,7 @@
<div class="sm:pl-7 mt-4 mb-5 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-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-gray-800 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="flex items-center justify-between py-1 sm:pt-0.5"> <div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto"> <div class="hide-scroll overflow-x-auto">
@ -736,7 +736,7 @@
</div> </div>
{:else} {:else}
<div <div
class="order-1 lg:order-5 grow overflow-hidden 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 grow overflow-hidden border-gray-800 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="flex items-center justify-between py-1 sm:pt-0.5"> <div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto"> <div class="hide-scroll overflow-x-auto">
@ -772,7 +772,8 @@
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-[#FF2F1F]"}
> >
{displayLegend?.graphChange}% {displayLegend?.graphChange ??
data?.getStockQuote?.changesPercentage?.toFixed(2)}%
</span> </span>
<span class="hidden text-gray-200 sm:block" <span class="hidden text-gray-200 sm:block"
>({displayData})</span >({displayData})</span
@ -925,141 +926,110 @@
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" 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 sm:text-[1rem] lg:min-w-[250px] 2xl:min-w-[300px]" class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px]"
>
<tbody
><tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]"
>Bid</td
>
<td
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
: (data?.getStockQuote?.bid ?? "-")}</td
></tr
> >
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Open</td >Open</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>{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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Volume</td >Volume</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>{data?.getStockQuote?.volume ? abbreviateNumber(data?.getStockQuote?.volume) : 'n/a'}</td >{data?.getStockQuote?.volume
? abbreviateNumber(data?.getStockQuote?.volume)
: "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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Market Cap</td >Market Cap</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>n/a</td >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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Price Avg 50</td >Price Avg 50</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>{data?.getStockQuote?.priceAvg50?.toFixed(2)}</td >{data?.getStockQuote?.priceAvg50?.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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Day's Range</td >Day's Range</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed( >{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(
2, 2,
)}</td )}</td
></tr ></tr
> >
</tbody> </tbody>
</table> </table>
<table <table class="w-[50%] text-sm text-white lg:min-w-[250px]">
class="w-[50%] text-sm text-white lg:min-w-[250px] 2xl:min-w-[300px]" <tbody>
>
<tbody
><tr
class="flex flex-col border-b border-gray-600 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]"
>Ask</td
>
<td
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
: (data?.getStockQuote?.ask ?? "-")}</td
></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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Previous Close</td >Previous Close</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>{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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Avg. Volume</td >Avg. Volume</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>{data?.getStockQuote?.avgVolume ? abbreviateNumber(data?.getStockQuote?.avgVolume) : 'n/a'}</td >{data?.getStockQuote?.avgVolume
? abbreviateNumber(data?.getStockQuote?.avgVolume)
: "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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Holdings >Holdings
</td> </td>
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>{stockDeck?.holdingsCount !== null >{stockDeck?.holdingsCount !== null
? abbreviateNumber(stockDeck?.holdingsCount) ? abbreviateNumber(stockDeck?.holdingsCount)
: "n/a"}</td : "n/a"}</td
@ -1067,31 +1037,30 @@
> >
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Price Avg 200</td >Price Avg 200</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>{data?.getStockQuote?.priceAvg200?.toFixed(2)}</td >{data?.getStockQuote?.priceAvg200?.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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>52-Week Range</td >52-Week Range</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:text-right"
>{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed( >{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(
2, 2,
)}</td )}</td
></tr ></tr
> >
</tbody> </tbody>
</table> </table>
</div> </div>

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

@ -377,14 +377,14 @@
<svelte:window bind:scrollY={y} /> <svelte:window bind:scrollY={y} />
<body <body
class="bg-default w-full max-w-screen sm:max-w-[1350px] min-h-screen overflow-hidden" class="bg-default w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
> >
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="mt-5 flex flex-col w-full relative w-full"> <div class="mt-5 flex flex-col w-full relative w-full">
<main class="grow w-full"> <main class="grow w-full">
<section class="w-full"> <section class="">
<div class="w-full"> <div class="w-full">
<div class="sm:flex sm:justify-start w-full"> <div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]">
<!--Start Mobile Navbar--> <!--Start Mobile Navbar-->
<div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden"> <div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden">
<div class="navbar w-full px-4 py-2"> <div class="navbar w-full px-4 py-2">
@ -896,7 +896,7 @@
<!--Start Ticker Section--> <!--Start Ticker Section-->
<nav <nav
class="sm:ml-4 border-b-[2px] overflow-x-scroll md:overflow-hidden whitespace-nowrap" class="sm:ml-4 border-b-[2px] overflow-x-auto whitespace-nowrap no-scrollbar"
> >
<ul <ul
class="flex flex-row items-center w-full text-[1rem] text-white" class="flex flex-row items-center w-full text-[1rem] text-white"

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

@ -29,7 +29,7 @@
export let data; export let data;
export let form; export let form;
let stockDeck = {}; let stockDeck = data?.getStockDeck;
$: previousClose = data?.getStockQuote?.previousClose; $: previousClose = data?.getStockQuote?.previousClose;
//============================================// //============================================//
@ -166,7 +166,7 @@
} }
} }
let displayData; let displayData = "1D";
let colorChange; let colorChange;
let topColorChange; let topColorChange;
let bottomColorChange; let bottomColorChange;
@ -378,7 +378,6 @@
})); }));
displayData = displayData =
oneDayPrice?.length === 0 && sixMonthPrice?.length !== 0 ? "6M" : "1D"; oneDayPrice?.length === 0 && sixMonthPrice?.length !== 0 ? "6M" : "1D";
//lastValue = oneDayPrice[oneDayPrice?.length - 1]?.value;
if (displayData === "1D") { if (displayData === "1D") {
const length = oneDayPrice?.length; const length = oneDayPrice?.length;
for (let i = length - 1; i >= 0; i--) { for (let i = length - 1; i >= 0; i--) {
@ -396,8 +395,6 @@
? sixMonthPrice?.at(0)?.close ? sixMonthPrice?.at(0)?.close
: oneDayPrice?.at(0)?.close; //previousClose; : oneDayPrice?.at(0)?.close; //previousClose;
//colorChange = lastValue < displayLastLogicalRangeValue ? "#CC3636" : "#367E18";
colorChange = colorChange =
lastValue < displayLastLogicalRangeValue ? "#FF2F1F" : "#00FC50"; lastValue < displayLastLogicalRangeValue ? "#FF2F1F" : "#00FC50";
topColorChange = topColorChange =
@ -696,7 +693,7 @@
<div class="sm:pl-7 mt-4 mb-5 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-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-gray-800 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="flex items-center justify-between py-1 sm:pt-0.5"> <div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto"> <div class="hide-scroll overflow-x-auto">
@ -739,7 +736,7 @@
</div> </div>
{:else} {:else}
<div <div
class="order-1 lg:order-5 grow overflow-hidden 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 grow overflow-hidden border-gray-800 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="flex items-center justify-between py-1 sm:pt-0.5"> <div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto"> <div class="hide-scroll overflow-x-auto">
@ -775,7 +772,8 @@
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-[#FF2F1F]"}
> >
{displayLegend?.graphChange}% {displayLegend?.graphChange ??
data?.getStockQuote?.changesPercentage?.toFixed(2)}%
</span> </span>
<span class="hidden text-gray-200 sm:block" <span class="hidden text-gray-200 sm:block"
>({displayData})</span >({displayData})</span
@ -928,17 +926,17 @@
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" 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 sm:text-[1rem] lg:min-w-[250px] 2xl:min-w-[300px]" class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px]"
> >
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Bid</td >Bid</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{$wsBidPrice !== 0 && $wsBidPrice !== null >{$wsBidPrice !== 0 && $wsBidPrice !== null
? $wsBidPrice ? $wsBidPrice
: ((data?.getStockQuote?.bid !== 0 : ((data?.getStockQuote?.bid !== 0
@ -947,9 +945,9 @@
></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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
><a ><a
href={`/stocks/${$stockTicker}/statistics/market-cap`} href={`/stocks/${$stockTicker}/statistics/market-cap`}
class="sm:hover:text-blue-400 text-white underline underline-offset-4" class="sm:hover:text-blue-400 text-white underline underline-offset-4"
@ -957,7 +955,7 @@
></td ></td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{@html abbreviateNumber( >{@html abbreviateNumber(
data?.getStockQuote?.marketCap, data?.getStockQuote?.marketCap,
false, false,
@ -966,13 +964,13 @@
></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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Revenue (ttm)</td >Revenue (ttm)</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{@html stockDeck?.revenueTTM !== null && >{@html stockDeck?.revenueTTM !== null &&
stockDeck?.revenueTTM !== 0 stockDeck?.revenueTTM !== 0
? abbreviateNumber(stockDeck?.revenueTTM, false, true) ? abbreviateNumber(stockDeck?.revenueTTM, false, true)
@ -980,13 +978,13 @@
></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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Net Income (ttm)</td >Net Income (ttm)</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{@html stockDeck?.netIncomeTTM !== null >{@html stockDeck?.netIncomeTTM !== null
? abbreviateNumber(stockDeck?.netIncomeTTM, false, true) ? abbreviateNumber(stockDeck?.netIncomeTTM, false, true)
: "n/a"}</td : "n/a"}</td
@ -994,42 +992,42 @@
> >
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>EPS (ttm)</td >EPS (ttm)</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.eps ?? "n/a"}</td >{data?.getStockQuote?.eps ?? "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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>PE Ratio (ttm)</td >PE Ratio (ttm)</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.pe ?? "n/a"}</td >{data?.getStockQuote?.pe ?? "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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Forward PE</td >Forward PE</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
><a ><a
href={data?.getAnalystSummary?.consensusRating !== href={data?.getAnalystSummary?.consensusRating !==
undefined undefined
@ -1042,7 +1040,7 @@
> >
</td> </td>
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getAnalystSummary?.consensusRating !== null && >{data?.getAnalystSummary?.consensusRating !== null &&
data?.getAnalystSummary?.consensusRating !== "n/a" && data?.getAnalystSummary?.consensusRating !== "n/a" &&
data?.getAnalystSummary?.consensusRating !== undefined data?.getAnalystSummary?.consensusRating !== undefined
@ -1052,18 +1050,16 @@
> >
</tbody> </tbody>
</table> </table>
<table <table class="w-[50%] text-sm text-white lg:min-w-[250px]">
class="w-[50%] text-sm text-white lg:min-w-[250px] 2xl:min-w-[300px]"
>
<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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Ask</td >Ask</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{$wsAskPrice !== 0 && $wsAskPrice !== null >{$wsAskPrice !== 0 && $wsAskPrice !== null
? $wsAskPrice ? $wsAskPrice
: ((data?.getStockQuote?.ask !== 0 : ((data?.getStockQuote?.ask !== 0
@ -1072,26 +1068,26 @@
></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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Volume</td >Volume</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.volume?.toLocaleString( >{data?.getStockQuote?.volume?.toLocaleString(
"en-us", "en-us",
)}</td )}</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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Avg. Volume (20D)</td >Avg. Volume (20D)</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.avgVolume !== undefined >{data?.getStockQuote?.avgVolume !== undefined
? data?.getStockQuote?.avgVolume?.toLocaleString( ? data?.getStockQuote?.avgVolume?.toLocaleString(
"en-us", "en-us",
@ -1100,61 +1096,61 @@
></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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Open</td >Open</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Previous Close</td >Previous Close</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Day's Range</td >Day's Range</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed( >{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(
2, 2,
)}</td )}</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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>52-Week Range</td >52-Week Range</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed( >{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(
2, 2,
)}</td )}</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-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Beta</td >Beta</td
> >
<td <td
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]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-1 sm:text-right"
>{stockDeck?.beta?.toFixed(2)}</td >{stockDeck?.beta?.toFixed(2)}</td
></tr ></tr
> >