From 4fe1d0f312df91122f0689d628ba65f5b4e33780 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 7 Aug 2024 18:14:45 +0200
Subject: [PATCH] ui fix

---
 src/lib/components/AnalystEstimate.svelte   | 26 ++++++++++-----------
 src/lib/components/SentimentAnalysis.svelte | 24 ++++---------------
 src/lib/components/ShareHolders.svelte      |  4 ++--
 src/lib/components/VaR.svelte               |  8 +++----
 4 files changed, 24 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index b87b6372..b1f109fa 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -61,7 +61,7 @@ const getAnalystEstimate = async (ticker) => {
     } else {
 
       const postData = {'ticker': ticker};
-      // make the POST request to the endpoint
+
       const response = await fetch(data?.apiURL + '/analyst-estimate', {
         method: 'POST',
         headers: {
@@ -217,10 +217,10 @@ $: {
                     <select class="mt-5 mb-5 sm:mb-0 sm:mt-3 ml-1 w-44 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={changeStatement}>
                         <option disabled>Choose Fundamental Data</option>
                         <option disabled={deactivateContent} value="EPS">
-                            {!deactivateContent ? 'EPS' : 'EPS (Pro Only)'} 
+                            EPS
                         </option>
                         <option disabled={deactivateContent} value="EBITDA">
-                            {!deactivateContent ? `EBITDA in ${displayEBITDAUnit}` : 'EBITDA (Pro Only)'}
+                            EBITDA in ${displayEBITDAUnit}
                         </option>
                         <option value="Net Income">
                             Net Income in {displayNetIncomeUnit}
@@ -282,13 +282,13 @@ $: {
 
                 
                 
-                <div class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto rounded-none sm:rounded-lg overflow-hidden overflow-x-scroll">
+                <div class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto  overflow-x-scroll">
                     <table class="table table-sm shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
                         <thead class="">
                         <tr class="">
-                            <th class="bg-[#09090B] border-b border-[#000] text-white font-semibold text-sm text-start">Year</th>
-                            {#each ($screenWidth >= 640 ? xData?.slice(-6) : xData) as item}
-                            <td class="z-20 bg-[#09090B] border-b border-[#000] text-white font-semibold text-sm text-center bg-[#09090B]">{'FY'+item}</td>
+                            <th class="bg-[#09090B] border-b border-[#000] text-white font-semibold text-sm sm:text-[1rem] text-start">Year</th>
+                            {#each ($screenWidth >= 640 ? xData?.slice(-8) : xData) as item}
+                            <td class="z-20 bg-[#09090B] border-b border-[#000] text-white font-semibold text-sm sm:text-[1rem] text-center bg-[#09090B]">{'FY'+item}</td>
                             {/each}
 
                         </tr>
@@ -296,23 +296,23 @@ $: {
                         <tbody class="shadow-md">
 
                             <tr class="bg-[#09090B] border-b-[#09090B]">
-                                <th class="text-white text-start font-medium bg-[#09090B] border-b border-[#09090B]">
+                                <th class="text-white text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]">
                                     Forecast
                                 </th>
-                                {#each ($screenWidth >= 640 ? tableDataForecast?.slice(-6) : tableDataForecast) as item}
-                                    <td class="text-white text-center font-medium  border-b border-[#09090B]">
+                                {#each ($screenWidth >= 640 ? tableDataForecast?.slice(-8) : tableDataForecast) as item}
+                                    <td class="text-white text-sm sm:text-[1rem] text-center font-medium  border-b border-[#09090B]">
                                         {(item?.val === '0.00' || item?.val === null) ? '-' : item?.val}
                                     </td>
                                 {/each}
                            
                             </tr>
 
-                            <tr class="bg-[#09090B] border-b-[#09090B]">
+                            <tr class="bg-[#09090B] text-sm sm:text-[1rem] border-b-[#09090B]">
                                 <th class="bg-[#09090B] text-white text-start font-medium  bg-[#09090B] border-b border-[#09090B]">
                                     Actual
                                 </th>
-                                {#each ($screenWidth >= 640 ? tableDataActual?.slice(-6) : tableDataActual) as item}
-                                    <td class="text-white text-center font-medium bg-[#09090B]">
+                                {#each ($screenWidth >= 640 ? tableDataActual?.slice(-8) : tableDataActual) as item}
+                                    <td class="text-white text-sm sm:text-[1rem] text-center font-medium bg-[#09090B]">
                                         {(item?.val === '0.00' || item?.val === null) ? '-' : item?.val}
                                     </td>
                                 {/each}
diff --git a/src/lib/components/SentimentAnalysis.svelte b/src/lib/components/SentimentAnalysis.svelte
index b256ea54..fe1c9705 100644
--- a/src/lib/components/SentimentAnalysis.svelte
+++ b/src/lib/components/SentimentAnalysis.svelte
@@ -1,24 +1,10 @@
 
 <script lang ='ts'>
-    import {sentimentComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, userRegion, getCache, setCache} from '$lib/store';
+    import {sentimentComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
 
     let sentimentList = [];
     let isLoaded = false;
-    const usRegion = ['cle1','iad1','pdx1','sfo1'];
-
-    let apiURL;
-let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
-
-
-    userRegion.subscribe(value => {
-
-        if (usRegion.includes(value)) {
-        apiURL = import.meta.env.VITE_USEAST_API_URL;
-        } else {
-        apiURL = import.meta.env.VITE_EU_API_URL;
-        }
-    });
     export let data;
     
     let oneMonthResult;
@@ -49,15 +35,15 @@ const getSentimentAnalysis = async (ticker) => {
 
       const postData = {'ticker': ticker};
       // make the POST request to the endpoint
-      const response = await fetch(apiURL + '/sentiment-analysis', {
+      const response = await fetch(data?.apiURL + '/sentiment-analysis', {
         method: 'POST',
         headers: {
-          "Content-Type": "application/json", "X-API-KEY": apiKey
+          "Content-Type": "application/json", "X-API-KEY": data?.apiKey
         },
         body: JSON.stringify(postData)
       });
 
-      sentimentList = await response.json();
+      sentimentList = await response?.json();
 
       // Cache the data for this specific tickerID with a specific name 'getSentimentAnalysis'
       setCache(ticker, sentimentList, 'getSentimentAnalysis');
@@ -144,7 +130,7 @@ $: {
                             </svg>
                             <!-- Percentage Text -->
                             <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                <span class="text-center text-white text-xl font-semibold">
+                                <span class="text-center text-white text-xl sm:text-2xl font-semibold">
                                     {oneMonthResult}
                                 </span>
                             </div>
diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index c236644f..91226523 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -221,7 +221,7 @@ let charNumber = 20;
                 </div>
 
                 <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
-                    <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
+                    <div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3 ">
                       <!--Start Put/Call-->  
                       <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20">
                         <div class="flex flex-col items-start">
@@ -332,7 +332,7 @@ let charNumber = 20;
                       <thead>
                         <tr>
                           <th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Institute</th>
-                          <th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Ownership</th>
+                          <th class="text-white shadow-md font-semibold text-sm text-center bg-[#09090B]">Ownership</th>
                           <th class="text-white shadow-md font-semibold text-sm text-end hidden sm:table-cell bg-[#09090B]">Shares</th>
                           <th class="text-white shadow-md font-semibold text-sm text-end hidden sm:table-cell bg-[#09090B]">Market Value</th>
                           <th class="text-white shadow-md font-semibold text-sm text-end  bg-[#09090B]">Portfolio</th>
diff --git a/src/lib/components/VaR.svelte b/src/lib/components/VaR.svelte
index 831e4727..d4cfdcf1 100644
--- a/src/lib/components/VaR.svelte
+++ b/src/lib/components/VaR.svelte
@@ -94,8 +94,8 @@
             <div class="pb-4 w-full mt-5">
                 <div class="w-auto p-4 sm:p-6 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
                   <div class="flex flex-row items-center justify-between ">
-                            <div class="relative size-[60px] sm:size-[70px] ml-auto">
-                            <svg class="size-full w-[60px] h-[60px] sm:w-[70px] sm:h-[70px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                            <div class="relative size-[60px] sm:size-[90px] ml-auto">
+                            <svg class="size-full w-[60px] h-[60px] sm:w-[90px] sm:h-[90px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                                 <!-- Background Circle -->
                                 <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="4"></circle>
                                 <!-- Progress Circle inside a group with rotation -->
@@ -105,7 +105,7 @@
                             </svg>
                             <!-- Percentage Text -->
                             <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                <span class="text-center text-white text-xl font-semibold">
+                                <span class="text-center text-white text-xl sm:text-2xl font-semibold">
                                     {rating}
                                 </span>
                             </div>
@@ -115,7 +115,7 @@
                             <h3 class="hidden sm:block text-gray-300 text-[1rem] sm:text-lg font-semibold">
                                 <span class="{outlook === 'Minimum Risk' ? 'text-[#10BC09]' : outlook==='Risky' ? 'text-red-500' : 'text-white'}">{outlook}</span> outlook:
                             </h3>
-                            <span class="text-gray-200 text-sm mt-1">
+                            <span class="text-gray-200 text-sm sm:text-lg mt-1">
                                 Under typical market conditions, there is a <span class="font-semibold">95%</span> probability that <span class="text-blue-400">${$assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker}</span> will incur a maximum loss of <span class="text-[#FF2F1F] font-semibold">{valueAtRisk}%</span> in the upcoming week.
                             </span>
                         </div>