lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-26 21:15:15 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Improve plot configurator

Browse Source
This commit is contained in:
Matthias 2020-06-23 21:18:57 +02:00
parent 6e497f1214
commit 0d1ab76ba0
1 changed files with 42 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/Graphs.vue
View File

@ -20,11 +20,27 @@
</b-form-group> </b-form-group>
</div> </div>
<div class="col-mb-3 ml-2"> <div class="col-mb-3 ml-2">
<b-form-group label-cols="auto" label="Target field" label-for="columnSelector"> <b-form-group label-cols="auto" label="Plot Section" label-for="FieldSel">
<b-form-select id="FieldSel" :options="plotsegments" v-model="selField"> <b-form-radio v-model="plotOption" name="plot_section" value="main_plot">
</b-form-select> Main Plot
</b-form-radio>
<b-form-radio v-model="plotOption" name="plot_section" value="subplots">
Subplots
</b-form-radio>
</b-form-group> </b-form-group>
</div> </div>
<div class="col-mb-3 ml-2" v-if="plotOption == 'subplots'">
<b-form-group label-cols="auto" label="Target field" label-for="FieldSel">
<b-form-select id="FieldSel" :options="subplots" v-model="selField"> </b-form-select>
</b-form-group>
</div>
<div class="col-mb-3 ml-2">
<b-form-group label-cols="auto" label="Color" label-for="colsel">
<b-form-input id="colsel" v-model="selColor"></b-form-input>
</b-form-group>
</div>
<div class="col-mb-3 ml-2"> <div class="col-mb-3 ml-2">
<b-button variant="primary" @click="addBar">Add</b-button> <b-button variant="primary" @click="addBar">Add</b-button>
</div> </div>
@ -45,8 +61,8 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class'; import { namespace } from 'vuex-class';
import CandleChart from '@/components/ftbot/CandleChart.vue'; import CandleChart from '@/components/ftbot/CandleChart.vue';
import randomColor from '../shared/randomColor';
const ftbot = namespace('ftbot'); const ftbot = namespace('ftbot');
@ -64,8 +80,11 @@ export default class Graphs extends Vue {
selField = ''; selField = '';
selColor = '#FFFF00'; plotOption = 'main_plot';
selColor = randomColor();
// Custom plot config - manually changed by user.
customPlotConfig = {}; customPlotConfig = {};
@ftbot.State history; @ftbot.State history;
@ -86,6 +105,8 @@ export default class Graphs extends Vue {
mounted() { mounted() {
this.getWhitelist(); this.getWhitelist();
this.refresh(); this.refresh();
// eslint-disable-next-line @typescript-eslint/camelcase
this.customPlotConfig = this.plotConfig || { main_plot: {}, subplots: {} };
} }
get selectedPlotConfig() { get selectedPlotConfig() {
@ -96,8 +117,9 @@ export default class Graphs extends Vue {
return this.history[`${this.pair}__${this.timeframe}`]; return this.history[`${this.pair}__${this.timeframe}`];
} }
get plotsegments() { get subplots() {
return Object.keys(this.plotConfig); // Subplot keys (for selection window)
return Object.keys(this.plotConfig.subplots);
} }
refresh() { refresh() {
@ -107,13 +129,20 @@ export default class Graphs extends Vue {
} }
addBar() { addBar() {
console.log('Add clicked'); console.log(`Adding ${this.selColumn} to ${this.selField}`);
console.log(this.selColumn); console.log(this.customPlotConfig);
console.log(this.selField);
console.log(this.plotConfig);
this.plotConfig[this.selField][this.selColumn] = { color: this.selColor }; const plotConfig = this.customPlotConfig;
console.log(this.plotConfig); if (this.plotOption === 'main_plot') {
plotConfig[this.plotOption][this.selColumn] = { color: this.selColor };
} else {
plotConfig[this.plotOption][this.selField][this.selColumn] = { color: this.selColor };
}
this.customPlotConfig = { ...plotConfig };
// Reset random color
this.selColor = randomColor();
console.log(this.customPlotConfig);
} }
} }
</script> </script>