Extrat backtestResultSelect

This commit is contained in:
Matthias 2021-01-20 07:55:56 +01:00
parent cf67f8bb09
commit fbb3ce2bdd
2 changed files with 49 additions and 16 deletions

View File

@ -0,0 +1,39 @@
<template>
<div class="container d-flex align-items-center">
<label>Available results: </label>
<b-list-group class="ml-2">
<b-list-group-item
v-for="[key, strat] in Object.entries(backtestHistory)"
:key="key"
button
:active="key === selectedBacktestResultKey"
class="d-flex justify-content-between align-items-center py-1"
@click="setBacktestResult(key)"
>
{{ key }} {{ strat.total_trades }} {{ formatPercent(strat.profit_total) }}
</b-list-group-item>
</b-list-group>
</div>
</template>
<script lang="ts">
import { formatPercent } from '@/shared/formatters';
import { StrategyBacktestResult } from '@/types';
import { Component, Emit, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class Template extends Vue {
@Prop({ required: true }) backtestHistory!: StrategyBacktestResult[];
@Prop({ required: false, default: '' }) selectedBacktestResultKey!: string;
@Emit('selectionChange')
setBacktestResult(key) {
return key;
}
formatPercent = formatPercent;
}
</script>
<style scoped></style>

View File

@ -144,21 +144,11 @@
</div>
</div>
<div v-if="hasBacktestResult && btFormMode == 'results'" class="text-center w-100 mt-2">
<div class="container d-flex align-items-center">
<label>Available results: </label>
<b-list-group class="ml-2">
<b-list-group-item
v-for="[key, strat] in Object.entries(backtestHistory)"
:key="key"
button
:active="key === selectedBacktestResultKey"
class="d-flex justify-content-between align-items-center py-1"
@click="setBacktestResult(key)"
>
{{ key }} {{ strat.total_trades }} {{ formatPercent(strat.profit_total) }}
</b-list-group-item>
</b-list-group>
</div>
<BacktestResultSelect
:backtest-history="backtestHistory"
:selected-backtest-result-key="selectedBacktestResultKey"
@selectionChange="setBacktestResult"
/>
<BacktestResultView :strategy="strategy" :backtest-result="selectedBacktestResult" />
</div>
<div
@ -177,7 +167,9 @@
v-if="hasBacktestResult && btFormMode == 'visualize'"
class="container-fluid row text-center w-100 mt-2"
>
<p>Graph will always show the latest values for the selected strategy.</p>
<p>
Graph will always show the latest values for the selected strategy. Strategy: {{ strategy }}
</p>
<div class="container-fluid row text-center">
<PairSummary
class="col-md-2"
@ -206,6 +198,7 @@ import { Component, Vue, Watch } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
import BacktestResultView from '@/components/ftbot/BacktestResultView.vue';
import BacktestResultSelect from '@/components/ftbot/BacktestResultSelect.vue';
import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
import StrategyList from '@/components/ftbot/StrategyList.vue';
import ValuePair from '@/components/ftbot/ValuePair.vue';
@ -229,6 +222,7 @@ const ftbot = namespace('ftbot');
@Component({
components: {
BacktestResultView,
BacktestResultSelect,
TimeRangeSelect,
CandleChartContainer,
CumProfitChart,