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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-04-14 12:53:53 +02:00
parent 783809c04a
commit e6ecaece9f
1 changed files with 26 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,12 +206,10 @@
price: { price: {
label: "Stock Price", label: "Stock Price",
step: [1000, 500, 400, 300, 200, 150, 100, 80, 60, 50, 20, 10, 5, 1], step: [1000, 500, 400, 300, 200, 150, 100, 80, 60, 50, 20, 10, 5, 1],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Price & Volume", category: "Price & Volume",
}, },
change1W: { change1W: {
label: "Price Change 1W", label: "Price Change 1W",
step: ["20%", "10%", "5%", "1%", "-1%", "-5%", "-10%", "-20%"], step: ["20%", "10%", "5%", "1%", "-1%", "-5%", "-10%", "-20%"],
@ -323,7 +321,6 @@
marketCap: { marketCap: {
label: "Market Cap", label: "Market Cap",
step: ["100B", "50B", "10B", "1B", "300M", "100M", "10M"], step: ["100B", "50B", "10B", "1B", "300M", "100M", "10M"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: ["Most Popular", "Valuation & Ratios"], category: ["Most Popular", "Valuation & Ratios"],
@ -338,7 +335,6 @@
totalAssets: { totalAssets: {
label: "Total Assets", label: "Total Assets",
step: ["500B", "200B", "100B", "50B", "10B", "1B", "100M", "10M"], step: ["500B", "200B", "100B", "50B", "10B", "1B", "100M", "10M"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
}, },
@ -352,7 +348,6 @@
revenue: { revenue: {
label: "Revenue", label: "Revenue",
step: ["100B", "50B", "10B", "1B", "300M", "100M", "10M"], step: ["100B", "50B", "10B", "1B", "300M", "100M", "10M"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Revenue / Sales", category: "Revenue / Sales",
@ -360,7 +355,6 @@
revenueGrowthYears: { revenueGrowthYears: {
label: "Revenue Growth Years", label: "Revenue Growth Years",
step: ["10", "5", "3", "1"], step: ["10", "5", "3", "1"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Revenue / Sales", category: "Revenue / Sales",
@ -368,7 +362,6 @@
epsGrowthYears: { epsGrowthYears: {
label: "EPS Growth Years", label: "EPS Growth Years",
step: ["10", "5", "3", "1"], step: ["10", "5", "3", "1"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Valuation & Ratios", category: "Valuation & Ratios",
@ -376,7 +369,6 @@
netIncomeGrowthYears: { netIncomeGrowthYears: {
label: "Net Income Growth Years", label: "Net Income Growth Years",
step: ["10", "5", "3", "1"], step: ["10", "5", "3", "1"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Net Income", category: "Net Income",
@ -384,7 +376,6 @@
grossProfitGrowthYears: { grossProfitGrowthYears: {
label: "Gross Profit Growth Years", label: "Gross Profit Growth Years",
step: ["10", "5", "3", "1"], step: ["10", "5", "3", "1"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Other Profits", category: "Other Profits",
@ -392,9 +383,9 @@
growthRevenue: { growthRevenue: {
label: "Revenue Growth", label: "Revenue Growth",
step: ["200%", "100%", "50%", "20%", "10%", "5%", "1%"], step: ["200%", "100%", "50%", "20%", "10%", "5%", "1%"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
varType: "percentSign",
category: ["Most Popular", "Revenue / Sales"], category: ["Most Popular", "Revenue / Sales"],
}, },
costOfRevenue: { costOfRevenue: {
@ -426,7 +417,6 @@
netIncome: { netIncome: {
label: "Net Income", label: "Net Income",
step: ["100B", "50B", "10B", "1B", "300M", "100M", "10M"], step: ["100B", "50B", "10B", "1B", "300M", "100M", "10M"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Net Income", category: "Net Income",
@ -470,23 +460,22 @@
payoutRatio: { payoutRatio: {
label: "Payout Ratio", label: "Payout Ratio",
step: ["100%", "80%", "60%", "40%", "20%", "0%", "-20%", "-40%"], step: ["100%", "80%", "60%", "40%", "20%", "0%", "-20%", "-40%"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
varType: "percent",
category: "Dividends", category: "Dividends",
}, },
dividendYield: { dividendYield: {
label: "Dividend Yield", label: "Dividend Yield",
step: ["50%", "20%", "10%", "5%", "1%"], step: ["50%", "20%", "10%", "5%", "1%"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
varType: "percent",
category: ["Most Popular", "Dividends"], category: ["Most Popular", "Dividends"],
}, },
annualDividend: { annualDividend: {
label: "Annual Dividend", label: "Annual Dividend",
step: [10, 5, 3, 2, 1, 0], step: [10, 5, 3, 2, 1, 0],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Dividends", category: "Dividends",
@ -555,7 +544,6 @@
operatingIncome: { operatingIncome: {
label: "Operating Income", label: "Operating Income",
step: ["100B", "50B", "10B", "1B", "300M", "100M", "10M"], step: ["100B", "50B", "10B", "1B", "300M", "100M", "10M"],
defaultCondition: "over", defaultCondition: "over",
defaultValue: "any", defaultValue: "any",
category: "Other Profits", category: "Other Profits",
@ -705,7 +693,6 @@
defaultValue: "any", defaultValue: "any",
category: "Valuation & Ratios", category: "Valuation & Ratios",
}, },
priceToBookRatio: { priceToBookRatio: {
label: "PB Ratio", label: "PB Ratio",
step: [50, 40, 30, 20, 10, 5, 1], step: [50, 40, 30, 20, 10, 5, 1],
@ -2589,7 +2576,7 @@ const handleKeyDown = (event) => {
<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 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 "
> >
<svg <svg
class="h-4 w-4" class="h-4 w-4"
@ -2637,11 +2624,11 @@ const handleKeyDown = (event) => {
> >
<button <button
on:click={() => (showFilters = !showFilters)} on:click={() => (showFilters = !showFilters)}
class="flex cursor-pointer items-center text-lg sm:text-xl font-semibold" class="flex cursor-pointer items-center text-lg font-semibold"
title="Hide Filter Area" title="Hide Filter Area"
> >
<svg <svg
class="-mb-0.5 h-6 w-6 {showFilters ? '' : '-rotate-90'} " class="-mb-0.5 h-5 w-5 {showFilters ? '' : '-rotate-90'} "
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
style="max-width:40px" style="max-width:40px"
@ -2660,7 +2647,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-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" class="text-white 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-blue-500 sm:hover:bg-blue-600 dark:bg-[#000] dark:sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500"
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
@ -2682,7 +2669,7 @@ 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-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" 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"
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
@ -2698,7 +2685,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-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" 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"
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
@ -2716,7 +2703,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-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" 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"
> >
<svg <svg
class="h-4 w-4" class="h-4 w-4"
@ -2848,7 +2835,7 @@ const handleKeyDown = (event) => {
{/if} {/if}
</span> </span>
<svg <svg
class=" ml-1 h-6 w-6 xs:ml-2 inline-block" class=" ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
style="max-width:40px" style="max-width:40px"
@ -3162,24 +3149,22 @@ const handleKeyDown = (event) => {
<!--End Build Strategy--> <!--End Build Strategy-->
<div <div
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-6 grid-cols-2 items-center sm:grid lg:flex lg:space-x-1 lg:overflow-visible lg:px-1 py-1.5 border-t border-b border-gray-300 dark:border-gray-600 mb-2"
> >
<h2 <h2 class=" whitespace-nowrap text-xl font-semibold bp:text-[1.3rem]">
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-300 dark: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 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">
<ul <ul
class="flex flex-row overflow-x-auto items-center space-x-2 whitespace-nowrap" class="flex flex-row overflow-x-auto items-center space-x-2 whitespace-nowrap"
> >
<li> <li>
<button <button
on:click={() => (displayTableTab = "general")} on:click={() => (displayTableTab = "general")}
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 === class="cursor-pointer text-[1rem] 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-gray-100 dark:bg-primary' ? 'font-semibold bg-gray-100 dark:bg-primary'
: ''}" : ''}"
@ -3190,7 +3175,7 @@ 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-gray-100 dark:sm:hover:bg-primary{displayTableTab === class="cursor-pointer text-[1rem] 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-gray-100 dark:bg-primary' ? 'font-semibold bg-gray-100 dark:bg-primary'
: ''} focus:outline-hidden" : ''} focus:outline-hidden"
@ -3209,7 +3194,7 @@ const handleKeyDown = (event) => {
<li> <li>
<button <button
on:click={() => changeTab("performance")} on:click={() => changeTab("performance")}
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 === class="cursor-pointer text-[1rem] 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-gray-100 dark:bg-primary' ? 'font-semibold bg-gray-100 dark:bg-primary'
: ''}" : ''}"
@ -3220,7 +3205,7 @@ const handleKeyDown = (event) => {
<li> <li>
<button <button
on:click={() => changeTab("analysts")} on:click={() => changeTab("analysts")}
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 === class="cursor-pointer text-[1rem] 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-gray-100 dark:bg-primary' ? 'font-semibold bg-gray-100 dark:bg-primary'
: ''}" : ''}"
@ -3396,7 +3381,7 @@ 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-blue-400 text-sm sm:text-[1rem]" class="text-blue-700 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>
@ -3425,7 +3410,7 @@ const handleKeyDown = (event) => {
)}%</span )}%</span
> >
{:else} {:else}
<span class="text-[#fff]">-</span> <span class="">n/a</span>
{/if} {/if}
</td> </td>
{/each} {/each}
@ -3450,7 +3435,7 @@ 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-blue-400 text-sm sm:text-[1rem]" class="text-blue-700 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>
@ -3479,22 +3464,19 @@ const handleKeyDown = (event) => {
>{item[row?.rule]?.toFixed(2)}%</span >{item[row?.rule]?.toFixed(2)}%</span
> >
{:else} {:else}
<span class="text-[#fff]">n/a</span> <span class="">n/a</span>
{/if} {/if}
{:else if ["analystRating", "topAnalystRating"]?.includes(row?.rule)} {:else if ["analystRating", "topAnalystRating"]?.includes(row?.rule)}
{#if ["Strong Buy", "Buy"].includes(item[row?.rule])} {#if ["Strong Buy", "Buy"].includes(item[row?.rule])}
<span <span class=" text-green-800 dark:text-[#00FC50]"
class="font-semibold dark:font-normal text-green-800 dark:text-[#00FC50]"
>{item[row?.rule]}</span >{item[row?.rule]}</span
> >
{:else if ["Strong Sell", "Sell"].includes(item[row?.rule])} {:else if ["Strong Sell", "Sell"].includes(item[row?.rule])}
<span <span class=" text-red-800 dark:text-[#FF2F1F]"
class="font-semibold dark:font-normal text-red-800 dark:text-[#FF2F1F]"
>{item[row?.rule]}</span >{item[row?.rule]}</span
> >
{:else if item[row?.rule] === "Hold"} {:else if item[row?.rule] === "Hold"}
<span <span class=" text-orange-600 dark:text-[#FFA838]"
class="font-semibold dark:font-normal text-orange-600 dark:text-[#FFA838]"
>{item[row?.rule]}</span >{item[row?.rule]}</span
> >
{:else} {:else}