Add TradeProfit pill component

src/components/ftbot/PairSummary.vue

@@ -14,9 +14,7 @@
         {{ comb.pair }}
         <span v-if="comb.locks" :title="comb.lockReason"> &#128274; </span>
       </div>
-      <b-badge :variant="comb.profit > 0 ? 'success' : 'danger'" pill :title="comb.profitString">{{
+      <TradeProfit :trade="comb.trade" />
-        comb.profit ? formatPercent(comb.profit) : ''
-      }}</b-badge>
     </b-list-group-item>
   </b-list-group>
 </template>
@@ -27,6 +25,7 @@ import { BotStoreGetters } from '@/store/modules/ftbot';
 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';
 
 const ftbot = namespace('ftbot');
 
@@ -39,7 +38,7 @@ interface CombinedPairList {
   profit: number;
 }
 
-@Component({})
+@Component({ components: { TradeProfit } })
 export default class PairSummary extends Vue {
   @Prop({ required: true }) pairlist!: string[];
 

src/components/ftbot/ProfitSymbol.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script lang="ts">
+// TODO: evaluate if this is still used
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { Trade } from '@/types';
 

src/components/ftbot/TradeList.vue

@@ -33,7 +33,6 @@
         </b-button>
       </template>
       <template #cell(pair)="row">
-        <ProfitSymbol :trade="row.item" />
         <span>
           {{
             `${row.item.pair}${
@@ -43,10 +42,7 @@
         </span>
       </template>
       <template #cell(profit)="row">
-        {{ formatPercent(row.item.profit_ratio, 2) }}
+        <trade-profit :trade="row.item" />
-        <small :title="row.item.stake_currency || stakeCurrency">
-          {{ `(${formatPriceWithDecimals(row.item.profit_abs)})` }}
-        </small>
       </template>
       <template #cell(open_timestamp)="row">
         <DateTimeTZ :date="row.item.open_timestamp" />
@@ -87,11 +83,12 @@ import ForceSellIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
 import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 import { BotStoreGetters } from '@/store/modules/ftbot';
 import ProfitSymbol from './ProfitSymbol.vue';
+import TradeProfit from './TradeProfit.vue';
 
 const ftbot = namespace('ftbot');
 
 @Component({
-  components: { ProfitSymbol, DeleteIcon, ForceSellIcon, DateTimeTZ },
+  components: { ProfitSymbol, DeleteIcon, ForceSellIcon, DateTimeTZ, TradeProfit },
 })
 export default class TradeList extends Vue {
   $refs!: {

src/components/ftbot/TradeProfit.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="profit-pill px-2"
+    :class="trade.profit_ratio > 0 ? 'profit-pill-profit' : ''"
+    :title="profitDesc"
+  >
+    {{ formatPercent(trade.profit_ratio, 2) }}
+    <small :title="trade.stake_currency || stakeCurrency">
+      {{ `(${formatPrice(trade.profit_abs, 3)})` }}
+    </small>
+  </div>
+</template>
+
+<script lang="ts">
+import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
+import { Trade } from '@/types';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class TradeProfit extends Vue {
+  @Prop({ required: true, type: Object }) trade!: Trade;
+
+  formatPercent = formatPercent;
+
+  timestampms = timestampms;
+
+  formatPrice = formatPrice;
+
+  get profitDesc(): string {
+    let profit = `Current profit: ${formatPercent(this.trade.profit_ratio)} (${
+      this.trade.profit_abs
+    })`;
+    profit += `\nOpen since: ${timestampms(this.trade.open_timestamp)}`;
+    return profit;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.profit-pill {
+  background: #ef5350;
+  border-radius: 6px;
+}
+.profit-pill-profit {
+  background: #26a69a;
+}
+</style>