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

move plotconfig to modal

Browse Source
This commit is contained in:
Matthias 2020-07-01 20:22:29 +02:00
parent 73234ef8f4
commit bce0ea68fa
2 changed files with 94 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/ftbot/PlotConfigurator.vue
View File

@ -1,62 +1,78 @@
<template> <template>
<div v-if="columns" class="container-fluid"> <div v-if="columns">
<div class="row"> <div class="col-mb-3 ml-2">
<label class="h3">Plot config builder</label> <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>
<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>
<b-form-group v-if="plotOption == 'subplots'" 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-button id="FieldSel" @click="delSubplot" v-if="selField">-</b-button>
</b-form-group>
<b-form-group label="Choose column" label-for="columnSelector">
<b-form-select id="columnSelector" :options="columns" v-model="selColumn"> </b-form-select>
</b-form-group>
<b-form-group label="Color" label-for="colsel">
<div class="row">
<div class="col-4">
<b-form-input id="colsel" v-model="selColor"> </b-form-input>
</div>
<div class="col-1">
<div v-bind:style="{ 'background-color': selColor }" class="colorbox"></div>
</div>
<div class="col-1">
<b-button variant="primary" @click="newColor" size="sm">&#x21bb;</b-button>
</div>
</div>
</b-form-group>
<div class="row"> <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"> <div class="col-mb-3 ml-2">
<b-form-group label-cols="auto" label="Plot Section" label-for="FieldSel"> <b-button variant="primary" @click="addBar" title="Add configuration to plot" size="sm">
<b-form-radio v-model="plotOption" name="plot_section" value="main_plot"> Add
Main Plot </b-button>
</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>
<div class="col-mb-3 ml-2"> <div class="col-mb-3 ml-2">
<b-form-group label-cols="auto" label="Color" label-for="colsel"> <b-button variant="primary" @click="loadPlotConfig" size="sm">Load</b-button>
<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>
<div class="col-mb-3 ml-2"> <div class="col-mb-3 ml-2">
<b-button variant="primary" @click="savePlotConfig">Save</b-button> <b-button
variant="primary"
@click="savePlotConfig"
size="sm"
data-toggle="tooltip"
title="Save configuration"
>Save</b-button
>
</div> </div>
<div class="col-mb-3 ml-2"> <div class="col-mb-3 ml-2">
<b-button variant="primary" @click="showConfig = !showConfig">Show</b-button> <b-button
</div> id="showButton"
<div class="col-mb-5 ml-2" v-if="showConfig"> variant="primary"
<b-textarea id="TextArea" v-model="plotConfigJson"> </b-textarea> @click="showConfig = !showConfig"
size="sm"
title="Show configuration for easy transfer to a strategy"
>Show</b-button
>
</div> </div>
</div> </div>
<div class="col-mb-5 ml-2" v-if="showConfig">
<b-textarea id="TextArea" class="textArea" v-model="plotConfigJson" size="sm"> </b-textarea>
</div>
</div> </div>
</template> </template>
@ -111,6 +127,10 @@ export default class PlotConfigurator extends Vue {
this.plotConfig = this.value; this.plotConfig = this.value;
} }
newColor() {
this.selColor = randomColor();
}
addBar() { addBar() {
console.log(this.plotConfig); console.log(this.plotConfig);
@ -126,7 +146,7 @@ export default class PlotConfigurator extends Vue {
this.plotConfig = { ...plotConfig }; this.plotConfig = { ...plotConfig };
// Reset random color // Reset random color
this.selColor = randomColor(); this.newColor();
console.log(this.plotConfig); console.log(this.plotConfig);
this.emitPlotConfig(); this.emitPlotConfig();
} }
@ -142,6 +162,11 @@ export default class PlotConfigurator extends Vue {
this.emitPlotConfig(); this.emitPlotConfig();
} }
delSubplot() {
delete this.plotConfig.subplots[this.selField];
this.plotConfig.subplots = { ...this.plotConfig.subplots };
}
savePlotConfig() { savePlotConfig() {
this.saveCustomPlotConfig(this.plotConfig); this.saveCustomPlotConfig(this.plotConfig);
} }
@ -155,5 +180,12 @@ export default class PlotConfigurator extends Vue {
} }
</script> </script>
<style> <style scoped>
.textArea {
min-height: 250px;
}
.colorbox {
height: 25px;
width: 25px;
}
</style> </style>

15
src/views/Graphs.vue
View File

@ -8,7 +8,16 @@
<b-checkbox v-model="strategyPlotConfig">Use strategy plot_config</b-checkbox> <b-checkbox v-model="strategyPlotConfig">Use strategy plot_config</b-checkbox>
</div> </div>
</div> </div>
<PlotConfigurator :columns="datasetColumns" v-model="customPlotConfig" /> <b-button @click="showConfigurator">Show configurator</b-button>
<b-modal
id="plotConfiguratorModal"
title="Plot Configurator"
ok-only
hide-backdrop
button-size="sm"
>
<PlotConfigurator :columns="datasetColumns" v-model="customPlotConfig" />
</b-modal>
<div class="row"> <div class="row">
<CandleChart <CandleChart
:pair="pair" :pair="pair"
@ -81,6 +90,10 @@ export default class Graphs extends Vue {
return this.dataset ? this.dataset.columns : []; return this.dataset ? this.dataset.columns : [];
} }
showConfigurator() {
this.$bvModal.show('plotConfiguratorModal');
}
refresh() { refresh() {
this.getPairHistory({ pair: this.pair, timeframe: this.timeframe, limit: 500 }); this.getPairHistory({ pair: this.pair, timeframe: this.timeframe, limit: 500 });