From 3013a33423c35d73d19cf6095563293857ad5f3f Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 5 Dec 2020 17:42:22 +0100
Subject: [PATCH] Fix backtestresult in UI for now

---
 src/store/modules/ftbot/index.ts | 13 ++++++++++++-
 src/views/Backtesting.vue        | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/store/modules/ftbot/index.ts b/src/store/modules/ftbot/index.ts
index 9d57fba0..59baaf13 100644
--- a/src/store/modules/ftbot/index.ts
+++ b/src/store/modules/ftbot/index.ts
@@ -591,7 +591,18 @@ export default {
       const result = await api.get('/backtest');
       commit('updateBacktestRunning', result.data.running);
       if (result.data.running === false && result.data.backtest_result) {
-        commit('updateBacktestResult', result.data.backtest_result);
+        // TODO: This should be aligned in the backend, which would allow us to remove this whole block
+        const backtestresult = result.data.backtest_result;
+        for (let i = 0, len = backtestresult.strategy_comparison.length; i < len; i += 1) {
+          const { key } = backtestresult.strategy_comparison[i];
+          for (let j = 0, len = backtestresult.strategy[key].trades.length; j < len; j += 1) {
+            // eslint-disable-next-line @typescript-eslint/camelcase
+            backtestresult.strategy[key].trades[j].profit_ratio =
+              backtestresult.strategy[key].trades[j].profit_percent;
+          }
+        }
+
+        commit('updateBacktestResult', backtestresult);
       }
     },
     async removeBacktest({ commit }) {
diff --git a/src/views/Backtesting.vue b/src/views/Backtesting.vue
index fc961f8b..a1242a9f 100644
--- a/src/views/Backtesting.vue
+++ b/src/views/Backtesting.vue
@@ -133,7 +133,15 @@
         :show-title="true"
       />
     </div>
-    <div v-if="hasBacktestResult && btFormMode == 'visualize'" class="text-center w-100 mt-2">
+    <div
+      v-if="hasBacktestResult && btFormMode == 'visualize'"
+      class="container-fluid row text-center w-100 mt-2"
+    >
+      <PairSummary
+        class="col-md-2"
+        :pairlist="selectedBacktestResult.pairlist"
+        :trades="selectedBacktestResult.trades"
+      />
       <CandleChartContainer
         :available-pairs="selectedBacktestResult.pairlist"
         :historic-view="!!true"
@@ -142,7 +150,7 @@
         :timerange="timerange"
         :strategy="strategy"
         :trades="selectedBacktestResult.trades"
-        class="candle-chart-container"
+        class="col-md-10 candle-chart-container"
       >
       </CandleChartContainer>
     </div>
@@ -158,6 +166,7 @@ import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
 import StrategyList from '@/components/ftbot/StrategyList.vue';
 import ValuePair from '@/components/ftbot/ValuePair.vue';
 import CumProfitChart from '@/components/charts/CumProfitChart.vue';
+import PairSummary from '@/components/ftbot/PairSummary.vue';
 
 import {
   BacktestPayload,
@@ -178,6 +187,7 @@ const ftbot = namespace('ftbot');
     CumProfitChart,
     StrategyList,
     ValuePair,
+    PairSummary,
   },
 })
 export default class Backtesting extends Vue {