From 5e498618b04b844e0f74299c6eba936db2e91295 Mon Sep 17 00:00:00 2001 From: Matthias Date: Mon, 15 Jun 2020 19:39:48 +0200 Subject: [PATCH 01/98] Add pair-history downloading --- src/store/modules/ftbot.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/store/modules/ftbot.ts b/src/store/modules/ftbot.ts index 61f7a577..79f036ad 100644 --- a/src/store/modules/ftbot.ts +++ b/src/store/modules/ftbot.ts @@ -26,6 +26,7 @@ export default { dailyStats: [], pairlistMethods: [], detailTradeId: null, + history: {}, }, getters: { [BotStoreGetters.openTrades](state) { @@ -81,6 +82,10 @@ export default { setDetailTrade(state, trade: Trade) { state.detailTradeId = trade ? trade.trade_id : null; }, + updatePairHistory(state, { pair, timeframe, data }) { + console.log(JSON.parse(data)); + state.history[`${pair}__${timeframe}`] = data; + }, }, actions: { ping({ commit, rootState }) { @@ -109,6 +114,33 @@ export default { .then((result) => commit('updateOpenTrades', result.data)) .catch(console.error); }, + getPairHistory({ commit }, payload) { + if (payload.pair && payload.timeframe && payload.limit) { + return api + .get('/pair_history', { + params: { pair: payload.pair, timeframe: payload.timeframe, limit: payload.limit }, + }) + .then((result) => { + try { + console.log(JSON.parse(result.data)); + } catch (err) { + console.error(err); + } + commit('updatePairHistory', { + pair: payload.pair, + timeframe: payload.timeframe, + data: result.data, + }); + }) + .catch(console.error); + } + // Error branchs + const error = 'pair or timeframe not specified'; + console.error(error); + return new Promise((resolve, reject) => { + reject(error); + }); + }, getPerformance({ commit }) { return api .get('/performance') From 8443184f7d0002192e120e3c548f1d77ef5f05cc Mon Sep 17 00:00:00 2001 From: Matthias Date: Wed, 17 Jun 2020 20:10:59 +0200 Subject: [PATCH 02/98] Fix pair history loading --- src/store/modules/ftbot.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/store/modules/ftbot.ts b/src/store/modules/ftbot.ts index 79f036ad..c40ca48f 100644 --- a/src/store/modules/ftbot.ts +++ b/src/store/modules/ftbot.ts @@ -83,8 +83,7 @@ export default { state.detailTradeId = trade ? trade.trade_id : null; }, updatePairHistory(state, { pair, timeframe, data }) { - console.log(JSON.parse(data)); - state.history[`${pair}__${timeframe}`] = data; + state.history = { ...state.history, [`${pair}__${timeframe}`]: data }; }, }, actions: { @@ -121,11 +120,6 @@ export default { params: { pair: payload.pair, timeframe: payload.timeframe, limit: payload.limit }, }) .then((result) => { - try { - console.log(JSON.parse(result.data)); - } catch (err) { - console.error(err); - } commit('updatePairHistory', { pair: payload.pair, timeframe: payload.timeframe, From 7f29292914d280bdda4489074999583ee053de07 Mon Sep 17 00:00:00 2001 From: Matthias Date: Wed, 17 Jun 2020 20:38:25 +0200 Subject: [PATCH 03/98] Add CandleChart component --- src/components/ftbot/CandleChart.vue | 203 +++++++++++++++++++++++++++ src/components/layout/NavBar.vue | 1 + src/router/index.ts | 8 ++ src/views/Graphs.vue | 26 ++++ 4 files changed, 238 insertions(+) create mode 100644 src/components/ftbot/CandleChart.vue create mode 100644 src/views/Graphs.vue diff --git a/src/components/ftbot/CandleChart.vue b/src/components/ftbot/CandleChart.vue new file mode 100644 index 00000000..cd6fb94f --- /dev/null +++ b/src/components/ftbot/CandleChart.vue @@ -0,0 +1,203 @@ + + + + + diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue index 3ab3b94a..17555ee8 100644 --- a/src/components/layout/NavBar.vue +++ b/src/components/layout/NavBar.vue @@ -12,6 +12,7 @@ Trade Dashboard + Graph diff --git a/src/router/index.ts b/src/router/index.ts index 5e2142b3..05d751e9 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -24,6 +24,14 @@ const routes: Array = [ // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '@/views/Trading.vue'), }, + { + path: '/graph', + name: 'Freqtrade Graph', + // route level code-splitting + // this generates a separate chunk (about.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import(/* webpackChunkName: "about" */ '@/views/Graphs.vue'), + }, { path: '/dashboard', name: 'Freqtrade Dashboard', diff --git a/src/views/Graphs.vue b/src/views/Graphs.vue new file mode 100644 index 00000000..833afd7b --- /dev/null +++ b/src/views/Graphs.vue @@ -0,0 +1,26 @@ + + + + + From 7520d38b31f0aba5630a39f9b9ae2fb1f83245d7 Mon Sep 17 00:00:00 2001 From: Matthias Date: Fri, 19 Jun 2020 07:55:34 +0200 Subject: [PATCH 04/98] Fix some visuals in candlechart --- src/components/ftbot/CandleChart.vue | 34 +++++++++++++--------------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/src/components/ftbot/CandleChart.vue b/src/components/ftbot/CandleChart.vue index cd6fb94f..ba0001c0 100644 --- a/src/components/ftbot/CandleChart.vue +++ b/src/components/ftbot/CandleChart.vue @@ -33,10 +33,10 @@ export default { if (!this.hasData) { return {}; } - const upColor = '#ec0000'; - const upBorderColor = '#8A0000'; - const downColor = '#00da3c'; - const downBorderColor = '#008F28'; + const upColor = '#00da3c'; + const upBorderColor = '#008F28'; + const downColor = '#ec0000'; + const downBorderColor = '#8A0000'; console.log(this.dataset.data); return { title: { @@ -56,8 +56,8 @@ export default { axisPointer: { type: 'cross', lineStyle: { - color: '#376df4', - width: 2, + color: '#cccccc', + width: 1, opacity: 1, }, }, @@ -73,7 +73,6 @@ export default { type: 'category', scale: true, boundaryGap: false, - // inverse: true, axisLine: { onZero: false }, splitLine: { show: false }, splitNumber: 20, @@ -125,7 +124,7 @@ export default { { type: 'inside', xAxisIndex: [0, 1], - start: 10, + start: 50, end: 100, }, { @@ -135,22 +134,21 @@ export default { bottom: 10, start: 10, end: 100, - handleIcon: - 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', - handleSize: '105%', }, ], // visualMap: { + // // TODO: this would allow to colorize volume bars (if we'd want this) + // // Needs green / red indicator column in data. // show: true, - // seriesIndex: 2, - // dimension: 1, + // seriesIndex: 1, + // dimension: 5, // pieces: [ // { - // value: 1, + // max: 500000.0, // color: downColor, // }, // { - // value: -1, + // min: 500000.0, // color: upColor, // }, // ], @@ -176,9 +174,9 @@ export default { type: 'bar', xAxisIndex: 1, yAxisIndex: 1, - // itemStyle: { - // color: '#7fbe9e', - // }, + itemStyle: { + color: '#777777', + }, large: true, encode: { x: 0, From fb542e5755335fba5f81ae03fa58b5b1995aa8aa Mon Sep 17 00:00:00 2001 From: Matthias Date: Fri, 19 Jun 2020 20:37:14 +0200 Subject: [PATCH 05/98] Show Buy / sell signals --- src/components/ftbot/CandleChart.vue | 76 +++++++++++++++++++++++++--- 1 file changed, 68 insertions(+), 8 deletions(-) diff --git a/src/components/ftbot/CandleChart.vue b/src/components/ftbot/CandleChart.vue index ba0001c0..0e746a3d 100644 --- a/src/components/ftbot/CandleChart.vue +++ b/src/components/ftbot/CandleChart.vue @@ -1,6 +1,6 @@ From 42bbde2ed3c8ee2661ada480790a1d410e52998f Mon Sep 17 00:00:00 2001 From: Matthias Date: Tue, 23 Jun 2020 07:13:23 +0200 Subject: [PATCH 14/98] Show mainplot configurations --- src/components/ftbot/CandleChart.vue | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/ftbot/CandleChart.vue b/src/components/ftbot/CandleChart.vue index bdb21a2d..f66d7289 100644 --- a/src/components/ftbot/CandleChart.vue +++ b/src/components/ftbot/CandleChart.vue @@ -78,6 +78,27 @@ export default { series: [], }; + if ('main_plot' in this.plotConfig) { + Object.entries(this.plotConfig.main_plot).forEach(([key, value]) => { + const col = this.dataset.columns.findIndex((el) => el === key); + subPlots.legend.push(key); + const sp = { + name: key, + type: 'line', + xAxisIndex: 0, + yAxisIndex: 0, + itemStyle: { + color: value.color, + }, + encode: { + x: colDate, + y: col, + }, + }; + subPlots.series.push(sp); + }); + } + if ('subplots' in this.plotConfig) { let plotIndex = 2; Object.entries(this.plotConfig.subplots).forEach(([key, value]) => { From 5fd12eb59007605e6b8b2ea3d2fc60d394d47145 Mon Sep 17 00:00:00 2001 From: Matthias Date: Tue, 23 Jun 2020 20:07:24 +0200 Subject: [PATCH 15/98] Don't show circle at points --- src/components/ftbot/CandleChart.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ftbot/CandleChart.vue b/src/components/ftbot/CandleChart.vue index f66d7289..03ea3e87 100644 --- a/src/components/ftbot/CandleChart.vue +++ b/src/components/ftbot/CandleChart.vue @@ -44,7 +44,7 @@ export default { }, computed: { hasData() { - return this.dataset !== null; + return this.dataset !== null && typeof this.dataset === 'object'; }, chartOptions() { @@ -94,6 +94,7 @@ export default { x: colDate, y: col, }, + showSymbol: false, }; subPlots.series.push(sp); }); @@ -148,6 +149,7 @@ export default { x: colDate, y: col, }, + showSymbol: false, }; subPlots.series.push(sp); console.log(subPlots); From e41b23e02f11fa6b5849da6f0a256c5838f0030e Mon Sep 17 00:00:00 2001 From: Matthias Date: Tue, 23 Jun 2020 20:37:14 +0200 Subject: [PATCH 16/98] First part of configurable graph --- src/views/Graphs.vue | 61 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 59 insertions(+), 2 deletions(-) diff --git a/src/views/Graphs.vue b/src/views/Graphs.vue index c2983664..c52faed3 100644 --- a/src/views/Graphs.vue +++ b/src/views/Graphs.vue @@ -4,10 +4,39 @@
-
+
+ Use strategy plot_config +
+ +
+
+ +
+
+
+ + + + +
+
+ + + + +
+
+ Add +
+
- +
@@ -29,6 +58,16 @@ export default class Graphs extends Vue { timeframe = '5m'; + strategyPlotConfig = false; + + selColumn = ''; + + selField = ''; + + selColor = '#FFFF00'; + + customPlotConfig = {}; + @ftbot.State history; @ftbot.State whitelist; @@ -49,15 +88,33 @@ export default class Graphs extends Vue { this.refresh(); } + get selectedPlotConfig() { + return this.strategyPlotConfig ? this.plotConfig : this.customPlotConfig; + } + get dataset() { return this.history[`${this.pair}__${this.timeframe}`]; } + get plotsegments() { + return Object.keys(this.plotConfig); + } + refresh() { this.getPairHistory({ pair: this.pair, timeframe: this.timeframe, limit: 500 }); this.getPlotConfig(); } + + addBar() { + console.log('Add clicked'); + console.log(this.selColumn); + console.log(this.selField); + console.log(this.plotConfig); + + this.plotConfig[this.selField][this.selColumn] = { color: this.selColor }; + console.log(this.plotConfig); + } } From 6e497f121404baf29e8bf64aef99e9a4a693683a Mon Sep 17 00:00:00 2001 From: Matthias Date: Tue, 23 Jun 2020 21:18:43 +0200 Subject: [PATCH 17/98] Show all lines in legend --- src/components/ftbot/CandleChart.vue | 7 ++++--- src/shared/randomColor.ts | 4 ++++ 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 src/shared/randomColor.ts diff --git a/src/components/ftbot/CandleChart.vue b/src/components/ftbot/CandleChart.vue index 03ea3e87..72f139ef 100644 --- a/src/components/ftbot/CandleChart.vue +++ b/src/components/ftbot/CandleChart.vue @@ -9,6 +9,7 @@ From 6912fb490572b23f3baf8d61271b9ee26b5b0f4e Mon Sep 17 00:00:00 2001 From: Matthias Date: Tue, 23 Jun 2020 21:48:37 +0200 Subject: [PATCH 19/98] Convert CAndleStickChart to typescript --- src/components/ftbot/CandleChart.vue | 646 +++++++++++++-------------- src/types/types.ts | 10 +- 2 files changed, 322 insertions(+), 334 deletions(-) diff --git a/src/components/ftbot/CandleChart.vue b/src/components/ftbot/CandleChart.vue index 72f139ef..5b57cf3d 100644 --- a/src/components/ftbot/CandleChart.vue +++ b/src/components/ftbot/CandleChart.vue @@ -6,365 +6,349 @@ - diff --git a/src/views/Graphs.vue b/src/views/Graphs.vue index ae070278..86d05c2a 100644 --- a/src/views/Graphs.vue +++ b/src/views/Graphs.vue @@ -8,65 +8,7 @@ Use strategy plot_config -
-
- -
-
-
- - - - -
-
- - - Main Plot - - - Subplots - - -
-
- - - - -
-
- - - - + - -
- -
- - - -
- -
- Add -
- -
- Load -
-
- Save -
-
- Show -
-
- -
-
-
+
From bce0ea68fa953b7dc48bf3a11ce2cfc603805c43 Mon Sep 17 00:00:00 2001 From: Matthias Date: Wed, 1 Jul 2020 20:22:29 +0200 Subject: [PATCH 31/98] move plotconfig to modal --- src/components/ftbot/PlotConfigurator.vue | 128 ++++++++++++++-------- src/views/Graphs.vue | 15 ++- 2 files changed, 94 insertions(+), 49 deletions(-) diff --git a/src/components/ftbot/PlotConfigurator.vue b/src/components/ftbot/PlotConfigurator.vue index 2ee648c8..b930b523 100644 --- a/src/components/ftbot/PlotConfigurator.vue +++ b/src/components/ftbot/PlotConfigurator.vue @@ -1,62 +1,78 @@ @@ -111,6 +127,10 @@ export default class PlotConfigurator extends Vue { this.plotConfig = this.value; } + newColor() { + this.selColor = randomColor(); + } + addBar() { console.log(this.plotConfig); @@ -126,7 +146,7 @@ export default class PlotConfigurator extends Vue { this.plotConfig = { ...plotConfig }; // Reset random color - this.selColor = randomColor(); + this.newColor(); console.log(this.plotConfig); this.emitPlotConfig(); } @@ -142,6 +162,11 @@ export default class PlotConfigurator extends Vue { this.emitPlotConfig(); } + delSubplot() { + delete this.plotConfig.subplots[this.selField]; + this.plotConfig.subplots = { ...this.plotConfig.subplots }; + } + savePlotConfig() { this.saveCustomPlotConfig(this.plotConfig); } @@ -155,5 +180,12 @@ export default class PlotConfigurator extends Vue { } - diff --git a/src/views/Graphs.vue b/src/views/Graphs.vue index 86d05c2a..06cd9821 100644 --- a/src/views/Graphs.vue +++ b/src/views/Graphs.vue @@ -8,7 +8,16 @@ Use strategy plot_config
- + Show configurator + + +
Date: Wed, 1 Jul 2020 20:39:03 +0200 Subject: [PATCH 32/98] Improve style of plot configurator --- src/components/ftbot/PlotConfigurator.vue | 34 ++++++++++++++--------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/ftbot/PlotConfigurator.vue b/src/components/ftbot/PlotConfigurator.vue index b930b523..da43c0c4 100644 --- a/src/components/ftbot/PlotConfigurator.vue +++ b/src/components/ftbot/PlotConfigurator.vue @@ -17,28 +17,33 @@
- - + - - + + + + + + - + + +
+
-
-
- -
-
-
-
-
+ + +
+ + + ↻ -
-
+ + +
@@ -185,7 +190,10 @@ export default class PlotConfigurator extends Vue { min-height: 250px; } .colorbox { + border-radius: 50%; + margin-top: 15%; height: 25px; width: 25px; + vertical-align: center; } From 30183b3cd3b186fe6fd93caae147c89c959e62a0 Mon Sep 17 00:00:00 2001 From: Matthias Date: Wed, 1 Jul 2020 20:59:45 +0200 Subject: [PATCH 33/98] Allow different plot-types --- src/components/ftbot/CandleChart.vue | 6 +++--- src/components/ftbot/PlotConfigurator.vue | 18 +++++++++++++++--- src/types/types.ts | 1 + 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/components/ftbot/CandleChart.vue b/src/components/ftbot/CandleChart.vue index e9e69f84..2eb0671f 100644 --- a/src/components/ftbot/CandleChart.vue +++ b/src/components/ftbot/CandleChart.vue @@ -287,7 +287,7 @@ export default class CandleChart extends Vue { } const sp = { name: key, - type: 'line', + type: value.type || 'line', xAxisIndex: 0, yAxisIndex: 0, itemStyle: { @@ -357,7 +357,7 @@ export default class CandleChart extends Vue { if (col) { const sp = { name: sk, - type: 'line', + type: sv.type || 'line', xAxisIndex: plotIndex, yAxisIndex: plotIndex, itemStyle: { @@ -381,7 +381,7 @@ export default class CandleChart extends Vue { }); } - console.log(options); + // console.log(options); // TODO: Rebuilding this causes a full redraw for every new step return options; } diff --git a/src/components/ftbot/PlotConfigurator.vue b/src/components/ftbot/PlotConfigurator.vue index da43c0c4..184f693e 100644 --- a/src/components/ftbot/PlotConfigurator.vue +++ b/src/components/ftbot/PlotConfigurator.vue @@ -11,7 +11,7 @@
- + @@ -30,6 +30,11 @@ + + + + +
@@ -109,6 +114,10 @@ export default class PlotConfigurator extends Vue { selColumn = ''; + graphType = 'line'; + + availableGraphTypes = ['line', 'bar', 'scatter']; + showConfig = false; selField = ''; @@ -143,10 +152,13 @@ export default class PlotConfigurator extends Vue { if (this.plotOption === 'main_plot') { console.log(`Adding ${this.selColumn} to MainPlot`); console.log(plotConfig); - plotConfig[this.plotOption][this.selColumn] = { color: this.selColor }; + plotConfig[this.plotOption][this.selColumn] = { color: this.selColor, type: this.graphType }; } else { console.log(`Adding ${this.selColumn} to ${this.selField}`); - plotConfig[this.plotOption][this.selField][this.selColumn] = { color: this.selColor }; + plotConfig[this.plotOption][this.selField][this.selColumn] = { + color: this.selColor, + type: this.graphType, + }; } this.plotConfig = { ...plotConfig }; diff --git a/src/types/types.ts b/src/types/types.ts index 58e0a4fe..38a6e010 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -153,6 +153,7 @@ export interface PairHistory { export interface IndicatorConfig { color?: string; + type?: string; } export interface PlotConfig { From f24cb3adca2ab6df55d07b980224689ae547bf68 Mon Sep 17 00:00:00 2001 From: Matthias Date: Thu, 2 Jul 2020 07:01:24 +0200 Subject: [PATCH 34/98] Improve styling --- src/views/Graphs.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/views/Graphs.vue b/src/views/Graphs.vue index 06cd9821..f57534d1 100644 --- a/src/views/Graphs.vue +++ b/src/views/Graphs.vue @@ -7,8 +7,11 @@
Use strategy plot_config
+
+ Show configurator +
- Show configurator + Date: Thu, 2 Jul 2020 07:09:53 +0200 Subject: [PATCH 35/98] Rename Endpoint to pair_candles to be clear what it contains --- src/store/modules/ftbot.ts | 12 ++++++------ src/views/Graphs.vue | 8 ++++---- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/store/modules/ftbot.ts b/src/store/modules/ftbot.ts index 2327a91a..b6afdf36 100644 --- a/src/store/modules/ftbot.ts +++ b/src/store/modules/ftbot.ts @@ -37,7 +37,7 @@ export default { dailyStats: [], pairlistMethods: [], detailTradeId: null, - history: {}, + candleData: {}, plotConfig: {}, customPlotConfig: { ...EMPTY_PLOTCONFIG }, }, @@ -95,8 +95,8 @@ export default { setDetailTrade(state, trade: Trade) { state.detailTradeId = trade ? trade.trade_id : null; }, - updatePairHistory(state, { pair, timeframe, data }) { - state.history = { ...state.history, [`${pair}__${timeframe}`]: data }; + updatePairCandles(state, { pair, timeframe, data }) { + state.candleData = { ...state.candleData, [`${pair}__${timeframe}`]: data }; }, updatePlotConfig(state, plotConfig: PlotConfig) { state.plotConfig = plotConfig; @@ -133,14 +133,14 @@ export default { .then((result) => commit('updateOpenTrades', result.data)) .catch(console.error); }, - getPairHistory({ commit }, payload: PairHistoryPayload) { + getPairCandles({ commit }, payload: PairHistoryPayload) { if (payload.pair && payload.timeframe && payload.limit) { return api - .get('/pair_history', { + .get('/pair_candles', { params: { pair: payload.pair, timeframe: payload.timeframe, limit: payload.limit }, }) .then((result) => { - commit('updatePairHistory', { + commit('updatePairCandles', { pair: payload.pair, timeframe: payload.timeframe, data: result.data, diff --git a/src/views/Graphs.vue b/src/views/Graphs.vue index f57534d1..3e9a8949 100644 --- a/src/views/Graphs.vue +++ b/src/views/Graphs.vue @@ -59,14 +59,14 @@ export default class Graphs extends Vue { // eslint-disable-next-line @typescript-eslint/camelcase customPlotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG }; - @ftbot.State history; + @ftbot.State candleData; @ftbot.State whitelist; @ftbot.State plotConfig; @ftbot.Action - public getPairHistory; + public getPairCandles; @ftbot.Action public getWhitelist; @@ -86,7 +86,7 @@ export default class Graphs extends Vue { } get dataset() { - return this.history[`${this.pair}__${this.timeframe}`]; + return this.candleData[`${this.pair}__${this.timeframe}`]; } get datasetColumns() { @@ -98,7 +98,7 @@ export default class Graphs extends Vue { } refresh() { - this.getPairHistory({ pair: this.pair, timeframe: this.timeframe, limit: 500 }); + this.getPairCandles({ pair: this.pair, timeframe: this.timeframe, limit: 500 }); this.getPlotConfig(); } From 5e8923f746023e563b50c7753e91c3a49bcd6bc1 Mon Sep 17 00:00:00 2001 From: Matthias Date: Thu, 2 Jul 2020 19:58:06 +0200 Subject: [PATCH 36/98] Add historic view --- src/components/ftbot/CandleChart.vue | 42 +++++++++++++--------------- src/store/modules/ftbot.ts | 34 ++++++++++++++++++++-- src/types/types.ts | 7 ++++- src/views/Graphs.vue | 34 ++++++++++++++++++++-- 4 files changed, 89 insertions(+), 28 deletions(-) diff --git a/src/components/ftbot/CandleChart.vue b/src/components/ftbot/CandleChart.vue index 2eb0671f..b95dce04 100644 --- a/src/components/ftbot/CandleChart.vue +++ b/src/components/ftbot/CandleChart.vue @@ -75,8 +75,8 @@ export default class CandleChart extends Vue { 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 colBuyData = this.dataset.columns.findIndex((el) => el === '_buy_signal_open'); + const colSellData = this.dataset.columns.findIndex((el) => el === '_sell_signal_open'); // Plot data const options: echarts.EChartOption = { @@ -237,7 +237,6 @@ export default class CandleChart extends Vue { type: 'scatter', symbol: 'triangle', symbolSize: 8, - data: this.buyData, xAxisIndex: 0, yAxisIndex: 0, itemStyle: { @@ -245,13 +244,12 @@ export default class CandleChart extends Vue { }, encode: { x: 0, - y: 1, + y: colBuyData, }, }, { name: 'Sell', type: 'scatter', - data: this.sellData, symbol: 'diamond', symbolSize: 8, xAxisIndex: 0, @@ -261,13 +259,13 @@ export default class CandleChart extends Vue { }, encode: { x: 0, - y: 1, + y: colSellData, }, }, ], }; - this.createSignalData(colDate, colOpen, colBuy, colSell); + // this.createSignalData(colDate, colOpen, colBuy, colSell); // This will be merged into final plot config // const subPlots = { @@ -386,21 +384,21 @@ export default class CandleChart extends Vue { return options; } - createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void { - // Calculate Buy and sell Series - if (!this.signalsCalculated) { - // 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) { - this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]); - } - if (this.dataset.data[i][colSell] === 1) { - this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]); - } - } - this.signalsCalculated = true; - } - } + // createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void { + // Calculate Buy and sell Series + // if (!this.signalsCalculated) { + // // 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) { + // this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]); + // } + // if (this.dataset.data[i][colSell] === 1) { + // this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]); + // } + // } + // this.signalsCalculated = true; + // } + // } } diff --git a/src/store/modules/ftbot.ts b/src/store/modules/ftbot.ts index b6afdf36..1d131cd7 100644 --- a/src/store/modules/ftbot.ts +++ b/src/store/modules/ftbot.ts @@ -6,6 +6,7 @@ import { Logs, DailyPayload, Trade, + PairCandlePayload, PairHistoryPayload, PlotConfig, EMPTY_PLOTCONFIG, @@ -38,6 +39,7 @@ export default { pairlistMethods: [], detailTradeId: null, candleData: {}, + history: {}, plotConfig: {}, customPlotConfig: { ...EMPTY_PLOTCONFIG }, }, @@ -98,6 +100,10 @@ export default { updatePairCandles(state, { pair, timeframe, data }) { state.candleData = { ...state.candleData, [`${pair}__${timeframe}`]: data }; }, + updatePairHistory(state, { pair, timeframe, data }) { + // Intentionally drop the previous state here. + state.history = { [`${pair}__${timeframe}`]: data }; + }, updatePlotConfig(state, plotConfig: PlotConfig) { state.plotConfig = plotConfig; }, @@ -133,11 +139,11 @@ export default { .then((result) => commit('updateOpenTrades', result.data)) .catch(console.error); }, - getPairCandles({ commit }, payload: PairHistoryPayload) { + getPairCandles({ commit }, payload: PairCandlePayload) { if (payload.pair && payload.timeframe && payload.limit) { return api .get('/pair_candles', { - params: { pair: payload.pair, timeframe: payload.timeframe, limit: payload.limit }, + params: { ...payload }, }) .then((result) => { commit('updatePairCandles', { @@ -155,6 +161,30 @@ export default { reject(error); }); }, + getPairHistory({ commit }, payload: PairHistoryPayload) { + if (payload.pair && payload.timeframe && payload.limit && payload.timerange) { + return api + .get('/pair_history', { + params: { ...payload }, + timeout: 10000, + }) + .then((result) => { + commit('updatePairHistory', { + pair: payload.pair, + timeframe: payload.timeframe, + timerange: payload.timerange, + data: result.data, + }); + }) + .catch(console.error); + } + // Error branchs + const error = 'pair or timeframe or timerange not specified'; + console.error(error); + return new Promise((resolve, reject) => { + reject(error); + }); + }, getPlotConfig({ commit }) { return api .get('/plot_config') diff --git a/src/types/types.ts b/src/types/types.ts index 38a6e010..9d633548 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -138,13 +138,18 @@ export interface ClosedTrade extends Trade { open_order_id?: string; } -export interface PairHistoryPayload { +export interface PairCandlePayload { pair: string; timeframe: string; limit: number; } +export interface PairHistoryPayload extends PairCandlePayload { + timerange: string; +} + export interface PairHistory { + pair: string; columns: string[]; data: number[]; length: number; diff --git a/src/views/Graphs.vue b/src/views/Graphs.vue index 3e9a8949..27a9949c 100644 --- a/src/views/Graphs.vue +++ b/src/views/Graphs.vue @@ -1,6 +1,10 @@