Move plotconfiguration to CandleChart

src/components/ftbot/CandleChart.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="container-fluid d-flex flex-column align-items-stretch d-flex">
+    <b-modal
+      id="plotConfiguratorModal"
+      title="Plot Configurator"
+      ok-only
+      hide-backdrop
+      button-size="sm"
+    >
+      <PlotConfigurator :columns="datasetColumns" v-model="plotConfig" />
+    </b-modal>
+    <div class="col-mb-2 ml-auto position-relative">
+      <b-button class="mt-5" @click="showConfigurator" size="sm" title="Plot configurator">
+        &#9881;
+      </b-button>
+    </div>
     <div class="row flex-grow-1 chart-wrapper">
       <v-chart v-if="hasData" theme="dark" autoresize :options="chartOptions" />
     </div>
@@ -10,10 +24,12 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 import ECharts from 'vue-echarts';
 import * as echarts from 'echarts';
-import { Trade, PairHistory, PlotConfig } from '@/store/types';
+import { Trade, PairHistory, PlotConfig, EMPTY_PLOTCONFIG } from '@/store/types';
 import randomColor from '@/shared/randomColor';
 import { roundTimeframe } from '@/shared/timemath';
 import { timestampms } from '@/shared/formatters';
+import PlotConfigurator from '@/components/ftbot/PlotConfigurator.vue';
+import { loadCustomPlotConfig } from '@/shared/storage';
 
 import 'echarts';
 
@@ -26,7 +42,7 @@ const downColor = '#ec0000';
 const downBorderColor = '#8A0000';
 
 @Component({
-  components: { 'v-chart': ECharts },
+  components: { 'v-chart': ECharts, PlotConfigurator },
 })
 export default class CandleChart extends Vue {
   @Prop({ required: true }) readonly pair!: string;
@@ -39,7 +55,7 @@ export default class CandleChart extends Vue {
 
   @Prop({ required: true }) readonly dataset!: PairHistory;
 
-  @Prop({ required: false }) readonly plotConfig!: PlotConfig;
+  plotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG };
 
   // Only recalculate buy / sell data if necessary
   signalsCalculated = false;
@@ -48,6 +64,14 @@ export default class CandleChart extends Vue {
 
   sellData = [] as Array<number>[];
 
+  mounted() {
+    this.plotConfig = loadCustomPlotConfig();
+  }
+
+  showConfigurator() {
+    this.$bvModal.show('plotConfiguratorModal');
+  }
+
   @Watch('pair')
   pairChanged() {
     this.signalsCalculated = false;
@@ -63,6 +87,10 @@ export default class CandleChart extends Vue {
     this.signalsCalculated = false;
   }
 
+  get datasetColumns() {
+    return this.dataset ? this.dataset.columns : [];
+  }
+
   get hasData() {
     return this.dataset !== null && typeof this.dataset === 'object';
   }

src/views/Graphs.vue

@@ -10,33 +10,17 @@
       <div class="col-mb-2">
         <b-form-select :options="whitelist" v-model="pair" @change="refresh"> </b-form-select>
       </div>
-      <div class="col-mb-2">
-        <b-checkbox v-model="strategyPlotConfig">Use strategy plot_config</b-checkbox>
-      </div>
-      <div class="col-mb-2 ml-5" v-if="!strategyPlotConfig">
-        <b-button @click="showConfigurator">Show configurator</b-button>
-      </div>
     </div>
     <div class="mt-2" v-if="historicView">
       <TimeRangeSelect v-model="timerange"></TimeRangeSelect>
     </div>
 
-    <b-modal
-      id="plotConfiguratorModal"
-      title="Plot Configurator"
-      ok-only
-      hide-backdrop
-      button-size="sm"
-    >
-      <PlotConfigurator :columns="datasetColumns" v-model="customPlotConfig" />
-    </b-modal>
     <div class="row">
       <CandleChart
         :pair="pair"
         :timeframe="timeframe"
         :timeframems="timeframems"
         :dataset="dataset"
-        :plotConfig="selectedPlotConfig"
         :trades="trades"
       >
       </CandleChart>
@@ -48,14 +32,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 TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
-import { PlotConfig, EMPTY_PLOTCONFIG, PairCandlePayload, PairHistoryPayload } from '@/store/types';
-import { loadCustomPlotConfig } from '@/shared/storage';
+import { PairCandlePayload, PairHistoryPayload } from '@/store/types';
 
 const ftbot = namespace('ftbot');
 @Component({
-  components: { CandleChart, PlotConfigurator, TimeRangeSelect },
+  components: { CandleChart, TimeRangeSelect },
 })
 export default class Graphs extends Vue {
   pair = 'XRP/USDT';
@@ -64,28 +46,18 @@ export default class Graphs extends Vue {
 
   timeframems = 300000;
 
-  strategyPlotConfig = false;
-
-  plotOption = 'main_plot';
-
   historicView = false;
 
   strategy = '';
 
   timerange = '';
 
-  // 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.State trades;
 
   @ftbot.Action
@@ -97,18 +69,10 @@ export default class Graphs extends Vue {
   @ftbot.Action
   public getWhitelist;
 
-  @ftbot.Action
-  public getPlotConfig;
-
   mounted() {
     this.getWhitelist();
     this.refresh();
     // eslint-disable-next-line @typescript-eslint/camelcase
-    this.customPlotConfig = loadCustomPlotConfig();
-  }
-
-  get selectedPlotConfig() {
-    return this.strategyPlotConfig ? this.plotConfig : this.customPlotConfig;
   }
 
   get dataset() {
@@ -118,14 +82,6 @@ export default class Graphs extends Vue {
     return this.candleData[`${this.pair}__${this.timeframe}`];
   }
 
-  get datasetColumns() {
-    return this.dataset ? this.dataset.columns : [];
-  }
-
-  showConfigurator() {
-    this.$bvModal.show('plotConfiguratorModal');
-  }
-
   refresh() {
     if (this.historicView) {
       this.getPairHistory({
@@ -137,7 +93,6 @@ export default class Graphs extends Vue {
     } else {
       this.getPairCandles({ pair: this.pair, timeframe: this.timeframe, limit: 500 });
     }
-    this.getPlotConfig();
   }
 }
 </script>