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

Extract PlotConfigurator to it's own component

Browse Source
This commit is contained in:
Matthias 2020-07-01 07:16:05 +02:00
parent 5eb433421d
commit 73234ef8f4
2 changed files with 165 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
src/components/ftbot/PlotConfigurator.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<div v-if="columns" class="container-fluid">
<div class="row">
<label class="h3">Plot config builder</label>
</div>
<div class="row">
<div class="col-mb-3">
<b-form-group label-cols="auto" label="Choose column" label-for="columnSelector">
<b-form-select id="columnSelector" :options="columns" v-model="selColumn">
</b-form-select>
</b-form-group>
</div>
<div class="col-mb-3 ml-2">
<b-form-group label-cols="auto" label="Plot Section" label-for="FieldSel">
<b-form-radio v-model="plotOption" name="plot_section" value="main_plot">
Main Plot
</b-form-radio>
<b-form-radio v-model="plotOption" name="plot_section" value="subplots">
Subplots
</b-form-radio>
</b-form-group>
</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" :select-size="4">
</b-form-select>
</b-form-group>
</div>
<div class="col-mb-3 ml-2" v-if="plotOption == 'subplots'">
<b-form-group label-cols="auto" label="New subplot" label-for="newSubplot">
<b-form-input class="addPlot" id="newSubplot" v-model="newSubplotName"></b-form-input>
<b-button id="FieldSel" @click="addSubplot">+</b-button>
</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">
<b-button variant="primary" @click="addBar">Add</b-button>
</div>
<div class="col-mb-3 ml-2">
<b-button variant="primary" @click="loadPlotConfig">Load</b-button>
</div>
<div class="col-mb-3 ml-2">
<b-button variant="primary" @click="savePlotConfig">Save</b-button>
</div>
<div class="col-mb-3 ml-2">
<b-button variant="primary" @click="showConfig = !showConfig">Show</b-button>
</div>
<div class="col-mb-5 ml-2" v-if="showConfig">
<b-textarea id="TextArea" v-model="plotConfigJson"> </b-textarea>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { PlotConfig, EMPTY_PLOTCONFIG } from '../../store/types';
import randomColor from '../../shared/randomColor';
import { loadCustomPlotConfig } from '../../shared/storage';
const ftbot = namespace('ftbot');
@Component({})
export default class PlotConfigurator extends Vue {
@Prop({ required: true }) value!: PlotConfig;
@Prop({ required: true }) columns!: Array<string>;
@Emit('input')
emitPlotConfig() {
return this.plotConfig;
}
plotConfig: PlotConfig = EMPTY_PLOTCONFIG;
plotOption = 'main_plot';
newSubplotName = '';
selColumn = '';
showConfig = false;
selField = '';
selColor = randomColor();
@ftbot.Mutation
saveCustomPlotConfig;
get plotConfigJson() {
return JSON.stringify(this.plotConfig, null, 2);
}
get subplots() {
// Subplot keys (for selection window)
return Object.keys(this.plotConfig.subplots);
}
mounted() {
console.log('mounted');
this.plotConfig = this.value;
}
addBar() {
console.log(this.plotConfig);
const { plotConfig } = this;
if (this.plotOption === 'main_plot') {
console.log(`Adding ${this.selColumn} to MainPlot`);
console.log(plotConfig);
plotConfig[this.plotOption][this.selColumn] = { color: this.selColor };
} else {
console.log(`Adding ${this.selColumn} to ${this.selField}`);
plotConfig[this.plotOption][this.selField][this.selColumn] = { color: this.selColor };
}
this.plotConfig = { ...plotConfig };
// Reset random color
this.selColor = randomColor();
console.log(this.plotConfig);
this.emitPlotConfig();
}
addSubplot() {
this.plotConfig.subplots = {
...this.plotConfig.subplots,
[this.newSubplotName]: {},
};
this.selField = this.newSubplotName;
this.newSubplotName = '';
console.log(this.plotConfig);
this.emitPlotConfig();
}
savePlotConfig() {
this.saveCustomPlotConfig(this.plotConfig);
}
loadPlotConfig() {
this.plotConfig = loadCustomPlotConfig();
console.log(this.plotConfig);
console.log('loading config');
this.emitPlotConfig();
}
}
</script>
<style>
</style>

127
src/views/Graphs.vue
View File

