Add historic view

src/components/ftbot/CandleChart.vue

@@ -75,8 +75,8 @@ export default class CandleChart extends Vue {
     const colLow = this.dataset.columns.findIndex((el) => el === 'low');
     const colClose = this.dataset.columns.findIndex((el) => el === 'close');
     const colVolume = this.dataset.columns.findIndex((el) => el === 'volume');
-    const colBuy = this.dataset.columns.findIndex((el) => el === 'buy');
+    const colBuyData = this.dataset.columns.findIndex((el) => el === '_buy_signal_open');
-    const colSell = this.dataset.columns.findIndex((el) => el === 'sell');
+    const colSellData = this.dataset.columns.findIndex((el) => el === '_sell_signal_open');
     // Plot data
 
     const options: echarts.EChartOption = {
@@ -237,7 +237,6 @@ export default class CandleChart extends Vue {
           type: 'scatter',
           symbol: 'triangle',
           symbolSize: 8,
-          data: this.buyData,
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
@@ -245,13 +244,12 @@ export default class CandleChart extends Vue {
           },
           encode: {
             x: 0,
-            y: 1,
+            y: colBuyData,
           },
         },
         {
           name: 'Sell',
           type: 'scatter',
-          data: this.sellData,
           symbol: 'diamond',
           symbolSize: 8,
           xAxisIndex: 0,
@@ -261,13 +259,13 @@ export default class CandleChart extends Vue {
           },
           encode: {
             x: 0,
-            y: 1,
+            y: colSellData,
           },
         },
       ],
     };
 
-    this.createSignalData(colDate, colOpen, colBuy, colSell);
+    // this.createSignalData(colDate, colOpen, colBuy, colSell);
 
     // This will be merged into final plot config
     // const subPlots = {
@@ -386,21 +384,21 @@ export default class CandleChart extends Vue {
     return options;
   }
 
-  createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
+  // createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
-    // Calculate Buy and sell Series
+  // Calculate Buy and sell Series
-    if (!this.signalsCalculated) {
+  // if (!this.signalsCalculated) {
-      // Generate Buy and sell array (using open rate to display marker)
+  //   // Generate Buy and sell array (using open rate to display marker)
-      for (let i = 0, len = this.dataset.data.length; i < len; i += 1) {
+  //   for (let i = 0, len = this.dataset.data.length; i < len; i += 1) {
-        if (this.dataset.data[i][colBuy] === 1) {
+  //     if (this.dataset.data[i][colBuy] === 1) {
-          this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
+  //       this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
-        }
+  //     }
-        if (this.dataset.data[i][colSell] === 1) {
+  //     if (this.dataset.data[i][colSell] === 1) {
-          this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
+  //       this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
-        }
+  //     }
-      }
+  //   }
-      this.signalsCalculated = true;
+  //   this.signalsCalculated = true;
-    }
+  // }
-  }
+  // }
 }
 </script>
 

src/store/modules/ftbot.ts

