compositon: candleChartcontainer

src/components/charts/CandleChartContainer.vue

@@ -67,7 +67,7 @@
           :trades="trades"
           :plot-config="plotConfig"
           :heikin-ashi="heikinAshi"
-          :use-u-t-c="timezone === 'UTC'"
+          :use-u-t-c="settingsStore.timezone === 'UTC'"
           :theme="getChartTheme"
         >
         </CandleChart>
@@ -89,17 +89,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { Trade, PairHistory, EMPTY_PLOTCONFIG, PlotConfig } from '@/types';
-import { Getter, namespace } from 'vuex-class';
-import {
-  Trade,
-  PairHistory,
-  EMPTY_PLOTCONFIG,
-  PlotConfig,
-  PairCandlePayload,
-  PairHistoryPayload,
-  LoadingStatus,
-} from '@/types';
 import CandleChart from '@/components/charts/CandleChart.vue';
 import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
 import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
@@ -108,85 +98,69 @@ import vSelect from 'vue-select';
 import StoreModules from '@/store/storeSubModules';
 import { useSettingsStore } from '@/stores/settings';
 
-const ftbot = namespace(StoreModules.ftbot);
+import { defineComponent, ref, computed, watch, onMounted } from '@vue/composition-api';
-
+import { useGetters, useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
-@Component({ components: { CandleChart, PlotConfigurator, vSelect } })
-export default class CandleChartContainer extends Vue {
-  @Prop({ required: true }) readonly availablePairs!: string[];
-
-  @Prop({ required: true }) readonly timeframe!: string;
-
-  @Prop({ required: false, default: () => [] }) readonly trades!: Array<Trade>;
-
-  @Prop({ required: false, default: false }) historicView!: boolean;
-
-  @Prop({ required: false, default: true }) plotConfigModal!: boolean;
 
+export default defineComponent({
+  name: 'CandleChartContainer',
+  components: { CandleChart, PlotConfigurator, vSelect },
+  props: {
+    trades: { required: false, default: [], type: Array as () => Trade[] },
+    availablePairs: { required: true, type: Array as () => string[] },
+    timeframe: { required: true, type: String },
+    historicView: { required: false, default: false, type: Boolean },
+    plotConfigModal: { required: false, default: true, type: Boolean },
     /** Only required if historicView is true */
-  @Prop({ required: false, default: false }) timerange!: string;
+    timerange: { required: false, default: '', type: String },
+    /** Only required if historicView is true */
+    strategy: { required: false, default: '', type: String },
+  },
+  setup(props, { root }) {
+    const settingsStore = useSettingsStore();
+    const { getChartTheme } = useGetters(['getChartTheme']);
+    const {
+      availablePlotConfigNames,
+      candleDataStatus,
+      candleData,
+      historyStatus,
+      history,
+      selectedPair,
+    } = useNamespacedGetters(StoreModules.ftbot, [
+      BotStoreGetters.availablePlotConfigNames,
+      BotStoreGetters.candleDataStatus,
+      BotStoreGetters.candleData,
+      BotStoreGetters.historyStatus,
+      BotStoreGetters.history,
+      BotStoreGetters.selectedPair,
+    ]);
+    const { setPlotConfigName, getPairCandles, getPairHistory } = useNamespacedActions(
+      StoreModules.ftbot,
+      ['setPlotConfigName', 'getPairCandles', 'getPairHistory'],
+    );
+    const pair = ref('');
+    const plotConfig = ref<PlotConfig>({ ...EMPTY_PLOTCONFIG });
+    const plotConfigName = ref('');
+    const heikinAshi = ref(false);
+    const showPlotConfig = ref(props.plotConfigModal);
 
-  /**
+    const dataset = computed((): PairHistory => {
-   * Only required if historicView is true
+      if (props.historicView) {
-   */
+        return history.value[`${pair.value}__${props.timeframe}`];
-  @Prop({ required: false, default: false }) strategy!: string;
-
-  pair = '';
-
-  plotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG };
-
-  plotConfigName = '';
-
-  showPlotConfig = this.plotConfigModal;
-
-  heikinAshi: boolean = false;
-
-  @Getter getChartTheme!: string;
-
-  @ftbot.Getter [BotStoreGetters.availablePlotConfigNames]!: string[];
-
-  @ftbot.Action setPlotConfigName;
-
-  @ftbot.Getter [BotStoreGetters.candleDataStatus]!: LoadingStatus;
-
-  @ftbot.Getter [BotStoreGetters.candleData]!: PairHistory;
-
-  @ftbot.Getter [BotStoreGetters.historyStatus]!: LoadingStatus;
-
-  @ftbot.Getter [BotStoreGetters.history]!: PairHistory;
-
-  @ftbot.Getter [BotStoreGetters.selectedPair]!: string;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @ftbot.Action public getPairCandles!: (payload: PairCandlePayload) => void;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @ftbot.Action public getPairHistory!: (payload: PairHistoryPayload) => void;
-
-  get dataset(): PairHistory {
-    if (this.historicView) {
-      return this.history[`${this.pair}__${this.timeframe}`];
       }
-    return this.candleData[`${this.pair}__${this.timeframe}`];
+      return candleData.value[`${pair.value}__${props.timeframe}`];
+    });
+    const strategyName = computed(() => props.strategy || dataset.value?.strategy || '');
+    const datasetColumns = computed(() => (dataset.value ? dataset.value.columns : []));
+    const hasDataset = computed(() => !!dataset.value);
+    const isLoadingDataset = computed((): boolean => {
+      if (props.historicView) {
+        return historyStatus.value === 'loading';
       }
 
-  get strategyName() {
+      return candleDataStatus.value === 'loading';
-    return this.strategy || this.dataset?.strategy || '';
+    });
-  }
+    const noDatasetText = computed((): string => {
-
+      const status = props.historicView ? historyStatus.value : candleDataStatus.value;
-  get datasetColumns() {
-    return this.dataset ? this.dataset.columns : [];
-  }
-
-  get isLoadingDataset(): boolean {
-    if (this.historicView) {
-      return this.historyStatus === 'loading';
-    }
-
-    return this.candleDataStatus === 'loading';
-  }
-
-  get noDatasetText(): string {
-    const status = this.historicView ? this.historyStatus : this.candleDataStatus;
 
       switch (status) {
         case 'loading':
@@ -201,77 +175,91 @@ export default class CandleChartContainer extends Vue {
         default:
           return 'Unknown';
       }
-  }
-
-  get hasDataset(): boolean {
-    return !!this.dataset;
-  }
-
-  timezone: string = 'UTC';
-
-  mounted() {
-    const settingsStore = useSettingsStore();
-    this.timezone = settingsStore.timezone;
-    settingsStore.$subscribe((_, state) => {
-      this.timezone = state.timezone;
     });
 
-    if (this.selectedPair) {
+    const plotConfigChanged = () => {
-      this.pair = this.selectedPair;
-    } else if (this.availablePairs.length > 0) {
-      [this.pair] = this.availablePairs;
-    }
-    this.plotConfigName = getPlotConfigName();
-    this.plotConfig = getCustomPlotConfig(this.plotConfigName);
-
-    if (!this.hasDataset) {
-      this.refresh();
-    }
-  }
-
-  plotConfigChanged() {
       console.log('plotConfigChanged');
-    this.plotConfig = getCustomPlotConfig(this.plotConfigName);
+      plotConfig.value = getCustomPlotConfig(plotConfigName.value);
-    this.setPlotConfigName(this.plotConfigName);
+      setPlotConfigName(plotConfigName.value);
-  }
+    };
 
-  showConfigurator() {
+    const showConfigurator = () => {
-    if (this.plotConfigModal) {
+      if (props.plotConfigModal) {
-      this.$bvModal.show('plotConfiguratorModal');
+        root.$bvModal.show('plotConfiguratorModal');
       } else {
-      this.showPlotConfig = !this.showPlotConfig;
+        showPlotConfig.value = !showPlotConfig.value;
       }
-  }
+    };
-
+    const refresh = () => {
-  refresh() {
+      if (pair.value && props.timeframe) {
-    if (this.pair && this.timeframe) {
+        if (props.historicView) {
-      if (this.historicView) {
+          getPairHistory({
-        this.getPairHistory({
+            pair: pair.value,
-          pair: this.pair,
+            timeframe: props.timeframe,
-          timeframe: this.timeframe,
+            timerange: props.timerange,
-          timerange: this.timerange,
+            strategy: props.strategy,
-          strategy: this.strategy,
           });
         } else {
-        this.getPairCandles({ pair: this.pair, timeframe: this.timeframe, limit: 500 });
+          getPairCandles({ pair: pair.value, timeframe: props.timeframe, limit: 500 });
-      }
         }
       }
+    };
 
-  @Watch('availablePairs')
+    watch(props.availablePairs, () => {
-  watchAvailablePairs() {
+      if (!props.availablePairs.find((p) => p === pair.value)) {
-    if (!this.availablePairs.find((pair) => pair === this.pair)) {
+        [pair.value] = props.availablePairs;
-      [this.pair] = this.availablePairs;
+        refresh();
-      this.refresh();
-    }
       }
+    });
 
-  @Watch(BotStoreGetters.selectedPair)
+    watch(selectedPair, () => {
-  watchSelectedPair() {
+      pair.value = selectedPair.value;
-    this.pair = this.selectedPair;
+      refresh();
-    this.refresh();
+    });
+
+    onMounted(() => {
+      if (selectedPair.value) {
+        pair.value = selectedPair.value;
+      } else if (props.availablePairs.length > 0) {
+        [pair.value] = props.availablePairs;
       }
+      plotConfigName.value = getPlotConfigName();
+      plotConfig.value = getCustomPlotConfig(plotConfigName.value);
+
+      if (!hasDataset) {
+        refresh();
       }
+    });
+
+    return {
+      getChartTheme,
+      availablePlotConfigNames,
+      candleDataStatus,
+      candleData,
+      historyStatus,
+      history,
+      selectedPair,
+      setPlotConfigName,
+      getPairCandles,
+      getPairHistory,
+      dataset,
+      strategyName,
+      datasetColumns,
+      isLoadingDataset,
+      noDatasetText,
+      hasDataset,
+      settingsStore,
+      heikinAshi,
+      plotConfigChanged,
+      showPlotConfig,
+      showConfigurator,
+      refresh,
+      plotConfigName,
+      pair,
+      plotConfig,
+    };
+  },
+});
 </script>
 
 <style scoped lang="scss">