Persist plotconfig to localstore

src/components/ftbot/CandleChart.vue

@@ -28,9 +28,9 @@ const downBorderColor = '#8A0000';
   components: { 'v-chart': ECharts },
 })
 export default class CandleChart extends Vue {
-  @Prop({ required: true }) readonly pair: string = '';
+  @Prop({ required: true }) readonly pair!: string;
 
-  @Prop({ required: true }) readonly timeframe: string = '';
+  @Prop({ required: true }) readonly timeframe!: string;
 
   @Prop({ required: true }) readonly dataset!: PairHistory;
 

src/shared/storage.ts

@@ -0,0 +1,12 @@
+import { PlotConfig, EMPTY_PLOTCONFIG } from '@/types';
+
+const PLOT_CONFIG = 'ft_custom_plot_config';
+
+export function saveCustomPlotConfig(plotConfig: PlotConfig) {
+  localStorage.setItem(PLOT_CONFIG, JSON.stringify(plotConfig));
+}
+
+export function loadCustomPlotConfig() {
+  console.log('load_custom');
+  return JSON.parse(localStorage.getItem(PLOT_CONFIG) || JSON.stringify(EMPTY_PLOTCONFIG));
+}

src/store/modules/ftbot.ts

@@ -8,8 +8,10 @@ import {
   Trade,
   PairHistoryPayload,
   PlotConfig,
+  EMPTY_PLOTCONFIG,
 } from '@/types';
 
+import { saveCustomPlotConfig } from '@/shared/storage';
 import { showAlert } from './alerts';
 
 export enum BotStoreGetters {
@@ -37,6 +39,7 @@ export default {
     detailTradeId: null,
     history: {},
     plotConfig: {},
+    customPlotConfig: { ...EMPTY_PLOTCONFIG },
   },
   getters: {
     [BotStoreGetters.openTrades](state) {
@@ -98,6 +101,10 @@ export default {
     updatePlotConfig(state, plotConfig: PlotConfig) {
       state.plotConfig = plotConfig;
     },
+    saveCustomPlotConfig(state, plotConfig: PlotConfig) {
+      state.customPlotConfig = plotConfig;
+      saveCustomPlotConfig(plotConfig);
+    },
   },
   actions: {
     ping({ commit, rootState }) {

src/types/types.ts

@@ -159,3 +159,6 @@ export interface PlotConfig {
   main_plot: Record<string, IndicatorConfig>;
   subplots: Record<string, Record<string, IndicatorConfig>>;
 }
+
+// eslint-disable-next-line @typescript-eslint/camelcase
+export const EMPTY_PLOTCONFIG: PlotConfig = { main_plot: {}, subplots: {} };

src/views/Graphs.vue

@@ -31,7 +31,8 @@
         </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"> </b-form-select>
+            <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'">
@@ -51,6 +52,13 @@
         <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>
@@ -76,7 +84,8 @@ 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 { PlotConfig } from '../store/types';
+import { loadCustomPlotConfig } from '../shared/storage';
+import { PlotConfig, EMPTY_PLOTCONFIG } from '../store/types';
 
 const ftbot = namespace('ftbot');
 
@@ -102,7 +111,7 @@ export default class Graphs extends Vue {
 
   // Custom plot config - manually changed by user.
   // eslint-disable-next-line @typescript-eslint/camelcase
-  customPlotConfig: PlotConfig = { main_plot: {}, subplots: {} };
+  customPlotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG };
 
   @ftbot.State history;
 
@@ -119,13 +128,16 @@ export default class Graphs extends Vue {
   @ftbot.Action
   public getPlotConfig;
 
+  @ftbot.Mutation
+  saveCustomPlotConfig;
+
   showConfig = false;
 
   mounted() {
     this.getWhitelist();
     this.refresh();
     // eslint-disable-next-line @typescript-eslint/camelcase
-    // this.customPlotConfig = this.plotConfig || { main_plot: {}, subplots: {} };
+    this.customPlotConfig = loadCustomPlotConfig();
   }
 
   get selectedPlotConfig() {
@@ -179,6 +191,16 @@ export default class Graphs extends Vue {
     this.newSubplotName = '';
     console.log(this.customPlotConfig);
   }
+
+  savePlotConfig() {
+    this.saveCustomPlotConfig(this.customPlotConfig);
+  }
+
+  loadPlotConfig() {
+    this.customPlotConfig = loadCustomPlotConfig();
+    console.log(this.customPlotConfig);
+    console.log('loading config');
+  }
 }
 </script>