Get PlotConfig from backend

src/components/ftbot/CandleChart.vue

@@ -14,23 +14,6 @@ import 'echarts';
 const MARGINLEFT = '5%';
 const MARGINRIGHT = '4%';
 
-// TODO plotConfig should come from the backend, or be configurable via UI
-const plotConfig = {
-  // eslint-disable-next-line @typescript-eslint/camelcase
-  main_plot: {
-    tema: { color: 'orange' },
-  },
-  subplots: {
-    MACD: {
-      macd: { color: 'blue' },
-      macdsignal: { color: 'orange' },
-    },
-    RSI: {
-      rsi: { color: 'red' },
-    },
-  },
-};
-
 export default {
   name: 'CandleChart',
   components: { 'v-chart': ECharts },
@@ -47,6 +30,13 @@ export default {
       type: Object,
       required: true,
     },
+    plotConfig: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      },
+    },
   },
 
   data() {
@@ -88,9 +78,9 @@ export default {
         series: [],
       };
 
-      if ('subplots' in plotConfig) {
+      if ('subplots' in this.plotConfig) {
         let plotIndex = 2;
-        Object.entries(plotConfig.subplots).forEach(([key, value]) => {
+        Object.entries(this.plotConfig.subplots).forEach(([key, value]) => {
           subPlots.legend.push(key);
           // define yaxis
           subPlots.yaxis.push({

src/store/modules/ftbot.ts

@@ -7,6 +7,7 @@ import {
   DailyPayload,
   Trade,
   PairHistoryPayload,
+  PlotConfig,
 } from '@/types';
 
 import { showAlert } from './alerts';
@@ -35,6 +36,7 @@ export default {
     pairlistMethods: [],
     detailTradeId: null,
     history: {},
+    plotConfig: {},
   },
   getters: {
     [BotStoreGetters.openTrades](state) {
@@ -93,6 +95,9 @@ export default {
     updatePairHistory(state, { pair, timeframe, data }) {
       state.history = { ...state.history, [`${pair}__${timeframe}`]: data };
     },
+    updatePlotConfig(state, plotConfig: PlotConfig) {
+      state.plotConfig = plotConfig;
+    },
   },
   actions: {
     ping({ commit, rootState }) {
@@ -143,6 +148,12 @@ export default {
         reject(error);
       });
     },
+    getPlotConfig({ commit }) {
+      return api
+        .get('/plot_config')
+        .then((result) => commit('updatePlotConfig', result.data))
+        .catch(console.error);
+    },
     getPerformance({ commit }) {
       return api
         .get('/performance')

src/types/types.ts

@@ -143,3 +143,8 @@ export interface PairHistoryPayload {
   timeframe: string;
   limit: number;
 }
+
+export interface PlotConfig {
+  main_plot?: object;
+  subplots?: object;
+}

src/views/Graphs.vue

@@ -7,14 +7,14 @@
       <div class="col-mb-2"></div>
     </div>
     <div class="row">
-      <CandleChart :pair="pair" :timeframe="timeframe" :dataset="dataset"> </CandleChart>
+      <CandleChart :pair="pair" :timeframe="timeframe" :dataset="dataset" :plotConfig="plotConfig">
+      </CandleChart>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import { mapActions } from 'vuex';
 import { namespace } from 'vuex-class';
 
 import CandleChart from '@/components/ftbot/CandleChart.vue';
@@ -23,9 +23,6 @@ const ftbot = namespace('ftbot');
 
 @Component({
   components: { CandleChart },
-  methods: {
-    ...mapActions('ftbot', ['getPairHistory', 'getWhitelist']),
-  },
 })
 export default class Graphs extends Vue {
   pair = 'XRP/USDT';
@@ -36,12 +33,17 @@ export default class Graphs extends Vue {
 
   @ftbot.State whitelist;
 
+  @ftbot.State plotConfig;
+
   @ftbot.Action
   public getPairHistory;
 
   @ftbot.Action
   public getWhitelist;
 
+  @ftbot.Action
+  public getPlotConfig;
+
   mounted() {
     this.getWhitelist();
     this.refresh();
@@ -53,6 +55,8 @@ export default class Graphs extends Vue {
 
   refresh() {
     this.getPairHistory({ pair: this.pair, timeframe: this.timeframe, limit: 500 });
+
+    this.getPlotConfig();
   }
 }
 </script>