From 551e684315acd854081001fe9eb875f21a6ef95e Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 4 Jul 2021 19:57:19 +0200
Subject: [PATCH] Improve backtest layout

---
 src/components/ftbot/BacktestResultView.vue | 107 +++++++-------------
 src/views/Backtesting.vue                   |  10 +-
 2 files changed, 43 insertions(+), 74 deletions(-)

diff --git a/src/components/ftbot/BacktestResultView.vue b/src/components/ftbot/BacktestResultView.vue
index f4874d74..1fc04354 100644
--- a/src/components/ftbot/BacktestResultView.vue
+++ b/src/components/ftbot/BacktestResultView.vue
@@ -1,86 +1,45 @@
 <template>
-  <div class="container-fluid px-0">
+  <div class="container-fluid px-0 backtestresult-container">
     <div class="row d-flex justify-content-center">
       <h3>Backtest-result for {{ backtestResult.strategy_name }}</h3>
     </div>
-    <div class="row text-left">
-      <div class="col-md-6">
-        <b-card header="Strategy settings">
-          <!-- <ValuePair description="Backtesting from">{{
-            timestampms(backtestResult.backtest_start_ts)
-          }}</ValuePair>
-          <ValuePair description="Backtesting to">{{
-            timestampms(backtestResult.backtest_end_ts)
-          }}</ValuePair>
-          <ValuePair description="Max open trades">{{ backtestResult.max_open_trades }}</ValuePair>
-          <ValuePair description="Timeframe">{{ backtestResult.timeframe }} </ValuePair>
-          <ValuePair description="Timerange">{{ backtestResult.timerange }} </ValuePair>
-          <ValuePair description="Stoploss">{{
-            formatPercent(backtestResult.stoploss, 2)
-          }}</ValuePair>
-          <ValuePair description="Trailing Stoploss">{{ backtestResult.trailing_stop }} </ValuePair>
-          <ValuePair description="Trail only when offset is reached">{{
-            backtestResult.trailing_only_offset_is_reached
-          }}</ValuePair>
 
-          <ValuePair description="Trailing Stop positive"
-            >{{ backtestResult.trailing_stop_positive }}
-          </ValuePair>
-          <ValuePair description="Trailing stop positive offset">{{
-            backtestResult.trailing_stop_positive_offset
-          }}</ValuePair>
-          <ValuePair description="Custom Stoploss">{{
-            backtestResult.use_custom_stoploss
-          }}</ValuePair>
-          <ValuePair description="ROI">{{ backtestResult.minimal_roi }} </ValuePair>
-          <ValuePair description="Use Sell Signal">{{ backtestResult.use_sell_signal }} </ValuePair>
-          <ValuePair description="Sell profit only">{{
-            backtestResult.sell_profit_only
-          }}</ValuePair>
-          <ValuePair description="Sell profit offset">{{
-            backtestResult.sell_profit_offset
-          }}</ValuePair>
-          <ValuePair description="Enable protections">{{
-            backtestResult.enable_protections
-          }}</ValuePair>
-          <ValuePair description="Starting balance">{{
-            formatPriceStake(backtestResult.starting_balance)
-          }}</ValuePair>
-          <ValuePair description="Final balance">{{
-            formatPriceStake(backtestResult.final_balance)
-          }}</ValuePair>
-          <ValuePair description="Avg. stake amount">{{
-            formatPriceStake(backtestResult.avg_stake_amount)
-          }}</ValuePair>
-          <ValuePair description="Total trade volume">{{
-            formatPriceStake(backtestResult.total_volume)
-          }}</ValuePair> -->
-
-          <b-table small borderless :items="backtestResultSettings" :fields="backtestsettingFields">
-          </b-table>
-        </b-card>
+    <div class="row text-left ml-0">
+      <div class="row w-100">
+        <div class="col-12 col-xl-6 px-0 px-xl-0 pr-xl-1">
+          <b-card header="Strategy settings">
+            <b-table
+              small
+              borderless
+              :items="backtestResultSettings"
+              :fields="backtestsettingFields"
+            >
+            </b-table>
+          </b-card>
+        </div>
+        <div class="col-12 col-xl-6 px-0 px-xl-0 pt-2 pt-xl-0 pl-xl-1">
+          <b-card header="Metrics">
+            <b-table small borderless :items="backtestResultStats" :fields="backtestResultFields">
+            </b-table>
+          </b-card>
+        </div>
       </div>
-      <div class="col-md-6">
-        <b-card header="Metrics">
-          <b-table small borderless :items="backtestResultStats" :fields="backtestResultFields">
-          </b-table>
-        </b-card>
-      </div>
-
-      <b-card header="Results per Sell-reason" class="mt-2">
+      <b-card header="Results per Sell-reason" class="row mt-2 w-100">
         <b-table small hover :items="backtestResult.sell_reason_summary" :fields="perSellReason">
         </b-table>
       </b-card>
-      <b-card header="Results per pair" class="mt-2">
+      <b-card header="Results per pair" class="row mt-2 w-100">
         <b-table small hover :items="backtestResult.results_per_pair" :fields="perPairFields">
         </b-table>
       </b-card>
 
-      <TradeList
-        class="trade-history mt-2"
-        :trades="backtestResult.trades"
-        profit-column="profit_percent"
-      />
+      <b-card header="Single trades" class="row mt-2 w-100">
+        <TradeList
+          class="row trade-history mt-2 w-100"
+          :trades="backtestResult.trades"
+          profit-column="profit_percent"
+        />
+      </b-card>
     </div>
   </div>
 </template>
@@ -340,4 +299,10 @@ export default class BacktestResultView extends Vue {
 }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.backtestresult-container {
+  @media (min-width: 1200px) {
+    max-width: 1200px;
+  }
+}
+</style>
diff --git a/src/views/Backtesting.vue b/src/views/Backtesting.vue
index 76aa0f93..94ad8bae 100644
--- a/src/views/Backtesting.vue
+++ b/src/views/Backtesting.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="container-fluid" style="max-height: calc(100vh - 60px)">
     <div class="container-fluid">
       <div class="row mb-2"></div>
       <p v-if="!canRunBacktest">Bot must be in webserver mode to enable Backtesting.</p>
@@ -246,7 +247,8 @@
       </p>
       <div class="row text-center">
         <PairSummary
-          class="col-md-2 overflow-auto vh-100"
+          class="col-md-2 overflow-auto"
+          style="max-height: calc(100vh - 200px)"
           :pairlist="selectedBacktestResult.pairlist"
           :trades="selectedBacktestResult.trades"
           sort-method="profit"
@@ -259,7 +261,7 @@
           :timerange="timerange"
           :strategy="strategy"
           :trades="selectedBacktestResult.trades"
-          class="col-md-10 candle-chart-container px-0 w-100"
+          class="col-md-10 candle-chart-container px-0 w-100 h-100"
         >
         </CandleChartContainer>
       </div>
@@ -445,7 +447,9 @@ export default class Backtesting extends Vue {
 
 <style lang="scss" scoped>
 .candle-chart-container {
-  height: 640px !important;
+  // TODO: Rough estimate - still to fix correctly
+  // Applies to all "calc" usages in this file.
+  height: calc(100vh - 250px) !important;
 }
 
 .cum-profit {