From 73234ef8f4d41fa8fc1c3b1e306b6eb2d27b0083 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Wed, 1 Jul 2020 07:16:05 +0200
Subject: [PATCH] Extract PlotConfigurator to it's own component

---
 src/components/ftbot/PlotConfigurator.vue | 159 ++++++++++++++++++++++
 src/views/Graphs.vue                      | 127 +----------------
 2 files changed, 165 insertions(+), 121 deletions(-)
 create mode 100644 src/components/ftbot/PlotConfigurator.vue

diff --git a/src/components/ftbot/PlotConfigurator.vue b/src/components/ftbot/PlotConfigurator.vue
new file mode 100644
index 00000000..2ee648c8
--- /dev/null
+++ b/src/components/ftbot/PlotConfigurator.vue
@@ -0,0 +1,159 @@
+<template>
+  <div v-if="columns" class="container-fluid">
+    <div class="row">
+      <label class="h3">Plot config builder</label>
+    </div>
+    <div class="row">
+      <div class="col-mb-3">
+        <b-form-group label-cols="auto" label="Choose column" label-for="columnSelector">
+          <b-form-select id="columnSelector" :options="columns" v-model="selColumn">
+          </b-form-select>
+        </b-form-group>
+      </div>
+      <div class="col-mb-3 ml-2">
+        <b-form-group label-cols="auto" label="Plot Section" label-for="FieldSel">
+          <b-form-radio v-model="plotOption" name="plot_section" value="main_plot">
+            Main Plot
+          </b-form-radio>
+          <b-form-radio v-model="plotOption" name="plot_section" value="subplots">
+            Subplots
+          </b-form-radio>
+        </b-form-group>
+      </div>
+      <div class="col-mb-3 ml-2" v-if="plotOption == 'subplots'">
+        <b-form-group label-cols="auto" label="Target field" label-for="FieldSel">
+          <b-form-select id="FieldSel" :options="subplots" v-model="selField" :select-size="4">
+          </b-form-select>
+        </b-form-group>
+      </div>
+      <div class="col-mb-3 ml-2" v-if="plotOption == 'subplots'">
+        <b-form-group label-cols="auto" label="New subplot" label-for="newSubplot">
+          <b-form-input class="addPlot" id="newSubplot" v-model="newSubplotName"></b-form-input>
+
+          <b-button id="FieldSel" @click="addSubplot">+</b-button>
+        </b-form-group>
+      </div>
+
+      <div class="col-mb-3 ml-2">
+        <b-form-group label-cols="auto" label="Color" label-for="colsel">
+          <b-form-input id="colsel" v-model="selColor"></b-form-input>
+        </b-form-group>
+      </div>
+
+      <div class="col-mb-3 ml-2">
+        <b-button variant="primary" @click="addBar">Add</b-button>
+      </div>
+
+      <div class="col-mb-3 ml-2">
+        <b-button variant="primary" @click="loadPlotConfig">Load</b-button>
+      </div>
+      <div class="col-mb-3 ml-2">
+        <b-button variant="primary" @click="savePlotConfig">Save</b-button>
+      </div>
+      <div class="col-mb-3 ml-2">
+        <b-button variant="primary" @click="showConfig = !showConfig">Show</b-button>
+      </div>
+      <div class="col-mb-5 ml-2" v-if="showConfig">
+        <b-textarea id="TextArea" v-model="plotConfigJson"> </b-textarea>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+import { PlotConfig, EMPTY_PLOTCONFIG } from '../../store/types';
+import randomColor from '../../shared/randomColor';
+import { loadCustomPlotConfig } from '../../shared/storage';
+
+const ftbot = namespace('ftbot');
+
+@Component({})
+export default class PlotConfigurator extends Vue {
+  @Prop({ required: true }) value!: PlotConfig;
+
+  @Prop({ required: true }) columns!: Array<string>;
+
+  @Emit('input')
+  emitPlotConfig() {
+    return this.plotConfig;
+  }
+
+  plotConfig: PlotConfig = EMPTY_PLOTCONFIG;
+
+  plotOption = 'main_plot';
+
+  newSubplotName = '';
+
+  selColumn = '';
+
+  showConfig = false;
+
+  selField = '';
+
+  selColor = randomColor();
+
+  @ftbot.Mutation
+  saveCustomPlotConfig;
+
+  get plotConfigJson() {
+    return JSON.stringify(this.plotConfig, null, 2);
+  }
+
+  get subplots() {
+    // Subplot keys (for selection window)
+    return Object.keys(this.plotConfig.subplots);
+  }
+
+  mounted() {
+    console.log('mounted');
+    this.plotConfig = this.value;
+  }
+
+  addBar() {
+    console.log(this.plotConfig);
+
+    const { plotConfig } = this;
+    if (this.plotOption === 'main_plot') {
+      console.log(`Adding ${this.selColumn} to MainPlot`);
+      console.log(plotConfig);
+      plotConfig[this.plotOption][this.selColumn] = { color: this.selColor };
+    } else {
+      console.log(`Adding ${this.selColumn} to ${this.selField}`);
+      plotConfig[this.plotOption][this.selField][this.selColumn] = { color: this.selColor };
+    }
+
+    this.plotConfig = { ...plotConfig };
+    // Reset random color
+    this.selColor = randomColor();
+    console.log(this.plotConfig);
+    this.emitPlotConfig();
+  }
+
+  addSubplot() {
+    this.plotConfig.subplots = {
+      ...this.plotConfig.subplots,
+      [this.newSubplotName]: {},
+    };
+    this.selField = this.newSubplotName;
+    this.newSubplotName = '';
+    console.log(this.plotConfig);
+    this.emitPlotConfig();
+  }
+
+  savePlotConfig() {
+    this.saveCustomPlotConfig(this.plotConfig);
+  }
+
+  loadPlotConfig() {
+    this.plotConfig = loadCustomPlotConfig();
+    console.log(this.plotConfig);
+    console.log('loading config');
+    this.emitPlotConfig();
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/views/Graphs.vue b/src/views/Graphs.vue
index ae070278..86d05c2a 100644
--- a/src/views/Graphs.vue
+++ b/src/views/Graphs.vue
@@ -8,65 +8,7 @@
         <b-checkbox v-model="strategyPlotConfig">Use strategy plot_config</b-checkbox>
       </div>
     </div>
-    <div v-if="!strategyPlotConfig && dataset" class="container-fluid">
-      <div class="row">
-        <label class="h3">Plot config builder</label>
-      </div>
-      <div class="row">
-        <div class="col-mb-3">
-          <b-form-group label-cols="auto" label="Choose column" label-for="columnSelector">
-            <b-form-select id="columnSelector" :options="dataset.columns" v-model="selColumn">
-            </b-form-select>
-          </b-form-group>
-        </div>
-        <div class="col-mb-3 ml-2">
-          <b-form-group label-cols="auto" label="Plot Section" label-for="FieldSel">
-            <b-form-radio v-model="plotOption" name="plot_section" value="main_plot">
-              Main Plot
-            </b-form-radio>
-            <b-form-radio v-model="plotOption" name="plot_section" value="subplots">
-              Subplots
-            </b-form-radio>
-          </b-form-group>
-        </div>
-        <div class="col-mb-3 ml-2" v-if="plotOption == 'subplots'">
-          <b-form-group label-cols="auto" label="Target field" label-for="FieldSel">
-            <b-form-select id="FieldSel" :options="subplots" v-model="selField" :select-size="4">
-            </b-form-select>
-          </b-form-group>
-        </div>
-        <div class="col-mb-3 ml-2" v-if="plotOption == 'subplots'">
-          <b-form-group label-cols="auto" label="New subplot" label-for="newSubplot">
-            <b-form-input class="addPlot" id="newSubplot" v-model="newSubplotName"></b-form-input>
-
-            <b-button id="FieldSel" @click="addSubplot">+</b-button>
-          </b-form-group>
-        </div>
-
-        <div class="col-mb-3 ml-2">
-          <b-form-group label-cols="auto" label="Color" label-for="colsel">
-            <b-form-input id="colsel" v-model="selColor"></b-form-input>
-          </b-form-group>
-        </div>
-
-        <div class="col-mb-3 ml-2">
-          <b-button variant="primary" @click="addBar">Add</b-button>
-        </div>
-
-        <div class="col-mb-3 ml-2">
-          <b-button variant="primary" @click="loadPlotConfig">Load</b-button>
-        </div>
-        <div class="col-mb-3 ml-2">
-          <b-button variant="primary" @click="savePlotConfig">Save</b-button>
-        </div>
-        <div class="col-mb-3 ml-2">
-          <b-button variant="primary" @click="showConfig = !showConfig">Show</b-button>
-        </div>
-        <div class="col-mb-5 ml-2" v-if="showConfig">
-          <b-textarea id="TextArea" v-model="plotConfigJson"> </b-textarea>
-        </div>
-      </div>
-    </div>
+    <PlotConfigurator :columns="datasetColumns" v-model="customPlotConfig" />
     <div class="row">
       <CandleChart
         :pair="pair"
@@ -83,14 +25,14 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import CandleChart from '@/components/ftbot/CandleChart.vue';
-import randomColor from '../shared/randomColor';
-import { loadCustomPlotConfig } from '../shared/storage';
+import PlotConfigurator from '@/components/ftbot/PlotConfigurator.vue';
 import { PlotConfig, EMPTY_PLOTCONFIG } from '../store/types';
+import { loadCustomPlotConfig } from '../shared/storage';
 
 const ftbot = namespace('ftbot');
 
 @Component({
-  components: { CandleChart },
+  components: { CandleChart, PlotConfigurator },
 })
 export default class Graphs extends Vue {
   pair = 'XRP/USDT';
@@ -99,16 +41,8 @@ export default class Graphs extends Vue {
 
   strategyPlotConfig = false;
 
-  selColumn = '';
-
-  selField = '';
-
-  newSubplotName = '';
-
   plotOption = 'main_plot';
 
-  selColor = randomColor();
-
   // Custom plot config - manually changed by user.
   // eslint-disable-next-line @typescript-eslint/camelcase
   customPlotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG };
@@ -128,11 +62,6 @@ export default class Graphs extends Vue {
   @ftbot.Action
   public getPlotConfig;
 
-  @ftbot.Mutation
-  saveCustomPlotConfig;
-
-  showConfig = false;
-
   mounted() {
     this.getWhitelist();
     this.refresh();
@@ -148,13 +77,8 @@ export default class Graphs extends Vue {
     return this.history[`${this.pair}__${this.timeframe}`];
   }
 
-  get subplots() {
-    // Subplot keys (for selection window)
-    return Object.keys(this.selectedPlotConfig.subplots);
-  }
-
-  get plotConfigJson() {
-    return JSON.stringify(this.selectedPlotConfig, null, 2);
+  get datasetColumns() {
+    return this.dataset ? this.dataset.columns : [];
   }
 
   refresh() {
@@ -162,45 +86,6 @@ export default class Graphs extends Vue {
 
     this.getPlotConfig();
   }
-
-  addBar() {
-    console.log(this.customPlotConfig);
-
-    const plotConfig = this.customPlotConfig;
-    if (this.plotOption === 'main_plot') {
-      console.log(`Adding ${this.selColumn} to MainPlot`);
-      console.log(plotConfig);
-      plotConfig[this.plotOption][this.selColumn] = { color: this.selColor };
-    } else {
-      console.log(`Adding ${this.selColumn} to ${this.selField}`);
-      plotConfig[this.plotOption][this.selField][this.selColumn] = { color: this.selColor };
-    }
-
-    this.customPlotConfig = { ...plotConfig };
-    // Reset random color
-    this.selColor = randomColor();
-    console.log(this.customPlotConfig);
-  }
-
-  addSubplot() {
-    this.customPlotConfig.subplots = {
-      ...this.customPlotConfig.subplots,
-      [this.newSubplotName]: {},
-    };
-    this.selField = this.newSubplotName;
-    this.newSubplotName = '';
-    console.log(this.customPlotConfig);
-  }
-
-  savePlotConfig() {
-    this.saveCustomPlotConfig(this.customPlotConfig);
-  }
-
-  loadPlotConfig() {
-    this.customPlotConfig = loadCustomPlotConfig();
-    console.log(this.customPlotConfig);
-    console.log('loading config');
-  }
 }
 </script>