From 759af1f7689e890a39ee1bfdc728dd41c568dd49 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Mon, 24 Aug 2020 19:28:46 +0200
Subject: [PATCH] Add cumulative profit chart

---
 src/components/charts/CumProfitChart.vue | 129 +++++++++++++++++++++++
 src/views/Dashboard.vue                  |   3 +
 2 files changed, 132 insertions(+)
 create mode 100644 src/components/charts/CumProfitChart.vue

diff --git a/src/components/charts/CumProfitChart.vue b/src/components/charts/CumProfitChart.vue
new file mode 100644
index 00000000..0b41a783
--- /dev/null
+++ b/src/components/charts/CumProfitChart.vue
@@ -0,0 +1,129 @@
+<template>
+  <v-chart v-if="trades.length > 0" :options="chartOptions" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+import ECharts from 'vue-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 { Trade } from '@/store/types';
+
+// Define Column labels here to avoid typos
+const CHART_PROFIT = 'Profit';
+const CHART_TRADE_COUNT = 'Trade Count';
+
+@Component({
+  components: {
+    'v-chart': ECharts,
+  },
+})
+export default class CumProfitChart extends Vue {
+  @Prop({ required: true }) trades!: Array<Trade>;
+
+  get cumulativeData() {
+    const res: Record<string, any>[] = [];
+    const closedTrades = this.trades; // .filter((t) => t.close_timestamp);
+
+    closedTrades.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.close_profit_abs) {
+        profit += trade.close_profit_abs;
+        res.push({ date: trade.close_timestamp, profit, raising: trade.close_profit_abs > 0 });
+      }
+    }
+    console.log(res[res.length - 1]);
+    return res;
+  }
+
+  get chartOptions() {
+    return {
+      title: {
+        text: 'Cumulative Profit',
+        show: true,
+      },
+      dataset: {
+        dimensions: ['date', 'profit'],
+        source: this.cumulativeData,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'line',
+          label: {
+            backgroundColor: '#6a7985',
+          },
+        },
+      },
+      legend: {
+        data: [CHART_PROFIT],
+        right: '5%',
+      },
+      useUTC: false,
+      xAxis: {
+        type: 'time',
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: CHART_PROFIT,
+          splitLine: {
+            show: false,
+          },
+          nameRotate: 90,
+          nameLocation: 'middle',
+          nameGap: 30,
+        },
+        {
+          type: 'value',
+          name: CHART_TRADE_COUNT,
+          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,
+          animation: false,
+          color: 'black',
+          // symbol: 'none',
+        },
+      ],
+    };
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 31c3baa9..375a057e 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <DailyChart v-if="dailyStats.data" :dailyStats="dailyStats" />
+    <CumProfitChart :trades="closedTrades" />
     <HourlyChart :trades="closedTrades" />
   </div>
 </template>
@@ -11,6 +12,7 @@ import { namespace } from 'vuex-class';
 
 import DailyChart from '@/components/charts/DailyChart.vue';
 import HourlyChart from '@/components/charts/HourlyChart.vue';
+import CumProfitChart from '@/components/charts/CumProfitChart.vue';
 
 import { Trade, DailyReturnValue } from '@/store/types';
 
@@ -20,6 +22,7 @@ const ftbot = namespace('ftbot');
   components: {
     DailyChart,
     HourlyChart,
+    CumProfitChart,
   },
 })
 export default class Trading extends Vue {