From fdfeed35af7a310cdd731b728c698f6aa7c0f5ae Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 17 Apr 2022 10:01:15 +0200
Subject: [PATCH] composition: DailyStats

---
 src/components/ftbot/DailyStats.vue | 32 ++++++++++++++++-------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/ftbot/DailyStats.vue b/src/components/ftbot/DailyStats.vue
index 8803a08a..d8fd9864 100644
--- a/src/components/ftbot/DailyStats.vue
+++ b/src/components/ftbot/DailyStats.vue
@@ -14,38 +14,42 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { mapActions, mapGetters } from 'vuex';
+import { defineComponent, computed, onMounted } from '@vue/composition-api';
 import DailyChart from '@/components/charts/DailyChart.vue';
 import { formatPrice } from '@/shared/formatters';
 import { BotStoreGetters } from '@/store/modules/ftbot';
 import StoreModules from '@/store/storeSubModules';
+import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'DailyStats',
   components: {
     DailyChart,
   },
-  computed: {
-    ...mapGetters(StoreModules.ftbot, [BotStoreGetters.dailyStats]),
-    dailyFields() {
+  setup() {
+    const { dailyStats } = useNamespacedGetters(StoreModules.ftbot, [BotStoreGetters.dailyStats]);
+    const { getDaily } = useNamespacedActions(StoreModules.ftbot, ['getDaily']);
+    const dailyFields = computed(() => {
       return [
         { key: 'date', label: 'Day' },
         { key: 'abs_profit', label: 'Profit', formatter: (value) => formatPrice(value) },
         {
           key: 'fiat_value',
-          label: `In ${this.dailyStats.fiat_display_currency}`,
+          label: `In ${dailyStats.value.fiat_display_currency}`,
           formatter: (value) => formatPrice(value, 2),
         },
         { key: 'trade_count', label: 'Trades' },
       ];
-    },
-  },
-  mounted() {
-    this.getDaily();
-  },
-  methods: {
-    ...mapActions(StoreModules.ftbot, ['getDaily']),
+    });
+    onMounted(() => {
+      getDaily();
+    });
+
+    return {
+      getDaily,
+      dailyFields,
+      dailyStats,
+    };
   },
 });
 </script>