Add trades to plot

This commit is contained in:
Matthias 2020-07-13 20:52:29 +02:00
parent 69d22d1b7f
commit 0e67b535ef
2 changed files with 77 additions and 5 deletions

View File

@ -10,7 +10,7 @@
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import ECharts from 'vue-echarts';
import * as echarts from 'echarts';
import { PairHistory, PlotConfig } from '../../store/types';
import { Trade, PairHistory, PlotConfig } from '../../store/types';
import randomColor from '../../shared/randomColor';
import 'echarts';
@ -30,6 +30,8 @@ export default class CandleChart extends Vue {
@Prop({ required: true }) readonly timeframe!: string;
@Prop({ required: false, default: [] }) readonly trades!: Array<Trade>;
@Prop({ required: true }) readonly dataset!: PairHistory;
@Prop({ required: false }) readonly plotConfig!: PlotConfig;
@ -60,6 +62,10 @@ export default class CandleChart extends Vue {
return this.dataset !== null && typeof this.dataset === 'object';
}
get filteredTrades() {
return this.trades.filter((item: Trade) => item.pair === this.pair);
}
get chartOptions() {
if (!this.hasData) {
return {};
@ -111,7 +117,7 @@ export default class CandleChart extends Vue {
},
xAxis: [
{
type: 'category',
type: 'time',
scale: true,
boundaryGap: false,
axisLine: { onZero: false },
@ -121,7 +127,7 @@ export default class CandleChart extends Vue {
max: 'dataMax',
},
{
type: 'category',
type: 'time',
gridIndex: 1,
scale: true,
boundaryGap: false,
@ -278,7 +284,7 @@ export default class CandleChart extends Vue {
if (options.legend && options.legend.data) {
options.legend.data.push(key);
}
const sp = {
const sp: echarts.EChartOption.Series = {
name: key,
type: value.type || 'line',
xAxisIndex: 0,
@ -348,7 +354,7 @@ export default class CandleChart extends Vue {
// entries per subplot
const col = this.dataset.columns.findIndex((el) => el === sk);
if (col) {
const sp = {
const sp: echarts.EChartOption.Series = {
name: sk,
type: sv.type || 'line',
xAxisIndex: plotIndex,
@ -374,6 +380,69 @@ export default class CandleChart extends Vue {
});
}
if (this.filteredTrades.length > 0) {
// Show trades
const trades: Array<string | number>[] = [];
const tradesClose: Array<string | number>[] = [];
for (let i = 0, len = this.filteredTrades.length; i < len; i += 1) {
const trade: Trade = this.filteredTrades[i];
if (
trade.open_timestamp >= this.dataset.data_start_ts &&
trade.open_timestamp <= this.dataset.data_stop_ts
) {
trades.push([trade.open_date, trade.open_rate]);
}
if (
trade.close_timestamp !== undefined &&
trade.close_timestamp < this.dataset.data_stop_ts &&
trade.close_timestamp > this.dataset.data_start_ts
) {
if (trade.close_date !== undefined && trade.close_rate !== undefined) {
tradesClose.push([trade.close_date, trade.close_rate]);
}
}
}
console.log(`Trades: ${trades.length}`);
console.log(trades);
console.log(`ClosesTrades: ${tradesClose.length}`);
console.log(tradesClose);
const name = 'Trades';
const nameClose = 'Trades Close';
if (options.legend && options.legend.data) {
options.legend.data.push(name);
}
const sp: echarts.EChartOption.SeriesScatter = {
name,
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
color: 'cyan',
},
data: trades,
};
if (options.series) {
options.series.push(sp);
}
if (options.legend && options.legend.data) {
options.legend.data.push(nameClose);
}
const closeSeries: echarts.EChartOption.SeriesScatter = {
name: nameClose,
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
color: 'pink',
},
data: tradesClose,
};
if (options.series) {
options.series.push(closeSeries);
}
}
// console.log(options);
// TODO: Rebuilding this causes a full redraw for every new step
return options;

View File

@ -36,6 +36,7 @@
:timeframe="timeframe"
:dataset="dataset"
:plotConfig="selectedPlotConfig"
:trades="trades"
>
</CandleChart>
</div>
@ -85,6 +86,8 @@ export default class Graphs extends Vue {
@ftbot.State plotConfig;
@ftbot.State trades;
@ftbot.Action
public getPairCandles!: (payload: PairCandlePayload) => void;