From 3803368f533b9370bc29f17d5b2f439339d56ba8 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Wed, 16 Oct 2024 18:47:00 +0200 Subject: [PATCH] ui fixes --- src/routes/stock-screener/+page.svelte | 4286 ++++++++++++++------- src/routes/stocks/[tickerID]/+page.svelte | 353 +- 2 files changed, 3023 insertions(+), 1616 deletions(-) diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte index 290e3d43..4f93242c 100644 --- a/src/routes/stock-screener/+page.svelte +++ b/src/routes/stock-screener/+page.svelte @@ -1,18 +1,29 @@ - - - - - + - + - {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Stock Screener · stocknear + {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Stock + Screener · stocknear - + - - - + + + - - - + + + - - + +
+
+
    +
  • Home
    • +
  • Stock Screener
    • +
+
-
+ +
+
+
+

Stock Screener

+ + {filteredData?.length} Matches Found + +
- - -
-
    -
  • Home
    • -
  • Stock Screener
    • -
+
+
+ +
+ + + + + + + Popular Strategies + + + + popularStrategy("dividendGrowth")} + class="cursor-pointer hover:bg-[#27272A]" + > + Dividend Growth + + popularStrategy("topGainers1Y")} + class="cursor-pointer hover:bg-[#27272A]" + > + Top Gainers 1Y + + popularStrategy("topShortedStocks")} + class="cursor-pointer hover:bg-[#27272A]" + > + Top Shorted Stocks + + popularStrategy("topAIStocks")} + class="cursor-pointer hover:bg-[#27272A]" + > + Top AI Stocks + + popularStrategy("momentumTAStocks")} + class="cursor-pointer hover:bg-[#27272A]" + > + Momentum TA Stocks + + popularStrategy("underValuedStocks")} + class="cursor-pointer hover:bg-[#27272A]" + > + Undervalued Stocks + + popularStrategy("strongCashFlow")} + class="cursor-pointer hover:bg-[#27272A]" + > + Strong Cash Flow + + popularStrategy("bestHalalStocks")} + class="cursor-pointer hover:bg-[#27272A]" + > + Top Halal Stocks + + + + +
+
+ +
+ +
+ + + + + + + + + + + + + {#each strategyList as item} + switchStrategy(item)} + class="{item?.id === selectedStrategy + ? 'bg-[#27272A]' + : ''} cursor-pointer sm:hover:bg-[#27272A]" + > + {item?.title} ({item?.rules?.length}) + + {/each} + + + +
+
+
- - - -
- -
-
-

- Stock Screener -

- - {filteredData?.length} Matches Found - -
- -
- -
- -
- - - - - - - Popular Strategies - - - - popularStrategy('dividendGrowth')} class="cursor-pointer hover:bg-[#27272A]"> - Dividend Growth - - popularStrategy('topGainers1Y')} class="cursor-pointer hover:bg-[#27272A]"> - Top Gainers 1Y - - popularStrategy('topShortedStocks')} class="cursor-pointer hover:bg-[#27272A]"> - Top Shorted Stocks - - popularStrategy('topAIStocks')} class="cursor-pointer hover:bg-[#27272A]"> - Top AI Stocks - - popularStrategy('momentumTAStocks')} class="cursor-pointer hover:bg-[#27272A]"> - Momentum TA Stocks - - popularStrategy('underValuedStocks')} class="cursor-pointer hover:bg-[#27272A]"> - Undervalued Stocks - - popularStrategy('strongCashFlow')} class="cursor-pointer hover:bg-[#27272A]"> - Strong Cash Flow - - popularStrategy('bestHalalStocks')} class="cursor-pointer hover:bg-[#27272A]"> - Top Halal Stocks - - - - +
+
+
+ +
+
+ {#if showFilters} +
+ -
-
+ {#if data?.user && selectedStrategy?.length !== 0} + -
- -
- - - - - - - - - - - - - {#each strategyList as item} - switchStrategy(item)} class="{item?.id === selectedStrategy ? 'bg-[#27272A]' : ''} cursor-pointer sm:hover:bg-[#27272A]"> - {item?.title} ({item?.rules?.length}) - - {/each} - - - + + {/if} + {#if ruleOfList?.length !== 0} + + {/if} -
-
- - -
- - -
- - -
-
-
- -
-
- {#if showFilters} -
- - - {#if data?.user && selectedStrategy?.length !== 0} - - - - {/if} - - {#if ruleOfList?.length !== 0} - - {/if} - - -
+
- -
- {#each displayRules as row (row?.rule)} - -
-
- {row?.label?.length > 20 ? row?.label?.slice(0,20)?.replace('[%]', '') + '...' : row?.label?.replace('[%]', '')} -
- -
- -
- -
- -
-
ruleName = row?.rule}> - - - - - - {#if !['sma20','sma50','sma100','sma200','ema20', 'ema50', 'ema100', 'ema200', 'grahamNumber','analystRating','halalStocks','score','sector','industry','country']?.includes(row?.rule)} - -
-
- - -
-
- - {:else} - - {/if} - - {#if !['sma20','sma50','sma100','sma200','ema20', 'ema50', 'ema100', 'ema200', 'grahamNumber','analystRating','halalStocks','score','sector','industry','country']?.includes(row?.rule)} - {#each row?.step as newValue} - - - - - {/each} - {:else if ['sma20','sma50','sma100','sma200','ema20', 'ema50', 'ema100', 'ema200','grahamNumber']?.includes(row?.rule)} - {#each row?.step as item} - -
event.preventDefault()}> - -
- - {/each} - {:else} - {#each (testList.length > 0 && searchQuery?.length > 0 ? testList : searchQuery?.length > 0 && testList?.length === 0 ? [] : (row?.rule === 'country' ? listOfRelevantCountries : row?.rule === 'sector' ? sectorList : row?.rule === 'industry' ? industryList : (ruleName === 'analystRating' || ruleName === 'score') ? ['Strong Buy', 'Buy', 'Hold', 'Sell', 'Strong Sell'] : ['Compliant', 'Non-Compliant'])) as item} - -
event.preventDefault()}> - -
- - {/each} - - {/if} - - - -
-
-
-
- - {/each} +
+ {#each displayRules as row (row?.rule)} + +
+
+ {row?.label?.length > 20 + ? row?.label?.slice(0, 20)?.replace("[%]", "") + "..." + : row?.label?.replace("[%]", "")} +
+
- {/if} + +
- +
+ +
+
(ruleName = row?.rule)}> + + + + + + {#if !["sma20", "sma50", "sma100", "sma200", "ema20", "ema50", "ema100", "ema200", "grahamNumber", "analystRating", "halalStocks", "score", "sector", "industry", "country"]?.includes(row?.rule)} + +
+
+ + +
+
+ + {:else} + + {/if} + + {#if !["sma20", "sma50", "sma100", "sma200", "ema20", "ema50", "ema100", "ema200", "grahamNumber", "analystRating", "halalStocks", "score", "sector", "industry", "country"]?.includes(row?.rule)} + {#each row?.step as newValue} + + + + {/each} + {:else if ["sma20", "sma50", "sma100", "sma200", "ema20", "ema50", "ema100", "ema200", "grahamNumber"]?.includes(row?.rule)} + {#each row?.step as item} + +
+ event.preventDefault()} + > + +
+ + {/each} + {:else} + {#each testList.length > 0 && searchQuery?.length > 0 ? testList : searchQuery?.length > 0 && testList?.length === 0 ? [] : row?.rule === "country" ? listOfRelevantCountries : row?.rule === "sector" ? sectorList : row?.rule === "industry" ? industryList : ruleName === "analystRating" || ruleName === "score" ? ["Strong Buy", "Buy", "Hold", "Sell", "Strong Sell"] : ["Compliant", "Non-Compliant"] as item} + +
+ event.preventDefault()} + > + +
+ + {/each} + {/if} + + + +
+
+
- - - - - - + {/each} +
+ {/if} +
+ + + + + + - - -
- - - - - + +
+ -
-

- {filteredData?.length} Stocks -

-
- + + +
+
+ + + {#if isLoaded} + {#if filteredData?.length !== 0} + {#if displayTableTab === "general"} +
+ + + + + + + + + + + + + + {#each displayResults as item} + + - + + + + + {/each} + +
Symbol { + sortBy = "marketCap"; + changeOrder(order); + }} + class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-end" + > + Market Cap + + { + sortBy = "change"; + changeOrder(order); + }} + class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-end" + > + % Change + + + Price + { + sortBy = "volume"; + changeOrder(order); + }} + class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-end" + > + Volume + + { + sortBy = "pe"; + changeOrder(order); + }} + class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-end" + > + PE Ratio + +
+
+ handleSave(false)} + class="sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]" + >{item?.symbol} + {item?.name?.length > charNumber + ? item?.name?.slice(0, charNumber) + "..." + : item?.name}
- - - - {#if isLoaded} - {#if filteredData?.length !== 0} - {#if displayTableTab === 'general'} -
- - - - - - - - - - - - - - {#each displayResults as item} - - - - - - + - + - + - + - - - - - {/each} - -
Symbol { sortBy = 'marketCap'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-end"> - Market Cap - - { sortBy = 'change'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-end"> - % Change - - - Price - { sortBy = 'volume'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-end"> - Volume - - { sortBy = 'pe'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-end"> - PE Ratio - -
-
- handleSave(false)} class="sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]">{item?.symbol} - {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} -
- - 		- {item?.marketCap < 100 ? '< 100' : abbreviateNumber(item?.marketCap)} - - {#if item?.changesPercentage >=0} - +{item?.changesPercentage >= 1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}% - {:else} - {item?.changesPercentage <= -1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}% - {/if} - - {item?.price < 0.01 ? '< 0.01' : item?.price?.toFixed(2)} - + {item?.marketCap < 100 + ? "< 100" + : abbreviateNumber(item?.marketCap)} + - {item?.volume === 0 ? '-' : abbreviateNumber(item?.volume)} - + {#if item?.changesPercentage >= 0} + +{item?.changesPercentage >= 1000 + ? abbreviateNumber(item?.changesPercentage) + : item?.changesPercentage?.toFixed(2)}% + {:else} + {item?.changesPercentage <= -1000 + ? abbreviateNumber(item?.changesPercentage) + : item?.changesPercentage?.toFixed(2)}% + + {/if} + - {item?.pe} -
-
- {:else if displayTableTab === 'filters'} -
- - - - - - - {#each displayRules as row (row?.rule)} - {#if row?.rule !== 'marketCap'} - - {/if} - {/each} - - - - {#each displayResults as item (item?.symbol)} - {handleSave(false)}} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]"> - - - - {#each displayRules as row (row?.rule)} - {#if row?.rule !== 'marketCap'} - - {/if} - {/each} - - {/each} - -
SymbolMarket Cap - {row?.label?.length > 20 ? row?.label?.slice(0,20) + '...' : row?.label} -
-
- {item?.symbol} - {item?.name?.length > charNumber ? item?.name?.slice(0, charNumber) + "..." : item?.name} -
- 		- {abbreviateNumber(item?.marketCap)} - - {#if ['ema20', 'ema50', 'ema100', 'ema200', 'analystRating','halalStocks','score','sector','industry','country']?.includes(row?.rule)} - {item[row?.rule]} - {:else if ['fundamentalAnalysis','trendAnalysis']?.includes(row?.rule)} - {item[row?.rule]?.accuracy}% - {:else} - {abbreviateNumber(item[row?.rule])} - {/if} -
+
+ {item?.price < 0.01 ? "< 0.01" : item?.price?.toFixed(2)} + + {item?.volume === 0 ? "-" : abbreviateNumber(item?.volume)} + + {item?.pe} +
+
+ {:else if displayTableTab === "filters"} +
+ + + + + + + {#each displayRules as row (row?.rule)} + {#if row?.rule !== "marketCap"} + {/if} - {:else} -
- - Looks like your taste is one-of-a-kind! No matches found... yet! -
- {/if} - {:else} -
-
- + {/each} +
+ + + {#each displayResults as item (item?.symbol)} + { + handleSave(false); + }} + class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]" + > + + + + {#each displayRules as row (row?.rule)} + {#if row?.rule !== "marketCap"} + + {/if} + {/each} + + {/each} + +
SymbolMarket Cap + {row?.label?.length > 20 + ? row?.label?.slice(0, 20) + "..." + : row?.label} +
+
+ {item?.symbol} + {item?.name?.length > charNumber + ? item?.name?.slice(0, charNumber) + "..." + : item?.name}
- - {/if} - - - - - + 		+ {abbreviateNumber(item?.marketCap)} + + {#if ["ema20", "ema50", "ema100", "ema200", "analystRating", "halalStocks", "score", "sector", "industry", "country"]?.includes(row?.rule)} + {item[row?.rule]} + {:else if ["fundamentalAnalysis", "trendAnalysis"]?.includes(row?.rule)} + {item[row?.rule]?.accuracy}% + {:else} + {abbreviateNumber(item[row?.rule])} + {/if} +
+
+ {/if} + {:else} +
+ + Looks like your taste is one-of-a-kind! No matches found... yet! +
+ {/if} + {:else} +
+
+ +
+
+ {/if} +
- - - - - - - - - - - - -
- + + +
- -
Add Filters
-
-
- +
- - {#if searchTerm?.length !== 0 && filteredRows?.length === 0} - - Nothing Found - - {:else} - - - - - {#each (searchTerm?.length !== 0 ? filteredRows : allRows) as row, index} - changeRule(row?.rule)} class="sm:hover:bg-[#333333] cursor-pointer"> - - - - - {/each} - - -
{index+1} - {#if ruleOfList.find((rule) => rule?.name === row?.rule)} - - {/if} - {row?.label}
- {/if} - -
- -
- - + {#if searchTerm?.length !== 0 && filteredRows?.length === 0} + + Nothing Found + + {:else} + + + + {#each searchTerm?.length !== 0 ? filteredRows : allRows as row, index} + changeRule(row?.rule)} + class="sm:hover:bg-[#333333] cursor-pointer" + > + + + + + {/each} + +
{index + 1} + {#if ruleOfList.find((rule) => rule?.name === row?.rule)} + + {/if} + {row?.label}
+ {/if} +
- +
+ + + + - - - - - - - - - -
- -

- New Strategy -

+ + -
- - +
+

New Strategy

- - - - +
+ - - -
- - - - - - - - - - - - - - -
- -

- Are you sure you want to delete the strategy? -

- -
- - -
+
 + + + + + + + + + +
+

+ Are you sure you want to delete the strategy? +

+ +
+ +
+
+ - -
- - - - - - - + - - - - +
-
+

{tooltipTitle}

- {infoText?.text ?? 'n/a'} + {infoText?.text ?? "n/a"} {#if infoText?.equation !== undefined}
- {infoText?.equation} + {infoText?.equation}
- {/if} + {/if}
- - +
- {#if LoginPopup} - + {/if} + - - \ No newline at end of file + diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte index f30bf4a1..5c810b95 100644 --- a/src/routes/stocks/[tickerID]/+page.svelte +++ b/src/routes/stocks/[tickerID]/+page.svelte @@ -1,11 +1,5 @@