Add more options to BacktestReport

src/components/ftbot/BacktestResultView.vue

@@ -4,11 +4,25 @@
       <h2>BacktestResult for {{ strategy }}</h2>
     </div>
     <div class="container">
-      <div class="row">Backtest days {{ backtestResult.backtest_days }}</div>
+      <b-card header="Metrics">
+        <b-table class="table-sm" :items="backtestResultStats" :fields="backtestResultFields">
+        </b-table>
+      </b-card>
+      <b-card header="Results per pair" class="mt-2">
+        <b-table class="table-sm" :items="backtestResult.results_per_pair" :fields="perPairFields">
+        </b-table>
+      </b-card>
 
-      <b-table class="table-sm" :items="backtestResultStats" :fields="backtestResultFields">
+      <b-card header="Results per Sell-reason" class="mt-2">
-      </b-table>
+        <b-table
-      <TradeList class="trade-history" :trades="backtestResult.trades" />
+          class="table-sm"
+          :items="backtestResult.sell_reason_summary"
+          :fields="perSellReason"
+        >
+        </b-table>
+      </b-card>
+
+      <TradeList class="trade-history mt-2" :trades="backtestResult.trades" />
     </div>
   </div>
 </template>
@@ -18,7 +32,7 @@ import TradeList from '@/components/ftbot/TradeList.vue';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { StrategyBacktestResult } from '@/types';
 
-import { timestampms } from '@/shared/formatters';
+import { timestampms, formatPercent } from '@/shared/formatters';
 
 @Component({
   components: { TradeList },
@@ -52,6 +66,43 @@ export default class BacktestResultView extends Vue {
     ];
   }
 
+  get perPairFields() {
+    return [
+      { key: 'key', label: 'Pair' },
+      { key: 'trades', label: 'Buys' },
+      { key: 'profit_mean', label: 'Avg Profit %', formatter: (value) => formatPercent(value, 2) },
+      { key: 'profit_sum', label: 'Cum Profit %', formatter: (value) => formatPercent(value, 2) },
+      { key: 'profit_total_abs', label: `Tot Profit ${this.backtestResult.stake_currency}` },
+      {
+        key: 'profit_total_pct',
+        label: 'Tot Profit %',
+        formatter: (value) => formatPercent(value, 2),
+      },
+      { key: 'duration_avg', label: 'Avg Duration' },
+      { key: 'wins', label: 'Wins' },
+      { key: 'draws', label: 'Draws' },
+      { key: 'losses', label: 'Losses' },
+    ];
+  }
+
+  get perSellReason() {
+    return [
+      { key: 'sell_reason', label: 'Sell Reason' },
+      { key: 'trades', label: 'Buys' },
+      { key: 'profit_mean', label: 'Avg Profit %', formatter: (value) => formatPercent(value, 2) },
+      { key: 'profit_sum', label: 'Cum Profit %', formatter: (value) => formatPercent(value, 2) },
+      { key: 'profit_total_abs', label: `Tot Profit ${this.backtestResult.stake_currency}` },
+      {
+        key: 'profit_total_pct',
+        label: 'Tot Profit %',
+        formatter: (value) => formatPercent(value, 2),
+      },
+      { key: 'wins', label: 'Wins' },
+      { key: 'draws', label: 'Draws' },
+      { key: 'losses', label: 'Losses' },
+    ];
+  }
+
   backtestResultFields: Array<Record<string, string>> = [
     { key: 'metric', label: 'Metric' },
     { key: 'value', label: 'Value' },

src/types/backtest.ts

@@ -16,6 +16,7 @@ export interface PairResults {
   profit_sum_pct: number;
   profit_total_abs: number;
   profit_total_pct: number;
+  profit_total: number;
   trades: number;
   wins: number;
 }
@@ -56,6 +57,8 @@ export interface StrategyBacktestResult {
   results_per_pair: Array<PairResults>;
   sell_reason_summary: Array<SellReasonResults>;
   stake_amount: number;
+  stake_currency: string;
+  max_open_trades: number;
   total_trades: number;
   trades_per_day: number;
   winner_holding_avg: number;

src/views/Backtesting.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="container-fluid">
-    <div class="row mb-2">
+    <div class="row ml-1">
-      <TimeRangeSelect v-model="timerange"></TimeRangeSelect>
+      <div class="col-mb-12">
+        <TimeRangeSelect v-model="timerange"></TimeRangeSelect>
+      </div>
+      <div class="col-mb-12">
+        <b-form-group
+          label="Strategy"
+          label-for="strategyName"
+          invalid-feedback="Strategy is required"
+        >
+          <b-form-input id="strategyName" v-model="strategy"></b-form-input>
+        </b-form-group>
+      </div>
     </div>
     <div class="row">
       <b-button variant="primary" :disabled="backtestRunning" @click="clickBacktest">