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

bugfixing && ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-05 10:59:52 +02:00
parent 0225d287d9
commit 918e670bd1
2 changed files with 67 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/lib/components/ReturnCard.svelte
View File

@ -57,8 +57,8 @@
const options = {
grid: {
left: "0%",
right: "7%",
left: "2%",
right: "2%",
bottom: '0%',
height: "90%",
containLabel: true,
@ -185,7 +185,10 @@
{
name: 'Frequency of Return',
type: 'bar',
barWidth: '100%',
barWidth: '80%',
itemStyle: {
color: 'white',
},
data: histogramData
}
],
@ -259,7 +262,7 @@
</div>
<div class="rounded-2xl pl-3 sm:pr-0 pt-3 w-full m-auto flex flex-col justify-center items-center mt-4">
<div class="rounded-2xl pl-3 sm:pr-0 pt-3 w-full mt-4">
{#if displayReturn === 'annualReturn'}
<h1 class="text-white m-auto font-bold text-lg text-center">
@ -288,8 +291,8 @@
</div>
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-[90vw] sm:w-[50vw] mb-20 mt-6">
<Chart options={optionsAnnualReturn} class="chart w-full" />
<div class="app w-full h-[300px] mt-5 mb-16">
<Chart options={optionsAnnualReturn} class="chart" />
</div>
</Lazy>
@ -300,9 +303,11 @@
Distribution of Monthly Returns
</h1>
<div class="app w-[90vw] sm:w-[50vw] mb-4">
<Chart options={optionsMonthlyDistributionReturn} class="chart w-full" />
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5 mb-16">
<Chart options={optionsMonthlyDistributionReturn} class="chart" />
</div>
</Lazy>
{/if}
</div>
@ -310,23 +315,22 @@
</div>
</section>
<style>
<style>
.app {
height: 300px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
.app {
height: 300px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
}
}
@media (max-width: 640px) {
.app {
height: 210px;
}
}
@media (max-width: 640px) {
.app {
height: 180px;
}
}
.chart {
width: 100%;
}
.chart {
width: 100%;
}
</style>
</style>

8
src/routes/stocks/[tickerID]/stats/+page.svelte
View File

@ -287,6 +287,7 @@ updateYearRange()
<h3 class="text-start w-full mt-8 mb-2 text-lg sm:text-2xl font-bold text-white">
Worst 10 Drawdowns of {$stockTicker}
</h3>
<div class="w-full overflow-x-scroll">
<table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
<thead>
<tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold">
@ -299,10 +300,10 @@ updateYearRange()
<tbody class="shadow-md">
{#each quantStats[$stockTicker?.toUpperCase()]['Worst 10 Drawdowns'] as item}
<tr class="text-white border-y border-gray-800 odd:bg-[#27272A]">
<td class="text-start text-sm text-white w-36 sm:w-56">
<td class="text-start text-sm text-white whitespace-nowrap">
{new Date(item['Started']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td>
<td class="text-sm text-white text-end">
<td class="text-sm text-white text-end whitespace-nowrap">
{#if ongoingDD(item['Recovered']) === true}
continuing
{:else}
@ -319,6 +320,7 @@ updateYearRange()
{/each}
</tbody>
</table>
</div>
<h2 class="text-start ml-2 text-lg sm:text-2xl font-bold text-white mt-8 ">
@ -330,7 +332,7 @@ updateYearRange()
Comparison of company stats against the S&P500 Index.
</p>
<span class="ml-2 text-start italic text-sm text-gray-300 mb-2 sm:mb-5">
<span class="ml-2 text-start italic text-xs text-gray-300 mt-5 mb-2 sm:mb-5">
Time Period between {new Date(quantStats[$stockTicker?.toUpperCase()]["Start Period"]).toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-
{new Date(quantStats[$stockTicker?.toUpperCase()]["End Period"]).toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}