@ -8,65 +8,7 @@
<b-checkbox v-model="strategyPlotConfig">Use strategy plot_config</b-checkbox>
</div>
</div>
<div v-if="!strategyPlotConfig && dataset" class="container-fluid">
<div class="row">
<label class="h3">Plot config builder</label>
</div>
<div class="row">
<div class="col-mb-3">
<b-form-group label-cols="auto" label="Choose column" label-for="columnSelector">
<b-form-select id="columnSelector" :options="dataset.columns" v-model="selColumn">
</b-form-select>
</b-form-group>
</div>
<div class="col-mb-3 ml-2">
<b-form-group label-cols="auto" label="Plot Section" label-for="FieldSel">
<b-form-radio v-model="plotOption" name="plot_section" value="main_plot">
Main Plot
</b-form-radio>
<b-form-radio v-model="plotOption" name="plot_section" value="subplots">
Subplots
</b-form-radio>
</b-form-group>
</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" :select-size="4">
</b-form-select>
</b-form-group>
</div>
<div class="col-mb-3 ml-2" v-if="plotOption == 'subplots'">
<b-form-group label-cols="auto" label="New subplot" label-for="newSubplot">
<b-form-input class="addPlot" id="newSubplot" v-model="newSubplotName"></b-form-input>
<b-button id="FieldSel" @click="addSubplot">+</b-button>
</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">
<b-button variant="primary" @click="addBar">Add</b-button>
</div>
<div class="col-mb-3 ml-2">
<b-button variant="primary" @click="loadPlotConfig">Load</b-button>
</div>
<div class="col-mb-3 ml-2">
<b-button variant="primary" @click="savePlotConfig">Save</b-button>
</div>
<div class="col-mb-3 ml-2">
<b-button variant="primary" @click="showConfig = !showConfig">Show</b-button>
</div>
<div class="col-mb-5 ml-2" v-if="showConfig">
<b-textarea id="TextArea" v-model="plotConfigJson"> </b-textarea>
</div>
</div>
</div>
<PlotConfigurator :columns="datasetColumns" v-model="customPlotConfig" />
<div class="row">
<CandleChart
:pair="pair"
@ -83,14 +25,14 @@
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import CandleChart from '@/components/ftbot/CandleChart.vue';
import randomColor from '../shared/randomColor';
import { loadCustomPlotConfig } from '../shared/storage';
import PlotConfigurator from '@/components/ftbot/PlotConfigurator.vue';
import { PlotConfig, EMPTY_PLOTCONFIG } from '../store/types';
import { loadCustomPlotConfig } from '../shared/storage';
const ftbot = namespace('ftbot');
@Component({
components: { CandleChart },
components: { CandleChart, PlotConfigurator },
})
export default class Graphs extends Vue {
pair = 'XRP/USDT';
@ -99,16 +41,8 @@ export default class Graphs extends Vue {
strategyPlotConfig = false;
selColumn = '';
selField = '';
newSubplotName = '';
plotOption = 'main_plot';
selColor = randomColor();
// Custom plot config - manually changed by user.
// eslint-disable-next-line @typescript-eslint/camelcase
customPlotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG };
@ -128,11 +62,6 @@ export default class Graphs extends Vue {
@ftbot.Action
public getPlotConfig;
@ftbot.Mutation
saveCustomPlotConfig;
showConfig = false;
mounted() {
this.getWhitelist();
this.refresh();
@ -148,13 +77,8 @@ export default class Graphs extends Vue {
return this.history[`${this.pair}__${this.timeframe}`];
}
get subplots() {
// Subplot keys (for selection window)
return Object.keys(this.selectedPlotConfig.subplots);
}
get plotConfigJson() {
return JSON.stringify(this.selectedPlotConfig, null, 2);
get datasetColumns() {
return this.dataset ? this.dataset.columns : [];
}
refresh() {
@ -162,45 +86,6 @@ export default class Graphs extends Vue {
this.getPlotConfig();
}
addBar() {
console.log(this.customPlotConfig);
const plotConfig = this.customPlotConfig;
if (this.plotOption === 'main_plot') {
console.log(`Adding ${this.selColumn} to MainPlot`);
console.log(plotConfig);
plotConfig[this.plotOption][this.selColumn] = { color: this.selColor };
} else {
console.log(`Adding ${this.selColumn} to ${this.selField}`);
plotConfig[this.plotOption][this.selField][this.selColumn] = { color: this.selColor };
}
this.customPlotConfig = { ...plotConfig };
// Reset random color
this.selColor = randomColor();
console.log(this.customPlotConfig);
}
addSubplot() {
this.customPlotConfig.subplots = {
...this.customPlotConfig.subplots,
[this.newSubplotName]: {},
};
this.selField = this.newSubplotName;
this.newSubplotName = '';
console.log(this.customPlotConfig);
}
savePlotConfig() {
this.saveCustomPlotConfig(this.customPlotConfig);
}
loadPlotConfig() {
this.customPlotConfig = loadCustomPlotConfig();
console.log(this.customPlotConfig);
console.log('loading config');
}
}
</script>