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

Improve backtesting layout

Browse Source
This commit is contained in:
Matthias 2021-03-10 16:34:09 +01:00
parent 2f11851600
commit 8b9e5d93a1
2 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/ftbot/BacktestResultView.vue
View File

@ -1,26 +1,32 @@
<template> <template>
<div class="container"> <div class="container-fluid">
<div> <div>
<h3>Backtest-result for {{ backtestResult.strategy_name }}</h3> <h3>Backtest-result for {{ backtestResult.strategy_name }}</h3>
</div> </div>
<div class="container"> <div class="container-fluid row text-left">
<div class="row"> <div class="col-md-6">
<div class="col-md-6"> <b-card header="Strategy settings">
<b-card header="Strategy settings"> <ValuePair description="Backtesting from">{{
<b-table timestampmsUTC(backtestResult.backtest_start_ts)
class="table-sm" }}</ValuePair>
:items="backtestResultSettings" <ValuePair description="Backtesting to">{{
:fields="backtestsettingFields" timestampmsUTC(backtestResult.backtest_end_ts)
> }}</ValuePair>
</b-table>
</b-card> <b-table
</div> class="table-sm"
<div class="col-md-6"> borderless
<b-card header="Metrics"> :items="backtestResultSettings"
<b-table class="table-sm" :items="backtestResultStats" :fields="backtestResultFields"> :fields="backtestsettingFields"
</b-table> >
</b-card> </b-table>
</div> </b-card>
</div>
<div class="col-md-6">
<b-card header="Metrics">
<b-table class="table-sm" :items="backtestResultStats" :fields="backtestResultFields">
</b-table>
</b-card>
</div> </div>
<b-card header="Results per Sell-reason" class="mt-2"> <b-card header="Results per Sell-reason" class="mt-2">
@ -50,6 +56,8 @@ import TradeList from '@/components/ftbot/TradeList.vue';
import { Component, Vue, Prop } from 'vue-property-decorator'; import { Component, Vue, Prop } from 'vue-property-decorator';
import { StrategyBacktestResult, Trade } from '@/types'; import { StrategyBacktestResult, Trade } from '@/types';
import ValuePair from '@/components/general/ValuePair.vue';
import { import {
timestampms, timestampms,
formatPercent, formatPercent,
@ -58,7 +66,10 @@ import {
} from '@/shared/formatters'; } from '@/shared/formatters';
@Component({ @Component({
components: { TradeList }, components: {
TradeList,
ValuePair,
},
}) })
export default class BacktestResultView extends Vue { export default class BacktestResultView extends Vue {
@Prop({ required: true }) readonly backtestResult!: StrategyBacktestResult; @Prop({ required: true }) readonly backtestResult!: StrategyBacktestResult;
@ -174,6 +185,8 @@ export default class BacktestResultView extends Vue {
]; ];
} }
timestampmsUTC = timestampmsUTC;
get backtestResultSettings() { get backtestResultSettings() {
// Transpose Result into readable format // Transpose Result into readable format
return [ return [

6
src/views/Backtesting.vue
View File

@ -167,14 +167,14 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="hasBacktestResult && btFormMode == 'results'" class="text-center w-100 mt-2 row"> <div v-if="hasBacktestResult && btFormMode == 'results'" class="w-100 mt-2 row">
<BacktestResultSelect <BacktestResultSelect
:backtest-history="backtestHistory" :backtest-history="backtestHistory"
:selected-backtest-result-key="selectedBacktestResultKey" :selected-backtest-result-key="selectedBacktestResultKey"
class="col-3 align-self-start sticky-top" class="col-3 align-self-start sticky-top"
@selectionChange="setBacktestResult" @selectionChange="setBacktestResult"
/> />
<BacktestResultView :backtest-result="selectedBacktestResult" class="col-8" /> <BacktestResultView :backtest-result="selectedBacktestResult" class="col-9" />
</div> </div>
<div <div
v-if="hasBacktestResult && btFormMode == 'visualize-summary'" v-if="hasBacktestResult && btFormMode == 'visualize-summary'"
@ -226,7 +226,7 @@ import BacktestResultView from '@/components/ftbot/BacktestResultView.vue';
import BacktestResultSelect from '@/components/ftbot/BacktestResultSelect.vue'; import BacktestResultSelect from '@/components/ftbot/BacktestResultSelect.vue';
import CandleChartContainer from '@/components/charts/CandleChartContainer.vue'; import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
import StrategyList from '@/components/ftbot/StrategyList.vue'; import StrategyList from '@/components/ftbot/StrategyList.vue';
import ValuePair from '@/components/ftbot/ValuePair.vue'; import ValuePair from '@/components/general/ValuePair.vue';
import CumProfitChart from '@/components/charts/CumProfitChart.vue'; import CumProfitChart from '@/components/charts/CumProfitChart.vue';
import TradesLogChart from '@/components/charts/TradesLog.vue'; import TradesLogChart from '@/components/charts/TradesLog.vue';
import PairSummary from '@/components/ftbot/PairSummary.vue'; import PairSummary from '@/components/ftbot/PairSummary.vue';