mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-10 10:21:55 +00:00
Add trades to plot
This commit is contained in:
parent
69d22d1b7f
commit
0e67b535ef
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user