Improve trade-profit visualization for alternative profits

This commit is contained in:
Matthias 2023-02-28 21:01:20 +01:00
parent cb71d88af9
commit 608bbde032
2 changed files with 26 additions and 6 deletions

View File

@ -25,10 +25,10 @@
v-if="trade.is_open && trade.realized_profit && !trade.total_profit_abs" v-if="trade.is_open && trade.realized_profit && !trade.total_profit_abs"
description="Realized Profit" description="Realized Profit"
> >
{{ formatPriceCurrency(trade.realized_profit, stakeCurrency) }} <trade-profit class="ms-2" :trade="trade" mode="realized" />
</ValuePair> </ValuePair>
<ValuePair v-if="trade.is_open && trade.total_profit_abs" description="Total Profit"> <ValuePair v-if="trade.is_open && trade.total_profit_abs" description="Total Profit">
{{ formatPriceCurrency(trade.total_profit_abs, stakeCurrency) }} <trade-profit class="ms-2" :trade="trade" mode="total" />
</ValuePair> </ValuePair>
<ValuePair <ValuePair
v-if="trade.profit_ratio && trade.profit_abs" v-if="trade.profit_ratio && trade.profit_abs"

View File

@ -12,11 +12,15 @@ import { formatPercent, timestampms } from '@/shared/formatters';
import { Trade } from '@/types'; import { Trade } from '@/types';
import ProfitPill from '@/components/general/ProfitPill.vue'; import ProfitPill from '@/components/general/ProfitPill.vue';
import { computed } from 'vue'; import { computed, PropType } from 'vue';
const props = defineProps({ const props = defineProps({
trade: { required: true, type: Object as () => Trade }, trade: { required: true, type: Object as () => Trade },
mode: { required: false, default: 'default', type: String }, mode: {
required: false,
default: 'default',
type: String as PropType<'default' | 'total' | 'realized'>,
},
}); });
const profitDesc = computed((): string => { const profitDesc = computed((): string => {
let profit = `Current profit: ${formatPercent(props.trade.profit_ratio)} (${ let profit = `Current profit: ${formatPercent(props.trade.profit_ratio)} (${
@ -27,10 +31,26 @@ const profitDesc = computed((): string => {
}); });
const profitRatio = computed<number | undefined>(() => { const profitRatio = computed<number | undefined>(() => {
switch (props.mode) {
case 'default':
return props.trade.profit_ratio; return props.trade.profit_ratio;
case 'total':
return undefined;
default:
return undefined;
}
}); });
const profitAbs = computed<number | undefined>(() => { const profitAbs = computed<number | undefined>(() => {
switch (props.mode) {
case 'default':
return props.trade.profit_abs; return props.trade.profit_abs;
case 'total':
return props.trade.total_profit_abs;
case 'realized':
return props.trade.realized_profit;
default:
return undefined;
}
}); });
</script> </script>