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

Improve plot configurator

Browse Source
This commit is contained in:
Matthias 2020-08-01 20:43:14 +02:00
parent c9c5d5a6cd
commit ea6608c71e
1 changed files with 114 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,48 +1,64 @@
<template> <template>
<div v-if="columns"> <div v-if="columns">
<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-form-radio-group
<b-form-radio v-model="plotOption" name="plot_section" value="main_plot"> class="w-100"
Main Plot v-model="plotOption"
</b-form-radio> :options="plotOptions"
<b-form-radio v-model="plotOption" name="plot_section" value="subplots"> buttons
Subplots button-variant="outline-primary"
</b-form-radio> >
</b-form-group> </b-form-radio-group>
</div> </div>
<div class="col-mb-3 ml-2" v-if="plotOption == 'subplots'"> <div class="col-mb-3" v-if="plotOption == 'subplots'">
<b-form-group label="Target field" label-for="FieldSel"> <hr />
<b-form-select id="FieldSel" :options="subplots" v-model="selField" :select-size="4">
<b-form-group label="Subplot" label-for="FieldSel">
<b-form-select id="FieldSel" :options="subplots" v-model="selSubPlot" :select-size="4">
</b-form-select> </b-form-select>
</b-form-group> </b-form-group>
</div> </div>
<b-form-group v-if="plotOption == 'subplots'" label="New subplot" label-for="newSubplot"> <b-form-group v-if="plotOption == 'subplots'" label="New subplot" label-for="newSubplot">
<b-input-group> <b-input-group size="sm">
<b-form-input class="addPlot" id="newSubplot" v-model="newSubplotName"></b-form-input> <b-form-input class="addPlot" id="newSubplot" v-model="newSubplotName"></b-form-input>
<b-input-group-append> <b-input-group-append>
<b-button @click="addSubplot">+</b-button> <b-button @click="addSubplot">+</b-button>
<b-button @click="delSubplot" v-if="selField">-</b-button> <b-button @click="delSubplot" v-if="selSubPlot">-</b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</b-form-group> </b-form-group>
<hr /> <hr />
<b-form-group label="Used indicators" label-for="selectedIndicators">
<b-form-group label="Choose column" label-for="columnSelector"> <b-form-select
<b-form-select id="columnSelector" :options="columns" v-model="selColumn"> </b-form-select> id="selectedIndicators"
:options="usedColumns"
v-model="selIndicator"
:select-size="4"
>
</b-form-select>
</b-form-group>
<b-form-group label="Add indicator" label-for="indicatorSelector">
<b-form-select
id="indicatorSelector"
:options="columns"
v-model="selAvailableIndicator"
:select-size="4"
>
</b-form-select>
</b-form-group> </b-form-group>
<b-form-group label="Choose type" label-for="columnSelector"> <b-form-group label="Choose type" label-for="plotTypeSelector">
<b-form-select id="plotTypeSelector" :options="availableGraphTypes" v-model="graphType"> <b-form-select id="plotTypeSelector" :options="availableGraphTypes" v-model="graphType">
</b-form-select> </b-form-select>
</b-form-group> </b-form-group>
<hr /> <hr />
<b-form-group label="Color" label-for="colsel"> <b-form-group label="Color" label-for="colsel" size="sm">
<b-input-group> <b-input-group>
<b-input-group-prepend> <b-input-group-prepend>
<div v-bind:style="{ 'background-color': selColor }" class="colorbox mr-2"></div> <div v-bind:style="{ 'background-color': selColor }" class="colorbox mr-2"></div>
</b-input-group-prepend> </b-input-group-prepend>
<b-form-input id="colsel" v-model="selColor"> </b-form-input> <b-form-input id="colsel" v-model="selColor" size="sm"> </b-form-input>
<b-input-group-append> <b-input-group-append>
<b-button variant="primary" @click="newColor" size="sm">&#x21bb;</b-button> <b-button variant="primary" @click="newColor" size="sm">&#x21bb;</b-button>
</b-input-group-append> </b-input-group-append>
@ -51,21 +67,32 @@
<hr /> <hr />
<div class="row"> <div class="row">
<b-button <b-button
class="mx-1" class="ml-1"
variant="primary" variant="primary"
@click="addBar" @click="addIndicator"
title="Add configuration to plot" title="Add indicator to plot"
size="sm" size="sm"
:disabled="!selAvailableIndicator"
> >
Add Add
</b-button> </b-button>
<b-button class="mx-1" variant="primary" @click="loadPlotConfig" size="sm">Load</b-button> <b-button
<b-button class="mx-1" variant="primary" @click="loadPlotConfigFromStrategy" size="sm"> class="ml-1"
variant="primary"
@click="removeIndicator"
title="Remove indicator to plot"
size="sm"
:disabled="!selIndicator"
>
Remove
</b-button>
<b-button class="ml-1" variant="primary" @click="loadPlotConfig" size="sm">Load</b-button>
<b-button class="ml-1" variant="primary" @click="loadPlotConfigFromStrategy" size="sm">
Load from strategy Load from strategy
</b-button> </b-button>
<b-button <b-button
class="mx-1" class="ml-1"
variant="primary" variant="primary"
@click="savePlotConfig" @click="savePlotConfig"
size="sm" size="sm"
@ -74,7 +101,7 @@
>Save</b-button >Save</b-button
> >
<b-button <b-button
class="mx-1" class="ml-1"
id="showButton" id="showButton"
variant="primary" variant="primary"
@click="showConfig = !showConfig" @click="showConfig = !showConfig"
@ -83,7 +110,7 @@
>Show</b-button >Show</b-button
> >
<b-button <b-button
class="mx-1" class="ml-1"
variant="primary" variant="primary"
@click="loadConfigFromString" @click="loadConfigFromString"
size="sm" size="sm"
@ -131,11 +158,18 @@ export default class PlotConfigurator extends Vue {
plotConfig: PlotConfig = EMPTY_PLOTCONFIG; plotConfig: PlotConfig = EMPTY_PLOTCONFIG;
plotOptions = [
{ text: 'Main Plot', value: 'main_plot' },
{ text: 'Subplots', value: 'subplots' },
];
plotOption = 'main_plot'; plotOption = 'main_plot';
newSubplotName = ''; newSubplotName = '';
selColumn = ''; selAvailableIndicator = '';
selIndicator = '';
graphType = 'line'; graphType = 'line';
@ -143,7 +177,7 @@ export default class PlotConfigurator extends Vue {
showConfig = false; showConfig = false;
selField = ''; selSubPlot = '';
tempPlotConfig?: PlotConfig = undefined; tempPlotConfig?: PlotConfig = undefined;
@ -173,6 +207,20 @@ export default class PlotConfigurator extends Vue {
return Object.keys(this.plotConfig.subplots); return Object.keys(this.plotConfig.subplots);
} }
get usedColumns() {
if (this.isMainPlot) {
return Object.keys(this.plotConfig.main_plot);
}
if (this.selSubPlot in this.plotConfig[this.plotOption]) {
return Object.keys(this.plotConfig[this.plotOption][this.selSubPlot]);
}
return [];
}
get isMainPlot() {
return this.plotOption === 'main_plot';
}
mounted() { mounted() {
console.log('mounted'); console.log('mounted');
this.plotConfig = this.value; this.plotConfig = this.value;
@ -182,26 +230,45 @@ export default class PlotConfigurator extends Vue {
this.selColor = randomColor(); this.selColor = randomColor();
} }
addBar() { addIndicator() {
console.log(this.plotConfig); console.log(this.plotConfig);
const { plotConfig } = this; const { plotConfig } = this;
if (this.plotOption === 'main_plot') { if (this.isMainPlot) {
console.log(`Adding ${this.selColumn} to MainPlot`); console.log(`Adding ${this.selAvailableIndicator} to MainPlot`);
console.log(plotConfig); plotConfig[this.plotOption][this.selAvailableIndicator] = {
plotConfig[this.plotOption][this.selColumn] = { color: this.selColor, type: this.graphType }; color: this.selColor,
type: this.graphType,
};
} else { } else {
console.log(`Adding ${this.selColumn} to ${this.selField}`); console.log(`Adding ${this.selAvailableIndicator} to ${this.selSubPlot}`);
plotConfig[this.plotOption][this.selField][this.selColumn] = { plotConfig[this.plotOption][this.selSubPlot][this.selAvailableIndicator] = {
color: this.selColor, color: this.selColor,
type: this.graphType, type: this.graphType,
}; };
} }
this.plotConfig = { ...plotConfig }; this.plotConfig = { ...plotConfig };
this.selAvailableIndicator = '';
// Reset random color // Reset random color
this.newColor(); this.newColor();
this.emitPlotConfig();
}
removeIndicator() {
console.log(this.plotConfig); console.log(this.plotConfig);
const { plotConfig } = this;
if (this.isMainPlot) {
console.log(`Removing ${this.selIndicator} from MainPlot`);
delete plotConfig[this.plotOption][this.selIndicator];
} else {
console.log(`Removing ${this.selIndicator} from ${this.selSubPlot}`);
delete plotConfig[this.plotOption][this.selSubPlot][this.selIndicator];
}
this.plotConfig = { ...plotConfig };
console.log(this.plotConfig);
this.selIndicator = '';
this.emitPlotConfig(); this.emitPlotConfig();
} }
@ -210,14 +277,14 @@ export default class PlotConfigurator extends Vue {
...this.plotConfig.subplots, ...this.plotConfig.subplots,
[this.newSubplotName]: {}, [this.newSubplotName]: {},
}; };
this.selField = this.newSubplotName; this.selSubPlot = this.newSubplotName;
this.newSubplotName = ''; this.newSubplotName = '';
console.log(this.plotConfig); console.log(this.plotConfig);
this.emitPlotConfig(); this.emitPlotConfig();
} }
delSubplot() { delSubplot() {
delete this.plotConfig.subplots[this.selField]; delete this.plotConfig.subplots[this.selSubPlot];
this.plotConfig.subplots = { ...this.plotConfig.subplots }; this.plotConfig.subplots = { ...this.plotConfig.subplots };
} }
@ -253,9 +320,17 @@ export default class PlotConfigurator extends Vue {
} }
.colorbox { .colorbox {
border-radius: 50%; border-radius: 50%;
margin-top: 15%; margin-top: auto;
margin-bottom: auto;
height: 25px; height: 25px;
width: 25px; width: 25px;
vertical-align: center; vertical-align: center;
} }
.form-group {
margin-bottom: 0.5rem;
}
hr {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
</style> </style>