Extract history-load to separate component

This commit is contained in:
Matthias 2022-04-12 07:18:35 +02:00
parent bb21744232
commit bef7202554
2 changed files with 78 additions and 16 deletions

View File

@ -0,0 +1,61 @@
<template>
<div>
<button
class="btn btn-secondary float-right"
title="Refresh"
aria-label="Refresh"
@click="getBacktestHistory"
>
&#x21bb;
</button>
<p>
Load Historic results from disk. You can click on multiple results to load all of them into
freqUI.
</p>
<b-list-group v-if="backtestHistoryList" class="ml-2">
<b-list-group-item
v-for="(res, idx) in backtestHistoryList"
:key="idx"
class="d-flex justify-content-between align-items-center py-1 mb-1"
button
@click="getBacktestHistoryResult(res.filename)"
>
<strong>{{ res.strategy }}</strong>
backtested on: {{ timestampms(res.backtest_start_time * 1000) }}
<small>{{ res.filename }}</small>
</b-list-group-item>
</b-list-group>
</div>
</template>
<script>
import { defineComponent, onMounted } from '@vue/composition-api';
import StoreModules from '@/store/storeSubModules';
import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
import { timestampms } from '@/shared/formatters';
export default defineComponent({
setup() {
const { getBacktestHistory, getBacktestHistoryResult } = useNamespacedActions(
StoreModules.ftbot,
['getBacktestHistory', 'getBacktestHistoryResult'],
);
const { backtestHistoryList } = useNamespacedGetters(StoreModules.ftbot, [
'backtestHistoryList',
]);
onMounted(() => {
getBacktestHistory();
});
return {
getBacktestHistory,
getBacktestHistoryResult,
backtestHistoryList,
timestampms,
};
},
});
</script>
<style lang="scss" scoped></style>

View File

@ -9,6 +9,15 @@
class="col-12 col-lg-order-last col-lg-6 mx-md-5 d-flex flex-wrap justify-content-md-center justify-content-between mb-4"
:disabled="canRunBacktest"
>
<b-form-radio
v-model="btFormMode"
name="bt-form-radios"
button
class="mx-1 flex-samesize-items"
value="historicResults"
:disabled="!canRunBacktest"
>Load Results</b-form-radio
>
<b-form-radio
v-model="btFormMode"
name="bt-form-radios"
@ -75,17 +84,13 @@
</transition>
</div>
<!-- End Left bar -->
<div
v-if="btFormMode == 'historicResults'"
class="flex-fill row d-flex flex-column bt-config"
>
<backtest-history-load />
</div>
<div v-if="btFormMode == 'run'" class="flex-fill row d-flex flex-column bt-config">
<button class="btn btn-secondary" @click="getBacktestHistory">Get historic results</button>
<div v-if="backtestHistoryList">
<div v-for="(res, idx) in backtestHistoryList" :key="idx">
<button class="btn btn-secondary" @click="getBacktestHistoryResult(res.filename)">
{{ res.filename }} {{ res.strategy }}
</button>
</div>
</div>
<div class="mb-2">
<span>Strategy</span>
<StrategySelect v-model="strategy"></StrategySelect>
@ -308,6 +313,7 @@ import TradesLogChart from '@/components/charts/TradesLog.vue';
import PairSummary from '@/components/ftbot/PairSummary.vue';
import TimeframeSelect from '@/components/ftbot/TimeframeSelect.vue';
import TradeList from '@/components/ftbot/TradeList.vue';
import BacktestHistoryLoad from '@/components/ftbot/BacktestHistoryLoad.vue';
import {
BacktestPayload,
@ -317,7 +323,6 @@ import {
PairHistoryPayload,
PlotConfig,
StrategyBacktestResult,
BacktestHistoryEntry,
} from '@/types';
import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
@ -330,6 +335,7 @@ const ftbot = namespace(StoreModules.ftbot);
components: {
BacktestResultView,
BacktestResultSelect,
BacktestHistoryLoad,
TimeRangeSelect,
CandleChartContainer,
CumProfitChart,
@ -386,8 +392,6 @@ export default class Backtesting extends Vue {
@ftbot.Getter [BotStoreGetters.canRunBacktest]!: boolean;
@ftbot.Getter [BotStoreGetters.backtestHistoryList]!: BacktestHistoryEntry[];
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@ftbot.Action getPairHistory!: (payload: PairHistoryPayload) => void;
@ -404,9 +408,6 @@ export default class Backtesting extends Vue {
@ftbot.Action stopBacktest!: () => void;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@ftbot.Action getBacktestHistoryResult!: (filename: string) => void;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@ftbot.Action setBacktestResultKey!: (key: string) => void;