diff --git a/src/components/ftbot/DailyStats.vue b/src/components/ftbot/DailyStats.vue index 8a5308a1..58ae9276 100644 --- a/src/components/ftbot/DailyStats.vue +++ b/src/components/ftbot/DailyStats.vue @@ -5,7 +5,7 @@
- +
@@ -18,6 +18,12 @@ import { mapActions, mapState } from 'vuex'; import ECharts from 'vue-echarts'; import 'echarts/lib/chart/bar'; import 'echarts/lib/chart/line'; +import 'echarts/lib/component/tooltip'; +import 'echarts/lib/component/legend'; + +// Define Column labels here to avoid typos +const CHART_ABS_PROFIT = 'Absolute profit'; +const CHART_TRADE_COUNT = 'Trade Count'; export default { name: 'DailyStats', @@ -44,6 +50,18 @@ export default { dimensions: ['date', 'abs_profit', 'trade_count'], source: this.dailyStats.data, }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'line', + label: { + backgroundColor: '#6a7985', + }, + }, + }, + legend: { + data: [CHART_ABS_PROFIT, CHART_TRADE_COUNT], + }, xAxis: { type: 'category', inverse: true, @@ -51,7 +69,7 @@ export default { yAxis: [ { type: 'value', - name: 'Absolute Profit', + name: CHART_ABS_PROFIT, splitLine: { show: false, }, @@ -61,7 +79,7 @@ export default { }, { type: 'value', - name: 'Trade count', + name: CHART_TRADE_COUNT, nameRotate: 90, nameLocation: 'middle', nameGap: 30, @@ -70,11 +88,13 @@ export default { series: [ { type: 'line', - name: 'Absolute profit', + name: CHART_ABS_PROFIT, + color: 'black', }, { type: 'bar', - name: 'trade_count', + name: CHART_TRADE_COUNT, + color: 'rgba(150,150,150,0.3)', yAxisIndex: 1, }, ], @@ -83,13 +103,6 @@ export default { }, methods: { ...mapActions('ftbot', ['getDaily']), - dailyChartData() { - const arr = this.dailyStats.data.map((itm) => { - return { name: itm.date, value: Number(itm.abs_profit) + 2 }; - }); - console.log(arr); - return arr; - }, }, mounted() { this.getDaily();