pair and timeframe should be props

src/components/ftbot/CandleChart.vue

@@ -32,12 +32,21 @@ const plotConfig = {
 export default {
   name: 'CandleChart',
   components: { 'v-chart': ECharts },
+  props: {
+    pair: {
+      type: String,
+      required: false,
+      default: 'XRP/USDT',
+    },
+    timeframe: {
+      type: String,
+      required: false,
+      default: '5m',
+    },
+  },
 
   data() {
-    return {
+    return {};
-      pair: 'XRP/USDT',
-      timeframe: '5m',
-    };
   },
   computed: {
     ...mapState('ftbot', ['history']),

src/views/Graphs.vue

@@ -1,11 +1,19 @@
 <template>
-  <div>
+  <div class="container-fluid">
-    <CandleChart> </CandleChart>
+    <div class="row mb-2">
+      <div class="col-mb-2">
+        <b-form-select :options="whitelist" v-model="pair" @change="refresh"> </b-form-select>
+      </div>
+      <div class="col-mb-2"></div>
+    </div>
+    <div class="row">
+      <CandleChart :pair="pair" :timeframe="timeframe"> </CandleChart>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 
 import CandleChart from '@/components/ftbot/CandleChart.vue';
 
@@ -14,11 +22,24 @@ export default {
   components: {
     CandleChart,
   },
+  data() {
+    return {
+      pair: 'XRP/USDT',
+      timeframe: '5m',
+    };
+  },
+  computed: {
+    ...mapState('ftbot', ['whitelist']),
+  },
   mounted() {
-    this.getPairHistory({ pair: 'XRP/USDT', timeframe: '5m', limit: 500 });
+    this.getWhitelist();
+    this.refresh();
   },
   methods: {
-    ...mapActions('ftbot', ['getPairHistory']),
+    ...mapActions('ftbot', ['getPairHistory', 'getWhitelist']),
+    refresh() {
+      this.getPairHistory({ pair: this.pair, timeframe: this.timeframe, limit: 500 });
+    },
   },
 };
 </script>