Fix profit pill in backtesting

src/components/ftbot/PairSummary.vue

@@ -14,7 +14,9 @@
         {{ comb.pair }}
         <span v-if="comb.locks" :title="comb.lockReason"> &#128274; </span>
       </div>
+
       <TradeProfit v-if="comb.trade" :trade="comb.trade" />
+      <ProfitPill :profit-ratio="comb.profit" />
     </b-list-group-item>
   </b-list-group>
 </template>
@@ -26,6 +28,7 @@ import { Lock, Trade } from '@/types';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import TradeProfit from '@/components/ftbot/TradeProfit.vue';
+import ProfitPill from '@/components/general/ProfitPill.vue';
 
 const ftbot = namespace('ftbot');
 
@@ -36,9 +39,10 @@ interface CombinedPairList {
   trade?: Trade;
   locks?: Lock;
   profit: number;
+  profitAbs: number;
 }
 
-@Component({ components: { TradeProfit } })
+@Component({ components: { TradeProfit, ProfitPill } })
 export default class PairSummary extends Vue {
   @Prop({ required: true }) pairlist!: string[];
 
@@ -75,18 +79,21 @@ export default class PairSummary extends Vue {
       }
       let profitString = '';
       let profit = 0;
+      let profitAbs = 0;
       trades.forEach((trade) => {
         profit += trade.profit_ratio;
+        profitAbs += trade.profit_abs;
       });
 
       const trade = trades.length === 1 ? trades[0] : undefined;
       if (trades.length > 0) {
         profitString = `Current profit: ${formatPercent(profit)}`;
+        console.log(`trades ${pair}`, trades);
       }
       if (trade) {
         profitString += `\nOpen since: ${timestampms(trade.open_timestamp)}`;
       }
-      comb.push({ pair, trade, locks, lockReason, profitString, profit });
+      comb.push({ pair, trade, locks, lockReason, profitString, profit, profitAbs });
     });
     if (this.sortMethod === 'profit') {
       comb.sort((a, b) => {

src/components/general/ProfitPill.vue

@@ -5,10 +5,13 @@
     :title="profitDesc"
   >
     {{ profitRatio !== undefined ? formatPercent(profitRatio, 2) : '' }}
-    <span class="ml-1" :class="profitRatio ? 'small' : ''" :title="stakeCurrency">
-      {{ profitRatio !== undefined ? '(' : '' }}{{ `${formatPrice(profitAbs, 3)}`
-      }}{{ profitRatio !== undefined ? ')' : ` ${stakeCurrency}` }}
-    </span>
+    <span
+      v-if="profitString"
+      class="ml-1"
+      :class="profitRatio ? 'small' : ''"
+      :title="stakeCurrency"
+      >{{ profitString }}</span
+    >
   </div>
 </template>
 
@@ -20,7 +23,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 export default class ProfitPill extends Vue {
   @Prop({ required: false, default: undefined, type: Number }) profitRatio?: number;
 
-  @Prop({ required: true, type: Number }) profitAbs!: number;
+  @Prop({ required: false, default: undefined, type: Number }) profitAbs?: number;
 
   @Prop({ required: true, type: String }) stakeCurrency!: string;
 
@@ -35,9 +38,16 @@ export default class ProfitPill extends Vue {
   get isProfitable() {
     return (
       (this.profitRatio !== undefined && this.profitRatio > 0) ||
-      (this.profitRatio === undefined && this.profitAbs > 0)
+      (this.profitRatio === undefined && this.profitAbs !== undefined && this.profitAbs > 0)
     );
   }
+
+  get profitString(): string {
+    if (this.profitRatio !== undefined && this.profitAbs !== undefined) {
+      return `(${formatPrice(this.profitAbs, 3)})`;
+    }
+    return '';
+  }
 }
 </script>