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

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

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

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