selected backtest result in store

src/store/modules/ftbot/index.ts

@@ -23,6 +23,7 @@ import {
   Lock,
   RunModes,
   TradeResponse,
+  StrategyBacktestResult,
 } from '@/types';
 
 import {
@@ -48,6 +49,7 @@ export enum BotStoreGetters {
   isTrading = 'isTrading',
   isWebserverMode = 'isWebserverMode',
   refreshRequired = 'refreshRequired',
+  selectedBacktestResult = 'selectedBacktestResult',
 }
 
 export default {
@@ -110,6 +112,9 @@ export default {
     [BotStoreGetters.refreshRequired](state: FtbotStateType): boolean {
       return state.refreshRequired;
     },
+    [BotStoreGetters.selectedBacktestResult](state): StrategyBacktestResult {
+      return state.backtestHistory[state.selectedBacktestResultKey];
+    },
   },
   mutations: {
     updateRefreshRequired(state: FtbotStateType, refreshRequired: boolean) {
@@ -190,7 +195,7 @@ export default {
       storeCustomPlotConfig(plotConfig);
       state.availablePlotConfigNames = getAllPlotConfigNames();
     },
-    updateBacktestRunning(state, running: boolean) {
+    updateBacktestRunning(state: FtbotStateType, running: boolean) {
       state.backtestRunning = running;
     },
     updateBacktestResult(state, backtestResult: BacktestResult) {
@@ -199,8 +204,12 @@ export default {
       Object.entries(backtestResult.strategy).forEach(([key, strat]) => {
         const xxx = `${key}_${strat.total_trades}_${strat.profit_total.toFixed(3)}`;
         state.backtestHistory[xxx] = strat;
+        state.selectedBacktestResultKey = xxx;
       });
     },
+    setBacktestResultKey(state: FtbotStateType, key: string) {
+      state.selectedBacktestResultKey = key;
+    },
   },
   actions: {
     ping({ commit, rootState }) {

src/store/modules/ftbot/state.ts

@@ -44,6 +44,7 @@ export interface FtbotStateType {
   currentLocks?: LockResponse;
   backtestRunning: boolean;
   backtestResult?: BacktestResult;
+  selectedBacktestResultKey: string;
   backtestHistory: Record<string, BacktestResult>;
 }
 const state: FtbotStateType = {
@@ -76,6 +77,7 @@ const state: FtbotStateType = {
   // backtesting
   backtestRunning: false,
   backtestResult: undefined,
+  selectedBacktestResultKey: '',
   backtestHistory: {},
 };
 

src/types/backtest.ts

@@ -96,7 +96,7 @@ export interface StrategyBacktestResult {
 
   /** Start time of the backtest run */
   backtest_run_start_ts: number;
-  /** ENd time of the backtest run */
+  /** End time of the backtest run */
   backtest_run_end_ts: number;
 }
 

src/views/Backtesting.vue

@@ -145,14 +145,16 @@
     </div>
     <div v-if="hasBacktestResult && btFormMode == 'results'" class="text-center w-100 mt-2">
       <div class="d-flex">
-        <b-list-group-item
+        <b-list-group>
-          v-for="[key, strat] in Object.entries(backtestHistory)"
+          <b-list-group-item
-          :key="key"
+            v-for="[key, strat] in Object.entries(backtestHistory)"
-          button
+            :key="key"
-          class="d-flex justify-content-between align-items-center py-1"
+            button
-        >
+            class="d-flex justify-content-between align-items-center py-1"
-          {{ key }} {{ strat.total_trades }} {{ formatPercent(strat.profit_total) }}
+          >
-        </b-list-group-item>
+            {{ key }} {{ strat.total_trades }} {{ formatPercent(strat.profit_total) }}
+          </b-list-group-item>
+        </b-list-group>
       </div>
       <BacktestResultView :strategy="strategy" :backtest-result="selectedBacktestResult" />
     </div>
@@ -172,23 +174,26 @@
       v-if="hasBacktestResult && btFormMode == 'visualize'"
       class="container-fluid row text-center w-100 mt-2"
     >
-      <PairSummary
+      <p>Graph will always show the latest values for the selected strategy.</p>
-        class="col-md-2"
+      <div class="container-fluid row text-center">
-        :pairlist="selectedBacktestResult.pairlist"
+        <PairSummary
-        :trades="selectedBacktestResult.trades"
+          class="col-md-2"
-        sort-method="profit"
+          :pairlist="selectedBacktestResult.pairlist"
-      />
+          :trades="selectedBacktestResult.trades"
-      <CandleChartContainer
+          sort-method="profit"
-        :available-pairs="selectedBacktestResult.pairlist"
+        />
-        :historic-view="!!true"
+        <CandleChartContainer
-        :timeframe="timeframe"
+          :available-pairs="selectedBacktestResult.pairlist"
-        :plot-config="selectedPlotConfig"
+          :historic-view="!!true"
-        :timerange="timerange"
+          :timeframe="timeframe"
-        :strategy="strategy"
+          :plot-config="selectedPlotConfig"
-        :trades="selectedBacktestResult.trades"
+          :timerange="timerange"
-        class="col-md-10 candle-chart-container"
+          :strategy="strategy"
-      >
+          :trades="selectedBacktestResult.trades"
-      </CandleChartContainer>
+          class="col-md-10 candle-chart-container"
+        >
+        </CandleChartContainer>
+      </div>
     </div>
   </div>
 </template>
@@ -215,6 +220,7 @@ import {
 
 import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
 import { formatPercent } from '@/shared/formatters';
+import { BotStoreGetters } from '@/store/modules/ftbot';
 
 const ftbot = namespace('ftbot');
 @Component({
@@ -274,6 +280,8 @@ export default class Backtesting extends Vue {
 
   @ftbot.State backtestHistory!: StrategyBacktestResult[];
 
+  @ftbot.Getter [BotStoreGetters.selectedBacktestResult]!: StrategyBacktestResult;
+
   @ftbot.State history;
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -297,9 +305,9 @@ export default class Backtesting extends Vue {
     return Object.keys(this.backtestResult).length !== 0;
   }
 
-  get selectedBacktestResult(): StrategyBacktestResult {
+  // get selectedBacktestResult(): StrategyBacktestResult {
-    return this.backtestResult.strategy[this.strategy] || {};
+  //   return this.backtestResult.strategy[this.strategy] || {};
-  }
+  // }
 
   get timeframe(): string {
     try {