Add first version of backtest view

src/components/layout/NavBar.vue

@@ -13,6 +13,7 @@
           <b-nav-item to="/trade">Trade</b-nav-item>
           <!-- <b-nav-item to="/graph">Graph</b-nav-item> -->
           <b-nav-item to="/dashboard">Dashboard</b-nav-item>
+          <b-nav-item to="/backtest">Backtest</b-nav-item>
           <BootswatchThemeSelect />
         </b-navbar-nav>
         <!-- Right aligned nav items -->

src/router/index.ts

@@ -26,6 +26,14 @@ const routes: Array<RouteConfig> = [
     name: 'Freqtrade Graph',
     component: () => import(/* webpackChunkName: "graph" */ '@/views/Graphs.vue'),
   },
+  {
+    path: '/backtest',
+    name: 'Freqtrade Backtest',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/Backtesting.vue'),
+  },
   {
     path: '/dashboard',
     name: 'Freqtrade Dashboard',

src/store/modules/ftbot/index.ts

@@ -1,6 +1,7 @@
 import { api } from '@/shared/apiService';
 
 import {
+  BacktestResult,
   BotState,
   BlacklistPayload,
   ForcebuyPayload,
@@ -189,6 +190,12 @@ export default {
       storeCustomPlotConfig(plotConfig);
       state.availablePlotConfigNames = getAllPlotConfigNames();
     },
+    updateBacktestRunning(state, running: boolean) {
+      state.backtestRunning = running;
+    },
+    updateBacktestResult(state, backtestResult: BacktestResult) {
+      state.backtestResult = backtestResult;
+    },
   },
   actions: {
     ping({ commit, rootState }) {
@@ -572,5 +579,20 @@ export default {
       console.error(error);
       return Promise.reject(error);
     },
+    async startBacktest({ commit }, payload) {
+      try {
+        const result = await api.post('/backtest', payload);
+        commit('updateBacktestRunning', result.data.running);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    async pollBacktest({ commit }) {
+      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);
+      }
+    },
   },
 };

src/store/modules/ftbot/state.ts

@@ -10,6 +10,7 @@ import {
   LockResponse,
   PlotConfigStorage,
   ProfitInterface,
+  BacktestResult,
 } from '@/types';
 
 export interface FtbotStateType {
@@ -41,6 +42,8 @@ export interface FtbotStateType {
   strategy: StrategyResult | {};
   pairlist: string[];
   currentLocks?: LockResponse;
+  backtestRunning: boolean;
+  backtestResult?: BacktestResult;
 }
 const state: FtbotStateType = {
   version: '',
@@ -69,6 +72,9 @@ const state: FtbotStateType = {
   strategy: {},
   pairlist: [],
   currentLocks: undefined,
+  // backtesting
+  backtestRunning: false,
+  backtestResult: undefined,
 };
 
 export default state;

src/types/backtest.ts

@@ -0,0 +1,10 @@
+import { Trade } from './trades';
+
+export interface BacktestPayload {
+  strategy: string;
+  timerange: string;
+}
+
+export interface BacktestResult {
+  trades: Trade[];
+}

src/types/index.ts

@@ -1,5 +1,6 @@
 export * from './auth';
 export * from './balance';
+export * from './backtest';
 export * from './blacklist';
 export * from './chart';
 export * from './daily';

src/views/Backtesting.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="container-fluid">
+    <div class="row mb-2">
+      <TimeRangeSelect v-model="timerange"></TimeRangeSelect>
+    </div>
+    <b-button variant="primary" :disabled="backtestRunning" @click="clickBacktest">
+      Start backtest
+    </b-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+import CandleChart from '@/components/charts/CandleChart.vue';
+import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
+import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
+import { BacktestPayload } from '@/types';
+
+const ftbot = namespace('ftbot');
+@Component({
+  components: { CandleChart, PlotConfigurator, TimeRangeSelect },
+})
+export default class Graphs extends Vue {
+  pair = 'XRP/USDT';
+
+  pollInterval: NodeJS.Timer | null = null;
+
+  timeframe = '5m';
+
+  timeframems = 300000;
+
+  @ftbot.State backtestRunning!: boolean;
+
+  timerange = '';
+
+  @ftbot.Action
+  startBacktest!: (payload: BacktestPayload) => void;
+
+  @ftbot.Action pollBacktest!: () => void;
+
+  clickBacktest() {
+    console.log('Backtesting');
+    const btPayload: BacktestPayload = {
+      strategy: 'BinHV45',
+      timerange: this.timerange,
+    };
+    this.startBacktest(btPayload);
+  }
+
+  @Watch('backtestRunning')
+  backtestRunningChanged() {
+    if (this.backtestRunning === true) {
+      this.pollInterval = setInterval(this.pollBacktest, 5000);
+    } else if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+      this.pollInterval = null;
+    }
+  }
+}
+</script>
+
+<style scoped></style>