From 8b9e5d93a188b476c10fec6c2d7efe996a020603 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Wed, 10 Mar 2021 16:34:09 +0100
Subject: [PATCH] Improve backtesting layout

---
 src/components/ftbot/BacktestResultView.vue | 53 +++++++++++++--------
 src/views/Backtesting.vue                   |  6 +--
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/components/ftbot/BacktestResultView.vue b/src/components/ftbot/BacktestResultView.vue
index ef757a29..7a682441 100644
--- a/src/components/ftbot/BacktestResultView.vue
+++ b/src/components/ftbot/BacktestResultView.vue
@@ -1,26 +1,32 @@
 <template>
-  <div class="container">
+  <div class="container-fluid">
     <div>
       <h3>Backtest-result for {{ backtestResult.strategy_name }}</h3>
     </div>
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6">
-          <b-card header="Strategy settings">
-            <b-table
-              class="table-sm"
-              :items="backtestResultSettings"
-              :fields="backtestsettingFields"
-            >
-            </b-table>
-          </b-card>
-        </div>
-        <div class="col-md-6">
-          <b-card header="Metrics">
-            <b-table class="table-sm" :items="backtestResultStats" :fields="backtestResultFields">
-            </b-table>
-          </b-card>
-        </div>
+    <div class="container-fluid row text-left">
+      <div class="col-md-6">
+        <b-card header="Strategy settings">
+          <ValuePair description="Backtesting from">{{
+            timestampmsUTC(backtestResult.backtest_start_ts)
+          }}</ValuePair>
+          <ValuePair description="Backtesting to">{{
+            timestampmsUTC(backtestResult.backtest_end_ts)
+          }}</ValuePair>
+
+          <b-table
+            class="table-sm"
+            borderless
+            :items="backtestResultSettings"
+            :fields="backtestsettingFields"
+          >
+          </b-table>
+        </b-card>
+      </div>
+      <div class="col-md-6">
+        <b-card header="Metrics">
+          <b-table class="table-sm" :items="backtestResultStats" :fields="backtestResultFields">
+          </b-table>
+        </b-card>
       </div>
 
       <b-card header="Results per Sell-reason" class="mt-2">
@@ -50,6 +56,8 @@ import TradeList from '@/components/ftbot/TradeList.vue';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { StrategyBacktestResult, Trade } from '@/types';
 
+import ValuePair from '@/components/general/ValuePair.vue';
+
 import {
   timestampms,
   formatPercent,
@@ -58,7 +66,10 @@ import {
 } from '@/shared/formatters';
 
 @Component({
-  components: { TradeList },
+  components: {
+    TradeList,
+    ValuePair,
+  },
 })
 export default class BacktestResultView extends Vue {
   @Prop({ required: true }) readonly backtestResult!: StrategyBacktestResult;
@@ -174,6 +185,8 @@ export default class BacktestResultView extends Vue {
     ];
   }
 
+  timestampmsUTC = timestampmsUTC;
+
   get backtestResultSettings() {
     // Transpose Result into readable format
     return [
diff --git a/src/views/Backtesting.vue b/src/views/Backtesting.vue
index bdcab210..4ccd06e2 100644
--- a/src/views/Backtesting.vue
+++ b/src/views/Backtesting.vue
@@ -167,14 +167,14 @@
         </div>
       </div>
     </div>
-    <div v-if="hasBacktestResult && btFormMode == 'results'" class="text-center w-100 mt-2 row">
+    <div v-if="hasBacktestResult && btFormMode == 'results'" class="w-100 mt-2 row">
       <BacktestResultSelect
         :backtest-history="backtestHistory"
         :selected-backtest-result-key="selectedBacktestResultKey"
         class="col-3 align-self-start sticky-top"
         @selectionChange="setBacktestResult"
       />
-      <BacktestResultView :backtest-result="selectedBacktestResult" class="col-8" />
+      <BacktestResultView :backtest-result="selectedBacktestResult" class="col-9" />
     </div>
     <div
       v-if="hasBacktestResult && btFormMode == 'visualize-summary'"
@@ -226,7 +226,7 @@ import BacktestResultView from '@/components/ftbot/BacktestResultView.vue';
 import BacktestResultSelect from '@/components/ftbot/BacktestResultSelect.vue';
 import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
 import StrategyList from '@/components/ftbot/StrategyList.vue';
-import ValuePair from '@/components/ftbot/ValuePair.vue';
+import ValuePair from '@/components/general/ValuePair.vue';
 import CumProfitChart from '@/components/charts/CumProfitChart.vue';
 import TradesLogChart from '@/components/charts/TradesLog.vue';
 import PairSummary from '@/components/ftbot/PairSummary.vue';