add change to etf layout page

This commit is contained in:
MuslemRahimi 2025-01-14 21:48:28 +01:00
parent 38d7cfbd9e
commit 9d7c91107a

View File

@ -268,7 +268,8 @@
close: item?.close !== null ? item?.close : NaN, close: item?.close !== null ? item?.close : NaN,
})); }));
let change; let changesPercentage = null;
let change = null;
let currentDataRowOneDay; let currentDataRowOneDay;
let baseClose = let baseClose =
data?.getStockQuote?.previousClose || oneDayPrice?.at(0)?.open; data?.getStockQuote?.previousClose || oneDayPrice?.at(0)?.open;
@ -288,7 +289,8 @@
: currentDataRowOneDay?.close || currentDataRowOneDay?.value; : currentDataRowOneDay?.close || currentDataRowOneDay?.value;
if (closeValue && baseClose) { if (closeValue && baseClose) {
change = ((closeValue / baseClose - 1) * 100)?.toFixed(2); change = (closeValue - baseClose)?.toFixed(2);
changesPercentage = ((closeValue / baseClose - 1) * 100)?.toFixed(2);
} }
// Format date // Format date
@ -318,11 +320,11 @@
: currentDataRowOneDay?.close?.toFixed(2) || : currentDataRowOneDay?.close?.toFixed(2) ||
data?.getStockQuote?.price?.toFixed(2), data?.getStockQuote?.price?.toFixed(2),
date: safeFormattedDate, date: safeFormattedDate,
changesPercentage,
change, change,
}; };
} }
} }
$: isTickerIncluded = userWatchList?.some( $: isTickerIncluded = userWatchList?.some(
(item) => item.user === data?.user?.id && item.ticker?.includes($etfTicker), (item) => item.user === data?.user?.id && item.ticker?.includes($etfTicker),
); );
@ -741,12 +743,22 @@
prePostData, prePostData,
)?.length === 0 )?.length === 0
? 'inline' ? 'inline'
: 'block sm:inline'} text-lg xs:text-xl sm:text-2xl {displayLegend?.change >= : 'block sm:inline'} text-lg xs:text-xl sm:text-2xl"
0
? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'}"
> >
{displayLegend?.change}% <span
class={displayLegend?.change >= 0
? "before:content-['+'] text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{displayLegend?.change}
</span>
<span
class={displayLegend?.changesPercentage >= 0
? "text-[#00FC50]"
: "text-[#FF2F1F]"}
>
({displayLegend?.changesPercentage}%)
</span>
</div> </div>
<div class="mt-0.5 text-xs sm:text-sm"> <div class="mt-0.5 text-xs sm:text-sm">
{#if !$isOpen} {#if !$isOpen}