Fix and improve Backtest layout

This commit is contained in:
Matthias 2023-08-05 08:51:28 +02:00
parent 651acfa8d9
commit 644d889521

View File

@ -1,13 +1,14 @@
<template>
<div class="container-fluid" style="max-height: calc(100vh - 60px)">
<div class="container-fluid pt-2">
<div class="d-flex flex-column pt-1 me-1" style="max-height: calc(100vh - 60px)">
<div>
<div class="d-flex flex-row">
<h2 class="ms-5">Backtesting</h2>
<p v-if="!botStore.activeBot.canRunBacktest">
Bot must be in webserver mode to enable Backtesting.
</p>
<div class="row w-100">
<h2 class="col-4 col-lg-3">Backtesting</h2>
<div class="w-100">
<div
class="col-12 col-lg-order-last col-lg-6 mx-md-5 d-flex flex-wrap justify-content-md-center justify-content-between mb-4"
class="mx-md-5 d-flex flex-wrap justify-content-md-center justify-content-between mb-4 gap-2"
>
<b-form-radio
v-if="botStore.activeBot.botApiVersion >= 2.15"
@ -57,24 +58,22 @@
>Visualize result</b-form-radio
>
</div>
<small
v-show="botStore.activeBot.backtestRunning"
class="text-end bt-running-label col-8 col-lg-3"
<small v-show="botStore.activeBot.backtestRunning" class="text-end bt-running-label"
>Backtest running: {{ botStore.activeBot.backtestStep }}
{{ formatPercent(botStore.activeBot.backtestProgress, 2) }}</small
>
</div>
</div>
<div class="d-md-flex">
</div>
<div class="d-flex flex-md-row">
<!-- Left bar -->
<div
v-if="btFormMode !== 'visualize'"
:class="`${showLeftBar ? 'col-md-3' : ''}`"
class="sticky-top sticky-offset me-3 d-flex flex-column absolute"
style="max-height: calc(100vh - 60px)"
>
<b-button
v-if="btFormMode !== 'visualize'"
class="align-self-start"
aria-label="Close"
size="sm"
@ -94,13 +93,15 @@
</transition>
</div>
<!-- End Left bar -->
<div class="d-flex flex-column overflow-auto flex-fill">
<div class="d-md-flex">
<div
v-if="btFormMode == 'historicResults'"
class="flex-fill row d-flex flex-column bt-config"
class="flex-fill d-flex flex-column bt-config"
>
<BacktestHistoryLoad />
</div>
<div v-if="btFormMode == 'run'" class="flex-fill row d-flex flex-column bt-config">
<div v-if="btFormMode == 'run'" class="flex-fill d-flex flex-column bt-config">
<BacktestRun />
</div>
<BacktestResultAnalysis
@ -112,6 +113,7 @@
<BacktestGraphs
v-if="hasBacktestResult && btFormMode == 'visualize-summary'"
:trades="botStore.activeBot.selectedBacktestResult.trades"
class="flex-fill"
/>
</div>
@ -129,6 +131,8 @@
/>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">