composition: navfooter

This commit is contained in:
Matthias 2022-04-15 19:46:49 +02:00
parent 2738d03363
commit 26abce01b5
2 changed files with 42 additions and 34 deletions

View File

@ -8,33 +8,36 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { BotState, PerformanceEntry } from '@/types';
import { formatPrice } from '@/shared/formatters'; import { formatPrice } from '@/shared/formatters';
import { BotStoreGetters } from '@/store/modules/ftbot'; import { BotStoreGetters } from '@/store/modules/ftbot';
import { defineComponent, computed } from '@vue/composition-api';
import { useNamespacedGetters } from 'vuex-composition-helpers';
import StoreModules from '@/store/storeSubModules'; import StoreModules from '@/store/storeSubModules';
const ftbot = namespace(StoreModules.ftbot); export default defineComponent({
name: 'Performance',
@Component({}) setup() {
export default class Performance extends Vue { const { performanceStats, botState } = useNamespacedGetters(StoreModules.ftbot, [
// TODO: Verify type of PerformanceStats! BotStoreGetters.performanceStats,
@ftbot.Getter [BotStoreGetters.performanceStats]!: PerformanceEntry[]; BotStoreGetters.botState,
]);
@ftbot.Getter [BotStoreGetters.botState]?: BotState; const tableFields = computed(() => {
return [
get tableFields() { { key: 'pair', label: 'Pair' },
return [ { key: 'profit', label: 'Profit %' },
{ key: 'pair', label: 'Pair' }, {
{ key: 'profit', label: 'Profit %' }, key: 'profit_abs',
{ label: `Profit ${botState.value?.stake_currency}`,
key: 'profit_abs', formatter: (v: number) => formatPrice(v, 5),
label: `Profit ${this.botState?.stake_currency}`, },
formatter: (v: number) => formatPrice(v, 5), { key: 'count', label: 'Count' },
}, ];
{ key: 'count', label: 'Count' }, });
]; return {
} performanceStats,
} botState,
tableFields,
};
},
});
</script> </script>

View File

@ -28,23 +28,28 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { BotStoreGetters } from '@/store/modules/ftbot'; import { BotStoreGetters } from '@/store/modules/ftbot';
import OpenTradesIcon from 'vue-material-design-icons/FolderOpen.vue'; import OpenTradesIcon from 'vue-material-design-icons/FolderOpen.vue';
import ClosedTradesIcon from 'vue-material-design-icons/FolderLock.vue'; import ClosedTradesIcon from 'vue-material-design-icons/FolderLock.vue';
import BalanceIcon from 'vue-material-design-icons/Bank.vue'; import BalanceIcon from 'vue-material-design-icons/Bank.vue';
import PairListIcon from 'vue-material-design-icons/ViewList.vue'; import PairListIcon from 'vue-material-design-icons/ViewList.vue';
import DashboardIcon from 'vue-material-design-icons/ViewDashboardOutline.vue'; import DashboardIcon from 'vue-material-design-icons/ViewDashboardOutline.vue';
import { defineComponent } from '@vue/composition-api';
import { useNamespacedGetters } from 'vuex-composition-helpers';
import StoreModules from '@/store/storeSubModules';
const ftbot = namespace('ftbot'); export default defineComponent({
name: 'NavFooter',
@Component({
components: { OpenTradesIcon, ClosedTradesIcon, BalanceIcon, PairListIcon, DashboardIcon }, components: { OpenTradesIcon, ClosedTradesIcon, BalanceIcon, PairListIcon, DashboardIcon },
}) setup() {
export default class NavFooter extends Vue { const { canRunBacktest } = useNamespacedGetters(StoreModules.ftbot, [
@ftbot.Getter [BotStoreGetters.canRunBacktest]!: boolean; BotStoreGetters.canRunBacktest,
} ]);
return {
canRunBacktest,
};
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>