From 608bbde032ce7fca0df4239d8f7d9e9fceb1aea9 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Tue, 28 Feb 2023 21:01:20 +0100
Subject: [PATCH] Improve trade-profit visualization for alternative profits

---
 src/components/ftbot/TradeDetail.vue |  4 ++--
 src/components/ftbot/TradeProfit.vue | 28 ++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/ftbot/TradeDetail.vue b/src/components/ftbot/TradeDetail.vue
index b420b3e4..25eb26c4 100644
--- a/src/components/ftbot/TradeDetail.vue
+++ b/src/components/ftbot/TradeDetail.vue
@@ -25,10 +25,10 @@
           v-if="trade.is_open && trade.realized_profit && !trade.total_profit_abs"
           description="Realized Profit"
         >
-          {{ formatPriceCurrency(trade.realized_profit, stakeCurrency) }}
+          <trade-profit class="ms-2" :trade="trade" mode="realized" />
         </ValuePair>
         <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
           v-if="trade.profit_ratio && trade.profit_abs"
diff --git a/src/components/ftbot/TradeProfit.vue b/src/components/ftbot/TradeProfit.vue
index 719ec9e2..f7ccd897 100644
--- a/src/components/ftbot/TradeProfit.vue
+++ b/src/components/ftbot/TradeProfit.vue
@@ -12,11 +12,15 @@ import { formatPercent, timestampms } from '@/shared/formatters';
 import { Trade } from '@/types';
 import ProfitPill from '@/components/general/ProfitPill.vue';
 
-import { computed } from 'vue';
+import { computed, PropType } from 'vue';
 
 const props = defineProps({
   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 => {
   let profit = `Current profit: ${formatPercent(props.trade.profit_ratio)} (${
@@ -27,10 +31,26 @@ const profitDesc = computed((): string => {
 });
 
 const profitRatio = computed<number | undefined>(() => {
-  return props.trade.profit_ratio;
+  switch (props.mode) {
+    case 'default':
+      return props.trade.profit_ratio;
+    case 'total':
+      return undefined;
+    default:
+      return undefined;
+  }
 });
 const profitAbs = computed<number | undefined>(() => {
-  return props.trade.profit_abs;
+  switch (props.mode) {
+    case 'default':
+      return props.trade.profit_abs;
+    case 'total':
+      return props.trade.total_profit_abs;
+    case 'realized':
+      return props.trade.realized_profit;
+    default:
+      return undefined;
+  }
 });
 </script>