Improve ComparisonList

src/components/ftbot/BotComarisonList.vue

@@ -9,19 +9,35 @@
     :items="tableItems"
     :fields="tableFields"
   >
+    <template #cell(profitClosed)="row">
+      <profit-pill
+        v-if="row.item.profitClosed"
+        :profit-ratio="row.item.profitClosedRatio"
+        :profit-abs="row.item.profitClosed"
+        :stake-currency="row.item.stakeCurrency"
+      />
+    </template>
+    <template #cell(profitOpen)="row">
+      <profit-pill
+        v-if="row.item.profitClosed"
+        :profit-ratio="row.item.profitOpenRatio"
+        :profit-abs="row.item.profitOpen"
+        :stake-currency="row.item.stakeCurrency"
+      />
+    </template>
   </b-table>
 </template>
 
 <script lang="ts">
-import { formatPrice } from '@/shared/formatters';
 import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
 import { BotDescriptors, BotState, ProfitInterface } from '@/types';
 import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
+import ProfitPill from '@/components/general/ProfitPill.vue';
 
 const ftbot = namespace('ftbot');
 
-@Component({})
+@Component({ components: { ProfitPill } })
 export default class BotComparisonList extends Vue {
   @ftbot.Getter [MultiBotStoreGetters.allProfit]!: Record<string, ProfitInterface>;
 
@@ -33,44 +49,48 @@ export default class BotComparisonList extends Vue {
 
   get tableItems() {
     const val: any[] = [];
-    let closedSum = 0;
-    let openProfitSum = 0;
-    let decimals = 3;
+    const summary = {
+      botId: 'Summary',
+      profitClosed: 0,
+      profitClosedRatio: undefined,
+      profitOpen: 0,
+      profitOpenRatio: undefined,
+      stakeCurrency: 'USDT',
+      wins: 0,
+      losses: 0,
+      winVsLoss: '',
+    };
+
     Object.entries(this.allProfit).forEach(([k, v]) => {
       // TODO: handle one inactive bot ...
       val.push({
         botId: this.allAvailableBots[k].botName,
         trades: `${this.allOpenTradeCount[k]} / ${this.allBotState[k]?.max_open_trades}`,
-        profitClosed: `${
-          formatPrice(v.profit_closed_coin, this.allBotState[k]?.stake_currency_decimals) || 'N/A'
-        } `,
-        profitClosedPercent: `${v.profit_closed_percent_sum || 'N/A'}`,
-        profitOpenPercent: v.profit_all_percent_sum,
-        profitOpen: v.profit_all_coin,
+        profitClosed: v.profit_closed_coin,
+        profitClosedRatio: v.profit_closed_ratio_sum || 0,
+        stakeCurrency: this.allBotState[k]?.stake_currency || '',
+        profitOpenRatio: v.profit_all_ratio_sum - v.profit_closed_ratio_sum,
+        profitOpen: v.profit_all_coin - v.profit_closed_coin,
         winVsLoss: `${v.winning_trades || 'N/A'} / ${v.losing_trades || 'N/A'}`,
       });
       if (v.profit_closed_coin !== undefined) {
-        closedSum += v.profit_closed_coin;
-        openProfitSum += v.profit_all_coin;
-        decimals = this.allBotState[k]?.stake_currency_decimals || decimals;
+        summary.profitClosed += v.profit_closed_coin;
+        summary.profitOpen += v.profit_all_coin;
+        summary.wins += v.winning_trades;
+        summary.losses += v.losing_trades;
+        // summary.decimals = this.allBotState[k]?.stake_currency_decimals || summary.decimals;
       }
     });
-    val.push({
-      botId: 'Summary',
-      profitClosed: formatPrice(closedSum, decimals),
-      profitClosedPercent: '',
-      profitOpenPercent: '',
-      profitOpen: '',
-      winVsLoss: '',
-    });
+    summary.winVsLoss = `${summary.wins} / ${summary.losses}`;
+    val.push(summary);
     return val;
   }
 
   tableFields: Record<string, string | Function>[] = [
     { key: 'botId', label: 'Bot' },
     { key: 'trades', label: 'Trades' },
+    { key: 'profitOpen', label: 'Open Profit' },
     { key: 'profitClosed', label: 'Closed Profit' },
-    { key: 'profitClosedPercent', label: 'Closed Profit %' },
     { key: 'winVsLoss', label: 'W/L' },
   ];
 }