Show Buy / sell signals

This commit is contained in:
Matthias 2020-06-19 20:37:14 +02:00
parent 7520d38b31
commit fb542e5755

View File

@ -1,6 +1,6 @@
<template>
<div class="container-fluid d-flex flex-column align-items-stretch d-flex">
<div class="row flex-grow-1">
<div class="row flex-grow-1 chart-wrapper">
<v-chart v-if="hasData" theme="dark" autoresize :options="chartOptions" />
</div>
</div>
@ -37,7 +37,32 @@ export default {
const upBorderColor = '#008F28';
const downColor = '#ec0000';
const downBorderColor = '#8A0000';
console.log(`Available Columns: ${this.dataset.columns}`);
const colDate = this.dataset.columns.findIndex((el) => el === 'date');
const colOpen = this.dataset.columns.findIndex((el) => el === 'open');
const colHigh = this.dataset.columns.findIndex((el) => el === 'high');
const colLow = this.dataset.columns.findIndex((el) => el === 'low');
const colClose = this.dataset.columns.findIndex((el) => el === 'close');
const colVolume = this.dataset.columns.findIndex((el) => el === 'volume');
const colBuy = this.dataset.columns.findIndex((el) => el === 'buy');
const colSell = this.dataset.columns.findIndex((el) => el === 'sell');
const buyData = [];
const sellData = [];
// Generate Buy and sell array (using open rate to display marker)
for (let i = 0, len = this.dataset.data.length; i < len; i += 1) {
if (this.dataset.data[i][colBuy] === 1) {
console.log(this.dataset.data[i][colBuy]);
buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
}
if (this.dataset.data[i][colSell] === 1) {
sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
}
}
console.log(this.dataset.data);
console.log('buy');
console.log(buyData);
console.log('sell');
console.log(sellData);
return {
title: {
text: `${this.pair} - ${this.timeframe}`,
@ -49,7 +74,7 @@ export default {
},
animation: false,
legend: {
data: ['Candles', 'Volume'],
data: ['Candles', 'Volume', 'Buy', 'Sell'],
},
tooltip: {
trigger: 'axis',
@ -111,13 +136,14 @@ export default {
{
left: '5%',
right: '5%',
height: '50%',
// height: '50%',
bottom: '150px',
},
{
left: '5%',
right: '5%',
top: '63%',
height: '16%',
bottom: '50px',
height: '80px',
},
],
dataZoom: [
@ -166,7 +192,7 @@ export default {
encode: {
x: 0,
// open, close, low, high
y: [1, 4, 3, 2],
y: [colOpen, colClose, colLow, colHigh],
},
},
{
@ -180,7 +206,37 @@ export default {
large: true,
encode: {
x: 0,
y: 5,
y: colVolume,
},
},
{
name: 'Buy',
type: 'scatter',
symbol: 'triangle',
data: buyData,
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
color: '#00FF00',
},
encode: {
x: 0,
y: 1,
},
},
{
name: 'Sell',
type: 'scatter',
data: sellData,
symbol: 'diamond',
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
color: '#FF0000',
},
encode: {
x: 0,
y: 1,
},
},
],
@ -191,9 +247,13 @@ export default {
</script>
<style scoped>
.chart-wrapper {
width: 100%;
height: 100%;
}
.echarts {
width: 100%;
min-height: 640px;
min-height: 820px;
/* TODO: height calculation is not working correctly - uses min-height for now */
/* height: 600px; */
height: 100%;