From 61b25e10de5e57e3cfaf7db76c011b0e2b32c009 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 6 Sep 2024 11:47:21 +0200
Subject: [PATCH] ui fixes

---
 src/lib/components/AnalystCard.svelte         | 20 +++------
 .../stock-screener/[strategyId]/+page.svelte  | 43 ++++++++++---------
 .../[tickerID]/forecast/analyst/+page.svelte  | 14 +++---
 3 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/AnalystCard.svelte b/src/lib/components/AnalystCard.svelte
index 1381ce73..b64569af 100644
--- a/src/lib/components/AnalystCard.svelte
+++ b/src/lib/components/AnalystCard.svelte
@@ -20,9 +20,9 @@
       buyCount = ((analystRating?.Buy / numOfAnalyst) * 100)?.toFixed(2);
       holdCount = ((analystRating?.Hold / numOfAnalyst) * 100)?.toFixed(2);
       sellCount = ((analystRating?.Sell / numOfAnalyst) * 100)?.toFixed(2);
-      priceTarget = analystRating?.priceTarget;
+      priceTarget = analystRating?.priceTarget !== ('n/a' && 0) ?  analystRating?.priceTarget : '-';
       consensusRating = analystRating?.consensusRating;
-      console.log(lastPrice);
+
       try {
         changesPercentage = ((priceTarget / lastPrice - 1) * 100)?.toFixed(2) ?? 0;
       } catch (e) {
@@ -60,11 +60,7 @@
           {/if}
 
           <span class="mr-5 mt-2 font-semibold text-xl text-white">
-            {#if priceTarget !== "n/a"}
-              ${priceTarget}
-            {:else}
-              -
-            {/if}
+            {priceTarget}
           </span>
         </div>
       </div>
@@ -126,9 +122,9 @@
 <!--End Analyst Card-->
 
 <!--Start Mobile Analyst Card-->
+<!--
 <div class="space-y-3 sm:pt-5 sm:hidden">
   <div class="bg-[#000] h-auto w-screen">
-    <!--Start Header-->
     <div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
       <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">Analyst Rating</h2>
 
@@ -158,11 +154,7 @@
           <div class="flex flex-col items-start mr-5">
             <span class="text-white ml-auto text-lg font-medium inline-block"> Price Target: </span>
             <span class="text-white ml-auto text-2xl font-medium inline-block">
-              {#if priceTarget !== "n/a"}
-                ${priceTarget}
-              {:else}
-                -
-              {/if}
+               {priceTarget}
             </span>
           </div>
         </div>
@@ -182,7 +174,6 @@
         {/if}
       </div>
     </div>
-    <!--End Header-->
 
     {#if numOfAnalyst !== 0}
       <div class="mt-5 flex flex-col m-auto items-center rounded-lg w-full mb-16 p-3">
@@ -239,4 +230,5 @@
     {/if}
   </div>
 </div>
+-->
 <!--End Mobile Analyst Card-->
diff --git a/src/routes/stock-screener/[strategyId]/+page.svelte b/src/routes/stock-screener/[strategyId]/+page.svelte
index d96d5689..24b13d06 100644
--- a/src/routes/stock-screener/[strategyId]/+page.svelte
+++ b/src/routes/stock-screener/[strategyId]/+page.svelte
@@ -48,45 +48,48 @@ const allRules = {
   sma200: { label: 'SMA-200', step: [500,250,100,50,10,1], category: 'ta', defaultCondition: 'over', defaultValue: 10 },
   ema50: { label: 'EMA-50', step: [500,250,100,50,10,1], category: 'ta', defaultCondition: 'over', defaultValue: 10 },
   ema200: { label: 'EMA-200', step: [500,250,100,50,10,1], category: 'ta', defaultCondition: 'over', defaultValue: 10 },
-  change1W: { label: 'Price Change 1W [%]', step: ['20%','10%','5%','1%','-1%','-5%','-10%','-20%'], category: 'ta', defaultCondition: 'over', defaultValue: '1%' },
-  change1M: { label: 'Price Change 1M [%]', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
-  change3M: { label: 'Price Change 3M [%]', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
-  change6M: { label: 'Price Change 6M [%]', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
-  change1Y: { label: 'Price Change 1Y [%]', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
-  change3Y: { label: 'Price Change 3Y [%]', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
+  change1W: { label: 'Price Change 1W', step: ['20%','10%','5%','1%','-1%','-5%','-10%','-20%'], category: 'ta', defaultCondition: 'over', defaultValue: '1%' },
+  change1M: { label: 'Price Change 1M', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
+  change3M: { label: 'Price Change 3M', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
+  change6M: { label: 'Price Change 6M', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
+  change1Y: { label: 'Price Change 1Y', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
+  change3Y: { label: 'Price Change 3Y', step: ['100%','50%','20%','10%','5%','1%','-1%','-5%','-10%','-20%','-50%'],category: 'ta', defaultCondition: 'over', defaultValue: '10%' },
   marketCap: { label: 'Market Cap', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
   revenue: { label: 'Revenue', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
-  growthRevenue: { label: 'Revenue Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthRevenue: { label: 'Revenue Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   costOfRevenue: { label: 'Cost of Revenue', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
-  growthCostOfRevenue: { label: 'Cost of Revenue Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthCostOfRevenue: { label: 'Cost of Revenue Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   costAndExpenses: { label: 'Cost & Expenses', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
-  growthCostAndExpenses: { label: 'Cost & Expenses Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthCostAndExpenses: { label: 'Cost & Expenses Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   netIncome: { label: 'Net Income', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
-  growthNetIncome: { label: 'Net Income Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthNetIncome: { label: 'Net Income Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   grossProfit: { label: 'Gross Profit', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
-  growthGrossProfit: { label: 'Gross Profit Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthGrossProfit: { label: 'Gross Profit Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   researchAndDevelopmentExpenses: { label: 'Research & Development', step: ['10B','1B','100M','10M','1M',0], category: 'fund', defaultCondition: 'over', defaultValue: 0 },
-  growthResearchAndDevelopmentExpenses: { label: 'R&D Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
-  payoutRatio: { label: 'Payout Ratio [%]', step: ['100%','80%','60%','40%','20%','0%','-20%','-40%'], category: 'fund', defaultCondition: 'over', defaultValue: '0%' },
-  dividendYield: { label: 'Dividend Yield [%]', step: ['50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthResearchAndDevelopmentExpenses: { label: 'R&D Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  payoutRatio: { label: 'Payout Ratio', step: ['100%','80%','60%','40%','20%','0%','-20%','-40%'], category: 'fund', defaultCondition: 'over', defaultValue: '0%' },
+  dividendYield: { label: 'Dividend Yield', step: ['50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   annualDividend: { label: 'Annual Dividend', step: [10,5,3,2,1,0], category: 'fund', defaultCondition: 'over', defaultValue: '0' },
-  dividendGrowth: { label: 'Dividend Growth [%]', step: ['50%','20%','10%','5%','3%','2%','1%','0%'],category: 'fund', defaultCondition: 'over', defaultValue: 0 },
+  dividendGrowth: { label: 'Dividend Growth', step: ['50%','20%','10%','5%','3%','2%','1%','0%'],category: 'fund', defaultCondition: 'over', defaultValue: 0 },
   eps: { label: 'EPS', step: [20,15,10,5,3,2,1,0], category: 'fund', defaultCondition: 'over', defaultValue: 0 },
-  growthEPS: { label: 'EPS Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthEPS: { label: 'EPS Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   interestIncome: { label: 'Interest Income', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
   interestExpense: { label: 'Interest Expenses', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
-  growthInterestExpense: { label: 'Interest Expenses Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthInterestExpense: { label: 'Interest Expenses Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   operatingExpenses: { label: 'Operating Expenses', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
-  growthOperatingExpenses: { label: 'Operating Expenses Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthOperatingExpenses: { label: 'Operating Expenses Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   operatingIncome: { label: 'Operating Income', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
-  growthOperatingIncome: { label: 'Operating Income Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthOperatingIncome: { label: 'Operating Income Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthFreeCashFlow: { label: 'Free Cash Flow Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthOperatingCashFlow: { label: 'Operating Cash Flow Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthStockBasedCompensation: { label: 'Stock-Based Compensation Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   pe: { label: 'PE Ratio', step: [50,40,30,20,10,5,1], category: 'fund', defaultCondition: 'over', defaultValue: 1 },
   forwardPE: { label: 'Forward PE', step: [50,20,10,5,1,0,-1,-5,-10,-20,-50], category: 'fund', defaultCondition: 'over', defaultValue: 0 },
   priceToBookRatio: { label: 'PB Ratio', step: [50,40,30,20,10,5,1], category: 'fund', defaultCondition: 'over', defaultValue: 1 },
   priceToSalesRatio: { label: 'PS Ratio', step: [50,40,30,20,10,5,1], category: 'fund', defaultCondition: 'over', defaultValue: 1 },
   beta: { label: 'Beta', step: [10,5,1,-5,-10], category: 'fund', defaultCondition: 'over', defaultValue: 1 },
   ebitda: { label: 'EBITDA', step: ['100B','50B','10B','1B','300M','100M','10M'], category: 'fund', defaultCondition: 'over', defaultValue: '10M' },
-  growthEBITDA: { label: 'EBITDA Growth [%]', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
+  growthEBITDA: { label: 'EBITDA Growth', step: ['200%','100%','50%','20%','10%','5%','1%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   var: { label: 'Value-at-Risk', step: ['-1%','-5%','-10%','-15%','-20%'], category: 'fund', defaultCondition: 'over', defaultValue: '1%' },
   trendAnalysis: { label: 'AI Trend Analysis (Bullish)', step: ['80%','70%','60%','50%'], category: 'ai', defaultCondition: 'over', defaultValue: '50%' },
   fundamentalAnalysis: { label: 'AI Fundamental Analysis (Bullish)', step: ['80%','70%','60%','50%'], category: 'ai', defaultCondition: 'over', defaultValue: '50%' },
diff --git a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
index af5a5398..0717f073 100644
--- a/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
@@ -34,9 +34,9 @@ function changeTab(index) {
   if(Object?.keys(analystRating)?.length !== 0) {
 
     numOfAnalyst = analystRating?.numOfAnalyst;
-    priceTarget = analystRating?.priceTarget
+    priceTarget = analystRating?.priceTarget !== ('n/a' && 0) ? analystRating?.priceTarget : '-'
     consensusRating = analystRating?.consensusRating;
-    changesPercentage = ((priceTarget/$currentPortfolioPrice -1)*100)?.toFixed(2) ?? 0;
+    changesPercentage = analystRating?.priceTarget !== ('n/a' && 0) ? ((priceTarget/$currentPortfolioPrice -1)*100)?.toFixed(2) : '-';
 
     }
     if (activeIdx === 1) {
@@ -169,12 +169,12 @@ changeTab(0)
                     </label>    
                    
                       <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
-                        ${priceTarget}
+                        {priceTarget}
                       </div> 
                   </div>
                   <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
                     <label for="upsideInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
-                      Upside 
+                      Upside [%]
                       <InfoModal
                       title={"Upside"}
                       content={"The average price target's percentage difference from the current stock price."}
@@ -184,9 +184,9 @@ changeTab(0)
 
                       <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                         {#if changesPercentage >=0}
-                            <span class="text-[#10DB06]">+{changesPercentage}%</span>
+                            <span class="text-[#10DB06]">+{changesPercentage}</span>
                           {:else}
-                            <span class="text-[#FF2F1F]">{changesPercentage}% </span> 
+                            <span class="text-[#FF2F1F]">{changesPercentage}</span> 
                           {/if}
                       </div> 
                   </div>
@@ -208,7 +208,7 @@ changeTab(0)
                         </div>
 
 
-                        <div class="flex flex-col items-end w-full">
+                        <div class="flex flex-col items-end w-full pt-10">
                           <InfoModal
                           title={"Top Analysts"}
                           content={"Filter for analysts rated 4+ stars focusing on their win rate and average return per rating. Analysts with 4+ stars typically exhibit both high accuracy and high return per rating."}