Add tradesLog chart

This commit is contained in:
Matthias 2021-01-05 19:29:47 +01:00
parent e41c102c35
commit 494902eae7
3 changed files with 162 additions and 0 deletions

View File

@ -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>

View File

@ -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';

View File

@ -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();