Add chartView to trading view

src/components/charts/CandleChart.vue

@@ -504,7 +504,7 @@ export default class CandleChart extends Vue {
 }
 .echarts {
   width: 100%;
-  min-height: 820px;
+  min-height: 200px;
   /* TODO: height calculation is not working correctly - uses min-height for now */
   /* height: 600px; */
   height: 100%;

src/components/charts/CandleChartContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid flex-column align-items-stretch d-flex">
+  <div class="container-fluid flex-column align-items-stretch d-flex h-100">
     <b-modal
       id="plotConfiguratorModal"
       title="Plot Configurator"
@@ -34,7 +34,7 @@
         <b-button size="sm" title="Plot configurator" @click="showConfigurator">&#9881;</b-button>
       </div>
     </div>
-    <div class="row mr-1 ml-1">
+    <div class="row mr-1 ml-1 h-100">
       <CandleChart
         :dataset="dataset"
         :trades="trades"

src/store/modules/ftbot.ts

@@ -28,8 +28,10 @@ export enum BotStoreGetters {
   openTrades = 'openTrades',
   tradeDetail = 'tradeDetail',
   closedTrades = 'closedTrades',
+  allTrades = 'allTrades',
   plotConfig = 'plotConfig',
   plotConfigNames = 'plotConfigNames',
+  timeframe = 'timeframe',
 }
 
 export default {
@@ -68,6 +70,9 @@ export default {
     [BotStoreGetters.openTrades](state) {
       return state.openTrades;
     },
+    [BotStoreGetters.allTrades](state) {
+      return [...state.openTrades, ...state.trades];
+    },
     [BotStoreGetters.tradeDetail](state) {
       let dTrade = state.openTrades.find((item) => item.trade_id === state.detailTradeId);
       if (!dTrade) {
@@ -78,6 +83,9 @@ export default {
     [BotStoreGetters.closedTrades](state) {
       return state.trades.filter((item) => !item.is_open);
     },
+    [BotStoreGetters.timeframe](state) {
+      return state.botState?.timeframe;
+    },
   },
   mutations: {
     updateTrades(state, trades) {

src/store/modules/layout.ts

@@ -7,6 +7,7 @@ export enum TradeLayout {
   tradeHistory = 'g-tradeHistory',
   tradeDetail = 'g-tradeDetail',
   logView = 'g-logView',
+  chartView = 'g-chartView',
 }
 
 export enum DashboardLayout {
@@ -20,10 +21,11 @@ export enum DashboardLayout {
 const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
   { i: TradeLayout.botControls, x: 0, y: 0, w: 4, h: 4 },
   { i: TradeLayout.multiPane, x: 0, y: 0, w: 4, h: 7 },
-  { i: TradeLayout.openTrades, x: 4, y: 0, w: 8, h: 5 },
-  { i: TradeLayout.tradeDetail, x: 4, y: 4, w: 8, h: 5 },
-  { i: TradeLayout.tradeHistory, x: 4, y: 4, w: 8, h: 6 },
+  { i: TradeLayout.openTrades, x: 4, y: 11, w: 8, h: 5 },
+  { i: TradeLayout.tradeDetail, x: 4, y: 16, w: 8, h: 5 },
+  { i: TradeLayout.tradeHistory, x: 4, y: 10, w: 8, h: 6 },
   { i: TradeLayout.logView, x: 0, y: 9, w: 12, h: 3 },
+  { i: TradeLayout.chartView, x: 4, y: 0, w: 8, h: 11 },
 ];
 
 const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [

src/views/Graphs.vue

@@ -10,7 +10,7 @@
       <StrategyList v-model="strategy" class="col-md-2"></StrategyList>
     </div>
 
-    <div class="row">
+    <div class="row chart-row">
       <CandleChartContainer
         :available-pairs="historicView ? pairlist : whitelist"
         :historic-view="historicView"
@@ -69,4 +69,8 @@ export default class Graphs extends Vue {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.chart-row {
+  height: 820px;
+}
+</style>

src/views/Trading.vue

@@ -108,6 +108,25 @@
         <LogViewer />
       </DraggableContainer>
     </GridItem>
+    <GridItem
+      :i="gridLayoutChartView.i"
+      :x="gridLayoutChartView.x"
+      :y="gridLayoutChartView.y"
+      :w="gridLayoutChartView.w"
+      :h="gridLayoutChartView.h"
+      min-h="6"
+      drag-allow-from=".card-header"
+    >
+      <DraggableContainer header="Chart">
+        <CandleChartContainer
+          :available-pairs="whitelist"
+          :historic-view="!!false"
+          :timeframe="timeframe"
+          :trades="allTrades"
+        >
+        </CandleChartContainer>
+      </DraggableContainer>
+    </GridItem>
   </GridLayout>
 </template>
 
@@ -127,6 +146,7 @@ import TradeDetail from '@/components/ftbot/TradeDetail.vue';
 import ReloadControl from '@/components/ftbot/ReloadControl.vue';
 import LogViewer from '@/components/ftbot/LogViewer.vue';
 import DraggableContainer from '@/components/layout/DraggableContainer.vue';
+import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
 
 import { Trade } from '@/types';
 import { BotStoreGetters } from '@/store/modules/ftbot';
@@ -150,17 +170,24 @@ const layoutNs = namespace('layout');
     TradeDetail,
     ReloadControl,
     LogViewer,
+    CandleChartContainer,
   },
 })
 export default class Trading extends Vue {
   @ftbot.State detailTradeId!: number;
 
-  @ftbot.Getter openTrades!: Trade[];
+  @ftbot.Getter [BotStoreGetters.openTrades]!: Trade[];
 
-  @ftbot.Getter closedTrades!: Trade[];
+  @ftbot.Getter [BotStoreGetters.closedTrades]!: Trade[];
+
+  @ftbot.Getter [BotStoreGetters.allTrades]!: Trade[];
 
   @ftbot.Getter [BotStoreGetters.tradeDetail]!: Trade;
 
+  @ftbot.Getter [BotStoreGetters.timeframe]!: string;
+
+  @ftbot.State whitelist!: string[];
+
   @layoutNs.Getter getTradingLayout!: GridItemData[];
 
   @layoutNs.Mutation setTradingLayout;
@@ -193,6 +220,10 @@ export default class Trading extends Vue {
     return findGridLayout(this.gridLayout, TradeLayout.logView);
   }
 
+  get gridLayoutChartView(): GridItemData {
+    return findGridLayout(this.gridLayout, TradeLayout.chartView);
+  }
+
   layoutUpdatedEvent(newLayout) {
     this.setTradingLayout(newLayout);
   }