@@ -6,6 +6,7 @@ import {
   Logs,
   DailyPayload,
   Trade,
+  PairCandlePayload,
   PairHistoryPayload,
   PlotConfig,
   EMPTY_PLOTCONFIG,
@@ -38,6 +39,7 @@ export default {
     pairlistMethods: [],
     detailTradeId: null,
     candleData: {},
+    history: {},
     plotConfig: {},
     customPlotConfig: { ...EMPTY_PLOTCONFIG },
   },
@@ -98,6 +100,10 @@ export default {
     updatePairCandles(state, { pair, timeframe, data }) {
       state.candleData = { ...state.candleData, [`${pair}__${timeframe}`]: data };
     },
+    updatePairHistory(state, { pair, timeframe, data }) {
+      // Intentionally drop the previous state here.
+      state.history = { [`${pair}__${timeframe}`]: data };
+    },
     updatePlotConfig(state, plotConfig: PlotConfig) {
       state.plotConfig = plotConfig;
     },
@@ -133,11 +139,11 @@ export default {
         .then((result) => commit('updateOpenTrades', result.data))
         .catch(console.error);
     },
-    getPairCandles({ commit }, payload: PairHistoryPayload) {
+    getPairCandles({ commit }, payload: PairCandlePayload) {
       if (payload.pair && payload.timeframe && payload.limit) {
         return api
           .get('/pair_candles', {
-            params: { pair: payload.pair, timeframe: payload.timeframe, limit: payload.limit },
+            params: { ...payload },
           })
           .then((result) => {
             commit('updatePairCandles', {
@@ -155,6 +161,30 @@ export default {
         reject(error);
       });
     },
+    getPairHistory({ commit }, payload: PairHistoryPayload) {
+      if (payload.pair && payload.timeframe && payload.limit && payload.timerange) {
+        return api
+          .get('/pair_history', {
+            params: { ...payload },
+            timeout: 10000,
+          })
+          .then((result) => {
+            commit('updatePairHistory', {
+              pair: payload.pair,
+              timeframe: payload.timeframe,
+              timerange: payload.timerange,
+              data: result.data,
+            });
+          })
+          .catch(console.error);
+      }
+      // Error branchs
+      const error = 'pair or timeframe or timerange not specified';
+      console.error(error);
+      return new Promise((resolve, reject) => {
+        reject(error);
+      });
+    },
     getPlotConfig({ commit }) {
       return api
         .get('/plot_config')

src/types/types.ts

@@ -138,13 +138,18 @@ export interface ClosedTrade extends Trade {
   open_order_id?: string;
 }
 
-export interface PairHistoryPayload {
+export interface PairCandlePayload {
   pair: string;
   timeframe: string;
   limit: number;
 }
 
+export interface PairHistoryPayload extends PairCandlePayload {
+  timerange: string;
+}
+
 export interface PairHistory {
+  pair: string;
   columns: string[];
   data: number[];
   length: number;

src/views/Graphs.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="container-fluid">
     <div class="row mb-2">
+      <div class="col-mb-2">
+        <b-checkbox v-model="historicView">HistoricData</b-checkbox>
+        <b-button @click="refresh">&#x21bb;</b-button>
+      </div>
       <div class="col-mb-2">
         <b-form-select :options="whitelist" v-model="pair" @change="refresh"> </b-form-select>
       </div>
@@ -38,7 +42,12 @@ import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import CandleChart from '@/components/ftbot/CandleChart.vue';
 import PlotConfigurator from '@/components/ftbot/PlotConfigurator.vue';
-import { PlotConfig, EMPTY_PLOTCONFIG } from '../store/types';
+import {
+  PlotConfig,
+  EMPTY_PLOTCONFIG,
+  PairCandlePayload,
+  PairHistoryPayload,
+} from '../store/types';
 import { loadCustomPlotConfig } from '../shared/storage';
 
 const ftbot = namespace('ftbot');
@@ -55,18 +64,25 @@ export default class Graphs extends Vue {
 
   plotOption = 'main_plot';
 
+  historicView = false;
+
   // Custom plot config - manually changed by user.
   // eslint-disable-next-line @typescript-eslint/camelcase
   customPlotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG };
 
   @ftbot.State candleData;
 
+  @ftbot.State history;
+
   @ftbot.State whitelist;
 
   @ftbot.State plotConfig;
 
   @ftbot.Action
-  public getPairCandles;
+  public getPairCandles!: (payload: PairCandlePayload) => void;
+
+  @ftbot.Action
+  public getPairHistory!: (payload: PairHistoryPayload) => void;
 
   @ftbot.Action
   public getWhitelist;
@@ -86,6 +102,9 @@ export default class Graphs extends Vue {
   }
 
   get dataset() {
+    if (this.historicView) {
+      return this.history[`${this.pair}__${this.timeframe}`];
+    }
     return this.candleData[`${this.pair}__${this.timeframe}`];
   }
 
@@ -98,7 +117,16 @@ export default class Graphs extends Vue {
   }
 
   refresh() {
-    this.getPairCandles({ pair: this.pair, timeframe: this.timeframe, limit: 500 });
+    if (this.historicView) {
+      this.getPairHistory({
+        pair: this.pair,
+        timeframe: this.timeframe,
+        limit: 500,
+        timerange: '20200101-20200201',
+      });
+    } else {
+      this.getPairCandles({ pair: this.pair, timeframe: this.timeframe, limit: 500 });
+    }
 
     this.getPlotConfig();
   }