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 2024-12-06 18:01:30 +01:00
parent 5c1208554f
commit b5e2d0fc92
2 changed files with 98 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/utils.ts
View File

@ -89,7 +89,7 @@ export const computeGrowthSingleList = (data, actualList) => {
export const groupScreenerRules = (allRows) => { export const groupScreenerRules = (allRows) => {
const categoryOrder = [ const categoryOrder = [
"Most Popular", "Company Info","Price & Volume", "Valuation & Ratios", "Valuation & Price Targets", "Margins", "Most Popular", "Company Info","Price & Volume", "Valuation & Ratios", "Valuation & Price Targets", "Margins",
"Technical Analysis","Forecasts, Analysts & Price Targets", "Dividends", "Revenue / Sales", "Net Income", "Other Profits","Cash Flow", "Others" "Performance","Technical Analysis","Forecasts, Analysts & Price Targets", "Dividends", "Revenue / Sales", "Net Income", "Other Profits","Cash Flow", "Others"
]; ];
// Group rows by category // Group rows by category

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

@ -222,6 +222,7 @@
step: ["20%", "10%", "5%", "1%", "-1%", "-5%", "-10%", "-20%"], step: ["20%", "10%", "5%", "1%", "-1%", "-5%", "-10%", "-20%"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Performance",
}, },
change1M: { change1M: {
label: "Price Change 1M", label: "Price Change 1M",
@ -240,6 +241,7 @@
], ],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Performance",
}, },
change3M: { change3M: {
label: "Price Change 3M", label: "Price Change 3M",
@ -258,6 +260,7 @@
], ],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Performance",
}, },
change6M: { change6M: {
label: "Price Change 6M", label: "Price Change 6M",
@ -276,6 +279,7 @@
], ],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Performance",
}, },
change1Y: { change1Y: {
label: "Price Change 1Y", label: "Price Change 1Y",
@ -294,6 +298,7 @@
], ],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Performance",
}, },
change3Y: { change3Y: {
label: "Price Change 3Y", label: "Price Change 3Y",
@ -312,6 +317,7 @@
], ],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Performance",
}, },
marketCap: { marketCap: {
label: "Market Cap", label: "Market Cap",
@ -744,6 +750,7 @@
defaultCondition: "over", defaultCondition: "over",
defaultValue: "-5%", defaultValue: "-5%",
category: "Performance",
}, },
//trendAnalysis: { label: 'AI Trend Analysis', step: ['80%','70%','60%','50%'], category: 'ai', defaultCondition: 'over', defaultValue: '50%' }, //trendAnalysis: { label: 'AI Trend Analysis', step: ['80%','70%','60%','50%'], category: 'ai', defaultCondition: 'over', defaultValue: '50%' },
//fundamentalAnalysis: { label: 'AI Fundamental Analysis', step: ['80%','70%','60%','50%'], category: 'ai', defaultCondition: 'over', defaultValue: '50%' }, //fundamentalAnalysis: { label: 'AI Fundamental Analysis', step: ['80%','70%','60%','50%'], category: 'ai', defaultCondition: 'over', defaultValue: '50%' },
@ -948,6 +955,7 @@
defaultCondition: "over", defaultCondition: "over",
defaultValue: "1", defaultValue: "1",
category: "Valuation & Ratios",
}, },
netIncomePerShare: { netIncomePerShare: {
label: "Net Income / Share", label: "Net Income / Share",
@ -3186,7 +3194,6 @@ const handleKeyDown = (event) => {
<!--Start Choose Rule Modal--> <!--Start Choose Rule Modal-->
<input type="checkbox" id="ruleModal" class="modal-toggle" /> <input type="checkbox" id="ruleModal" class="modal-toggle" />
<dialog id="ruleModal" class="modal p-2 sm:p-0"> <dialog id="ruleModal" class="modal p-2 sm:p-0">
<label <label
id="ruleModal" id="ruleModal"
@ -3196,96 +3203,103 @@ const handleKeyDown = (event) => {
></label> ></label>
<div <div
class="modal-box relative z-50 mx-2 min-h-[80vh] rounded bg-default opacity-100 border border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-6xl" class="modal-box relative 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"
> >
<div class="flex flex-col w-full"> <div class="relative flex flex-col w-full">
<div class="flex flex-row items-center justify-between mb-2"> <!-- Sticky Header -->
<h2 class="text-white text-[1rem] sm:text-xl font-semibold">
Select screener filters ({allRows?.length} total)
</h2>
<label
for="ruleModal"
class="cursor-pointer absolute right-3 top-3 text-[1rem] sm:text-[1.8rem] text-white"
>
<svg
class="w-6 h-6 sm:w-8 sm:h-8"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
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
>
</label>
</div>
<!--Start Search bar--> <div
<form class="fixed w-full h-fit sticky -top-6 z-40 bg-[#1D232A] shadow-sm opacity-100 pb-6 pt-5 border-gray-600 border-b"
class="w-full h-8"
on:keydown={(e) => (e?.key === "Enter" ? e.preventDefault() : "")}
> >
<label for="search" class="text-sm font-medium text-gray-200 sr-only" <div class="flex flex-row items-center justify-between mb-2">
>Search</label <h2 class="text-white text-[1rem] sm:text-xl font-semibold">
> Select screener filters ({allRows?.length} total)
<div class="relative w-full max-w-sm"> </h2>
<div <label
class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none" for="ruleModal"
class="inline-block cursor-pointer absolute right-0 top-3 text-[1.3rem] sm:text-[1.8rem] text-white"
> >
<svg <svg
class="w-4 h-4 text-gray-200" class="w-6 h-6 sm:w-8 sm:h-8"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24"
viewBox="0 0 20 20" ><path
fill="white"
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
> >
<path </label>
stroke="currentColor" </div>
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
/>
</svg>
</div>
<div <!-- Start Search bar -->
class="absolute inset-y-0 right-0 flex items-center pr-2 {searchTerm?.length > <form
0 class="w-full h-8"
? '' on:keydown={(e) => (e?.key === "Enter" ? e.preventDefault() : "")}
: 'hidden'}" >
<label for="search" class="text-sm font-medium text-gray-200 sr-only"
>Search</label
> >
<button <div class="relative w-full max-w-sm">
on:click={() => (searchTerm = "")} <div
class="cursor-pointer text-gray-200 sm:hover:text-white" class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
tabindex="0" >
><svg <svg
class="w-5 h-5" class="w-4 h-4 text-gray-200"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 20 20"
stroke="currentColor" >
style="max-width:40px" <path
><path stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
d="M6 18L18 6M6 6l12 12" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
></path></svg />
></button </svg>
> </div>
</div>
<input <div
autocomplete="off" class="absolute inset-y-0 right-0 flex items-center pr-2 {searchTerm?.length >
type="search" 0
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" : 'hidden'}"
placeholder="Search" >
bind:value={searchTerm} <button
/> on:click={() => (searchTerm = "")}
</div> class="cursor-pointer text-gray-200 sm:hover:text-white"
</form> tabindex="0"
<!-- End Search bar--> ><svg
<div class="border-t border-gray-600 mt-6 mb-3" /> class="w-5 h-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
style="max-width:40px"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path></svg
></button
>
</div>
<input
autocomplete="off"
type="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"
placeholder="Search"
bind:value={searchTerm}
/>
</div>
</form>
<!-- End Search bar -->
</div>
<!-- Content -->
<div class="text-white"> <div class="text-white">
{#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>
@ -3310,10 +3324,16 @@ const handleKeyDown = (event) => {
{/each} {/each}
</div> </div>
{/each} {/each}
{#if searchTerm?.length > 0 && Object?.entries(filteredGroupedRules)?.length === 0}
<div class="text-white mt-5 font-semibold text-[1rem] sm:text-lg">
Nothing found
</div>
{/if}
</div> </div>
</div> </div>
</div> </div>
</dialog> </dialog>
<!--End Choose Rule Modal--> <!--End Choose Rule Modal-->
<!--Start Add Strategy Modal--> <!--Start Add Strategy Modal-->