Add tradesLog chart

src/components/charts/TradesLog.vue

@@ -0,0 +1,140 @@
+<template>
+  <v-chart v-if="trades.length > 0" :options="chartOptions" autoresize :theme="getChartTheme" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Getter } from 'vuex-class';
+
+import ECharts from 'vue-echarts';
+import { EChartOption } from 'echarts';
+
+import 'echarts/lib/chart/bar';
+import 'echarts/lib/chart/line';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/dataZoom';
+import 'echarts/lib/component/visualMap';
+import 'echarts/lib/component/visualMapPiecewise';
+
+import { ClosedTrade } from '@/types';
+
+// Define Column labels here to avoid typos
+const CHART_PROFIT = 'Profit %';
+const CHART_COLOR = '#9be0a8';
+
+@Component({
+  components: {
+    'v-chart': ECharts,
+  },
+})
+export default class TradesLogChart extends Vue {
+  @Prop({ required: true }) trades!: ClosedTrade[];
+
+  @Getter getChartTheme!: string;
+
+  get chartData() {
+    const res: number[][] = [];
+    const sortedTrades = this.trades.sort((a, b) =>
+      a.close_timestamp > b.close_timestamp ? 1 : -1,
+    );
+    for (let i = 0, len = sortedTrades.length; i < len; i += 1) {
+      const trade = sortedTrades[i];
+      const entry = [i, trade.profit_pct];
+      res.push(entry);
+    }
+
+    return res;
+  }
+
+  get chartOptions(): EChartOption {
+    return {
+      title: {
+        text: 'Trades log',
+        show: true,
+      },
+      dataset: {
+        dimensions: ['date', 'profit'],
+        source: this.chartData,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'line',
+          label: {
+            backgroundColor: '#6a7985',
+          },
+        },
+      },
+      xAxis: {
+        type: 'value',
+        show: false,
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: CHART_PROFIT,
+          splitLine: {
+            show: false,
+          },
+          nameRotate: 90,
+          nameLocation: 'middle',
+          nameGap: 30,
+        },
+      ],
+      grid: {
+        bottom: 80,
+      },
+      dataZoom: [
+        {
+          type: 'inside',
+          // xAxisIndex: [0],
+          start: 0,
+          end: 100,
+        },
+        {
+          show: true,
+          // xAxisIndex: [0],
+          type: 'slider',
+          bottom: 10,
+          start: 0,
+          end: 100,
+        },
+      ],
+      series: [
+        {
+          type: 'line',
+          name: CHART_PROFIT,
+          step: 'start',
+          animation: false,
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{@[1]} %',
+            color: this.getChartTheme === 'dark' ? '#c2c2c2' : '#3c3c3c',
+          },
+          encode: {
+            x: 0,
+            y: 1,
+          },
+
+          areaStyle: {
+            // color: CHART_COLOR,
+          },
+          itemStyle: {
+            color: CHART_COLOR,
+          },
+        },
+      ],
+    };
+  }
+}
+</script>
+
+<style scoped>
+.echarts {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/store/modules/layout.ts

@@ -15,6 +15,7 @@ export enum DashboardLayout {
   dailyChart = 'g-dailyChart',
   hourlyChart = 'g-hourlyChart',
   cumChartChart = 'g-cumChartChart',
+  tradesLogChart = 'g-TradesLogChart',
 }
 
 export enum LayoutGetters {
@@ -50,6 +51,7 @@ const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
   { i: DashboardLayout.dailyChart, x: 4, y: 0, w: 4, h: 6 },
   { i: DashboardLayout.hourlyChart, x: 4, y: 6, w: 4, h: 6 },
   { i: DashboardLayout.cumChartChart, x: 0, y: 6, w: 4, h: 6 },
+  { i: DashboardLayout.tradesLogChart, x: 0, y: 8, w: 12, h: 4 },
 ];
 
 const STORE_DASHBOARD_LAYOUT = 'ftDashboardLayout';

src/views/Dashboard.vue

@@ -95,6 +95,20 @@
         <CumProfitChart :trades="closedTrades" :show-title="false" />
       </DraggableContainer>
     </GridItem>
+    <GridItem
+      :i="gridLayoutTradesLogChart.i"
+      :x="gridLayoutTradesLogChart.x"
+      :y="gridLayoutTradesLogChart.y"
+      :w="gridLayoutTradesLogChart.w"
+      :h="gridLayoutTradesLogChart.h"
+      :min-w="3"
+      :min-h="4"
+      drag-allow-from=".drag-header"
+    >
+      <DraggableContainer header="Trades Log">
+        <TradesLogChart :trades="closedTrades" :show-title="false" />
+      </DraggableContainer>
+    </GridItem>
   </GridLayout>
 </template>
 
@@ -108,6 +122,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 TradesLogChart from '@/components/charts/TradesLog.vue';
 import DraggableContainer from '@/components/layout/DraggableContainer.vue';
 
 import {
@@ -128,6 +143,7 @@ const layoutNs = namespace('layout');
     DailyChart,
     HourlyChart,
     CumProfitChart,
+    TradesLogChart,
     DraggableContainer,
   },
 })
@@ -183,6 +199,10 @@ export default class Dashboard extends Vue {
     return findGridLayout(this.gridLayout, DashboardLayout.cumChartChart);
   }
 
+  get gridLayoutTradesLogChart(): GridItemData {
+    return findGridLayout(this.gridLayout, DashboardLayout.tradesLogChart);
+  }
+
   mounted() {
     this.getDaily({ timescale: 30 });
     this.getTrades();