composition: plotconfig

src/components/charts/PlotConfigurator.vue

@@ -120,234 +120,242 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';
-import { namespace } from 'vuex-class';
 import { PlotConfig, EMPTY_PLOTCONFIG, IndicatorConfig } from '@/types';
 import { getCustomPlotConfig } from '@/shared/storage';
 import PlotIndicator from '@/components/charts/PlotIndicator.vue';
-import { BotStoreGetters } from '@/store/modules/ftbot';
 import StoreModules from '@/store/storeSubModules';
 import { showAlert } from '@/stores/alerts';
 
-const ftbot = namespace(StoreModules.ftbot);
+import { defineComponent, computed, ref, watch, onMounted } from '@vue/composition-api';
+import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
 
-@Component({
+export default defineComponent({
+  name: 'PlotConfigurator',
   components: { PlotIndicator },
-})
+  props: {
-export default class PlotConfigurator extends Vue {
+    value: { type: Object as () => PlotConfig, required: true },
-  @Prop({ required: true }) value!: PlotConfig;
+    columns: { required: true, type: Array as () => string[] },
+    asModal: { required: false, default: true, type: Boolean },
+  },
+  emits: ['input'],
+  setup(props, { emit }) {
+    const { getStrategyPlotConfig, saveCustomPlotConfig, updatePlotConfigName } =
+      useNamespacedActions(StoreModules.ftbot, [
+        'getStrategyPlotConfig',
+        'saveCustomPlotConfig',
+        'updatePlotConfigName',
+      ]);
+    const { strategyPlotConfig, plotConfigName } = useNamespacedGetters(StoreModules.ftbot, [
+      'strategyPlotConfig',
+      'plotConfigName',
+    ]);
+    const plotConfig = ref<PlotConfig>(EMPTY_PLOTCONFIG);
 
-  @Prop({ required: true }) columns!: Array<string>;
+    const plotOptions = [
+      { text: 'Main Plot', value: 'main_plot' },
+      { text: 'Subplots', value: 'subplots' },
+    ];
+    const plotConfigNameLoc = ref('default');
+    const newSubplotName = ref('');
+    const selAvailableIndicator = ref('');
+    const selIndicatorName = ref('');
+    const addNewIndicator = ref(false);
+    const showConfig = ref(false);
+    const selSubPlot = ref('main_plot');
+    const tempPlotConfig = ref<PlotConfig>();
+    const tempPlotConfigValid = ref(true);
 
-  @Prop({ required: false, default: true }) asModal!: boolean;
+    const isMainPlot = computed(() => {
+      return selSubPlot.value === 'main_plot';
+    });
 
-  @Emit('input')
+    const currentPlotConfig = computed(() => {
-  emitPlotConfig() {
+      if (isMainPlot.value) {
-    return this.plotConfig;
+        return plotConfig.value.main_plot;
       }
 
-  @ftbot.Action getStrategyPlotConfig;
+      return plotConfig.value.subplots[selSubPlot.value];
+    });
+    const subplots = computed((): string[] => {
+      // Subplot keys (for selection window)
+      return ['main_plot', ...Object.keys(plotConfig.value.subplots)];
+    });
+    const usedColumns = computed((): string[] => {
+      if (isMainPlot.value) {
+        return Object.keys(plotConfig.value.main_plot);
+      }
+      if (selSubPlot.value in plotConfig.value.subplots) {
+        return Object.keys(plotConfig.value.subplots[selSubPlot.value]);
+      }
+      return [];
+    });
 
-  @ftbot.Getter [BotStoreGetters.strategyPlotConfig];
+    const addIndicator = (newIndicator: Record<string, IndicatorConfig>) => {
+      console.log(plotConfig.value);
 
-  get selIndicator(): Record<string, IndicatorConfig> {
+      // const { plotConfig.value } = this;
-    if (this.addNewIndicator) {
+      const name = Object.keys(newIndicator)[0];
+      const indicator = newIndicator[name];
+      if (isMainPlot.value) {
+        console.log(`Adding ${name} to MainPlot`);
+        plotConfig.value.main_plot[name] = { ...indicator };
+      } else {
+        console.log(`Adding ${name} to ${selSubPlot.value}`);
+        plotConfig.value.subplots[selSubPlot.value][name] = { ...indicator };
+      }
+
+      plotConfig.value = { ...plotConfig.value };
+      // Reset random color
+      addNewIndicator.value = false;
+      emit('input', plotConfig.value);
+    };
+
+    const selIndicator = computed({
+      get() {
+        if (addNewIndicator.value) {
           return {};
         }
-    if (this.selIndicatorName) {
+        if (selIndicatorName.value) {
           return {
-        [this.selIndicatorName]: this.currentPlotConfig[this.selIndicatorName],
+            [selIndicatorName.value]: currentPlotConfig.value[selIndicatorName.value],
           };
         }
         return {};
-  }
+      },
-
+      set(newValue: Record<string, IndicatorConfig>) {
-  set selIndicator(newValue: Record<string, IndicatorConfig>) {
         // console.log('newValue', newValue);
         const name = Object.keys(newValue)[0];
         // this.currentPlotConfig[this.selIndicatorName] = { ...newValue[name] };
         // this.emitPlotConfig();
         if (name && newValue) {
-      this.addIndicator(newValue);
+          addIndicator(newValue);
         } else {
-      this.addNewIndicator = false;
+          addNewIndicator.value = false;
-    }
         }
+      },
+    });
 
-  plotConfig: PlotConfig = EMPTY_PLOTCONFIG;
+    const plotConfigJson = computed({
-
+      get() {
-  plotOptions = [
+        return JSON.stringify(plotConfig.value, null, 2);
-    { text: 'Main Plot', value: 'main_plot' },
+      },
-    { text: 'Subplots', value: 'subplots' },
+      set(newValue: string) {
-  ];
-
-  plotConfigNameLoc = 'default';
-
-  newSubplotName = '';
-
-  selAvailableIndicator = '';
-
-  selIndicatorName = '';
-
-  addNewIndicator = false;
-
-  showConfig = false;
-
-  selSubPlot = 'main_plot';
-
-  tempPlotConfig?: PlotConfig = undefined;
-
-  tempPlotConfigValid = true;
-
-  @ftbot.Action saveCustomPlotConfig;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @ftbot.Action updatePlotConfigName!: (plotConfigName: string) => void;
-
-  @ftbot.Getter [BotStoreGetters.plotConfigName]!: string;
-
-  get plotConfigJson() {
-    return JSON.stringify(this.plotConfig, null, 2);
-  }
-
-  set plotConfigJson(newValue: string) {
         try {
-      this.tempPlotConfig = JSON.parse(newValue);
+          tempPlotConfig.value = JSON.parse(newValue);
           // TODO: Should Validate schema validity (should be PlotConfig type...)
-      this.tempPlotConfigValid = true;
+          tempPlotConfigValid.value = true;
         } catch (err) {
-      this.tempPlotConfigValid = false;
+          tempPlotConfigValid.value = false;
-    }
         }
+      },
+    });
 
-  get subplots(): string[] {
+    const removeIndicator = () => {
-    // Subplot keys (for selection window)
+      console.log(plotConfig.value);
-    return ['main_plot', ...Object.keys(this.plotConfig.subplots)];
+      // const { plotConfig } = this;
-  }
+      if (isMainPlot.value) {
-
+        console.log(`Removing ${selIndicatorName.value} from MainPlot`);
-  get usedColumns(): string[] {
+        delete plotConfig.value.main_plot[selIndicatorName.value];
-    if (this.isMainPlot) {
-      return Object.keys(this.plotConfig.main_plot);
-    }
-    if (this.selSubPlot in this.plotConfig.subplots) {
-      return Object.keys(this.plotConfig.subplots[this.selSubPlot]);
-    }
-    return [];
-  }
-
-  get isMainPlot() {
-    return this.selSubPlot === 'main_plot';
-  }
-
-  get currentPlotConfig() {
-    if (this.isMainPlot) {
-      return this.plotConfig.main_plot;
-    }
-
-    return this.plotConfig.subplots[this.selSubPlot];
-  }
-
-  mounted() {
-    console.log('Config Mounted', this.value);
-    this.plotConfig = this.value;
-    this.plotConfigNameLoc = this.plotConfigName;
-  }
-
-  @Watch('value')
-  watchValue() {
-    this.plotConfig = this.value;
-    this.plotConfigNameLoc = this.plotConfigName;
-  }
-
-  addIndicator(newIndicator: Record<string, IndicatorConfig>) {
-    console.log(this.plotConfig);
-
-    const { plotConfig } = this;
-    const name = Object.keys(newIndicator)[0];
-    const indicator = newIndicator[name];
-    if (this.isMainPlot) {
-      console.log(`Adding ${name} to MainPlot`);
-      plotConfig.main_plot[name] = { ...indicator };
       } else {
-      console.log(`Adding ${name} to ${this.selSubPlot}`);
+        console.log(`Removing ${selIndicatorName.value} from ${selSubPlot.value}`);
-      plotConfig.subplots[this.selSubPlot][name] = { ...indicator };
+        delete plotConfig.value.subplots[selSubPlot.value][selIndicatorName.value];
       }
 
-    this.plotConfig = { ...plotConfig };
+      plotConfig.value = { ...plotConfig.value };
-    // Reset random color
+      console.log(plotConfig.value);
-    this.addNewIndicator = false;
+      selIndicatorName.value = '';
-    this.emitPlotConfig();
+      emit('input', plotConfig.value);
-  }
-
-  removeIndicator() {
-    console.log(this.plotConfig);
-    const { plotConfig } = this;
-    if (this.isMainPlot) {
-      console.log(`Removing ${this.selIndicatorName} from MainPlot`);
-      delete plotConfig.main_plot[this.selIndicatorName];
-    } else {
-      console.log(`Removing ${this.selIndicatorName} from ${this.selSubPlot}`);
-      delete plotConfig.subplots[this.selSubPlot][this.selIndicatorName];
-    }
-
-    this.plotConfig = { ...plotConfig };
-    console.log(this.plotConfig);
-    this.selIndicatorName = '';
-    this.emitPlotConfig();
-  }
-
-  addSubplot() {
-    this.plotConfig.subplots = {
-      ...this.plotConfig.subplots,
-      [this.newSubplotName]: {},
     };
-    this.selSubPlot = this.newSubplotName;
+    const addSubplot = () => {
-    this.newSubplotName = '';
+      plotConfig.value.subplots = {
+        ...plotConfig.value.subplots,
+        [newSubplotName.value]: {},
+      };
+      selSubPlot.value = newSubplotName.value;
+      newSubplotName.value = '';
 
-    console.log(this.plotConfig);
+      console.log(plotConfig.value);
-    this.emitPlotConfig();
+      emit('input', plotConfig.value);
-  }
+    };
 
-  delSubplot() {
+    const delSubplot = () => {
-    delete this.plotConfig.subplots[this.selSubPlot];
+      delete plotConfig.value.subplots[selSubPlot.value];
-    this.plotConfig.subplots = { ...this.plotConfig.subplots };
+      plotConfig.value.subplots = { ...plotConfig.value.subplots };
-    this.selSubPlot = '';
+      selSubPlot.value = '';
-  }
+    };
-
+    const loadPlotConfig = () => {
-  savePlotConfig() {
+      plotConfig.value = getCustomPlotConfig(plotConfigNameLoc.value);
-    this.saveCustomPlotConfig({ [this.plotConfigNameLoc]: this.plotConfig });
+      console.log(plotConfig.value);
-  }
-
-  loadPlotConfig() {
-    this.plotConfig = getCustomPlotConfig(this.plotConfigNameLoc);
-    console.log(this.plotConfig);
       console.log('loading config');
-    this.emitPlotConfig();
+      emit('input', plotConfig.value);
-  }
+    };
 
-  loadConfigFromString() {
+    const loadConfigFromString = () => {
       // this.plotConfig = JSON.parse();
-    if (this.tempPlotConfig !== undefined && this.tempPlotConfigValid) {
+      if (tempPlotConfig.value !== undefined && tempPlotConfigValid.value) {
-      this.plotConfig = this.tempPlotConfig;
+        plotConfig.value = tempPlotConfig.value;
-      this.emitPlotConfig();
+        emit('input', plotConfig.value);
       }
-  }
+    };
-
+    const resetConfig = () => {
-  resetConfig() {
+      plotConfig.value = { ...EMPTY_PLOTCONFIG };
-    this.plotConfig = { ...EMPTY_PLOTCONFIG };
+    };
-  }
+    const loadPlotConfigFromStrategy = async () => {
-
-  async loadPlotConfigFromStrategy() {
       try {
-      await this.getStrategyPlotConfig();
+        await getStrategyPlotConfig();
-      this.plotConfig = this.strategyPlotConfig;
+        plotConfig.value = strategyPlotConfig.value;
-      this.emitPlotConfig();
+        emit('input', plotConfig.value);
       } catch (data) {
         //
         showAlert('Failed to load Plot configuration from Strategy.');
       }
-  }
+    };
-}
+
+    const savePlotConfig = () => {
+      saveCustomPlotConfig({ [plotConfigNameLoc.value]: plotConfig.value });
+    };
+
+    watch(props.value, () => {
+      console.log('config value');
+      plotConfig.value = props.value;
+      plotConfigNameLoc.value = plotConfigName.value;
+    });
+
+    onMounted(() => {
+      console.log('Config Mounted', props.value);
+      plotConfig.value = props.value;
+      plotConfigNameLoc.value = plotConfigName.value;
+    });
+
+    return {
+      saveCustomPlotConfig,
+      getStrategyPlotConfig,
+      updatePlotConfigName,
+      strategyPlotConfig,
+      plotConfigName,
+      addIndicator,
+      removeIndicator,
+      addSubplot,
+      delSubplot,
+      loadPlotConfig,
+      loadConfigFromString,
+      resetConfig,
+      loadPlotConfigFromStrategy,
+      savePlotConfig,
+      showConfig,
+      addNewIndicator,
+      selIndicatorName,
+      usedColumns,
+      selSubPlot,
+      newSubplotName,
+      subplots,
+      plotConfigNameLoc,
+      selIndicator,
+      plotConfigJson,
+      tempPlotConfigValid,
+    };
+  },
+});
 </script>
 
 <style scoped>
@@ -358,6 +366,7 @@ export default class PlotConfigurator extends Vue {
 .form-group {
   margin-bottom: 0.5rem;
 }
+
 hr {
   margin-bottom: 0.5rem;
   margin-top: 0.5rem;