Show best trade in backtest results

src/components/ftbot/BacktestResultView.vue

@@ -48,7 +48,7 @@
 <script lang="ts">
 import TradeList from '@/components/ftbot/TradeList.vue';
 import { Component, Vue, Prop } from 'vue-property-decorator';
-import { StrategyBacktestResult } from '@/types';
+import { StrategyBacktestResult, Trade } from '@/types';
 
 import {
   timestampms,
@@ -69,6 +69,25 @@ export default class BacktestResultView extends Vue {
     return !!this.backtestResult;
   }
 
+  getSortedTrades(backtestResult: StrategyBacktestResult): Trade[] {
+    const sortedTrades = backtestResult.trades
+      .slice()
+      .sort((a, b) => a.profit_ratio - b.profit_ratio);
+    return sortedTrades;
+  }
+
+  get bestPair(): string {
+    const trades = this.getSortedTrades(this.backtestResult);
+    const value = trades[trades.length - 1];
+    return `${value.pair} ${formatPercent(value.profit_ratio, 2)}`;
+  }
+
+  get worstPair(): string {
+    const trades = this.getSortedTrades(this.backtestResult);
+    const value = trades[0];
+    return `${value.pair} ${formatPercent(value.profit_ratio, 2)}`;
+  }
+
   get backtestResultStats() {
     // Transpose Result into readable format
     return [
@@ -85,6 +104,7 @@ export default class BacktestResultView extends Vue {
 
       { metric: 'Best day', value: formatPercent(this.backtestResult.backtest_best_day, 2) },
       { metric: 'Worst day', value: formatPercent(this.backtestResult.backtest_worst_day, 2) },
+
       {
         metric: 'Win/Draw/Loss',
         value: `${
@@ -127,6 +147,8 @@ export default class BacktestResultView extends Vue {
           this.backtestResult.worst_pair.profit_sum,
         )}`,
       },
+      { metric: 'Best single Trade', value: this.bestPair },
+      { metric: 'Worst single Trade', value: this.worstPair },
     ];
   }
 

src/store/modules/ftbot/index.ts

@@ -207,6 +207,9 @@ export default {
         state.selectedBacktestResultKey = xxx;
       });
     },
+    resetBacktestHistory(state: FtbotStateType) {
+      state.backtestHistory = {};
+    },
     setBacktestResultKey(state: FtbotStateType, key: string) {
       state.selectedBacktestResultKey = key;
     },
@@ -620,6 +623,7 @@ export default {
       }
     },
     async removeBacktest({ commit }) {
+      commit('resetBacktestHistory');
       try {
         const result = await api.delete('/backtest');
         commit('updateBacktestRunning', result.data.running);

src/views/Backtesting.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="container-fluid">
-    <h2 class="mt-3">Backtesting</h2>
+    <div class="mb-2">
+      <h2 class="mt-3 d-inline">Backtesting</h2>
+      <small v-show="backtestRunning" class="bt-running-label">Backtest running</small>
+    </div>
     <div class="container">
       <div class="row mx-5 d-flex flex-wrap justify-content-center mb-4">
         <b-form-radio
@@ -273,8 +276,6 @@ export default class Backtesting extends Vue {
 
   @ftbot.State backtestRunning!: boolean;
 
-  @ftbot.State backtestResult!: BacktestResult;
-
   @ftbot.State backtestHistory!: StrategyBacktestResult[];
 
   @ftbot.State selectedBacktestResultKey!: string;
@@ -304,16 +305,12 @@ export default class Backtesting extends Vue {
   }
 
   get hasBacktestResult() {
-    return this.backtestResult ? Object.keys(this.backtestResult).length !== 0 : false;
+    return this.backtestHistory ? Object.keys(this.backtestHistory).length !== 0 : false;
   }
 
-  // get selectedBacktestResult(): StrategyBacktestResult {
-  //   return this.backtestResult.strategy[this.strategy] || {};
-  // }
-
   get timeframe(): string {
     try {
-      return this.backtestResult.strategy[this.strategy].timeframe;
+      return this.selectedBacktestResult.timeframe;
     } catch (err) {
       return '';
     }
@@ -372,4 +369,9 @@ export default class Backtesting extends Vue {
   height: 350px;
   max-height: 350px;
 }
+.bt-running-label {
+  position: absolute;
+  right: 2em;
+  margin-top: 1em;
+}
 </style>