redesign screener
This commit is contained in:
MuslemRahimi
parent
46aace3f96
commit
3e876bb540
@ -10,6 +10,7 @@
|
|||||||
export let unit = '';
|
export let unit = '';
|
||||||
export let condition;
|
export let condition;
|
||||||
|
|
||||||
|
console.log(condition)
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
function changeRuleCondition(newCondition) {
|
function changeRuleCondition(newCondition) {
|
||||||
@ -21,21 +22,97 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!--
|
||||||
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
|
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
|
||||||
{title?.replace('[%]','')} {condition} {value} {unit}
|
{title?.replace('[%]','')} {condition} {value} {unit}
|
||||||
|
|
||||||
<label on:click={() => changeRuleCondition('below')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
<label on:click={() => changeRuleCondition('under')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||||
checked={condition === 'below'} name={ruleName} />
|
checked={condition === 'under'} name={ruleName} />
|
||||||
<span class="label-text text-white">Below</span>
|
<span class="label-text text-white">Under</span>
|
||||||
</label>
|
</label>
|
||||||
<label on:click={() => changeRuleCondition('above')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
<label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||||
checked={condition === 'above'} name={ruleName} />
|
checked={condition === 'over'} name={ruleName} />
|
||||||
<span class="label-text text-white">Above</span>
|
<span class="label-text text-white">Over</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full pt-5">
|
<div class="w-full pt-5">
|
||||||
<input type="range" min={min} max={max} step={step} bind:value on:input={changeValue} class="range range-secondary" />
|
<input type="range" min={min} max={max} step={step} bind:value on:input={changeValue} class="range range-secondary" />
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
<!--Start Added Rules-->
|
||||||
|
<div class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-default">
|
||||||
|
<div class="text-white text-[1rem]">
|
||||||
|
{title?.replace('[%]','')}
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<button class="mr-1.5 cursor-pointer text-gray-300 sm:hover:text-red-500 focus:outline-none" title="Remove filter">
|
||||||
|
<svg 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="relative inline-block text-left">
|
||||||
|
<div class="dropdown dropdown-end">
|
||||||
|
<button tabindex="0" class="bg-[#000] h-[33px] flex flex-row justify-between items-center w-[125px] xs:w-[140px] sm:w-[125px] px-3 text-white rounded-lg truncate">
|
||||||
|
<span class="truncate ml-2">Any</span>
|
||||||
|
<svg class=" ml-1 h-6 w-6 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="dropdown-content absolute z-40 mt-2 rounded-md bg-[#181C1F] py-1 shadow-lg border border-gray-600 focus:outline-none" tabindex="0" role="menu">
|
||||||
|
|
||||||
|
<div class="select-none space-y-1 p-1 pb-2 pr-2 text-sm">
|
||||||
|
<div class="flex items-center justify-start gap-x-1">
|
||||||
|
<div class="relative inline-block flex flex-row items-center justify-center m-auto">
|
||||||
|
<label on:click={() => changeRuleCondition('under')} class="cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||||
|
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||||
|
checked={condition === 'under'} name={ruleName} />
|
||||||
|
<span class="label-text text-white">Under</span>
|
||||||
|
</label>
|
||||||
|
<label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||||
|
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||||
|
checked={condition === 'over'} name={ruleName} />
|
||||||
|
<span class="label-text text-white">Over</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="thin-scrollbar dark:styled-scrollbar dark:right-scrollbar max-h-[250px] overflow-y-auto overflow-x-hidden overscroll-contain border-t border-gray-600
|
||||||
|
dark:border-dark-500 xl:max-h-[297px]">
|
||||||
|
<button class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 hover:bg-gray-100 hover:text-gray-900
|
||||||
|
focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
|
||||||
|
100B
|
||||||
|
</button>
|
||||||
|
<button class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 hover:bg-gray-100 hover:text-gray-900
|
||||||
|
focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
|
||||||
|
50B
|
||||||
|
</button>
|
||||||
|
<button class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 hover:bg-gray-100 hover:text-gray-900
|
||||||
|
focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
|
||||||
|
10B
|
||||||
|
</button>
|
||||||
|
<button class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 hover:bg-gray-100 hover:text-gray-900
|
||||||
|
focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
|
||||||
|
1B
|
||||||
|
</button>
|
||||||
|
<button class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 hover:bg-gray-100 hover:text-gray-900
|
||||||
|
focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
|
||||||
|
300M
|
||||||
|
</button>
|
||||||
|
<button class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 hover:bg-gray-100 hover:text-gray-900
|
||||||
|
focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
|
||||||
|
100M
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End Added Rules-->
|
||||||
@ -18,7 +18,7 @@
|
|||||||
//import DiscountBanner from '$lib/components/DiscountBanner.svelte';
|
//import DiscountBanner from '$lib/components/DiscountBanner.svelte';
|
||||||
|
|
||||||
import { beforeNavigate, afterNavigate } from '$app/navigation';
|
import { beforeNavigate, afterNavigate } from '$app/navigation';
|
||||||
import { onMount } from 'svelte';
|
import { onMount, onDestroy } from 'svelte';
|
||||||
import { clearCache, showCookieConsent, newAvatar, userRegion, screenWidth, stockTicker, etfTicker, loginData, numberOfUnreadNotification, cachedPosts, currentPagePosition, clientSideCache, twitchStatus } from '$lib/store';
|
import { clearCache, showCookieConsent, newAvatar, userRegion, screenWidth, stockTicker, etfTicker, loginData, numberOfUnreadNotification, cachedPosts, currentPagePosition, clientSideCache, twitchStatus } from '$lib/store';
|
||||||
|
|
||||||
import { Button } from "$lib/components/shadcn/button/index.ts";
|
import { Button } from "$lib/components/shadcn/button/index.ts";
|
||||||
@ -197,7 +197,9 @@ onMount(async () => {
|
|||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onDestroy( () => {
|
||||||
|
clearCache()
|
||||||
|
})
|
||||||
|
|
||||||
beforeNavigate(async () => {
|
beforeNavigate(async () => {
|
||||||
NProgress.start();
|
NProgress.start();
|
||||||
|
|||||||
@ -57,68 +57,68 @@ const getStockScreenerData = async (rules) => {
|
|||||||
let displayResults = [];
|
let displayResults = [];
|
||||||
let isSaved = false;
|
let isSaved = false;
|
||||||
let ruleCondition = {
|
let ruleCondition = {
|
||||||
avgVolume: (ruleOfList?.find(item => item.name === "avgVolume") || { condition: 'above' }).condition,
|
avgVolume: (ruleOfList?.find(item => item.name === "avgVolume") || { condition: 'over' }).condition,
|
||||||
priceToBookRatio: (ruleOfList?.find(item => item.name === "priceToBookRati") || { condition: 'above' }).condition,
|
priceToBookRatio: (ruleOfList?.find(item => item.name === "priceToBookRati") || { condition: 'over' }).condition,
|
||||||
priceToSalesRatio: (ruleOfList?.find(item => item.name === "priceToSalesRatio") || { condition: 'above' }).condition,
|
priceToSalesRatio: (ruleOfList?.find(item => item.name === "priceToSalesRatio") || { condition: 'over' }).condition,
|
||||||
rsi: (ruleOfList?.find(item => item.name === "rsi") || { condition: 'above' }).condition,
|
rsi: (ruleOfList?.find(item => item.name === "rsi") || { condition: 'over' }).condition,
|
||||||
stochRSI: (ruleOfList?.find(item => item.name === "stochRSI") || { condition: 'above' }).condition,
|
stochRSI: (ruleOfList?.find(item => item.name === "stochRSI") || { condition: 'over' }).condition,
|
||||||
mfi: (ruleOfList?.find(item => item.name === "mfi") || { condition: 'above' }).condition,
|
mfi: (ruleOfList?.find(item => item.name === "mfi") || { condition: 'over' }).condition,
|
||||||
cci: (ruleOfList?.find(item => item.name === "cci") || { condition: 'above' }).condition,
|
cci: (ruleOfList?.find(item => item.name === "cci") || { condition: 'over' }).condition,
|
||||||
atr: (ruleOfList?.find(item => item.name === "atr") || { condition: 'above' }).condition,
|
atr: (ruleOfList?.find(item => item.name === "atr") || { condition: 'over' }).condition,
|
||||||
sma50: (ruleOfList?.find(item => item.name === "sma50") || { condition: 'above' }).condition,
|
sma50: (ruleOfList?.find(item => item.name === "sma50") || { condition: 'over' }).condition,
|
||||||
sma200: (ruleOfList?.find(item => item.name === "sma200") || { condition: 'above' }).condition,
|
sma200: (ruleOfList?.find(item => item.name === "sma200") || { condition: 'over' }).condition,
|
||||||
ema50: (ruleOfList?.find(item => item.name === "ema50") || { condition: 'above' }).condition,
|
ema50: (ruleOfList?.find(item => item.name === "ema50") || { condition: 'over' }).condition,
|
||||||
ema200: (ruleOfList?.find(item => item.name === "ema200") || { condition: 'above' }).condition,
|
ema200: (ruleOfList?.find(item => item.name === "ema200") || { condition: 'over' }).condition,
|
||||||
change1W: (ruleOfList?.find(item => item.name === "change1W") || { condition: 'above' }).condition,
|
change1W: (ruleOfList?.find(item => item.name === "change1W") || { condition: 'over' }).condition,
|
||||||
change1M: (ruleOfList?.find(item => item.name === "change1M") || { condition: 'above' }).condition,
|
change1M: (ruleOfList?.find(item => item.name === "change1M") || { condition: 'over' }).condition,
|
||||||
change3M: (ruleOfList?.find(item => item.name === "change3M") || { condition: 'above' }).condition,
|
change3M: (ruleOfList?.find(item => item.name === "change3M") || { condition: 'over' }).condition,
|
||||||
change6M: (ruleOfList?.find(item => item.name === "change6M") || { condition: 'above' }).condition,
|
change6M: (ruleOfList?.find(item => item.name === "change6M") || { condition: 'over' }).condition,
|
||||||
change1Y: (ruleOfList?.find(item => item.name === "change1Y") || { condition: 'above' }).condition,
|
change1Y: (ruleOfList?.find(item => item.name === "change1Y") || { condition: 'over' }).condition,
|
||||||
change3Y: (ruleOfList?.find(item => item.name === "change3Y") || { condition: 'above' }).condition,
|
change3Y: (ruleOfList?.find(item => item.name === "change3Y") || { condition: 'over' }).condition,
|
||||||
payoutRatio: (ruleOfList?.find(item => item.name === "payoutRatio") || { condition: 'above' }).condition,
|
payoutRatio: (ruleOfList?.find(item => item.name === "payoutRatio") || { condition: 'over' }).condition,
|
||||||
annualDividend: (ruleOfList?.find(item => item.name === "annualDividend") || { condition: 'above' }).condition,
|
annualDividend: (ruleOfList?.find(item => item.name === "annualDividend") || { condition: 'over' }).condition,
|
||||||
dividendYield: (ruleOfList?.find(item => item.name === "dividendYield") || { condition: 'above' }).condition,
|
dividendYield: (ruleOfList?.find(item => item.name === "dividendYield") || { condition: 'over' }).condition,
|
||||||
dividendGrowth: (ruleOfList?.find(item => item.name === "dividendGrowth") || { condition: 'above' }).condition,
|
dividendGrowth: (ruleOfList?.find(item => item.name === "dividendGrowth") || { condition: 'over' }).condition,
|
||||||
eps: (ruleOfList?.find(item => item.name === "eps") || { condition: 'above' }).condition,
|
eps: (ruleOfList?.find(item => item.name === "eps") || { condition: 'over' }).condition,
|
||||||
growthEPS: (ruleOfList?.find(item => item.name === "growthEPS") || { condition: 'above' }).condition,
|
growthEPS: (ruleOfList?.find(item => item.name === "growthEPS") || { condition: 'over' }).condition,
|
||||||
pe: (ruleOfList?.find(item => item.name === "pe") || { condition: 'above' }).condition,
|
pe: (ruleOfList?.find(item => item.name === "pe") || { condition: 'over' }).condition,
|
||||||
forwardPE: (ruleOfList?.find(item => item.name === "forwardPE") || { condition: 'above' }).condition,
|
forwardPE: (ruleOfList?.find(item => item.name === "forwardPE") || { condition: 'over' }).condition,
|
||||||
beta: (ruleOfList?.find(item => item.name === "beta") || { condition: 'above' }).condition,
|
beta: (ruleOfList?.find(item => item.name === "beta") || { condition: 'over' }).condition,
|
||||||
ebitda: (ruleOfList?.find(item => item.name === "ebitda") || { condition: 'above' }).condition,
|
ebitda: (ruleOfList?.find(item => item.name === "ebitda") || { condition: 'over' }).condition,
|
||||||
growthEBITDA: (ruleOfList?.find(item => item.name === "growthEBITDA") || { condition: 'above' }).condition,
|
growthEBITDA: (ruleOfList?.find(item => item.name === "growthEBITDA") || { condition: 'over' }).condition,
|
||||||
revenue: (ruleOfList?.find(item => item.name === "revenue") || { condition: 'above' }).condition,
|
revenue: (ruleOfList?.find(item => item.name === "revenue") || { condition: 'over' }).condition,
|
||||||
growthRevenue: (ruleOfList?.find(item => item.name === "growthRevenue") || { condition: 'above' }).condition,
|
growthRevenue: (ruleOfList?.find(item => item.name === "growthRevenue") || { condition: 'over' }).condition,
|
||||||
costOfRevenue: (ruleOfList?.find(item => item.name === "costOfRevenue") || { condition: 'above' }).condition,
|
costOfRevenue: (ruleOfList?.find(item => item.name === "costOfRevenue") || { condition: 'over' }).condition,
|
||||||
growthCostOfRevenue: (ruleOfList?.find(item => item.name === "growthCostOfRevenue") || { condition: 'above' }).condition,
|
growthCostOfRevenue: (ruleOfList?.find(item => item.name === "growthCostOfRevenue") || { condition: 'over' }).condition,
|
||||||
costAndExpenses: (ruleOfList?.find(item => item.name === "costAndExpenses") || { condition: 'above' }).condition,
|
costAndExpenses: (ruleOfList?.find(item => item.name === "costAndExpenses") || { condition: 'over' }).condition,
|
||||||
growthCostAndExpenses: (ruleOfList?.find(item => item.name === "growthCostAndExpenses") || { condition: 'above' }).condition,
|
growthCostAndExpenses: (ruleOfList?.find(item => item.name === "growthCostAndExpenses") || { condition: 'over' }).condition,
|
||||||
netIncome: (ruleOfList?.find(item => item.name === "netIncome") || { condition: 'above' }).condition,
|
netIncome: (ruleOfList?.find(item => item.name === "netIncome") || { condition: 'over' }).condition,
|
||||||
growthNetIncome: (ruleOfList?.find(item => item.name === "growthNetIncome") || { condition: 'above' }).condition,
|
growthNetIncome: (ruleOfList?.find(item => item.name === "growthNetIncome") || { condition: 'over' }).condition,
|
||||||
researchAndDevelopmentExpenses: (ruleOfList?.find(item => item.name === "researchAndDevelopmentExpenses") || { condition: 'above' }).condition,
|
researchAndDevelopmentExpenses: (ruleOfList?.find(item => item.name === "researchAndDevelopmentExpenses") || { condition: 'over' }).condition,
|
||||||
growthResearchAndDevelopmentExpenses: (ruleOfList?.find(item => item.name === "growthResearchAndDevelopmentExpenses") || { condition: 'above' }).condition,
|
growthResearchAndDevelopmentExpenses: (ruleOfList?.find(item => item.name === "growthResearchAndDevelopmentExpenses") || { condition: 'over' }).condition,
|
||||||
grossProfit: (ruleOfList?.find(item => item.name === "grossProfit") || { condition: 'above' }).condition,
|
grossProfit: (ruleOfList?.find(item => item.name === "grossProfit") || { condition: 'over' }).condition,
|
||||||
growthGrossProfit: (ruleOfList?.find(item => item.name === "growthGrossProfit") || { condition: 'above' }).condition,
|
growthGrossProfit: (ruleOfList?.find(item => item.name === "growthGrossProfit") || { condition: 'over' }).condition,
|
||||||
interestIncome: (ruleOfList?.find(item => item.name === "interestIncome") || { condition: 'above' }).condition,
|
interestIncome: (ruleOfList?.find(item => item.name === "interestIncome") || { condition: 'over' }).condition,
|
||||||
interestExpense: (ruleOfList?.find(item => item.name === "interestExpense") || { condition: 'above' }).condition,
|
interestExpense: (ruleOfList?.find(item => item.name === "interestExpense") || { condition: 'over' }).condition,
|
||||||
growthInterestExpense: (ruleOfList?.find(item => item.name === "growthInterestExpense") || { condition: 'above' }).condition,
|
growthInterestExpense: (ruleOfList?.find(item => item.name === "growthInterestExpense") || { condition: 'over' }).condition,
|
||||||
operatingExpenses: (ruleOfList?.find(item => item.name === "operatingExpense") || { condition: 'above' }).condition,
|
operatingExpenses: (ruleOfList?.find(item => item.name === "operatingExpense") || { condition: 'over' }).condition,
|
||||||
growthOperatingExpenses: (ruleOfList?.find(item => item.name === "growthOperatingExpense") || { condition: 'above' }).condition,
|
growthOperatingExpenses: (ruleOfList?.find(item => item.name === "growthOperatingExpense") || { condition: 'over' }).condition,
|
||||||
operatingIncome: (ruleOfList?.find(item => item.name === "operatingIncome") || { condition: 'above' }).condition,
|
operatingIncome: (ruleOfList?.find(item => item.name === "operatingIncome") || { condition: 'over' }).condition,
|
||||||
growthOperatingIncome: (ruleOfList?.find(item => item.name === "growthOperatingIncome") || { condition: 'above' }).condition,
|
growthOperatingIncome: (ruleOfList?.find(item => item.name === "growthOperatingIncome") || { condition: 'over' }).condition,
|
||||||
marketCap: (ruleOfList?.find(item => item.name === "marketCap") || { condition: 'above' }).condition,
|
marketCap: (ruleOfList?.find(item => item.name === "marketCap") || { condition: 'over' }).condition,
|
||||||
var: (ruleOfList?.find(item => item.name === "var") || { condition: 'above' }).condition,
|
var: (ruleOfList?.find(item => item.name === "var") || { condition: 'over' }).condition,
|
||||||
trendAnalysis: (ruleOfList?.find(item => item.name === "trendAnalysis") || { condition: 'above' }).condition,
|
trendAnalysis: (ruleOfList?.find(item => item.name === "trendAnalysis") || { condition: 'over' }).condition,
|
||||||
fundamentalAnalysis: (ruleOfList?.find(item => item.name === "fundamentalAnalysis") || { condition: 'above' }).condition,
|
fundamentalAnalysis: (ruleOfList?.find(item => item.name === "fundamentalAnalysis") || { condition: 'over' }).condition,
|
||||||
currentRatio: (ruleOfList?.find(item => item.name === "currentRatio") || { condition: 'above' }).condition,
|
currentRatio: (ruleOfList?.find(item => item.name === "currentRatio") || { condition: 'over' }).condition,
|
||||||
quickRatio: (ruleOfList?.find(item => item.name === "quickRatio") || { condition: 'above' }).condition,
|
quickRatio: (ruleOfList?.find(item => item.name === "quickRatio") || { condition: 'over' }).condition,
|
||||||
debtEquityRatio: (ruleOfList?.find(item => item.name === "debtEquityRatio") || { condition: 'above' }).condition,
|
debtEquityRatio: (ruleOfList?.find(item => item.name === "debtEquityRatio") || { condition: 'over' }).condition,
|
||||||
debtRatio: (ruleOfList?.find(item => item.name === "debtRatio") || { condition: 'above' }).condition,
|
debtRatio: (ruleOfList?.find(item => item.name === "debtRatio") || { condition: 'over' }).condition,
|
||||||
returnOnAssets: (ruleOfList?.find(item => item.name === "returnOnAssets") || { condition: 'above' }).condition,
|
returnOnAssets: (ruleOfList?.find(item => item.name === "returnOnAssets") || { condition: 'over' }).condition,
|
||||||
returnOnEquity: (ruleOfList?.find(item => item.name === "returnOnEquity") || { condition: 'above' }).condition,
|
returnOnEquity: (ruleOfList?.find(item => item.name === "returnOnEquity") || { condition: 'over' }).condition,
|
||||||
enterpriseValue: (ruleOfList?.find(item => item.name === "enterpriseValue") || { condition: 'above' }).condition,
|
enterpriseValue: (ruleOfList?.find(item => item.name === "enterpriseValue") || { condition: 'over' }).condition,
|
||||||
freeCashFlowPerShare: (ruleOfList?.find(item => item.name === "freeCashFlowPerShare") || { condition: 'above' }).condition,
|
freeCashFlowPerShare: (ruleOfList?.find(item => item.name === "freeCashFlowPerShare") || { condition: 'over' }).condition,
|
||||||
cashPerShare: (ruleOfList?.find(item => item.name === "cashPerShare") || { condition: 'above' }).condition,
|
cashPerShare: (ruleOfList?.find(item => item.name === "cashPerShare") || { condition: 'over' }).condition,
|
||||||
priceToFreeCashFlowsRatio: (ruleOfList?.find(item => item.name === "priceToFreeCashFlowsRatio") || { condition: 'above' }).condition,
|
priceToFreeCashFlowsRatio: (ruleOfList?.find(item => item.name === "priceToFreeCashFlowsRatio") || { condition: 'over' }).condition,
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -144,7 +144,7 @@ const getStockScreenerData = async (rules) => {
|
|||||||
{ rule: 'change6M', label: 'Price Change 6M [%]', max: "200", min:"-100", step:"2", unit: '%',category: 'ta' },
|
{ rule: 'change6M', label: 'Price Change 6M [%]', max: "200", min:"-100", step:"2", unit: '%',category: 'ta' },
|
||||||
{ rule: 'change1Y', label: 'Price Change 1Y [%]', max: "200", min:"-100", step:"2", unit: '%',category: 'ta' },
|
{ rule: 'change1Y', label: 'Price Change 1Y [%]', max: "200", min:"-100", step:"2", unit: '%',category: 'ta' },
|
||||||
{ rule: 'change3Y', label: 'Price Change 3Y [%]', max: "200", min:"-100", step:"2", unit: '%',category: 'ta' },
|
{ rule: 'change3Y', label: 'Price Change 3Y [%]', max: "200", min:"-100", step:"2", unit: '%',category: 'ta' },
|
||||||
{ rule: 'marketCap', label: 'Market Capitalization', max: "800", min:"10", step:"10", unit: 'Bn', category: 'fund'},
|
{ rule: 'marketCap', label: 'Market Cap', max: "800", min:"10", step:"10", unit: 'Bn', category: 'fund'},
|
||||||
{ rule: 'revenue', label: 'Revenue', max: "800", min:"-100", step:"10", unit: 'Bn', category: 'fund' },
|
{ rule: 'revenue', label: 'Revenue', max: "800", min:"-100", step:"10", unit: 'Bn', category: 'fund' },
|
||||||
{ rule: 'growthRevenue', label: 'Revenue Growth [%]', max: "200", min:"-100", step:"2", unit: '%', category: 'fund' },
|
{ rule: 'growthRevenue', label: 'Revenue Growth [%]', max: "200", min:"-100", step:"2", unit: '%', category: 'fund' },
|
||||||
{ rule: 'costOfRevenue', label: 'Cost of Revenue', max: "800", min:"-100", step:"10", unit: 'Bn', category: 'fund' },
|
{ rule: 'costOfRevenue', label: 'Cost of Revenue', max: "800", min:"-100", step:"10", unit: 'Bn', category: 'fund' },
|
||||||
@ -729,54 +729,54 @@ function filterStockScreenerData() {
|
|||||||
'grossProfit'
|
'grossProfit'
|
||||||
]?.includes(rule.name))
|
]?.includes(rule.name))
|
||||||
{
|
{
|
||||||
if (rule.condition === "above" && item[rule.name] !== null && item[rule.name] <= rule.value * 10**(9)) {
|
if (rule.condition === "over" && item[rule.name] !== null && item[rule.name] <= rule.value * 10**(9)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
else if (rule.condition === "below" && item[rule.name] !== null && item[rule.name] > rule.value * 10**(9)) {
|
else if (rule.condition === "under" && item[rule.name] !== null && item[rule.name] > rule.value * 10**(9)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (rule.name === 'interestIncome' || rule.name === 'interestExpense') {
|
else if (rule.name === 'interestIncome' || rule.name === 'interestExpense') {
|
||||||
if (rule.condition === "above" && item[rule.name] !== null && item[rule.name] <= rule.value * 10**(6)) {
|
if (rule.condition === "over" && item[rule.name] !== null && item[rule.name] <= rule.value * 10**(6)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
else if (rule.condition === "below" && item[rule.name] !== null && item[rule.name] > rule.value * 10**(6)) {
|
else if (rule.condition === "under" && item[rule.name] !== null && item[rule.name] > rule.value * 10**(6)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (rule.name === 'avgVolume') {
|
else if (rule.name === 'avgVolume') {
|
||||||
if (rule.condition === "above" && item[rule.name] <= rule.value * 10**(6)) {
|
if (rule.condition === "over" && item[rule.name] <= rule.value * 10**(6)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
else if (rule.condition === "below" && item[rule.name] > rule.value * 10**(6)) {
|
else if (rule.condition === "under" && item[rule.name] > rule.value * 10**(6)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
else if (rule.name === 'trendAnalysis') {
|
else if (rule.name === 'trendAnalysis') {
|
||||||
if (rule.condition === "above" && item[rule.name]?.accuracy <= rule.value ) {
|
if (rule.condition === "over" && item[rule.name]?.accuracy <= rule.value ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
else if (rule.condition === "below" && item[rule.name]?.accuracy > rule.value ) {
|
else if (rule.condition === "under" && item[rule.name]?.accuracy > rule.value ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
else if (rule.name === 'fundamentalAnalysis') {
|
else if (rule.name === 'fundamentalAnalysis') {
|
||||||
if (rule.condition === "above" && item[rule.name]?.accuracy <= rule.value ) {
|
if (rule.condition === "over" && item[rule.name]?.accuracy <= rule.value ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
else if (rule.condition === "below" && item[rule.name]?.accuracy > rule.value ) {
|
else if (rule.condition === "under" && item[rule.name]?.accuracy > rule.value ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
else {
|
else {
|
||||||
if (rule.condition === "above" && item[rule.name] !== null && item[rule.name] <= rule.value) {
|
if (rule.condition === "over" && item[rule.name] !== null && item[rule.name] <= rule.value) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
else if (rule.condition === "below" && item[rule.name] !== null && item[rule.name] > rule.value) {
|
else if (rule.condition === "under" && item[rule.name] !== null && item[rule.name] > rule.value) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -856,7 +856,6 @@ $: isSaved = !ruleOfList;
|
|||||||
|
|
||||||
$: charNumber = $screenWidth < 640 ? 20 : 40;
|
$: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||||
|
|
||||||
|
|
||||||
function handleChangeCondition(event) {
|
function handleChangeCondition(event) {
|
||||||
ruleCondition[event.detail.rule] = event.detail.condition;
|
ruleCondition[event.detail.rule] = event.detail.condition;
|
||||||
}
|
}
|
||||||
@ -1089,11 +1088,11 @@ function handleChangeValue(event) {
|
|||||||
<svelte:window on:scroll={handleScroll} />
|
<svelte:window on:scroll={handleScroll} />
|
||||||
|
|
||||||
|
|
||||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40 px-5">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||||
<li><a href="/stock-screener" class="text-gray-300">Stock Screener</a></li>
|
<li><a href="/stock-screener" class="text-gray-300">Stock Screener</a></li>
|
||||||
@ -1104,72 +1103,76 @@ function handleChangeValue(event) {
|
|||||||
|
|
||||||
|
|
||||||
<!--Start Build Strategy-->
|
<!--Start Build Strategy-->
|
||||||
<div class="bg-[#09090B] mt-5 sm:rounded-lg sm:border sm:hover:border-slate-700 sm:border-slate-800 pb-10">
|
<div class="mt-5 sm:rounded-lg">
|
||||||
|
|
||||||
<div class="text-slate-300 font-bold text-2xl flex flex-row justify-center sm:justify-start items-center pt-10 pb-5 ml-3 sm:ml-10">
|
|
||||||
Build Strategy
|
|
||||||
|
|
||||||
|
|
||||||
<label for="userLogin" on:click={() => handleSave(true)} class="hidden sm:inline-flex ml-5 sm:hover:bg-purple-700 bg-purple-600 transition duration-100 cursor-pointer font-medium text-center text-white rounded-lg px-4 py-1 text-sm border border-slate-800">
|
|
||||||
Save
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center mb-5">
|
||||||
|
<h1 class="text-white text-3xl font-semibold">
|
||||||
|
Stock Screener
|
||||||
|
</h1>
|
||||||
|
<span class="text-sm font-semibold text-white ml-2 mt-3">
|
||||||
|
{ruleOfList?.length !== 0 ? filteredData?.length : 0} Matches Found
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="rounded-lg border border-gray-700 bg-[#262626] p-2">
|
||||||
|
<div class="items-end border-b border-gray-400">
|
||||||
<div class="mt-3 sm:mt-0 m-auto w-5/6 flex flex-col justify-center sm:flex-row sm:justify-between items-center sm:ml-10">
|
<div class="mr-1 flex items-center justify-between lg:mr-2 mb-1.5">
|
||||||
<label id="step-1" for="ruleModal" class="w-full text-white text-sm bg-[#09090B] border border-slate-800 p-1.5 rounded-lg cursor-pointer">
|
<button class="flex cursor-pointer items-center text-lg sm:text-xl font-semibold text-gray-200" title="Hide Filter Area">
|
||||||
<div class="flex justify-between items-center py-2 px-3">
|
<svg class="-mb-0.5 h-6 w-6" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px">
|
||||||
{#if ruleName === ''}
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
Choose a rule
|
</svg>
|
||||||
{:else}
|
Filters
|
||||||
{#each allRows as row}
|
</button>
|
||||||
{#if row.rule === ruleName}
|
</div>
|
||||||
<p >
|
|
||||||
{row.label}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
<svg class="w-3 h-3 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(180 512 512)"><path fill="white" d="M8.2 751.4c0 8.6 3.4 17.401 10 24.001c13.2 13.2 34.8 13.2 48 0l451.8-451.8l445.2 445.2c13.2 13.2 34.8 13.2 48 0s13.2-34.8 0-48L542 251.401c-13.2-13.2-34.8-13.2-48 0l-475.8 475.8c-6.8 6.8-10 15.4-10 24.2z"/></g></svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--Start Adding Rules-->
|
|
||||||
<div class="flex flex-col space-y-2 pt-6 pb-6 justify-center items-center m-auto w-3/4 sm:w-full max-w-xl ">
|
|
||||||
{#if allRows.some(row => row.rule === ruleName)}
|
|
||||||
{#each allRows as row (row.rule)}
|
|
||||||
{#if ruleName === row.rule}
|
|
||||||
<RuleControl
|
|
||||||
ruleName={row.rule}
|
|
||||||
title={row.label}
|
|
||||||
min={row.min}
|
|
||||||
max={row.max}
|
|
||||||
step={row.step}
|
|
||||||
unit={row?.unit}
|
|
||||||
bind:value={valueMappings[row.rule]}
|
|
||||||
bind:condition={conditions[row.rule]}
|
|
||||||
on:changeCondition={handleChangeCondition}
|
|
||||||
on:changeValue={handleChangeValue}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-3 flex flex-col gap-y-2.5 sm:flex-row lg:gap-y-2 pb-1">
|
||||||
|
<button class="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 text-base font-semibold text-white shadow-sm bg-[#000] focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-smaller">
|
||||||
|
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
<div>Add Filters</div>
|
||||||
|
</button>
|
||||||
|
<div class="relative sm:ml-2">
|
||||||
|
<div class="absolute inset-y-0 left-0 flex items-center pl-2.5">
|
||||||
|
<svg class="h-4 w-4 text-gray-400 xs:h-5 xs:w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" style="max-width: 40px" aria-hidden="true">
|
||||||
|
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Search {allRows?.length} filters..." class="controls-input rounded-lg w-full py-2 pl-10 placeholder:text-gray-300 bg-[#313131] sm:w-72">
|
||||||
|
<div class="absolute inset-y-0 right-0 flex items-center pr-2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="sm:grid sm:grid-cols-2 sm:gap-x-2.5 lg:grid-cols-3 w-full mt-5 border-b border-gray-400">
|
||||||
|
{#each allRows as row (row.rule)}
|
||||||
|
{#if ruleOfList.some(rule => rule.name === row.rule)}
|
||||||
|
<RuleControl
|
||||||
|
ruleName={row.rule}
|
||||||
|
title={row.label}
|
||||||
|
min={row.min}
|
||||||
|
max={row.max}
|
||||||
|
step={row.step}
|
||||||
|
unit={row?.unit}
|
||||||
|
bind:value={valueMappings[row.rule]}
|
||||||
|
bind:condition={conditions[row.rule]}
|
||||||
|
on:changeCondition={handleChangeCondition}
|
||||||
|
on:changeValue={handleChangeValue}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!--End Adding Rules-->
|
<!--End Adding Rules-->
|
||||||
|
|
||||||
<!--Start Rules Preview -->
|
<!--Start Rules Preview -->
|
||||||
|
|
||||||
|
<!--
|
||||||
<div id="step-3" class="m-auto w-5/6 bg-[#09090B] sm:ml-10 h-auto max-h-[400px] no-scrollbar overflow-hidden overflow-y-scroll p-5 sm:rounded-lg border-b sm:border sm:hover:border-slate-700 border-slate-800 pb-10">
|
<div id="step-3" class="m-auto w-5/6 bg-[#09090B] sm:ml-10 h-auto max-h-[400px] no-scrollbar overflow-hidden overflow-y-scroll p-5 sm:rounded-lg border-b sm:border sm:hover:border-slate-700 border-slate-800 pb-10">
|
||||||
<div class="flex flex-row items-center pb-5 sm:pb-0">
|
<div class="flex flex-row items-center pb-5 sm:pb-0">
|
||||||
<div class="text-white font-bold text-xl sm:text-2xl flex justify-start items-center">
|
<div class="text-white font-bold text-xl sm:text-2xl flex justify-start items-center">
|
||||||
@ -1204,7 +1207,7 @@ function handleChangeValue(event) {
|
|||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
<!--End Rules Preview-->
|
<!--End Rules Preview-->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1235,17 +1238,17 @@ function handleChangeValue(event) {
|
|||||||
<table class="table table-sm table-compact w-full bg-[#09090B] border-bg-[#09090B]">
|
<table class="table table-sm table-compact w-full bg-[#09090B] border-bg-[#09090B]">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border-b-[#1A1A27]">
|
<tr class="border-b-[#1A1A27]">
|
||||||
<th class="text-white bg-[#09090B] text-sm border-b-[#09090B]">Symbol</th>
|
<th class="text-white bg-[#09090B] text-sm sm:text-[1rem] font-semibold border-b-[#09090B]">Symbol</th>
|
||||||
<th class="text-white hidden sm:table-cell bg-[#09090B] text-sm border-b-[#09090B]">Company Name</th>
|
<th class="text-white hidden sm:table-cell bg-[#09090B] text-sm sm:text-[1rem] font-semibold border-b-[#09090B]">Company Name</th>
|
||||||
<th on:click={() => { sortBy = 'marketCap'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm text-center">
|
<th on:click={() => { sortBy = 'marketCap'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-center">
|
||||||
Market Cap
|
Market Cap
|
||||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'marketCap' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'marketCap' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||||
</th>
|
</th>
|
||||||
<th on:click={() => { sortBy = 'change'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm text-center">
|
<th on:click={() => { sortBy = 'change'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-sm sm:text-[1rem] font-semibold text-center">
|
||||||
% Change
|
% Change
|
||||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'change' ? '' : 'rotate-180'}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'change' ? '' : 'rotate-180'}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||||
</th>
|
</th>
|
||||||
<th class="text-white bg-[#09090B] text-end text-sm border-b-[#09090B]">Price</th>
|
<th class="text-white bg-[#09090B] text-end text-sm sm:text-[1rem] font-semibold border-b-[#09090B]">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -1259,7 +1262,7 @@ function handleChangeValue(event) {
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-white border-b-[#09090B]">
|
<td class="hidden sm:table-cell whitespace-nowrap text-[1rem] text-white border-b-[#09090B]">
|
||||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user