lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-09-21 01:51:09 +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>
<div class="container-fluid px-0">
<div class="container-fluid px-0 backtestresult-container">
<div class="row d-flex justify-content-center">
<h3>Backtest-result for {{ backtestResult.strategy_name }}</h3>
</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"
>{{ backtestResult.trailing_stop_positive }}
</ValuePair>
<ValuePair description="Trailing stop positive offset">{{
backtestResult.trailing_stop_positive_offset
}}</ValuePair>
<ValuePair description="Custom Stoploss">{{
backtestResult.use_custom_stoploss
}}</ValuePair>
<ValuePair description="ROI">{{ backtestResult.minimal_roi }} </ValuePair>
<ValuePair description="Use Sell Signal">{{ backtestResult.use_sell_signal }} </ValuePair>
<ValuePair description="Sell profit only">{{
backtestResult.sell_profit_only
}}</ValuePair>
<ValuePair description="Sell profit offset">{{
backtestResult.sell_profit_offset
}}</ValuePair>
<ValuePair description="Enable protections">{{
backtestResult.enable_protections
}}</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 class="row text-left ml-0">
<div class="row w-100">
<div class="col-12 col-xl-6 px-0 px-xl-0 pr-xl-1">
<b-card header="Strategy settings">
<b-table
small
borderless
:items="backtestResultSettings"
:fields="backtestsettingFields"
>
</b-table>
</b-card>
</div>
<div class="col-12 col-xl-6 px-0 px-xl-0 pt-2 pt-xl-0 pl-xl-1">
<b-card header="Metrics">
<b-table small borderless :items="backtestResultStats" :fields="backtestResultFields">
</b-table>
</b-card>
</div>
</div>
<div class="col-md-6">
<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-card header="Results per Sell-reason" class="row mt-2 w-100">
<b-table small hover :items="backtestResult.sell_reason_summary" :fields="perSellReason">
</b-table>
</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>
</b-card>
<TradeList
class="trade-history mt-2"
:trades="backtestResult.trades"
profit-column="profit_percent"
/>
<b-card header="Single trades" class="row mt-2 w-100">
<TradeList
class="row trade-history mt-2 w-100"
:trades="backtestResult.trades"
profit-column="profit_percent"
/>
</b-card>
</div>
</div>
</template>
@ -340,4 +299,10 @@ export default class BacktestResultView extends Vue {
}
</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>
<div class="container-fluid" style="max-height: calc(100vh - 60px)">
<div class="container-fluid">
<div class="row mb-2"></div>
<p v-if="!canRunBacktest">Bot must be in webserver mode to enable Backtesting.</p>
@ -246,7 +247,8 @@
</p>
<div class="row text-center">
<PairSummary
class="col-md-2 overflow-auto vh-100"
class="col-md-2 overflow-auto"
style="max-height: calc(100vh - 200px)"
:pairlist="selectedBacktestResult.pairlist"
:trades="selectedBacktestResult.trades"
sort-method="profit"
@ -259,7 +261,7 @@
:timerange="timerange"
:strategy="strategy"
: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>
</div>
@ -445,7 +447,9 @@ export default class Backtesting extends Vue {
<style lang="scss" scoped>
.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 {