Remove Hourlychart in favor of botcomparison

src/components/charts/HourlyChart.vue

@@ -52,6 +52,7 @@ const CHART_TRADE_COUNT = 'Trade Count';
   },
 })
 export default class HourlyChart extends Vue {
+  // TODO: This chart is not used at the moment!
   @Prop({ required: true }) trades!: Trade[];
 
   @Prop({ default: true, type: Boolean }) showTitle!: boolean;

src/store/modules/layout.ts

@@ -13,10 +13,10 @@ export enum TradeLayout {
 export enum DashboardLayout {
   KPI = 'g-kpi',
   dailyChart = 'g-dailyChart',
-  hourlyChart = 'g-hourlyChart',
+  botComparison = 'g-botComparison',
+  allOpenTrades = 'g-allOpenTrades',
   cumChartChart = 'g-cumChartChart',
   tradesLogChart = 'g-TradesLogChart',
-  allOpenTrades = 'g-allOpenTrades',
 }
 
 export enum LayoutGetters {
@@ -53,7 +53,7 @@ const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
 const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
   { i: DashboardLayout.KPI, x: 0, y: 0, w: 4, h: 6 },
   { i: DashboardLayout.dailyChart, x: 4, y: 0, w: 4, h: 6 },
-  { i: DashboardLayout.hourlyChart, x: 0, y: 6, w: 6, h: 4 } /* Bot Comparison */,
+  { i: DashboardLayout.botComparison, x: 0, y: 6, w: 6, h: 4 } /* Bot Comparison */,
   { i: DashboardLayout.allOpenTrades, x: 6, y: 6, w: 6, h: 4 },
   { i: DashboardLayout.cumChartChart, x: 8, y: 0, w: 4, h: 6 },
   { i: DashboardLayout.tradesLogChart, x: 0, y: 12, w: 12, h: 4 },
@@ -61,7 +61,7 @@ const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
 
 const DEFAULT_DASHBOARD_LAYOUT_SM: GridItemData[] = [
   { i: DashboardLayout.KPI, x: 0, y: 0, w: 12, h: 6 },
-  { i: DashboardLayout.hourlyChart, x: 0, y: 6, w: 12, h: 6 } /* Bot Comparison */,
+  { i: DashboardLayout.botComparison, x: 0, y: 6, w: 12, h: 6 } /* Bot Comparison */,
   { i: DashboardLayout.allOpenTrades, x: 0, y: 12, w: 12, h: 8 },
   { i: DashboardLayout.dailyChart, x: 0, y: 20, w: 12, h: 6 },
   { i: DashboardLayout.cumChartChart, x: 0, y: 26, w: 12, h: 6 },

src/views/Dashboard.vue

@@ -77,17 +77,31 @@
       </DraggableContainer>
     </GridItem>
     <GridItem
-      :i="gridLayoutHourly.i"
+      :i="gridLayoutBotComparison.i"
-      :x="gridLayoutHourly.x"
+      :x="gridLayoutBotComparison.x"
-      :y="gridLayoutHourly.y"
+      :y="gridLayoutBotComparison.y"
-      :w="gridLayoutHourly.w"
+      :w="gridLayoutBotComparison.w"
-      :h="gridLayoutHourly.h"
+      :h="gridLayoutBotComparison.h"
       :min-w="3"
       :min-h="4"
       drag-allow-from=".drag-header"
     >
-      <DraggableContainer header="Hourly Profit">
+      <DraggableContainer header="Bot comparison">
-        <HourlyChart :trades="closedTrades" :show-title="false" />
+        <bot-comparison-list />
+      </DraggableContainer>
+    </GridItem>
+    <GridItem
+      :i="gridLayoutAllOpenTrades.i"
+      :x="gridLayoutAllOpenTrades.x"
+      :y="gridLayoutAllOpenTrades.y"
+      :w="gridLayoutAllOpenTrades.w"
+      :h="gridLayoutAllOpenTrades.h"
+      :min-w="3"
+      :min-h="4"
+      drag-allow-from=".drag-header"
+    >
+      <DraggableContainer header="Open Trades">
+        <trade-list :active-trades="true" :trades="allOpenTradesAllBots" />
       </DraggableContainer>
     </GridItem>
     <GridItem
@@ -129,9 +143,10 @@ import { namespace } from 'vuex-class';
 import { GridLayout, GridItem, GridItemData } from 'vue-grid-layout';
 
 import DailyChart from '@/components/charts/DailyChart.vue';
-import HourlyChart from '@/components/charts/HourlyChart.vue';
 import CumProfitChart from '@/components/charts/CumProfitChart.vue';
 import TradesLogChart from '@/components/charts/TradesLog.vue';
+import BotComparisonList from '@/components/ftbot/BotComarisonList.vue';
+import TradeList from '@/components/ftbot/TradeList.vue';
 import DraggableContainer from '@/components/layout/DraggableContainer.vue';
 
 import {
@@ -160,15 +175,18 @@ const layoutNs = namespace('layout');
     GridLayout,
     GridItem,
     DailyChart,
-    HourlyChart,
     CumProfitChart,
     TradesLogChart,
+    BotComparisonList,
+    TradeList,
     DraggableContainer,
   },
 })
 export default class Dashboard extends Vue {
   @ftbot.Getter closedTrades!: Trade[];
 
+  @ftbot.Getter [MultiBotStoreGetters.allOpenTradesAllBots]!: Trade[];
+
   @ftbot.Getter [MultiBotStoreGetters.allTradesAllBots]!: ClosedTrade[];
 
   @ftbot.Getter [BotStoreGetters.dailyStats]!: DailyReturnValue;
@@ -246,8 +264,12 @@ export default class Dashboard extends Vue {
     return findGridLayout(this.gridLayout, DashboardLayout.dailyChart);
   }
 
-  get gridLayoutHourly(): GridItemData {
+  get gridLayoutBotComparison(): GridItemData {
-    return findGridLayout(this.gridLayout, DashboardLayout.hourlyChart);
+    return findGridLayout(this.gridLayout, DashboardLayout.botComparison);
+  }
+
+  get gridLayoutAllOpenTrades(): GridItemData {
+    return findGridLayout(this.gridLayout, DashboardLayout.allOpenTrades);
   }
 
   get gridLayoutCumChart(): GridItemData {