From 6f14b7a5bf0d2258994668c31976eaaa10b10079 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 26 Jul 2020 13:44:34 +0200
Subject: [PATCH] Add first version of backtest view

---
 src/components/layout/NavBar.vue |  1 +
 src/router/index.ts              |  8 ++++
 src/store/modules/ftbot/index.ts | 22 +++++++++++
 src/store/modules/ftbot/state.ts |  6 +++
 src/types/backtest.ts            | 10 +++++
 src/types/index.ts               |  1 +
 src/views/Backtesting.vue        | 63 ++++++++++++++++++++++++++++++++
 7 files changed, 111 insertions(+)
 create mode 100644 src/types/backtest.ts
 create mode 100644 src/views/Backtesting.vue

diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 526f1303..818193f4 100644
--- a/src/components/layout/NavBar.vue
+++ b/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 -->
diff --git a/src/router/index.ts b/src/router/index.ts
index 36cf0598..ec83d062 100644
--- a/src/router/index.ts
+++ b/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',
diff --git a/src/store/modules/ftbot/index.ts b/src/store/modules/ftbot/index.ts
index ec6b13b4..5c9b60d9 100644
--- a/src/store/modules/ftbot/index.ts
+++ b/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);
+      }
+    },
   },
 };
diff --git a/src/store/modules/ftbot/state.ts b/src/store/modules/ftbot/state.ts
index 5b148073..2b3112bf 100644
--- a/src/store/modules/ftbot/state.ts
+++ b/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;
diff --git a/src/types/backtest.ts b/src/types/backtest.ts
new file mode 100644
index 00000000..75f9ba78
--- /dev/null
+++ b/src/types/backtest.ts
@@ -0,0 +1,10 @@
+import { Trade } from './trades';
+
+export interface BacktestPayload {
+  strategy: string;
+  timerange: string;
+}
+
+export interface BacktestResult {
+  trades: Trade[];
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 549d1e33..24aae10d 100644
--- a/src/types/index.ts
+++ b/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';
diff --git a/src/views/Backtesting.vue b/src/views/Backtesting.vue
new file mode 100644
index 00000000..ed190e3a
--- /dev/null
+++ b/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>