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 2024-08-07 18:14:45 +02:00
parent 3e38fcbb2b
commit 4fe1d0f312
4 changed files with 24 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/lib/components/AnalystEstimate.svelte
View File

@ -61,7 +61,7 @@ const getAnalystEstimate = async (ticker) => {
} else { } else {
const postData = {'ticker': ticker}; const postData = {'ticker': ticker};
// make the POST request to the endpoint
const response = await fetch(data?.apiURL + '/analyst-estimate', { const response = await fetch(data?.apiURL + '/analyst-estimate', {
method: 'POST', method: 'POST',
headers: { 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}> <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>Choose Fundamental Data</option>
<option disabled={deactivateContent} value="EPS"> <option disabled={deactivateContent} value="EPS">
{!deactivateContent ? 'EPS' : 'EPS (Pro Only)'} EPS
</option> </option>
<option disabled={deactivateContent} value="EBITDA"> <option disabled={deactivateContent} value="EBITDA">
{!deactivateContent ? `EBITDA in ${displayEBITDAUnit}` : 'EBITDA (Pro Only)'} EBITDA in ${displayEBITDAUnit}
</option> </option>
<option value="Net Income"> <option value="Net Income">
Net Income in {displayNetIncomeUnit} 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]"> <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=""> <thead class="">
<tr class=""> <tr class="">
<th class="bg-[#09090B] border-b border-[#000] text-white font-semibold text-sm text-start">Year</th> <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(-6) : xData) as item} {#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 text-center bg-[#09090B]">{'FY'+item}</td> <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} {/each}
</tr> </tr>
@ -296,23 +296,23 @@ $: {
<tbody class="shadow-md"> <tbody class="shadow-md">
<tr class="bg-[#09090B] border-b-[#09090B]"> <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 Forecast
</th> </th>
{#each ($screenWidth >= 640 ? tableDataForecast?.slice(-6) : tableDataForecast) as item} {#each ($screenWidth >= 640 ? tableDataForecast?.slice(-8) : tableDataForecast) as item}
<td class="text-white text-center font-medium border-b border-[#09090B]"> <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} {(item?.val === '0.00' || item?.val === null) ? '-' : item?.val}
</td> </td>
{/each} {/each}
</tr> </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]"> <th class="bg-[#09090B] text-white text-start font-medium bg-[#09090B] border-b border-[#09090B]">
Actual Actual
</th> </th>
{#each ($screenWidth >= 640 ? tableDataActual?.slice(-6) : tableDataActual) as item} {#each ($screenWidth >= 640 ? tableDataActual?.slice(-8) : tableDataActual) as item}
<td class="text-white text-center font-medium bg-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] text-center font-medium bg-[#09090B]">
{(item?.val === '0.00' || item?.val === null) ? '-' : item?.val} {(item?.val === '0.00' || item?.val === null) ? '-' : item?.val}
</td> </td>
{/each} {/each}

24
src/lib/components/SentimentAnalysis.svelte
View File

@ -1,24 +1,10 @@
<script lang ='ts'> <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'; import InfoModal from '$lib/components/InfoModal.svelte';
let sentimentList = []; let sentimentList = [];
let isLoaded = false; 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; export let data;
let oneMonthResult; let oneMonthResult;
@ -49,15 +35,15 @@ const getSentimentAnalysis = async (ticker) => {
const postData = {'ticker': ticker}; const postData = {'ticker': ticker};
// make the POST request to the endpoint // make the POST request to the endpoint
const response = await fetch(apiURL + '/sentiment-analysis', { const response = await fetch(data?.apiURL + '/sentiment-analysis', {
method: 'POST', method: 'POST',
headers: { headers: {
"Content-Type": "application/json", "X-API-KEY": apiKey "Content-Type": "application/json", "X-API-KEY": data?.apiKey
}, },
body: JSON.stringify(postData) body: JSON.stringify(postData)
}); });
sentimentList = await response.json(); sentimentList = await response?.json();
// Cache the data for this specific tickerID with a specific name 'getSentimentAnalysis' // Cache the data for this specific tickerID with a specific name 'getSentimentAnalysis'
setCache(ticker, sentimentList, 'getSentimentAnalysis'); setCache(ticker, sentimentList, 'getSentimentAnalysis');
@ -144,7 +130,7 @@ $: {
</svg> </svg>
<!-- Percentage Text --> <!-- Percentage Text -->
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"> <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} {oneMonthResult}
</span> </span>
</div> </div>

4
src/lib/components/ShareHolders.svelte
View File

@ -221,7 +221,7 @@ let charNumber = 20;
</div> </div>
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center"> <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--> <!--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-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"> <div class="flex flex-col items-start">
@ -332,7 +332,7 @@ let charNumber = 20;
<thead> <thead>
<tr> <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]">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]">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 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> <th class="text-white shadow-md font-semibold text-sm text-end bg-[#09090B]">Portfolio</th>

8
src/lib/components/VaR.svelte
View File

@ -94,8 +94,8 @@
<div class="pb-4 w-full mt-5"> <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="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="flex flex-row items-center justify-between ">
<div class="relative size-[60px] sm:size-[70px] ml-auto"> <div class="relative size-[60px] sm:size-[90px] 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"> <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 --> <!-- Background Circle -->
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="4"></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 --> <!-- Progress Circle inside a group with rotation -->
@ -105,7 +105,7 @@
</svg> </svg>
<!-- Percentage Text --> <!-- Percentage Text -->
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"> <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} {rating}
</span> </span>
</div> </div>
@ -115,7 +115,7 @@
<h3 class="hidden sm:block text-gray-300 text-[1rem] sm:text-lg font-semibold"> <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: <span class="{outlook === 'Minimum Risk' ? 'text-[#10BC09]' : outlook==='Risky' ? 'text-red-500' : 'text-white'}">{outlook}</span> outlook:
</h3> </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. 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> </span>
</div> </div>