Allow different plot-types

src/components/ftbot/CandleChart.vue

@@ -287,7 +287,7 @@ export default class CandleChart extends Vue {
         }
         const sp = {
           name: key,
-          type: 'line',
+          type: value.type || 'line',
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
@@ -357,7 +357,7 @@ export default class CandleChart extends Vue {
           if (col) {
             const sp = {
               name: sk,
-              type: 'line',
+              type: sv.type || 'line',
               xAxisIndex: plotIndex,
               yAxisIndex: plotIndex,
               itemStyle: {
@@ -381,7 +381,7 @@ export default class CandleChart extends Vue {
       });
     }
 
-    console.log(options);
+    // console.log(options);
     // TODO: Rebuilding this causes a full redraw for every new step
     return options;
   }

src/components/ftbot/PlotConfigurator.vue

@@ -11,7 +11,7 @@
       </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-group 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>
@@ -30,6 +30,11 @@
     <b-form-group label="Choose column" label-for="columnSelector">
       <b-form-select id="columnSelector" :options="columns" v-model="selColumn"> </b-form-select>
     </b-form-group>
+
+    <b-form-group label="Choose type" label-for="columnSelector">
+      <b-form-select id="plotTypeSelector" :options="availableGraphTypes" v-model="graphType">
+      </b-form-select>
+    </b-form-group>
     <hr />
 
     <b-form-group label="Color" label-for="colsel">
@@ -109,6 +114,10 @@ export default class PlotConfigurator extends Vue {
 
   selColumn = '';
 
+  graphType = 'line';
+
+  availableGraphTypes = ['line', 'bar', 'scatter'];
+
   showConfig = false;
 
   selField = '';
@@ -143,10 +152,13 @@ export default class PlotConfigurator extends Vue {
     if (this.plotOption === 'main_plot') {
       console.log(`Adding ${this.selColumn} to MainPlot`);
       console.log(plotConfig);
-      plotConfig[this.plotOption][this.selColumn] = { color: this.selColor };
+      plotConfig[this.plotOption][this.selColumn] = { color: this.selColor, type: this.graphType };
     } else {
       console.log(`Adding ${this.selColumn} to ${this.selField}`);
-      plotConfig[this.plotOption][this.selField][this.selColumn] = { color: this.selColor };
+      plotConfig[this.plotOption][this.selField][this.selColumn] = {
+        color: this.selColor,
+        type: this.graphType,
+      };
     }
 
     this.plotConfig = { ...plotConfig };

src/types/types.ts

@@ -153,6 +153,7 @@ export interface PairHistory {
 
 export interface IndicatorConfig {
   color?: string;
+  type?: string;
 }
 
 export interface PlotConfig {