AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fixing

Browse Source
This commit is contained in:
MuslemRahimi 2025-02-07 23:40:30 +01:00
parent 7d5025c087
commit 7bbf1ffeaf
1 changed files with 94 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
src/lib/components/Options/DailyStats.svelte
View File

@ -119,11 +119,9 @@
</td> </td>
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
>{@html abbreviateNumberWithColor( >{@html rawData?.net_premium
rawData?.net_premium, ? abbreviateNumberWithColor(rawData?.net_premium, false, true)
false, : "n/a"}</td
true,
)}</td
></tr ></tr
> >
</tbody> </tbody>
@ -211,78 +209,88 @@
<td <td
class="whitespace-nowrap w-full 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 w-full px-0.5 py-[1px] text-left text-sm font-semibold xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
> >
<HoverCard.Root> {#if rawData?.premium_ratio?.at(0)}
<HoverCard.Trigger <HoverCard.Root>
class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black" <HoverCard.Trigger
> class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
<div class="flex items-center sm:justify-end"> >
<!-- Bar Container --> <div class="flex items-center sm:justify-end">
<div <!-- Bar Container -->
class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
>
<!-- Bearish -->
<div <div
class="bg-red-500 h-full" class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
style="width: calc(({rawData >
?.premium_ratio[0]} / ({rawData <!-- Bearish -->
?.premium_ratio[0]} + {rawData <div
?.premium_ratio[1]} + {rawData class="bg-red-500 h-full"
?.premium_ratio[2]})) * 100%)" style="width: calc(({rawData?.premium_ratio?.at(
></div> 0,
)} / ({rawData?.premium_ratio?.at(
0,
)} + {rawData?.premium_ratio?.at(
1,
)} + {rawData?.premium_ratio?.at(2)})) * 100%)"
></div>
<!-- Neutral --> <!-- Neutral -->
<div <div
class="bg-gray-300 h-full" class="bg-gray-300 h-full"
style="width: calc(({rawData style="width: calc(({rawData?.premium_ratio?.at(
?.premium_ratio[1]} / ({rawData 1,
?.premium_ratio[0]} + {rawData )} / ({rawData?.premium_ratio?.at(
?.premium_ratio[1]} + {rawData 0,
?.premium_ratio[2]})) * 100%)" )} + {rawData?.premium_ratio?.at(
></div> 1,
)} + {rawData?.premium_ratio?.at(2)})) * 100%)"
></div>
<!-- Bullish --> <!-- Bullish -->
<div <div
class="bg-green-500 h-full" class="bg-green-500 h-full"
style="width: calc(({rawData style="width: calc(({rawData?.premium_ratio?.at(
?.premium_ratio[2]} / ({rawData 2,
?.premium_ratio[0]} + {rawData )} / ({rawData?.premium_ratio?.at(
?.premium_ratio[1]} + {rawData 0,
?.premium_ratio[2]})) * 100%)" )} + {rawData?.premium_ratio?.at(
></div> 1,
</div> )} + {rawData?.premium_ratio?.at(2)})) * 100%)"
</div> ></div>
</HoverCard.Trigger>
<HoverCard.Content
class="w-auto bg-secondary border border-gray-600"
>
<div class="flex justify-between space-x-4">
<div class="space-y-1 flex flex-col items-start text-white">
<div>
Bearish: {@html abbreviateNumberWithColor(
rawData?.premium_ratio[0],
false,
true,
)}
</div>
<div>
Neutral: {@html abbreviateNumberWithColor(
rawData?.premium_ratio[1],
false,
true,
)}
</div>
<div>
Bullish: {@html abbreviateNumberWithColor(
rawData?.premium_ratio[2],
false,
true,
)}
</div> </div>
</div> </div>
</div> </HoverCard.Trigger>
</HoverCard.Content> <HoverCard.Content
</HoverCard.Root></td class="w-auto bg-secondary border border-gray-600"
> >
<div class="flex justify-between space-x-4">
<div class="space-y-1 flex flex-col items-start text-white">
<div>
Bearish: {@html abbreviateNumberWithColor(
rawData?.premium_ratio?.at(0),
false,
true,
)}
</div>
<div>
Neutral: {@html abbreviateNumberWithColor(
rawData?.premium_ratio?.at(1),
false,
true,
)}
</div>
<div>
Bullish: {@html abbreviateNumberWithColor(
rawData?.premium_ratio?.at(2),
false,
true,
)}
</div>
</div>
</div>
</HoverCard.Content>
</HoverCard.Root>
{:else}
n/a
{/if}
</td>
</tr> </tr>
<tr <tr
@ -294,16 +302,20 @@
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
> >
{@html abbreviateNumberWithColor( {#if rawData?.net_call_premium || rawData?.net_put_premium}
rawData?.net_call_premium, {@html abbreviateNumberWithColor(
false, rawData?.net_call_premium,
true, false,
)} true,
x {@html abbreviateNumberWithColor( )}
rawData?.net_put_premium, x {@html abbreviateNumberWithColor(
false, rawData?.net_put_premium,
true, false,
)} true,
)}
{:else}
n/a
{/if}
</td></tr </td></tr
> >
</tbody> </tbody>