ALlow multiple plotconfigs

src/components/ftbot/PlotConfigurator.vue

@@ -65,6 +65,10 @@
       </b-input-group>
     </b-form-group>
     <hr />
+    <b-form-group label="Plot config name" label-for="idPlotConfigName">
+      <b-form-input id="idPlotConfigName" :options="availableGraphTypes" v-model="plotConfigName">
+      </b-form-input>
+    </b-form-group>
     <div class="row">
       <b-button
         class="ml-1"
@@ -165,6 +169,8 @@ export default class PlotConfigurator extends Vue {
 
   plotOption = 'main_plot';
 
+  plotConfigName = 'default';
+
   newSubplotName = '';
 
   selAvailableIndicator = '';
@@ -185,8 +191,9 @@ export default class PlotConfigurator extends Vue {
 
   selColor = randomColor();
 
-  @ftbot.Mutation
+  @ftbot.Mutation saveCustomPlotConfig;
-  saveCustomPlotConfig;
+
+  @ftbot.Mutation updatePlotConfigName!: (plotConfigName: string) => void;
 
   get plotConfigJson() {
     return JSON.stringify(this.plotConfig, null, 2);
@@ -289,11 +296,11 @@ export default class PlotConfigurator extends Vue {
   }
 
   savePlotConfig() {
-    this.saveCustomPlotConfig(this.plotConfig);
+    this.saveCustomPlotConfig({ [this.plotConfigName]: this.plotConfig });
   }
 
   loadPlotConfig() {
-    this.plotConfig = loadCustomPlotConfig();
+    this.plotConfig = loadCustomPlotConfig(this.plotConfigName);
     console.log(this.plotConfig);
     console.log('loading config');
     this.emitPlotConfig();

src/shared/storage.ts

@@ -1,12 +1,31 @@
-import { PlotConfig, EMPTY_PLOTCONFIG } from '@/types';
+import { PlotConfig, EMPTY_PLOTCONFIG, PlotConfigStorage } from '@/types';
 
 const PLOT_CONFIG = 'ft_custom_plot_config';
+const PLOT_CONFIG_NAME = 'ft_selected_plot_config';
 
-export function storeCustomPlotConfig(plotConfig: PlotConfig) {
+export function loadPlotConfigName(): string {
-  localStorage.setItem(PLOT_CONFIG, JSON.stringify(plotConfig));
+  return localStorage.getItem(PLOT_CONFIG_NAME) || '';
 }
 
-export function loadCustomPlotConfig() {
+export function storePlotConfigName(plotConfigName: string): void {
-  console.log('load_custom');
+  localStorage.setItem(PLOT_CONFIG_NAME, plotConfigName);
+}
+
+export function loadAllCustomPlotConfig(): PlotConfig {
   return JSON.parse(localStorage.getItem(PLOT_CONFIG) || JSON.stringify(EMPTY_PLOTCONFIG));
 }
+
+export function loadCustomPlotConfig(configName: string): PlotConfig {
+  const configs = loadAllCustomPlotConfig();
+  return configName in configs ? configs[configName] : { ...EMPTY_PLOTCONFIG };
+}
+
+export function storeCustomPlotConfig(plotConfig: PlotConfigStorage) {
+  const existingConfig = loadAllCustomPlotConfig();
+  // Merge existing with new config
+  const finalPlotConfig = { ...existingConfig, ...plotConfig };
+
+  localStorage.setItem(PLOT_CONFIG, JSON.stringify(finalPlotConfig));
+  // Store new config name as default
+  storePlotConfigName(Object.keys(plotConfig)[0]);
+}

src/store/modules/ftbot.ts

@@ -12,15 +12,18 @@ import {
   StrategyResult,
   EMPTY_PLOTCONFIG,
   AvailablePairPayload,
+  PlotConfigStorage,
 } from '@/types';
 
-import { storeCustomPlotConfig } from '@/shared/storage';
+import { storeCustomPlotConfig, loadPlotConfigName, storePlotConfigName } from '@/shared/storage';
 import { showAlert } from './alerts';
 
 export enum BotStoreGetters {
   openTrades = 'openTrades',
   tradeDetail = 'tradeDetail',
   closedTrades = 'closedTrades',
+  plotConfig = 'plotConfig',
+  plotConfigNames = 'plotConfigNames',
 }
 
 export default {
@@ -44,10 +47,17 @@ export default {
     history: {},
     strategyPlotConfig: {},
     customPlotConfig: { ...EMPTY_PLOTCONFIG },
+    plotConfigName: loadPlotConfigName(),
     strategyList: [],
     pairlist: [],
   },
   getters: {
+    [BotStoreGetters.plotConfig](state) {
+      return state.customPlotConfig[state.plotConfigName] || { ...EMPTY_PLOTCONFIG };
+    },
+    [BotStoreGetters.plotConfigNames](state): Array<string> {
+      return Object.keys(state.customPlotConfig);
+    },
     [BotStoreGetters.openTrades](state) {
       return state.openTrades;
     },
@@ -117,7 +127,11 @@ export default {
     updatePlotConfig(state, plotConfig: PlotConfig) {
       state.strategyPlotConfig = plotConfig;
     },
-    saveCustomPlotConfig(state, plotConfig: PlotConfig) {
+    updatePlotConfigName(state, plotConfigName: string) {
+      state.plotConfigName = plotConfigName;
+      storePlotConfigName(plotConfigName);
+    },
+    saveCustomPlotConfig(state, plotConfig: PlotConfigStorage) {
       state.customPlotConfig = plotConfig;
       storeCustomPlotConfig(plotConfig);
     },

src/types/types.ts

@@ -198,5 +198,9 @@ export interface PlotConfig {
   subplots: Record<string, Record<string, IndicatorConfig>>;
 }
 
+export interface PlotConfigStorage {
+  [key: string]: PlotConfig;
+}
+
 // eslint-disable-next-line @typescript-eslint/camelcase
 export const EMPTY_PLOTCONFIG: PlotConfig = { main_plot: {}, subplots: {} };