Add available_pairs to select historic data pairs

src/store/modules/ftbot.ts

@@ -11,6 +11,7 @@ import {
   PlotConfig,
   StrategyResult,
   EMPTY_PLOTCONFIG,
+  AvailablePairPayload,
 } from '@/types';
 
 import { saveCustomPlotConfig } from '@/shared/storage';
@@ -44,6 +45,7 @@ export default {
     strategyPlotConfig: {},
     customPlotConfig: { ...EMPTY_PLOTCONFIG },
     strategyList: [],
+    pairlist: [],
   },
   getters: {
     [BotStoreGetters.openTrades](state) {
@@ -102,6 +104,9 @@ export default {
     updateStrategyList(state, result: StrategyResult) {
       state.strategyList = result.strategies;
     },
+    updatePairs(state, pairlist: Array<string>) {
+      state.pairlist = pairlist;
+    },
     updatePairCandles(state, { pair, timeframe, data }) {
       state.candleData = { ...state.candleData, [`${pair}__${timeframe}`]: data };
     },
@@ -202,6 +207,18 @@ export default {
         .then((result) => commit('updateStrategyList', result.data))
         .catch(console.error);
     },
+    getAvailablePairs({ commit }, payload: AvailablePairPayload) {
+      return api
+        .get('/available_pairs', {
+          params: { ...payload },
+        })
+        .then((result) => {
+          // result is of type AvailablePairResult
+          const { pairs } = result.data;
+          commit('updatePairs', pairs);
+        })
+        .catch(console.error);
+    },
     getPerformance({ commit }) {
       return api
         .get('/performance')

src/types/types.ts

@@ -144,6 +144,20 @@ export interface StrategyResult {
   strategies: Array<string>;
 }
 
+export interface AvailablePairPayload {
+  timeframe?: string;
+  stake_currency?: string;
+}
+
+export interface AvailablePairResult {
+  pairs: Array<string>;
+  /**
+   * List of lists, as [pair, timeframe]
+   */
+  pair_interval: Array<Array<string>>;
+  length: number;
+}
+
 export interface PairCandlePayload {
   pair: string;
   timeframe: string;

src/views/Graphs.vue

@@ -8,7 +8,12 @@
         <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>
+        <b-form-select
+          :options="historicView ? pairlist : whitelist"
+          v-model="pair"
+          @change="refresh"
+        >
+        </b-form-select>
       </div>
     </div>
     <div class="mt-2 row" v-if="historicView">
@@ -55,6 +60,8 @@ export default class Graphs extends Vue {
 
   timerange = '';
 
+  @ftbot.State pairlist;
+
   @ftbot.State candleData;
 
   @ftbot.State history;
@@ -72,10 +79,13 @@ export default class Graphs extends Vue {
   @ftbot.Action
   public getWhitelist;
 
+  @ftbot.Action
+  public getAvailablePairs!: (payload: AvailablePairPayload) => void;
+
   mounted() {
     this.getWhitelist();
     this.refresh();
-    // eslint-disable-next-line @typescript-eslint/camelcase
+    this.getAvailablePairs({ timeframe: this.timeframe });
   }
 
   get dataset() {