Move pair selection to CandleChartContainer

src/components/charts/CandleChartContainer.vue

@@ -9,31 +9,54 @@
     >
       <PlotConfigurator v-model="plotConfig" :columns="datasetColumns" />
     </b-modal>
-    <div class="row ml-auto">
-      <div class="col-mb-2 mr-2">
+
+    <div class="row mr-0">
+      <div class="col-mb-2 ml-2">
+        <b-select v-model="pair" :options="availablePairs" size="sm" @change="refresh"> </b-select>
+      </div>
+      <div class="col-mb-2 ml-2 mr-2">
+        <b-button :disabled="!!!pair" size="sm" @click="refresh">&#x21bb;</b-button>
+      </div>
+      <div class="col-mb-2 ml-auto mr-2">
         <b-select
           v-model="plotConfigName"
           :options="availablePlotConfigNames"
+          size="sm"
           @change="plotConfigChanged"
         >
         </b-select>
       </div>
+
       <div class="col-mb-2 mr-2">
         <b-checkbox v-model="useUTC" title="Use UTC for graph">useUtc</b-checkbox>
       </div>
-      <div class="col-mb-2 mr-3">
+      <div class="col-mb-2 mr-1">
         <b-button size="sm" title="Plot configurator" @click="showConfigurator">&#9881;</b-button>
       </div>
     </div>
-    <CandleChart :dataset="dataset" :trades="trades" :plot-config="plotConfig" :use-u-t-c="useUTC">
-    </CandleChart>
+    <div class="row mr-1 ml-1">
+      <CandleChart
+        :dataset="dataset"
+        :trades="trades"
+        :plot-config="plotConfig"
+        :use-u-t-c="useUTC"
+      >
+      </CandleChart>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
-import { Trade, PairHistory, EMPTY_PLOTCONFIG, PlotConfig } from '@/types';
+import {
+  Trade,
+  PairHistory,
+  EMPTY_PLOTCONFIG,
+  PlotConfig,
+  PairCandlePayload,
+  PairHistoryPayload,
+} from '@/types';
 import CandleChart from '@/components/charts/CandleChart.vue';
 import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
 import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
