lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-11 02:33:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

pinia: Update some components to use botStore

Browse Source
This commit is contained in:
Matthias 2022-04-18 19:54:17 +02:00
parent f8d6bad055
commit 7bb2b0fe72
3 changed files with 79 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/ftbot/Balance.vue
View File

@ -2,7 +2,9 @@
<div> <div>
<div class="mb-2"> <div class="mb-2">
<label class="mr-auto h3">Balance</label> <label class="mr-auto h3">Balance</label>
<b-button class="float-right" size="sm" @click="getBalance">&#x21bb;</b-button> <b-button class="float-right" size="sm" @click="botStore.activeBot.getBalance"
>&#x21bb;</b-button
>
<b-form-checkbox <b-form-checkbox
v-model="hideSmallBalances" v-model="hideSmallBalances"
class="float-right" class="float-right"
@ -16,20 +18,20 @@
</div> </div>
<BalanceChart v-if="balanceCurrencies" :currencies="balanceCurrencies" /> <BalanceChart v-if="balanceCurrencies" :currencies="balanceCurrencies" />
<div> <div>
<p v-if="balance.note"> <p v-if="botStore.activeBot.balance.note">
<strong>{{ balance.note }}</strong> <strong>{{ botStore.activeBot.balance.note }}</strong>
</p> </p>
<b-table class="table-sm" :items="balanceCurrencies" :fields="tableFields"> <b-table class="table-sm" :items="balanceCurrencies" :fields="tableFields">
<template slot="bottom-row"> <template slot="bottom-row">
<td><strong>Total</strong></td> <td><strong>Total</strong></td>
<td> <td>
<span class="font-italic" title="Increase over initial capital">{{ <span class="font-italic" title="Increase over initial capital">{{
formatPercent(balance.starting_capital_ratio) formatPercent(botStore.activeBot.balance.starting_capital_ratio)
}}</span> }}</span>
</td> </td>
<!-- this is a computed prop that adds up all the expenses in the visible rows --> <!-- this is a computed prop that adds up all the expenses in the visible rows -->
<td> <td>
<strong>{{ formatCurrency(balance.total) }}</strong> <strong>{{ formatCurrency(botStore.activeBot.balance.total) }}</strong>
</td> </td>
</template> </template>
</b-table> </b-table>
@ -41,40 +43,40 @@
import HideIcon from 'vue-material-design-icons/EyeOff.vue'; import HideIcon from 'vue-material-design-icons/EyeOff.vue';
import ShowIcon from 'vue-material-design-icons/Eye.vue'; import ShowIcon from 'vue-material-design-icons/Eye.vue';
import BalanceChart from '@/components/charts/BalanceChart.vue'; import BalanceChart from '@/components/charts/BalanceChart.vue';
import { BotStoreGetters } from '@/store/modules/ftbot';
import StoreModules from '@/store/storeSubModules';
import { formatPercent } from '@/shared/formatters'; import { formatPercent } from '@/shared/formatters';
import { defineComponent, computed, ref } from '@vue/composition-api'; import { defineComponent, computed, ref } from '@vue/composition-api';
import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers'; import { useBotStore } from '@/stores/ftbotwrapper';
export default defineComponent({ export default defineComponent({
name: 'Balance', name: 'Balance',
components: { HideIcon, ShowIcon, BalanceChart }, components: { HideIcon, ShowIcon, BalanceChart },
setup() { setup() {
const { balance, stakeCurrencyDecimals } = useNamespacedGetters(StoreModules.ftbot, [ const botStore = useBotStore();
BotStoreGetters.balance,
BotStoreGetters.stakeCurrencyDecimals,
]);
const { getBalance } = useNamespacedActions(StoreModules.ftbot, ['getBalance']);
const hideSmallBalances = ref(true); const hideSmallBalances = ref(true);
const smallBalance = computed((): number => { const smallBalance = computed((): number => {
return Number((0.1 ** stakeCurrencyDecimals.value).toFixed(8)); return Number((0.1 ** botStore.activeBot.stakeCurrencyDecimals).toFixed(8));
}); });
const balanceCurrencies = computed(() => { const balanceCurrencies = computed(() => {
if (!hideSmallBalances.value) { if (!hideSmallBalances.value) {
return balance.value.currencies; return botStore.activeBot.balance.currencies;
} }
return balance.value?.currencies?.filter((v) => v.est_stake >= smallBalance.value); return botStore.activeBot.balance.currencies?.filter(
(v) => v.est_stake >= smallBalance.value,
);
}); });
const tableFields = computed(() => { const tableFields = computed(() => {
return [ return [
{ key: 'currency', label: 'Currency' }, { key: 'currency', label: 'Currency' },
{ key: 'free', label: 'Available', formatter: 'formatCurrency' }, { key: 'free', label: 'Available', formatter: 'formatCurrency' },
{ key: 'est_stake', label: `in ${balance.value.stake}`, formatter: 'formatCurrency' }, {
key: 'est_stake',
label: `in ${botStore.activeBot.balance.stake}`,
formatter: 'formatCurrency',
},
]; ];
}); });
@ -83,10 +85,8 @@ export default defineComponent({
}; };
return { return {
balance, botStore,
stakeCurrencyDecimals,
hideSmallBalances, hideSmallBalances,
getBalance,
formatPercent, formatPercent,
smallBalance, smallBalance,
balanceCurrencies, balanceCurrencies,

58
src/components/ftbot/BotStatus.vue
View File

@ -1,67 +1,71 @@
<template> <template>
<div v-if="botState"> <div v-if="botStore.activeBot.botState">
<p> <p>
Running Freqtrade <strong>{{ version }}</strong> Running Freqtrade <strong>{{ botStore.activeBot.version }}</strong>
</p> </p>
<p> <p>
Running with Running with
<strong> <strong>
{{ botState.max_open_trades }}x{{ botState.stake_amount }} {{ botState.stake_currency }} {{ botStore.activeBot.botState.max_open_trades }}x{{
botStore.activeBot.botState.stake_amount
}}
{{ botStore.activeBot.botState.stake_currency }}
</strong> </strong>
on on
<strong>{{ botState.exchange }}</strong> in <strong>{{ botStore.activeBot.botState.exchange }}</strong> in
<strong>{{ botState.trading_mode || 'spot' }}</strong> markets, with Strategy <strong>{{ botStore.activeBot.botState.trading_mode || 'spot' }}</strong> markets, with
<strong>{{ botState.strategy }}</strong> Strategy
<strong>{{ botStore.activeBot.botState.strategy }}</strong>
</p> </p>
<p> <p>
Currently <strong>{{ botState.state }}</strong Currently <strong>{{ botStore.activeBot.botState.state }}</strong
>, >,
<strong>force entry: {{ botState.force_entry_enable || botState.forcebuy_enabled }}</strong> <strong
>force entry:
{{ botStore.activeBot.botState.force_entry_enable || botState.forcebuy_enabled }}</strong
>
</p> </p>
<p> <p>
<strong>{{ botState.dry_run ? 'Dry-Run' : 'Live' }}</strong> <strong>{{ botStore.activeBot.botState.dry_run ? 'Dry-Run' : 'Live' }}</strong>
</p> </p>
<hr /> <hr />
<p> <p>
Avg Profit {{ formatPercent(profit.profit_all_ratio_mean) }} (&sum; Avg Profit {{ formatPercent(botStore.activeBot.profit.profit_all_ratio_mean) }} (&sum;
{{ formatPercent(profit.profit_all_ratio_sum) }}) in {{ profit.trade_count }} Trades, with an {{ formatPercent(botStore.activeBot.profit.profit_all_ratio_sum) }}) in
average duration of {{ profit.avg_duration }}. Best pair: {{ profit.best_pair }}. {{ botStore.activeBot.profit.trade_count }} Trades, with an average duration of
{{ botStore.activeBot.profit.avg_duration }}. Best pair:
{{ botStore.activeBot.profit.best_pair }}.
</p> </p>
<p v-if="profit.first_trade_timestamp"> <p v-if="botStore.activeBot.profit.first_trade_timestamp">
First trade opened: First trade opened:
<strong><DateTimeTZ :date="profit.first_trade_timestamp" show-timezone /></strong> <strong
><DateTimeTZ :date="botStore.activeBot.profit.first_trade_timestamp" show-timezone
/></strong>
<br /> <br />
Last trade opened: Last trade opened:
<strong><DateTimeTZ :date="profit.latest_trade_timestamp" show-timezone /></strong> <strong
><DateTimeTZ :date="botStore.activeBot.profit.latest_trade_timestamp" show-timezone
/></strong>
</p> </p>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { BotStoreGetters } from '@/store/modules/ftbot';
import { formatPercent } from '@/shared/formatters'; import { formatPercent } from '@/shared/formatters';
import DateTimeTZ from '@/components/general/DateTimeTZ.vue'; import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
import StoreModules from '@/store/storeSubModules';
import { defineComponent } from '@vue/composition-api'; import { defineComponent } from '@vue/composition-api';
import { useNamespacedGetters } from 'vuex-composition-helpers'; import { useBotStore } from '@/stores/ftbotwrapper';
export default defineComponent({ export default defineComponent({
name: 'BotStatus', name: 'BotStatus',
components: { DateTimeTZ }, components: { DateTimeTZ },
setup() { setup() {
const { version, profit, botState } = useNamespacedGetters(StoreModules.ftbot, [ const botStore = useBotStore();
BotStoreGetters.version,
BotStoreGetters.profit,
BotStoreGetters.botState,
]);
return { return {
version,
profit,
botState,
formatPercent, formatPercent,
botStore,
}; };
}, },
}); });

40
src/components/layout/NavFooter.vue
View File

@ -3,23 +3,43 @@
<!-- Only visible on xs (phone) viewport! --> <!-- Only visible on xs (phone) viewport! -->
<hr class="my-0" /> <hr class="my-0" />
<div class="d-flex flex-align-center justify-content-center"> <div class="d-flex flex-align-center justify-content-center">
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/open_trades"> <router-link
v-if="!botStore.activeBot.canRunBacktest"
class="nav-link navbar-nav"
to="/open_trades"
>
<OpenTradesIcon /> <OpenTradesIcon />
Trades Trades
</router-link> </router-link>
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/trade_history"> <router-link
v-if="!botStore.activeBot.canRunBacktest"
class="nav-link navbar-nav"
to="/trade_history"
>
<ClosedTradesIcon /> <ClosedTradesIcon />
History History
</router-link> </router-link>
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/pairlist"> <router-link
v-if="!botStore.activeBot.canRunBacktest"
class="nav-link navbar-nav"
to="/pairlist"
>
<PairListIcon /> <PairListIcon />
Pairlist Pairlist
</router-link> </router-link>
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/balance"> <router-link
v-if="!botStore.activeBot.canRunBacktest"
class="nav-link navbar-nav"
to="/balance"
>
<BalanceIcon /> <BalanceIcon />
Balance Balance
</router-link> </router-link>
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/dashboard"> <router-link
v-if="!botStore.activeBot.canRunBacktest"
class="nav-link navbar-nav"
to="/dashboard"
>
<DashboardIcon /> <DashboardIcon />
Dashboard Dashboard
</router-link> </router-link>
@ -28,25 +48,21 @@
</template> </template>
<script lang="ts"> <script lang="ts">
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 StoreModules from '@/store/storeSubModules';
import { defineComponent } from '@vue/composition-api'; import { defineComponent } from '@vue/composition-api';
import { useNamespacedGetters } from 'vuex-composition-helpers'; import { useBotStore } from '@/stores/ftbotwrapper';
export default defineComponent({ export default defineComponent({
name: 'NavFooter', name: 'NavFooter',
components: { OpenTradesIcon, ClosedTradesIcon, BalanceIcon, PairListIcon, DashboardIcon }, components: { OpenTradesIcon, ClosedTradesIcon, BalanceIcon, PairListIcon, DashboardIcon },
setup() { setup() {
const { canRunBacktest } = useNamespacedGetters(StoreModules.ftbot, [ const botStore = useBotStore();
BotStoreGetters.canRunBacktest,
]);
return { return {
canRunBacktest, botStore,
}; };
}, },
}); });