Introduce draggable container

src/components/charts/CumProfitChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart v-if="trades.length > 0" :options="chartOptions" />
+  <v-chart v-if="trades.length > 0" :options="chartOptions" autoresize />
 </template>
 
 <script lang="ts">
@@ -30,6 +30,8 @@ const CHART_TRADE_COUNT = 'Trade Count';
 export default class CumProfitChart extends Vue {
   @Prop({ required: true }) trades!: ClosedTrade[];
 
+  @Prop({ default: true, type: Boolean }) showTitle!: boolean;
+
   get cumulativeData() {
     const res: CumProfitData[] = [];
     const closedTrades = this.trades; // .filter((t) => t.close_timestamp);
@@ -51,7 +53,7 @@ export default class CumProfitChart extends Vue {
     return {
       title: {
         text: 'Cumulative Profit',
-        show: true,
+        show: this.showTitle,
       },
       dataset: {
         dimensions: ['date', 'profit'],

src/components/charts/DailyChart.vue

@@ -26,6 +26,8 @@ const CHART_TRADE_COUNT = 'Trade Count';
 export default class DailyChart extends Vue {
   @Prop({ required: true }) dailyStats!: DailyReturnValue;
 
+  @Prop({ default: true, type: Boolean }) showTitle!: boolean;
+
   get absoluteMin() {
     return Number(
       this.dailyStats.data.reduce(
@@ -48,7 +50,7 @@ export default class DailyChart extends Vue {
     return {
       title: {
         text: 'Daily profit',
-        show: true,
+        show: this.showTitle,
       },
       dataset: {
         dimensions: ['date', 'abs_profit', 'trade_count'],

src/components/charts/HourlyChart.vue

@@ -30,6 +30,8 @@ const CHART_TRADE_COUNT = 'Trade Count';
 export default class HourlyChart extends Vue {
   @Prop({ required: true }) trades!: Trade[];
 
+  @Prop({ default: true, type: Boolean }) showTitle!: boolean;
+
   get hourlyData() {
     const res = new Array(24);
     for (let i = 0; i < 24; i += 1) {
@@ -48,11 +50,11 @@ export default class HourlyChart extends Vue {
     return res;
   }
 
-  get hourlyChartOptions(): echarts.ChartO {
+  get hourlyChartOptions() {
     return {
       title: {
         text: 'Hourly Profit',
-        show: true,
+        show: this.showTitle,
       },
       dataset: {
         dimensions: ['hourDesc', 'profit', 'count'],

src/components/layout/DraggableContainer.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="card h-100 w-100">
+    <div class="drag-header card-header">
+      {{ header }}
+    </div>
+    <div class="card-body h-100 w-100">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class DraggableContainer extends Vue {
+  @Prop({ required: true, type: String }) header!: string;
+}
+</script>
+
+<style scoped>
+.card-header {
+  padding: 0.25rem 0.5rem;
+}
+.card-body {
+  padding: 0.25rem 0 0 0.25rem;
+}
+</style>

src/views/Dashboard.vue

@@ -12,10 +12,13 @@
       :y="gridLayout[0].y"
       :w="gridLayout[0].w"
       :h="gridLayout[0].h"
-      :minW="3"
-      :minH="4"
+      :min-w="3"
+      :min-h="4"
+      drag-allow-from=".drag-header"
     >
-      <DailyChart v-if="dailyStats.data" :daily-stats="dailyStats" />
+      <DraggableContainer header="Daily Profit">
+        <DailyChart v-if="dailyStats.data" :daily-stats="dailyStats" :show-title="false" />
+      </DraggableContainer>
     </GridItem>
     <GridItem
       :i="gridLayout[1].i"
@@ -23,10 +26,13 @@
       :y="gridLayout[1].y"
       :w="gridLayout[1].w"
       :h="gridLayout[1].h"
-      :minW="3"
-      :minH="4"
+      :min-w="3"
+      :min-h="4"
+      drag-allow-from=".drag-header"
     >
-      <HourlyChart :trades="closedTrades" />
+      <DraggableContainer header="Hourly Profit">
+        <HourlyChart :trades="closedTrades" :show-title="false" />
+      </DraggableContainer>
     </GridItem>
     <GridItem
       :i="gridLayout[2].i"
@@ -34,8 +40,13 @@
       :y="gridLayout[2].y"
       :w="gridLayout[2].w"
       :h="gridLayout[2].h"
+      :min-w="3"
+      :min-h="4"
+      drag-allow-from=".drag-header"
     >
-      <CumProfitChart :trades="closedTrades" />
+      <DraggableContainer header="Cumulative Profit">
+        <CumProfitChart :trades="closedTrades" :show-title="false" />
+      </DraggableContainer>
     </GridItem>
   </GridLayout>
 </template>
@@ -48,6 +59,7 @@ 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 DraggableContainer from '@/components/layout/DraggableContainer.vue';
 
 import { Trade, DailyReturnValue } from '@/types';
 
@@ -61,6 +73,7 @@ const layoutNs = namespace('layout');
     DailyChart,
     HourlyChart,
     CumProfitChart,
+    DraggableContainer,
   },
 })
 export default class Dashboard extends Vue {