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-11 18:21:02 +01:00
parent b6647bd6c7
commit 76cfc894dc
1 changed files with 65 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
View File

@ -82,65 +82,87 @@
</div> </div>
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="grid grid-cols-1 gap-2"> <div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
>
<div <div
class="mb-4 bg-inherit flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0" class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
> >
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6"> <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
<div class="flex items-center justify-between sm:block"> <span>Total FTD Shares</span>
<div class="text-[1rem] font-semibold text-white"> <span class="ml-1 text-violet-400">●</span>
FTD Shares </div>
</div> <div class="flex items-baseline">
<div <span class="text-2xl font-bold text-white">
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl" {abbreviateNumber(
> rawData?.slice(-1)?.at(0)?.failToDeliver,
{abbreviateNumber( false,
rawData?.slice(-1)?.at(0)?.failToDeliver, )}</span
false, >
)} <div class="flex flex-col ml-2">
</div> <span class="text-sm text-violet-400">
{rawData?.slice(-1)?.at(0)?.failToDeliver > 1e5
? "Above Average"
: "Below Average"}
</span>
</div> </div>
</div> </div>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6"> </div>
<div class="flex items-center justify-between sm:block">
<div class="text-[1rem] font-semibold text-white"> <div
FTD / Avg Volume class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
</div> >
<div <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl" <span>FTD / Avg. Volume</span>
> <span class="ml-1 text-red-400">●</span>
{relativeFTD > 0.01 </div>
? relativeFTD + "%" <div class="flex items-baseline">
: relativeFTD !== "n/a" <span class="text-2xl font-bold text-white"
? "< 0.01%" >{relativeFTD > 0.01
: "n/a"} ? relativeFTD + "%"
</div> : relativeFTD !== "n/a"
? "< 0.01%"
: "n/a"}</span
>
<div class="flex flex-col ml-2">
<span class="text-sm text-red-400">
{relativeFTD > 20 ? "High Impact" : "Low Impact"}
</span>
</div> </div>
</div> </div>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6"> </div>
<div class="flex items-center justify-between sm:block">
<div class="text-[1rem] font-semibold text-white"> <div
1-Year Change class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
</div> >
<div <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
class="mt-1 break-words font-semibold leading-8 text-[1rem] sm:text-lg {changePercentageYearAgo >= <span>1-Year Change</span>
0 && changePercentageYearAgo !== null <span class="ml-1">●</span>
</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-white"
>{changePercentageYearAgo > 100
? "> 100"
: changePercentageYearAgo?.toFixed(1)}%</span
>
<div class="flex flex-col ml-2">
<span
class="text-sm {changePercentageYearAgo >= 0 &&
changePercentageYearAgo !== null
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#00FC50]"
: changePercentageYearAgo < 0 && : changePercentageYearAgo < 0 &&
changePercentageYearAgo !== null changePercentageYearAgo !== null
? 'text-[#FF2F1F]' ? 'text-[#FF2F1F]'
: 'text-white'}" : 'text-white'}"
> >
{changePercentageYearAgo !== null {changePercentageYearAgo >= 0 ? "Positive" : "Negative"} Trend
? abbreviateNumber( </span>
changePercentageYearAgo?.toFixed(2),
) + "%"
: "n/a"}
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="grid grid-cols-1 gap-2">
<FailToDeliver {data} {rawData} /> <FailToDeliver {data} {rawData} />
</div> </div>
{:else} {:else}