Update profit-chart to include all bots

src/components/charts/CumProfitChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart v-if="trades.length > 0" :option="chartOptions" autoresize :theme="getChartTheme" />
+  <v-chart v-if="trades" :option="chartOptions" autoresize :theme="getChartTheme" />
 </template>
 
 <script lang="ts">
@@ -53,24 +53,54 @@ export default class CumProfitChart extends Vue {
 
   @Getter getChartTheme!: string;
 
+  botList: string[] = [];
+
   get cumulativeData() {
+    this.botList = [];
     const res: CumProfitData[] = [];
+    const resD = {};
     const closedTrades = this.trades
       .slice()
       .sort((a, b) => (a.close_timestamp > b.close_timestamp ? 1 : -1));
     let profit = 0.0;
+
     for (let i = 0, len = closedTrades.length; i < len; i += 1) {
       const trade = closedTrades[i];
+
       if (trade.close_timestamp && trade[this.profitColumn]) {
         profit += trade[this.profitColumn];
-        res.push({ date: trade.close_timestamp, profit });
+        if (!resD[trade.close_timestamp]) {
+          // New timestamp
+          resD[trade.close_timestamp] = { profit, [trade.botId]: profit };
+        } else {
+          // Add to existing profit
+          resD[trade.close_timestamp].profit += profit;
+          if (resD[trade.close_timestamp][trade.botId]) {
+            resD[trade.close_timestamp][trade.botId] += profit;
+          } else {
+            resD[trade.close_timestamp][trade.botId] = profit;
           }
         }
-    return res;
+        res.push({ date: trade.close_timestamp, profit, [trade.botId]: profit });
+        if (!this.botList.includes(trade.botId)) {
+          this.botList.push(trade.botId);
+        }
+      }
+    }
+    // console.log(resD);
+
+    return Object.entries(resD).map(([k, v]) => {
+      const obj = { date: parseInt(k, 10), profit: v.profit };
+      // TODO: The below could allow "lines" per bot"
+      // this.botList.forEach((botId) => {
+      // obj[botId] = v[botId];
+      // });
+      return obj;
+    });
   }
 
   get chartOptions(): EChartsOption {
-    return {
+    const chartOptionsLoc: EChartsOption = {
       title: {
         text: 'Cumulative Profit',
         show: this.showTitle,
@@ -151,6 +181,24 @@ export default class CumProfitChart extends Vue {
         },
       ],
     };
+    // TODO: maybe have profit lines per bot?
+    // this.botList.forEach((botId: string) => {
+    //   console.log('bot', botId);
+    //   chartOptionsLoc.series.push({
+    //     type: 'line',
+    //     name: botId,
+    //     animation: true,
+    //     step: 'end',
+    //     lineStyle: {
+    //       color: this.getChartTheme === 'dark' ? '#c2c2c2' : 'black',
+    //     },
+    //     itemStyle: {
+    //       color: this.getChartTheme === 'dark' ? '#c2c2c2' : 'black',
+    //     },
+    //     // symbol: 'none',
+    //   });
+    // });
+    return chartOptionsLoc;
   }
 }
 </script>

src/store/modules/botStoreWrapper.ts

@@ -1,4 +1,4 @@
-import { BotDescriptor, BotDescriptors } from '@/types';
+import { BotDescriptor, BotDescriptors, Trade } from '@/types';
 import { AxiosInstance } from 'axios';
 import { BotStoreActions, BotStoreGetters, createBotSubStore } from './ftbot';
 
@@ -18,6 +18,7 @@ export enum MultiBotStoreGetters {
   selectedBotObj = 'selectedBotObj',
   allAvailableBots = 'allAvailableBots',
   allAvailableBotsList = 'allAvailableBotsList',
+  allTradesAllBots = 'allTradesAllBots',
   // Automatically created entries
   allIsBotOnline = 'allIsBotOnline',
   allAutoRefresh = 'allAutoRefresh',
@@ -76,6 +77,15 @@ export default function createBotStore(store) {
     [MultiBotStoreGetters.allAvailableBotsList](state: FTMultiBotState): string[] {
       return Object.keys(state.availableBots);
     },
+    [MultiBotStoreGetters.allTradesAllBots](state: FTMultiBotState, getters): Trade[] {
+      let resp: Trade[] = [];
+      getters.allAvailableBotsList.forEach((botId) => {
+        const trades = getters[`${botId}/${BotStoreGetters.trades}`].map((t) => ({ ...t, botId }));
+
+        resp = resp.concat(trades);
+      });
+      return resp;
+    },
   };
   // Autocreate getters from botStores
   Object.keys(BotStoreGetters).forEach((e) => {
@@ -160,7 +170,6 @@ export default function createBotStore(store) {
       commit('selectBot', botId);
     },
     allRefreshFrequent({ dispatch, getters }, slow: boolean) {
-      console.log('dispatching all frequent refreshes');
       getters.allAvailableBotsList.forEach((e) => {
         if (getters[`${e}/${BotStoreGetters.refreshNow}`]) {
           // console.log('refreshing', e);
@@ -169,7 +178,6 @@ export default function createBotStore(store) {
       });
     },
     allRefreshSlow({ dispatch, getters }) {
-      console.log('dispatching all slow refreshes');
       getters.allAvailableBotsList.forEach((e) => {
         if (getters[`${e}/${BotStoreGetters.refreshNow}`]) {
           dispatch(`${e}/${BotStoreActions.refreshSlow}`);

src/store/modules/ftbot/index.ts

@@ -325,7 +325,7 @@ export function createBotSubStore(botId: string) {
         state.tradeCount = tradesCount;
       },
       updateOpenTrades(state: FtbotStateType, trades) {
-        console.log(`Update open trade length ${trades.length}`);
+        // console.log(`Update open trade length ${trades.length}`);
         state.openTrades = trades;
       },
       updateLocks(state: FtbotStateType, locks: LockResponse) {

src/types/trades.ts

@@ -1,4 +1,9 @@
 export interface Trade {
+  /**
+   * BotId - only available on "all" methods.
+   * corresponds to the UI (ftbot.1) - does NOT relate to the backend
+   */
+  botId: string;
   trade_id: number;
   pair: string;
   is_open: boolean;

src/views/Dashboard.vue

@@ -101,7 +101,7 @@
       drag-allow-from=".drag-header"
     >
       <DraggableContainer header="Cumulative Profit">
-        <CumProfitChart :trades="closedTrades" :show-title="false" />
+        <CumProfitChart :trades="allTradesAllBots" :show-title="false" />
       </DraggableContainer>
     </GridItem>
     <GridItem
@@ -169,7 +169,7 @@ const layoutNs = namespace('layout');
 export default class Dashboard extends Vue {
   @ftbot.Getter closedTrades!: Trade[];
 
-  @ftbot.Getter [MultiBotStoreGetters.allClosedTrades]!: Record<string, ClosedTrade>;
+  @ftbot.Getter [MultiBotStoreGetters.allTradesAllBots]!: ClosedTrade[];
 
   @ftbot.Getter [BotStoreGetters.dailyStats]!: DailyReturnValue;