@@ -42,11 +65,23 @@ const ftbot = namespace('ftbot');
 
 @Component({ components: { CandleChart, PlotConfigurator } })
 export default class CandleChartContainer extends Vue {
+  @Prop({ required: true }) readonly availablePairs!: string[];
+
   @Prop({ required: true }) readonly timeframe!: string;
 
   @Prop({ required: false, default: [] }) readonly trades!: Array<Trade>;
 
-  @Prop({ required: true }) readonly dataset!: PairHistory;
+  @Prop({ required: false, default: false }) historicView!: boolean;
+
+  /** Only required if historicView is true */
+  @Prop({ required: false, default: false }) timerange!: string;
+
+  /**
+   * Only required if historicView is true
+   */
+  @Prop({ required: false, default: false }) strategy!: string;
+
+  pair = '';
 
   useUTC = true;
 
@@ -58,6 +93,23 @@ export default class CandleChartContainer extends Vue {
 
   @ftbot.Action setPlotConfigName;
 
+  @ftbot.State candleData!: PairHistory;
+
+  @ftbot.State history!: PairHistory;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  @ftbot.Action public getPairCandles!: (payload: PairCandlePayload) => void;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  @ftbot.Action public getPairHistory!: (payload: PairHistoryPayload) => void;
+
+  get dataset() {
+    if (this.historicView) {
+      return this.history[`${this.pair}__${this.timeframe}`];
+    }
+    return this.candleData[`${this.pair}__${this.timeframe}`];
+  }
+
   get datasetColumns() {
     return this.dataset ? this.dataset.columns : [];
   }
@@ -76,6 +128,27 @@ export default class CandleChartContainer extends Vue {
   showConfigurator() {
     this.$bvModal.show('plotConfiguratorModal');
   }
+
+  refresh() {
+    if (this.pair && this.timeframe) {
+      if (this.historicView) {
+        this.getPairHistory({
+          pair: this.pair,
+          timeframe: this.timeframe,
+          timerange: this.timerange,
+          strategy: this.strategy,
+        });
+      } else {
+        this.getPairCandles({ pair: this.pair, timeframe: this.timeframe, limit: 500 });
+      }
+    }
+  }
+
+  @Watch('availablePairs')
+  watchAvailablePairs() {
+    [this.pair] = this.availablePairs;
+    this.refresh();
+  }
 }
 </script>
 

src/views/Graphs.vue

@@ -4,13 +4,6 @@
       <div class="col-mb-2">
         <b-checkbox v-model="historicView">HistoricData</b-checkbox>
       </div>
-      <div class="col-mb-2 ml-2 mr-2">
-        <b-button :disabled="!!!pair" @click="refresh">&#x21bb;</b-button>
-      </div>
-      <div class="col-mb-2">
-        <b-select v-model="pair" :options="historicView ? pairlist : whitelist" @change="refresh">
-        </b-select>
-      </div>
     </div>
     <div v-if="historicView" class="mt-2 row">
       <TimeRangeSelect v-model="timerange" class="col-md-4 mr-2"></TimeRangeSelect>
@@ -18,7 +11,14 @@
     </div>
 
     <div class="row">
-      <CandleChartContainer :pair="pair" :timeframe="timeframe" :dataset="dataset" :trades="trades">
+      <CandleChartContainer
+        :available-pairs="historicView ? pairlist : whitelist"
+        :historic-view="historicView"
+        :timeframe="timeframe"
+        :trades="trades"
+        :timerange="historicView ? timerange : ''"
+        :strategy="historicView ? strategy : ''"
+      >
       </CandleChartContainer>
     </div>
   </div>
@@ -30,13 +30,7 @@ import { namespace } from 'vuex-class';
 import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
 import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
 import StrategyList from '@/components/ftbot/StrategyList.vue';
-import {
-  AvailablePairPayload,
-  AvailablePairResult,
-  PairCandlePayload,
-  PairHistoryPayload,
-  WhitelistResponse,
-} from '@/types';
+import { AvailablePairPayload, AvailablePairResult, WhitelistResponse } from '@/types';
 
 const ftbot = namespace('ftbot');
 
@@ -44,8 +38,6 @@ const ftbot = namespace('ftbot');
   components: { CandleChartContainer, StrategyList, TimeRangeSelect },
 })
 export default class Graphs extends Vue {
-  pair = '';
-
   timeframe = '5m';
 
   historicView = false;
@@ -56,20 +48,10 @@ export default class Graphs extends Vue {
 
   @ftbot.State pairlist;
 
-  @ftbot.State candleData;
-
-  @ftbot.State history;
-
   @ftbot.State whitelist;
 
   @ftbot.State trades;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @ftbot.Action public getPairCandles!: (payload: PairCandlePayload) => void;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @ftbot.Action public getPairHistory!: (payload: PairHistoryPayload) => void;
-
   @ftbot.Action public getWhitelist!: () => Promise<WhitelistResponse>;
 
   @ftbot.Action public getAvailablePairs!: (
@@ -78,40 +60,12 @@ export default class Graphs extends Vue {
   ) => Promise<AvailablePairResult>;
 
   mounted() {
-    this.getWhitelist().then((whitelist) => {
-      // Autoselect first pair in whitelist
-      if (whitelist?.whitelist?.length > 0) {
-        [this.pair] = whitelist.whitelist;
-        this.refresh();
-      }
-    });
-    this.refresh();
+    this.getWhitelist();
+    // this.refresh();
     this.getAvailablePairs({ timeframe: this.timeframe }).then((val) => {
       console.log(val);
     });
   }
-
-  get dataset() {
-    if (this.historicView) {
-      return this.history[`${this.pair}__${this.timeframe}`];
-    }
-    return this.candleData[`${this.pair}__${this.timeframe}`];
-  }
-
-  refresh() {
-    if (this.pair && this.timeframe) {
-      if (this.historicView) {
-        this.getPairHistory({
-          pair: this.pair,
-          timeframe: this.timeframe,
-          timerange: this.timerange,
-          strategy: this.strategy,
-        });
-      } else {
-        this.getPairCandles({ pair: this.pair, timeframe: this.timeframe, limit: 500 });
-      }
-    }
-  }
 }
 </script>