bugfixing && ui fix
This commit is contained in:
MuslemRahimi
parent
0225d287d9
commit
918e670bd1
@ -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">
|
||||||
</div>
|
<Chart options={optionsMonthlyDistributionReturn} class="chart" />
|
||||||
|
</div>
|
||||||
|
</Lazy>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -310,23 +315,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<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 */
|
|
||||||
|
}
|
||||||
}
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
@media (max-width: 640px) {
|
.app {
|
||||||
.app {
|
height: 210px;
|
||||||
height: 180px;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.chart {
|
||||||
.chart {
|
width: 100%;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
@ -287,38 +287,40 @@ 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>
|
||||||
<table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
|
<div class="w-full overflow-x-scroll">
|
||||||
<thead>
|
<table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center m-auto">
|
||||||
<tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold">
|
<thead>
|
||||||
<th class="text-start text-sm w-36 sm:w-56">Started</th>
|
<tr class="bg-[#09090B] border-slate-800 rounded text-white font-semibold">
|
||||||
<th class="text-sm text-end">Recovered</th>
|
<th class="text-start text-sm w-36 sm:w-56">Started</th>
|
||||||
<th class="text-sm text-end">Drawdown</th>
|
<th class="text-sm text-end">Recovered</th>
|
||||||
<th class="text-sm text-end ">Days</th>
|
<th class="text-sm text-end">Drawdown</th>
|
||||||
</tr>
|
<th class="text-sm text-end ">Days</th>
|
||||||
</thead>
|
|
||||||
<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">
|
|
||||||
{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">
|
|
||||||
{#if ongoingDD(item['Recovered']) === true}
|
|
||||||
continuing
|
|
||||||
{:else}
|
|
||||||
{new Date(item['Recovered']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
<td class="text-start font-semibold text-white text-end">
|
|
||||||
{item['Drawdown']?.toFixed(2)}%
|
|
||||||
</td>
|
|
||||||
<td class="text-end font-semibold text-white">
|
|
||||||
{item['Days']}
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
</thead>
|
||||||
</tbody>
|
<tbody class="shadow-md">
|
||||||
</table>
|
{#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 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 whitespace-nowrap">
|
||||||
|
{#if ongoingDD(item['Recovered']) === true}
|
||||||
|
continuing
|
||||||
|
{:else}
|
||||||
|
{new Date(item['Recovered']).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
<td class="text-start font-semibold text-white text-end">
|
||||||
|
{item['Drawdown']?.toFixed(2)}%
|
||||||
|
</td>
|
||||||
|
<td class="text-end font-semibold text-white">
|
||||||
|
{item['Days']}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</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' })}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user