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

View File

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