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

Improve backtest layout

Browse Source
This commit is contained in:
Matthias 2021-07-04 19:57:19 +02:00
parent 466f809425
commit 551e684315
2 changed files with 43 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,86 +1,45 @@
<template> <template>
<div class="container-fluid px-0"> <div class="container-fluid px-0 backtestresult-container">
<div class="row d-flex justify-content-center"> <div class="row d-flex justify-content-center">
<h3>Backtest-result for {{ backtestResult.strategy_name }}</h3> <h3>Backtest-result for {{ backtestResult.strategy_name }}</h3>
</div> </div>
<div class="row text-left">
<div class="col-md-6">
<b-card header="Strategy settings">
<!-- <ValuePair description="Backtesting from">{{
timestampms(backtestResult.backtest_start_ts)
}}</ValuePair>
<ValuePair description="Backtesting to">{{
timestampms(backtestResult.backtest_end_ts)
}}</ValuePair>
<ValuePair description="Max open trades">{{ backtestResult.max_open_trades }}</ValuePair>
<ValuePair description="Timeframe">{{ backtestResult.timeframe }} </ValuePair>
<ValuePair description="Timerange">{{ backtestResult.timerange }} </ValuePair>
<ValuePair description="Stoploss">{{
formatPercent(backtestResult.stoploss, 2)
}}</ValuePair>
<ValuePair description="Trailing Stoploss">{{ backtestResult.trailing_stop }} </ValuePair>
<ValuePair description="Trail only when offset is reached">{{
backtestResult.trailing_only_offset_is_reached
}}</ValuePair>
<ValuePair description="Trailing Stop positive" <div class="row text-left ml-0">
>{{ backtestResult.trailing_stop_positive }} <div class="row w-100">
</ValuePair> <div class="col-12 col-xl-6 px-0 px-xl-0 pr-xl-1">
<ValuePair description="Trailing stop positive offset">{{ <b-card header="Strategy settings">
backtestResult.trailing_stop_positive_offset <b-table
}}</ValuePair> small
<ValuePair description="Custom Stoploss">{{ borderless
backtestResult.use_custom_stoploss :items="backtestResultSettings"
}}</ValuePair> :fields="backtestsettingFields"
<ValuePair description="ROI">{{ backtestResult.minimal_roi }} </ValuePair> >
<ValuePair description="Use Sell Signal">{{ backtestResult.use_sell_signal }} </ValuePair> </b-table>
<ValuePair description="Sell profit only">{{ </b-card>
backtestResult.sell_profit_only </div>
}}</ValuePair> <div class="col-12 col-xl-6 px-0 px-xl-0 pt-2 pt-xl-0 pl-xl-1">
<ValuePair description="Sell profit offset">{{ <b-card header="Metrics">
backtestResult.sell_profit_offset <b-table small borderless :items="backtestResultStats" :fields="backtestResultFields">
}}</ValuePair> </b-table>
<ValuePair description="Enable protections">{{ </b-card>
backtestResult.enable_protections </div>
}}</ValuePair>
<ValuePair description="Starting balance">{{
formatPriceStake(backtestResult.starting_balance)
}}</ValuePair>
<ValuePair description="Final balance">{{
formatPriceStake(backtestResult.final_balance)
}}</ValuePair>
<ValuePair description="Avg. stake amount">{{
formatPriceStake(backtestResult.avg_stake_amount)
}}</ValuePair>
<ValuePair description="Total trade volume">{{
formatPriceStake(backtestResult.total_volume)
}}</ValuePair> -->
<b-table small borderless :items="backtestResultSettings" :fields="backtestsettingFields">
</b-table>
</b-card>
</div> </div>
<div class="col-md-6"> <b-card header="Results per Sell-reason" class="row mt-2 w-100">
<b-card header="Metrics">
<b-table small borderless :items="backtestResultStats" :fields="backtestResultFields">
</b-table>
</b-card>
</div>
<b-card header="Results per Sell-reason" class="mt-2">
<b-table small hover :items="backtestResult.sell_reason_summary" :fields="perSellReason"> <b-table small hover :items="backtestResult.sell_reason_summary" :fields="perSellReason">
</b-table> </b-table>
</b-card> </b-card>
<b-card header="Results per pair" class="mt-2"> <b-card header="Results per pair" class="row mt-2 w-100">
<b-table small hover :items="backtestResult.results_per_pair" :fields="perPairFields"> <b-table small hover :items="backtestResult.results_per_pair" :fields="perPairFields">
</b-table> </b-table>
</b-card> </b-card>
<TradeList <b-card header="Single trades" class="row mt-2 w-100">
class="trade-history mt-2" <TradeList
:trades="backtestResult.trades" class="row trade-history mt-2 w-100"
profit-column="profit_percent" :trades="backtestResult.trades"
/> profit-column="profit_percent"
/>
</b-card>
</div> </div>
</div> </div>
</template> </template>
@ -340,4 +299,10 @@ export default class BacktestResultView extends Vue {
} }
</script> </script>
<style></style> <style lang="scss" scoped>
.backtestresult-container {
@media (min-width: 1200px) {
max-width: 1200px;
}
}
</style>

10
src/views/Backtesting.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<div class="container-fluid" style="max-height: calc(100vh - 60px)">
<div class="container-fluid"> <div class="container-fluid">
<div class="row mb-2"></div> <div class="row mb-2"></div>
<p v-if="!canRunBacktest">Bot must be in webserver mode to enable Backtesting.</p> <p v-if="!canRunBacktest">Bot must be in webserver mode to enable Backtesting.</p>
@ -246,7 +247,8 @@
</p> </p>
<div class="row text-center"> <div class="row text-center">
<PairSummary <PairSummary
class="col-md-2 overflow-auto vh-100" class="col-md-2 overflow-auto"
style="max-height: calc(100vh - 200px)"
:pairlist="selectedBacktestResult.pairlist" :pairlist="selectedBacktestResult.pairlist"
:trades="selectedBacktestResult.trades" :trades="selectedBacktestResult.trades"
sort-method="profit" sort-method="profit"
@ -259,7 +261,7 @@
:timerange="timerange" :timerange="timerange"
:strategy="strategy" :strategy="strategy"
:trades="selectedBacktestResult.trades" :trades="selectedBacktestResult.trades"
class="col-md-10 candle-chart-container px-0 w-100" class="col-md-10 candle-chart-container px-0 w-100 h-100"
> >
</CandleChartContainer> </CandleChartContainer>
</div> </div>
@ -445,7 +447,9 @@ export default class Backtesting extends Vue {
<style lang="scss" scoped> <style lang="scss" scoped>
.candle-chart-container { .candle-chart-container {
height: 640px !important; // TODO: Rough estimate - still to fix correctly
// Applies to all "calc" usages in this file.
height: calc(100vh - 250px) !important;
} }
.cum-profit { .cum-profit {