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

update screener

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-11 18:31:56 +01:00
parent 10c1b9f450
commit a5e30715ed
1 changed files with 110 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
src/routes/stock-screener/+page.svelte
View File

@ -2547,10 +2547,8 @@ const handleKeyDown = (event) => {
<div class="sm:rounded-md"> <div class="sm:rounded-md">
<div class="flex flex-col md:flex-row items-start md:items-center mb-5"> <div class="flex flex-col md:flex-row items-start md:items-center mb-5">
<div class="w-full flex flex-row items-center sm:mt-4"> <div class="w-full flex flex-row items-center sm:mt-4">
<h1 class="text-white text-3xl font-semibold">Stock Screener</h1> <h1 class=" text-3xl font-semibold">Stock Screener</h1>
<span <span class="inline-block text-xs sm:text-sm font-semibold ml-2 mt-3">
class="inline-block text-xs sm:text-sm font-semibold text-white ml-2 mt-3"
>
{filteredData?.length} Matches Found {filteredData?.length} Matches Found
</span> </span>
</div> </div>
@ -2558,7 +2556,7 @@ const handleKeyDown = (event) => {
<div class="flex flex-row items-center w-full mt-5"> <div class="flex flex-row items-center w-full mt-5">
<div class="flex w-full sm:w-[50%] md:block md:w-auto sm:ml-auto"> <div class="flex w-full sm:w-[50%] md:block md:w-auto sm:ml-auto">
<div <div
class="hidden text-sm sm:text-[1rem] font-semibold text-white md:block sm:mb-1" class="hidden text-sm sm:text-[1rem] font-semibold md:block sm:mb-1"
> >
Popular Screens Popular Screens
</div> </div>
@ -2567,9 +2565,9 @@ const handleKeyDown = (event) => {
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate" class="w-full shadow-sm border-gray-300 dark:border-gray-600 border bg-white dark:bg-default sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
> >
<span class="truncate text-white" <span class="truncate"
>{selectedPopularStrategy?.length !== 0 >{selectedPopularStrategy?.length !== 0
? selectedPopularStrategy ? selectedPopularStrategy
: "Select popular"}</span : "Select popular"}</span
@ -2592,45 +2590,45 @@ const handleKeyDown = (event) => {
<DropdownMenu.Content <DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
> >
<DropdownMenu.Label class="text-gray-400"> <DropdownMenu.Label class="text-muted dark:text-gray-400">
Popular Strategies Popular Strategies
</DropdownMenu.Label> </DropdownMenu.Label>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
<DropdownMenu.Group> <DropdownMenu.Group>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => popularStrategy("dividendGrowth")} on:click={() => popularStrategy("dividendGrowth")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Dividend Growth Dividend Growth
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => popularStrategy("topGainers1Y")} on:click={() => popularStrategy("topGainers1Y")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Top Gainers 1Y Top Gainers 1Y
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => popularStrategy("topShortedStocks")} on:click={() => popularStrategy("topShortedStocks")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Top Shorted Stocks Top Shorted Stocks
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => popularStrategy("momentumTAStocks")} on:click={() => popularStrategy("momentumTAStocks")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Momentum TA Stocks Momentum TA Stocks
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => popularStrategy("underValuedStocks")} on:click={() => popularStrategy("underValuedStocks")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Undervalued Stocks Undervalued Stocks
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => popularStrategy("strongCashFlow")} on:click={() => popularStrategy("strongCashFlow")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Strong Cash Flow Strong Cash Flow
</DropdownMenu.Item> </DropdownMenu.Item>
@ -2642,7 +2640,7 @@ const handleKeyDown = (event) => {
<div class="flex w-full sm:w-[50%] sm:ml-3 md:block md:w-auto ml-3"> <div class="flex w-full sm:w-[50%] sm:ml-3 md:block md:w-auto ml-3">
<div <div
class="hidden text-sm sm:text-[1rem] font-semibold text-white md:block sm:mb-1" class="hidden text-sm sm:text-[1rem] font-semibold md:block sm:mb-1"
> >
Saved Screens Saved Screens
</div> </div>
@ -2651,9 +2649,9 @@ const handleKeyDown = (event) => {
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="min-w-[110px] w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate" class="min-w-[110px] shadow-sm w-full border-gray-300 dark:border-gray-600 border bg-white dark:bg-default sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
> >
<span class="truncate text-white" <span class="truncate"
>{selectedStrategy?.length !== 0 >{selectedStrategy?.length !== 0
? strategyList?.find( ? strategyList?.find(
(item) => item.id === selectedStrategy, (item) => item.id === selectedStrategy,
@ -2678,12 +2676,12 @@ const handleKeyDown = (event) => {
<DropdownMenu.Content <DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
> >
<DropdownMenu.Label class="text-gray-400"> <DropdownMenu.Label class="text-muted dark:text-gray-400">
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
on:click={handleCreateStrategy} on:click={handleCreateStrategy}
builders={[builder]} builders={[builder]}
class="p-0 -mb-2 -mt-2 text-sm inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap text-white bg-[#0909B] focus:outline-hidden sm:text-smaller" class="p-0 -mb-2 -mt-2 text-sm inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap bg-[#0909B] focus:outline-hidden sm:text-smaller"
> >
<svg <svg
class="h-4 w-4" class="h-4 w-4"
@ -2708,8 +2706,8 @@ const handleKeyDown = (event) => {
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => switchStrategy(item)} on:click={() => switchStrategy(item)}
class="{item?.id === selectedStrategy class="{item?.id === selectedStrategy
? 'bg-primary' ? 'bg-gray-300 dark:bg-primary'
: ''} cursor-pointer sm:hover:bg-primary" : ''} cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
{item?.title} ({item?.rules?.length}) {item?.title} ({item?.rules?.length})
</DropdownMenu.Item> </DropdownMenu.Item>
@ -2722,14 +2720,16 @@ const handleKeyDown = (event) => {
</div> </div>
</div> </div>
<div class="rounded-md border border-gray-700 bg-primary p-2">
<div class="items-end border-b border-gray-600">
<div <div
class="mr-1 flex items-center justify-between lg:mr-2 pb-1.5 border-b border-gray-600 mt-1.5" class="rounded-md border border-gray-300 dark:border-gray-700 bg-gray-100 shadow-sm dark:bg-primary p-2"
>
<div class="items-end border-b border-gray-300 dark:border-gray-600">
<div
class="mr-1 flex items-center justify-between lg:mr-2 pb-1.5 border-b border-gray-300 dark:border-gray-600 mt-1.5"
> >
<button <button
on:click={() => (showFilters = !showFilters)} on:click={() => (showFilters = !showFilters)}
class="flex cursor-pointer items-center text-lg sm:text-xl font-semibold text-gray-200" class="flex cursor-pointer items-center text-lg sm:text-xl font-semibold"
title="Hide Filter Area" title="Hide Filter Area"
> >
<svg <svg
@ -2752,7 +2752,7 @@ const handleKeyDown = (event) => {
<div class="mt-3 flex flex-col gap-y-2.5 sm:flex-row lg:gap-y-2"> <div class="mt-3 flex flex-col gap-y-2.5 sm:flex-row lg:gap-y-2">
<label <label
for="ruleModal" for="ruleModal"
class="inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 font-semibold text-white shadow-xs bg-[#000] sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller" class="inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-gray-300 dark:border-none bg-blue-brand_light py-2 pl-3 pr-4 font-semibold shadow-sm bg-white sm:hover:bg-gray-100 dark:bg-[#000] dark:sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller"
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
@ -2774,14 +2774,14 @@ const handleKeyDown = (event) => {
<label <label
for={!data?.user ? "userLogin" : ""} for={!data?.user ? "userLogin" : ""}
on:click={() => handleSave(true)} on:click={() => handleSave(true)}
class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 font-semibold text-white shadow-xs bg-[#000] sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller" class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-gray-300 dark:border-none bg-blue-brand_light py-2 pl-3 pr-4 font-semibold shadow-sm bg-white sm:hover:bg-gray-100 dark:bg-[#000] dark:sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller"
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32" viewBox="0 0 32 32"
><path ><path
fill="#fff" fill="currentColor"
d="M5 5v22h22V9.594l-.281-.313l-4-4L22.406 5zm2 2h3v6h12V7.437l3 3V25h-2v-9H9v9H7zm5 0h4v2h2V7h2v4h-8zm-1 11h10v7H11z" d="M5 5v22h22V9.594l-.281-.313l-4-4L22.406 5zm2 2h3v6h12V7.437l3 3V25h-2v-9H9v9H7zm5 0h4v2h2V7h2v4h-8zm-1 11h10v7H11z"
/></svg /></svg
> >
@ -2790,7 +2790,7 @@ const handleKeyDown = (event) => {
<label <label
for="deleteStrategy" for="deleteStrategy"
class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 font-semibold text-white shadow-xs bg-[#000] sm:hover:bg-default/60 ease-out sm:hover:text-red-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller" class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-gray-300 dark:border-none bg-blue-brand_light py-2 pl-3 pr-4 font-semibold shadow-sm bg-white sm:hover:bg-gray-100 dark:bg-[#000] dark:sm:hover:bg-default/60 ease-out sm:hover:text-red-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller"
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
@ -2808,7 +2808,7 @@ const handleKeyDown = (event) => {
{#if ruleOfList?.length !== 0} {#if ruleOfList?.length !== 0}
<label <label
on:click={handleResetAll} on:click={handleResetAll}
class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 font-semibold text-white shadow-xs bg-[#000] sm:hover:text-red-500 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller" class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-gray-300 dark:border-none bg-blue-brand_light py-2 pl-3 pr-4 font-semibold shadow-sm bg-white sm:hover:bg-gray-100 dark:bg-[#000] dark:sm:hover:text-red-500 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller"
> >
<svg <svg
class="h-4 w-4" class="h-4 w-4"
@ -2845,14 +2845,14 @@ const handleKeyDown = (event) => {
</div> </div>
<div <div
class="sm:grid sm:gap-x-2.5 md:grid-cols-2 lg:grid-cols-3 w-full mt-3 border-t border-b border-gray-600" class="sm:grid sm:gap-x-2.5 md:grid-cols-2 lg:grid-cols-3 w-full mt-3 border-t border-b border-gray-300 dark:border-gray-600"
> >
{#each displayRules as row (row?.rule)} {#each displayRules as row (row?.rule)}
<!--Start Added Rules--> <!--Start Added Rules-->
<div <div
class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-white" class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight"
> >
<div class="hide-scroll text-white"> <div class="hide-scroll">
{row?.label?.length > 20 {row?.label?.length > 20
? row?.label?.slice(0, 20)?.replace("[%]", "") + "..." ? row?.label?.slice(0, 20)?.replace("[%]", "") + "..."
: row?.label?.replace("[%]", "")} : row?.label?.replace("[%]", "")}
@ -2865,7 +2865,7 @@ const handleKeyDown = (event) => {
role="tooltip" role="tooltip"
> >
<span <span
class="absolute -right-[15px] -top-[3px] cursor-pointer p-1 text-gray-300 sm:hover:text-white" class="absolute -right-[15px] -top-[3px] cursor-pointer p-1 text-gray-300 sm:hover:"
> >
<svg <svg
class="h-[10.5px] w-[10.5px]" class="h-[10.5px] w-[10.5px]"
@ -2922,7 +2922,7 @@ const handleKeyDown = (event) => {
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-md truncate" class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 rounded-md truncate"
> >
<span class="truncate ml-2 text-sm sm:text-[1rem]"> <span class="truncate ml-2 text-sm sm:text-[1rem]">
{#if valueMappings[row?.rule] === "any"} {#if valueMappings[row?.rule] === "any"}
@ -2972,7 +2972,7 @@ const handleKeyDown = (event) => {
<DropdownMenu.Trigger asChild let:builder <DropdownMenu.Trigger asChild let:builder
><Button ><Button
builders={[builder]} builders={[builder]}
class="w-fit -mt-1 -ml-2 bg-default flex flex-row justify-between items-center text-white" class="w-fit -mt-1 -ml-2 bg-default flex flex-row justify-between items-center "
> >
<span <span
class="truncate ml-2 text-sm sm:text-[1rem]" class="truncate ml-2 text-sm sm:text-[1rem]"
@ -3027,11 +3027,9 @@ const handleKeyDown = (event) => {
: ""} : ""}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule, 0)} handleValueInput(e, row?.rule, 0)}
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-secondary" class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-secondary"
/> />
<span <span class=" text-[1rem] font-normal mt-1">
class="text-white text-[1rem] font-normal mt-1"
>
& &
</span> </span>
<input <input
@ -3044,7 +3042,7 @@ const handleKeyDown = (event) => {
: ""} : ""}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule, 1)} handleValueInput(e, row?.rule, 1)}
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-secondary" class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-secondary"
/> />
</div> </div>
{:else} {:else}
@ -3056,7 +3054,7 @@ const handleKeyDown = (event) => {
: ""} : ""}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule)} handleValueInput(e, row?.rule)}
class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-secondary" class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-secondary"
/> />
{/if} {/if}
@ -3071,7 +3069,7 @@ const handleKeyDown = (event) => {
"add", "add",
)} )}
><svg ><svg
class="size-6 cursor-pointer text-white" class="size-6 cursor-pointer"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -3091,7 +3089,7 @@ const handleKeyDown = (event) => {
"minus", "minus",
)} )}
><svg ><svg
class="size-6 cursor-pointer text-white" class="size-6 cursor-pointer"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -3131,7 +3129,7 @@ const handleKeyDown = (event) => {
]?.includes(row?.rule) ]?.includes(row?.rule)
? 'hidden' ? 'hidden'
: ''} absolute fixed sticky w-full border-0 bg-default border-b border-gray-200 : ''} absolute fixed sticky w-full border-0 bg-default border-b border-gray-200
focus:border-gray-200 focus:ring-0 text-white placeholder:text-gray-300" focus:border-gray-200 focus:ring-0 placeholder:text-gray-300"
type="search" type="search"
placeholder="Search..." placeholder="Search..."
/> />
@ -3152,7 +3150,7 @@ const handleKeyDown = (event) => {
row?.step[index + 1], row?.step[index + 1],
]); ]);
}} }}
class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden" class="block w-full border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 sm:hover:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden"
> >
{ruleCondition[row?.rule]?.replace( {ruleCondition[row?.rule]?.replace(
"between", "between",
@ -3170,7 +3168,7 @@ const handleKeyDown = (event) => {
on:click={() => { on:click={() => {
handleChangeValue(newValue); handleChangeValue(newValue);
}} }}
class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden" class="block w-full border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 sm:hover:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden"
> >
{ruleCondition[row?.rule] {ruleCondition[row?.rule]
?.replace("under", "Under") ?.replace("under", "Under")
@ -3193,7 +3191,7 @@ const handleKeyDown = (event) => {
on:click={() => { on:click={() => {
handleChangeValue(item); handleChangeValue(item);
}} }}
class="cursor-pointer text-white" class="cursor-pointer"
for={item} for={item}
> >
<input <input
@ -3218,7 +3216,7 @@ const handleKeyDown = (event) => {
on:click={() => { on:click={() => {
handleChangeValue(item); handleChangeValue(item);
}} }}
class="cursor-pointer text-white" class="cursor-pointer"
for={item} for={item}
> >
<input <input
@ -3253,12 +3251,12 @@ const handleKeyDown = (event) => {
class="mt-10 sm:mt-6 grid-cols-2 items-center sm:grid lg:flex lg:space-x-1 lg:overflow-visible lg:px-1 lg:py-2" class="mt-10 sm:mt-6 grid-cols-2 items-center sm:grid lg:flex lg:space-x-1 lg:overflow-visible lg:px-1 lg:py-2"
> >
<h2 <h2
class="mb-1 whitespace-nowrap text-xl font-semibold text-white bp:text-[1.3rem] sm:mb-0" class="mb-1 whitespace-nowrap text-xl font-semibold bp:text-[1.3rem] sm:mb-0"
> >
{filteredData?.length} Stocks {filteredData?.length} Stocks
</h2> </h2>
<div <div
class="col-span-2 flex flex-row items-center border-t border-gray-600 lg:order-2 lg:grow lg:border-0 lg:pl-1 xl:pl-3" class="col-span-2 flex flex-row items-center border-t border-gray-300 dark:border-gray-600 lg:order-2 lg:grow lg:border-0 lg:pl-1 xl:pl-3"
> >
<nav class="w-full flex flex-row items-center py-2.5 sm:py-3 lg:py-1"> <nav class="w-full flex flex-row items-center py-2.5 sm:py-3 lg:py-1">
<ul <ul
@ -3267,9 +3265,9 @@ const handleKeyDown = (event) => {
<li> <li>
<button <button
on:click={() => (displayTableTab = "general")} on:click={() => (displayTableTab = "general")}
class="cursor-pointer text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-primary {displayTableTab === class="cursor-pointer text-[1rem] sm:text-lg block rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-gray-100 dark:sm:hover:bg-primary {displayTableTab ===
'general' 'general'
? 'font-semibold bg-primary' ? 'font-semibold bg-gray-100 dark:bg-primary'
: ''}" : ''}"
> >
General General
@ -3278,18 +3276,17 @@ const handleKeyDown = (event) => {
<li> <li>
<button <button
on:click={() => (displayTableTab = "filters")} on:click={() => (displayTableTab = "filters")}
class="cursor-pointer text-[1rem] sm:text-lg flex flex-row items-center relative block rounded-md px-2 py-1 sm:hover:bg-primary {displayTableTab === class="cursor-pointer text-[1rem] sm:text-lg flex flex-row items-center relative block rounded-md px-2 py-1 sm:hover:bg-gray-100 dark:sm:hover:bg-primary{displayTableTab ===
'filters' 'filters'
? 'font-semibold bg-primary' ? 'font-semibold bg-gray-100 dark:bg-primary'
: ''} focus:outline-hidden" : ''} focus:outline-hidden"
> >
<span class="text-white">Filters</span> <span class="">Filters</span>
<span <span
class="ml-2 rounded-full avatar w-5 h-5 text-xs font-semibold text-white text-center shrink-0 class="ml-2 rounded-full avatar w-5 h-5 text-xs font-semibold text-center shrink-0 flex items-center justify-center {ruleOfList?.length !==
flex items-center justify-center {ruleOfList?.length !==
0 0
? 'bg-red-500' ? 'bg-red-500'
: 'bg-gray-600'}" : 'bg-gray-200 dark:bg-gray-600'}"
> >
{ruleOfList?.length} {ruleOfList?.length}
</span> </span>
@ -3298,9 +3295,9 @@ const handleKeyDown = (event) => {
<li> <li>
<button <button
on:click={() => changeTab("performance")} on:click={() => changeTab("performance")}
class="cursor-pointer text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-primary {displayTableTab === class="cursor-pointer text-[1rem] sm:text-lg block rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-gray-100 dark:sm:hover:bg-primary{displayTableTab ===
'performance' 'performance'
? 'font-semibold bg-primary' ? 'font-semibold bg-gray-100 dark:bg-primary'
: ''}" : ''}"
> >
Performance Performance
@ -3309,9 +3306,9 @@ const handleKeyDown = (event) => {
<li> <li>
<button <button
on:click={() => changeTab("analysts")} on:click={() => changeTab("analysts")}
class="cursor-pointer text-[1rem] sm:text-lg block text-white rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-primary {displayTableTab === class="cursor-pointer text-[1rem] sm:text-lg block rounded-md px-2 py-1 focus:outline-hidden sm:hover:bg-gray-100 dark:sm:hover:bg-primary{displayTableTab ===
'analysts' 'analysts'
? 'font-semibold bg-primary' ? 'font-semibold bg-gray-100 dark:bg-primary'
: ''}" : ''}"
> >
Analysts Analysts
@ -3335,7 +3332,7 @@ const handleKeyDown = (event) => {
{#if displayTableTab === "general"} {#if displayTableTab === "general"}
<div class="w-full rounded-md overflow-x-auto"> <div class="w-full rounded-md overflow-x-auto">
<table <table
class="table table-sm table-compact w-full bg-table border border-gray-800" class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -3343,33 +3340,33 @@ const handleKeyDown = (event) => {
<tbody> <tbody>
{#each displayResults as item} {#each displayResults as item}
<tr <tr
class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
> >
<td class=" whitespace-nowrap"> <td class=" whitespace-nowrap">
<a <a
href={"/stocks/" + item?.symbol} href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]" class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400 text-sm sm:text-[1rem]"
>{item?.symbol}</a >{item?.symbol}</a
> >
</td> </td>
<td class="whitespace-nowrap text-[1rem] text-white"> <td class="whitespace-nowrap text-[1rem]">
{item?.name?.length > charNumber {item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..." ? item?.name?.slice(0, charNumber) + "..."
: item?.name} : item?.name}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{item?.marketCap < 100 {item?.marketCap < 100
? "< 100" ? "< 100"
: abbreviateNumber(item?.marketCap)} : abbreviateNumber(item?.marketCap)}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{item?.price < 0.01 ? "< 0.01" : item?.price?.toFixed(2)} {item?.price < 0.01 ? "< 0.01" : item?.price?.toFixed(2)}
</td> </td>
<td class="text-white text-end text-sm sm:text-[1rem]"> <td class=" text-end text-sm sm:text-[1rem]">
{#if item?.changesPercentage >= 0} {#if item?.changesPercentage >= 0}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changesPercentage >= 1000 >+{item?.changesPercentage >= 1000
@ -3385,11 +3382,11 @@ const handleKeyDown = (event) => {
{/if} {/if}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{item?.volume === 0 ? "-" : abbreviateNumber(item?.volume)} {item?.volume === 0 ? "-" : abbreviateNumber(item?.volume)}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{item?.pe} {item?.pe}
</td> </td>
</tr> </tr>
@ -3413,24 +3410,22 @@ const handleKeyDown = (event) => {
<td class=" whitespace-nowrap"> <td class=" whitespace-nowrap">
<a <a
href={"/stocks/" + item?.symbol} href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]" class="sm:hover: text-blue-400 text-sm sm:text-[1rem]"
>{item?.symbol}</a >{item?.symbol}</a
> >
</td> </td>
<td class=" whitespace-nowrap text-[1rem] text-white"> <td class=" whitespace-nowrap text-[1rem]">
{item?.name?.length > charNumber {item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..." ? item?.name?.slice(0, charNumber) + "..."
: item?.name} : item?.name}
</td> </td>
<td <td class="whitespace-nowrap text-sm sm:text-[1rem] text-end">
class="whitespace-nowrap text-sm sm:text-[1rem] text-end text-white"
>
{abbreviateNumber(item?.marketCap)} {abbreviateNumber(item?.marketCap)}
</td> </td>
{#each displayRules as row (row?.rule)} {#each displayRules as row (row?.rule)}
{#if row?.rule !== "marketCap"} {#if row?.rule !== "marketCap"}
<td <td
class="whitespace-nowrap text-sm sm:text-[1rem] text-end text-white" class="whitespace-nowrap text-sm sm:text-[1rem] text-end"
> >
{#if ["ema20", "ema50", "ema100", "ema200", "analystRating", "topAnalystRating", "halalStocks", "score", "sector", "industry", "country"]?.includes(row?.rule)} {#if ["ema20", "ema50", "ema100", "ema200", "analystRating", "topAnalystRating", "halalStocks", "score", "sector", "industry", "country"]?.includes(row?.rule)}
{item[row?.rule]} {item[row?.rule]}
@ -3461,11 +3456,11 @@ const handleKeyDown = (event) => {
<td class=" whitespace-nowrap"> <td class=" whitespace-nowrap">
<a <a
href={"/stocks/" + item?.symbol} href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]" class="sm:hover: text-blue-400 text-sm sm:text-[1rem]"
>{item?.symbol}</a >{item?.symbol}</a
> >
</td> </td>
<td class="whitespace-nowrap text-[1rem] text-white"> <td class="whitespace-nowrap text-[1rem]">
{item?.name?.length > charNumber {item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..." ? item?.name?.slice(0, charNumber) + "..."
: item?.name} : item?.name}
@ -3473,7 +3468,7 @@ const handleKeyDown = (event) => {
{#each tabRuleList as row (row?.rule)} {#each tabRuleList as row (row?.rule)}
<td <td
class="whitespace-nowrap text-sm sm:text-[1rem] text-end text-white" class="whitespace-nowrap text-sm sm:text-[1rem] text-end"
> >
{#if row?.rule === "marketCap"} {#if row?.rule === "marketCap"}
{abbreviateNumber(item[row?.rule])} {abbreviateNumber(item[row?.rule])}
@ -3515,11 +3510,11 @@ const handleKeyDown = (event) => {
<td class=" whitespace-nowrap"> <td class=" whitespace-nowrap">
<a <a
href={"/stocks/" + item?.symbol} href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]" class="sm:hover: text-blue-400 text-sm sm:text-[1rem]"
>{item?.symbol}</a >{item?.symbol}</a
> >
</td> </td>
<td class="whitespace-nowrap text-[1rem] text-white"> <td class="whitespace-nowrap text-[1rem]">
{item?.name?.length > charNumber {item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..." ? item?.name?.slice(0, charNumber) + "..."
: item?.name} : item?.name}
@ -3527,13 +3522,12 @@ const handleKeyDown = (event) => {
{#each tabRuleList as row (row?.rule)} {#each tabRuleList as row (row?.rule)}
<td <td
class="whitespace-nowrap text-sm sm:text-[1rem] text-end text-white" class="whitespace-nowrap text-sm sm:text-[1rem] text-end"
> >
{#if row?.rule === "marketCap"} {#if row?.rule === "marketCap"}
{abbreviateNumber(item[row?.rule])} {abbreviateNumber(item[row?.rule])}
{:else if ["analystCounter", "priceTarget"]?.includes(row?.rule)} {:else if ["analystCounter", "priceTarget"]?.includes(row?.rule)}
<span class="text-white" <span class="">{abbreviateNumber(item[row?.rule])}</span
>{abbreviateNumber(item[row?.rule])}</span
> >
{:else if row?.rule === "upside"} {:else if row?.rule === "upside"}
{#if item[row?.rule] > 0} {#if item[row?.rule] > 0}
@ -3592,13 +3586,13 @@ const handleKeyDown = (event) => {
<!-- <!--
<div class="tabs w-screen mb-5 "> <div class="tabs w-screen mb-5 ">
<label on:click={() => handleRuleTab('all')} class="tab mr-2 text-white transition duration-150 ease-out hover:ease-out rounded-md hover:bg-[#333333] {displayTab === 'all' ? 'bg-[#333333]' : ''}"> <label on:click={() => handleRuleTab('all')} class="tab mr-2 transition duration-150 ease-out hover:ease-out rounded-md hover:bg-[#333333] {displayTab === 'all' ? 'bg-[#333333]' : ''}">
All All
</label> </label>
<label on:click={() => handleRuleTab('ta')} class="tab mr-2 text-white transition duration-150 ease-out hover:ease-out rounded-md hover:bg-[#333333] {displayTab === 'ta' ? 'bg-[#333333]' : ''}"> <label on:click={() => handleRuleTab('ta')} class="tab mr-2 transition duration-150 ease-out hover:ease-out rounded-md hover:bg-[#333333] {displayTab === 'ta' ? 'bg-[#333333]' : ''}">
Technical Indicators Technical Indicators
</label> </label>
<label on:click={() => handleRuleTab('fund')} class="tab mr-2 text-white transition duration-150 ease-out hover:ease-out rounded-md hover:bg-[#333333] {displayTab === 'fund' ? 'bg-[#333333]' : ''}"> <label on:click={() => handleRuleTab('fund')} class="tab mr-2 transition duration-150 ease-out hover:ease-out rounded-md hover:bg-[#333333] {displayTab === 'fund' ? 'bg-[#333333]' : ''}">
Fundamental Data Fundamental Data
</label> </label>
</div> </div>
@ -3615,28 +3609,28 @@ const handleKeyDown = (event) => {
></label> ></label>
<div <div
class="modal-box relative bg-primary z-20 mx-2 min-h-[30vh] h-[800px] rounded bg-default opacity-100 border border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-6xl overflow-y-auto" class="modal-box relative bg-white dark:bg-primary z-20 mx-2 min-h-[30vh] h-[800px] rounded bg-default opacity-100 border border-gray-300 dark:border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-6xl overflow-y-auto"
> >
<div class="relative flex flex-col w-full"> <div class="relative flex flex-col w-full">
<!-- Sticky Header --> <!-- Sticky Header -->
<div <div
class="fixed w-full h-fit sticky -top-6 z-40 bg-primary shadow-xs opacity-100 pb-6 pt-5 border-gray-600 border-b" class="fixed w-full h-fit sticky -top-6 z-40 bg-white dark:bg-primary shadow-sm opacity-100 pb-6 pt-5 border-gray-300 dark:border-gray-600 border-b"
> >
<div class="flex flex-row items-center justify-between mb-2"> <div class="flex flex-row items-center justify-between mb-2">
<h2 class="text-white text-[1rem] sm:text-xl font-semibold"> <h2 class=" text-[1rem] sm:text-xl font-semibold">
Select screener filters ({allRows?.length} total) Select screener filters ({allRows?.length} total)
</h2> </h2>
<label <label
for="ruleModal" for="ruleModal"
class="inline-block cursor-pointer absolute right-0 top-3 text-[1.3rem] sm:text-[1.8rem] text-white" class="inline-block cursor-pointer absolute right-0 top-3 text-[1.3rem] sm:text-[1.8rem]"
> >
<svg <svg
class="w-6 h-6 sm:w-8 sm:h-8" class="w-6 h-6 sm:w-8 sm:h-8"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="white" fill="currentColor"
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z" d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
/></svg /></svg
> >
@ -3648,15 +3642,13 @@ const handleKeyDown = (event) => {
class="w-full h-8" class="w-full h-8"
on:keydown={(e) => (e?.key === "Enter" ? e.preventDefault() : "")} on:keydown={(e) => (e?.key === "Enter" ? e.preventDefault() : "")}
> >
<label for="search" class="text-sm text-gray-200 sr-only" <label for="search" class="sr-only">Search</label>
>Search</label
>
<div class="relative w-full max-w-sm"> <div class="relative w-full max-w-sm">
<div <div
class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none" class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
> >
<svg <svg
class="w-4 h-4 text-gray-200" class="w-4 h-4 text-gray-600 dark:text-gray-300"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@ -3680,7 +3672,7 @@ const handleKeyDown = (event) => {
> >
<button <button
on:click={() => (searchTerm = "")} on:click={() => (searchTerm = "")}
class="cursor-pointer text-gray-200 sm:hover:text-white" class="cursor-pointer text-gray-600 dark:text-gray-300"
tabindex="0" tabindex="0"
><svg ><svg
class="w-5 h-5" class="w-5 h-5"
@ -3702,7 +3694,7 @@ const handleKeyDown = (event) => {
autocomplete="off" autocomplete="off"
type="search" type="search"
id="search" id="search"
class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-600 rounded-md bg-secondary border border-blue-500" class="placeholder-gray-600 dark:placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-secondary border border-blue-500"
placeholder="Search" placeholder="Search"
bind:value={searchTerm} bind:value={searchTerm}
/> />
@ -3712,7 +3704,7 @@ const handleKeyDown = (event) => {
</div> </div>
<!-- Content --> <!-- Content -->
<div class="text-white"> <div class="">
{#each searchTerm?.length !== 0 ? Object?.entries(filteredGroupedRules) : Object?.entries(groupedRules) as [category, rules]} {#each searchTerm?.length !== 0 ? Object?.entries(filteredGroupedRules) : Object?.entries(groupedRules) as [category, rules]}
<h4 class="mb-1 font-semibold text-lg mt-5">{category}</h4> <h4 class="mb-1 font-semibold text-lg mt-5">{category}</h4>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
@ -3723,7 +3715,7 @@ const handleKeyDown = (event) => {
{#if ["gexRatio", "ivRank", "iv30d", "totalOI", "changeOI", "netCallPrem", "netPutPrem", "callVolume", "putVolume", "pcRatio", "topAnalystRating", "topAnalystCounter", "topAnalystPriceTarget", "topAnalystUpside", "score"]?.includes(row?.rule) && !["Pro", "Plus"]?.includes(data?.user?.tier)} {#if ["gexRatio", "ivRank", "iv30d", "totalOI", "changeOI", "netCallPrem", "netPutPrem", "callVolume", "putVolume", "pcRatio", "topAnalystRating", "topAnalystCounter", "topAnalystPriceTarget", "topAnalystUpside", "score"]?.includes(row?.rule) && !["Pro", "Plus"]?.includes(data?.user?.tier)}
<label id={row?.rule} on:click={() => changeRule(row?.rule)}> <label id={row?.rule} on:click={() => changeRule(row?.rule)}>
<svg <svg
class="w-4 h-4 mb-1 inline-block text-[#A3A3A3] sm:hover:text-white cursor-pointer" class="w-4 h-4 mb-1 inline-block text-[#A3A3A3] sm:hover: cursor-pointer"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -3753,7 +3745,7 @@ const handleKeyDown = (event) => {
</div> </div>
{/each} {/each}
{#if searchTerm?.length > 0 && Object?.entries(filteredGroupedRules)?.length === 0} {#if searchTerm?.length > 0 && Object?.entries(filteredGroupedRules)?.length === 0}
<div class="text-white mt-5 font-semibold text-[1rem] sm:text-lg"> <div class=" mt-5 font-semibold text-[1rem] sm:text-lg">
Nothing found Nothing found
</div> </div>
{/if} {/if}
@ -3771,8 +3763,10 @@ const handleKeyDown = (event) => {
<label for="addStrategy" class="cursor-pointer modal-backdrop bg-[#000]/40" <label for="addStrategy" class="cursor-pointer modal-backdrop bg-[#000]/40"
></label> ></label>
<div class="modal-box w-full bg-secondary border border-gray-600"> <div
<h1 class="text-white text-2xl font-bold">New Strategy</h1> class="modal-box w-full shadow-sm bg-white dark:bg-secondary border border-gray-300 dark:border-gray-600"
>
<h1 class="text-2xl font-bold">New Strategy</h1>
<form <form
on:submit={createStrategy} on:submit={createStrategy}
@ -3789,7 +3783,7 @@ const handleKeyDown = (event) => {
<button <button
type="submit" type="submit"
class="cursor-pointer mt-2 py-2.5 bg-[#fff] sm:hover:bg-gray-300 duration-100 w-full rounded-md m-auto text-black font-semibold text-md" class="cursor-pointer mt-2 py-2.5 bg-blue-500 sm:hover:bg-blue-600 dark:bg-[#fff] dark:sm:hover:bg-gray-300 duration-100 w-full rounded-md m-auto text-white dark:text-black font-semibold text-md"
> >
Create Strategy Create Strategy
</button> </button>
@ -3807,21 +3801,21 @@ const handleKeyDown = (event) => {
></label> ></label>
<div <div
class="modal-box w-full bg-secondary border border-gray-600 overflow-hidden" class="modal-box w-full bg-white dark:bg-secondary border border-gray-300 dark:border-gray-600 overflow-hidden"
> >
<h3 <h3
class="font-bold text-md sm:text-lg flex justify-center items-center mt-10 text-white" class="font-semibold text-md sm:text-lg flex justify-center items-center mt-10 text-center"
> >
Are you sure you want to delete the strategy? Are you sure you want to delete the strategy?
</h3> </h3>
<div <div
class="modal-action w-full m-auto p-5 flex flex-col sm:flex-row items-center" class=" modal-action w-full m-auto p-5 flex flex-col sm:flex-row items-center"
> >
<label <label
for="deleteStrategy" for="deleteStrategy"
on:click={handleDeleteStrategy} on:click={handleDeleteStrategy}
class="cursor-pointer py-2.5 text-center bg-[#fff] sm:hover:bg-gray-300 w-full rounded-md m-auto text-black font-semibold text-md" class="cursor-pointer py-2.5 text-center bg-blue-500 sm:hover:bg-blue-600 dark:bg-[#fff] dark:sm:hover:bg-gray-300 w-full rounded-md m-auto text-white dark:text-black font-semibold text-md"
> >
Proceed Proceed
</label> </label>
@ -3839,25 +3833,23 @@ const handleKeyDown = (event) => {
<!-- Desktop modal content --> <!-- Desktop modal content -->
<div <div
class="modal-box rounded-md border border-gray-600 w-full bg-secondary flex flex-col items-center" class="modal-box rounded-md border border-gray-300 dark:border-gray-600 w-full bg-secondary flex flex-col items-center"
> >
<div class="text-white mb-5 text-center"> <div class=" mb-5 text-center">
<h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3> <h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3>
<span class="text-white text-[1rem] font-normal" <span class=" text-[1rem] font-normal">{infoText?.text ?? "n/a"}</span>
>{infoText?.text ?? "n/a"}</span
>
{#if infoText?.equation !== undefined} {#if infoText?.equation !== undefined}
<div class="w-5/6 m-auto mt-5"></div> <div class="w-5/6 m-auto mt-5"></div>
<div class="text-[1rem] w-full pt-3 pb-3 m-auto text-white"> <div class="text-[1rem] w-full pt-3 pb-3 m-auto">
{infoText?.equation} {infoText?.equation}
</div> </div>
{/if} {/if}
</div> </div>
<div class="border-t border-gray-600 mt-2 w-full"> <div class="border-t border-gray-300 dark:border-gray-600 mt-2 w-full">
<label <label
for="mobileTooltip" for="mobileTooltip"
class="cursor-pointer mt-4 font-semibold text-white text-xl m-auto flex justify-center" class="cursor-pointer mt-4 font-semibold text-xl m-auto flex justify-center"
> >
Close Close
</label> </label>