frequi_origin/src/components/ftbot/TradeDetail.vue

132 lines
5.1 KiB
Vue
Raw Normal View History

2020-06-02 11:05:16 +00:00
<template>
2022-02-20 15:30:25 +00:00
<div class="container text-left">
<div class="row">
<div class="col-lg-5">
<h5 class="detail-header">General</h5>
2020-08-19 05:31:00 +00:00
<ValuePair description="TradeId">{{ trade.trade_id }}</ValuePair>
<ValuePair description="Pair">{{ trade.pair }}</ValuePair>
2022-02-01 06:02:38 +00:00
<ValuePair description="Stake"
>{{ formatPriceCurrency(trade.stake_amount, stakeCurrency) }}
{{ trade.leverage ? `(${trade.leverage}x)` : '' }}</ValuePair
>
2020-08-19 05:31:00 +00:00
<ValuePair description="Open date">{{ timestampms(trade.open_timestamp) }}</ValuePair>
<ValuePair v-if="trade.buy_tag" description="Buy tag">{{ trade.buy_tag }}</ValuePair>
<ValuePair description="Open Rate">{{ formatPrice(trade.open_rate) }}</ValuePair>
<ValuePair v-if="!trade.is_open && trade.close_rate" description="Close Rate">{{
formatPrice(trade.close_rate)
}}</ValuePair>
2022-02-20 15:30:25 +00:00
2020-08-31 15:43:44 +00:00
<ValuePair v-if="trade.close_timestamp" description="Close date">{{
2020-08-19 05:31:00 +00:00
timestampms(trade.close_timestamp)
}}</ValuePair>
<ValuePair
2021-05-25 04:42:56 +00:00
v-if="trade.profit_ratio && trade.profit_abs"
:description="`${trade.is_open ? 'Current Profit' : 'Close Profit'}`"
>
2021-12-30 08:49:40 +00:00
<trade-profit class="ml-2" :trade="trade" />
</ValuePair>
2022-02-20 15:30:25 +00:00
<details>
<summary>Details</summary>
<ValuePair v-if="trade.min_rate" description="Min Rate">{{
formatPrice(trade.min_rate)
}}</ValuePair>
<ValuePair v-if="trade.max_rate" description="Max Rate">{{
formatPrice(trade.max_rate)
}}</ValuePair>
<ValuePair description="Open-Fees">
{{ trade.fee_open_cost }} {{ trade.fee_open_currency }} ({{
formatPercent(trade.fee_open)
}})
</ValuePair>
<ValuePair v-if="trade.fee_close_cost && trade.fee_close" description="Fees close">
{{ trade.fee_close_cost }} {{ trade.fee_close_currency }} ({{
formatPercent(trade.fee_close)
}})
</ValuePair>
</details>
</div>
2021-12-30 09:00:03 +00:00
<div class="mt-2 mt-lg-0 col-lg-7">
<h5 class="detail-header">Stoploss</h5>
2020-08-19 05:31:00 +00:00
<ValuePair description="Stoploss">
{{ formatPercent(trade.stop_loss_pct / 100) }} |
2020-09-01 05:55:52 +00:00
{{ formatPrice(trade.stop_loss_abs) }}
2020-08-19 05:31:00 +00:00
</ValuePair>
<ValuePair
v-if="trade.initial_stop_loss_pct && trade.initial_stop_loss_abs"
description="Initial Stoploss"
>
2020-08-19 05:31:00 +00:00
{{ formatPercent(trade.initial_stop_loss_pct / 100) }} |
{{ formatPrice(trade.initial_stop_loss_abs) }}
2020-08-19 05:31:00 +00:00
</ValuePair>
<ValuePair
v-if="trade.is_open && trade.stoploss_current_dist_ratio && trade.stoploss_current_dist"
description="Current stoploss dist"
>
2020-08-19 05:31:00 +00:00
{{ formatPercent(trade.stoploss_current_dist_ratio) }} |
{{ formatPrice(trade.stoploss_current_dist) }}
</ValuePair>
<ValuePair v-if="trade.stoploss_last_update_timestamp" description="Stoploss last updated">
2020-08-19 05:31:00 +00:00
{{ timestampms(trade.stoploss_last_update_timestamp) }}
</ValuePair>
2022-02-01 06:02:38 +00:00
<div v-if="trade.trading_mode !== undefined && trade.trading_mode !== 'SPOT'">
<h5 class="detail-header">Futures/Margin</h5>
2022-02-27 14:18:23 +00:00
<ValuePair description="Direction">
{{ trade.is_short ? 'short' : 'long' }} - {{ trade.leverage }}x
</ValuePair>
2022-02-01 06:02:38 +00:00
<ValuePair v-if="trade.funding_fees !== undefined" description="Funding fees">
{{ formatPrice(trade.funding_fees) }}
</ValuePair>
<ValuePair v-if="trade.interest_rate !== undefined" description="Interest rate">
{{ formatPrice(trade.interest_rate) }}
</ValuePair>
</div>
<details v-if="trade.orders">
<summary>Orders</summary>
<div v-for="(order, key) in trade.orders" :key="key">
<span>
(#{{ key + 1 }}) <DateTimeTZ :date="order.order_timestamp" show-timezone />
<b class="ml-1">{{ order.ft_order_side }}</b> for
<b>{{ formatPrice(order.safe_price) }}</b> | {{ order.remaining }} /
{{ order.filled }}</span
>
</div>
</details>
</div>
</div>
2020-08-19 05:31:00 +00:00
</div>
2020-06-02 11:05:16 +00:00
</template>
2020-08-09 13:07:09 +00:00
<script lang="ts">
2020-08-29 15:44:08 +00:00
import { Component, Vue, Prop } from 'vue-property-decorator';
2021-12-30 08:42:24 +00:00
import { formatPercent, formatPriceCurrency, formatPrice, timestampms } from '@/shared/formatters';
2021-03-10 15:35:14 +00:00
import ValuePair from '@/components/general/ValuePair.vue';
2021-12-30 08:49:40 +00:00
import TradeProfit from '@/components/ftbot/TradeProfit.vue';
import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
2020-08-29 15:44:08 +00:00
import { Trade } from '@/types';
2020-06-02 11:05:16 +00:00
2020-08-29 15:44:08 +00:00
@Component({
components: { ValuePair, TradeProfit, DateTimeTZ },
2020-08-29 15:44:08 +00:00
})
export default class TradeDetail extends Vue {
@Prop({ type: Object, required: true }) trade!: Trade;
2021-12-30 08:42:24 +00:00
@Prop({ type: String, required: true }) stakeCurrency!: string;
2020-08-29 15:44:08 +00:00
timestampms = timestampms;
formatPercent = formatPercent;
formatPrice = formatPrice;
2021-12-30 08:42:24 +00:00
formatPriceCurrency = formatPriceCurrency;
2020-08-29 15:44:08 +00:00
}
2020-06-02 11:05:16 +00:00
</script>
2020-08-19 05:31:00 +00:00
<style scoped>
.detail-header {
border-bottom: 1px solid;
padding-bottom: 5px;
width: 100%;
display: block;
}
</style>