First part of configurable graph

This commit is contained in:
Matthias 2020-06-23 20:37:14 +02:00
parent 5fd12eb590
commit e41b23e02f

View File

@ -4,10 +4,39 @@
<div class="col-mb-2">
<b-form-select :options="whitelist" v-model="pair" @change="refresh"> </b-form-select>
</div>
<div class="col-mb-2"></div>
<div class="col-mb-2">
<b-checkbox v-model="strategyPlotConfig">Use strategy plot_config</b-checkbox>
</div>
</div>
<div v-if="!strategyPlotConfig" 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="Target field" label-for="columnSelector">
<b-form-select id="FieldSel" :options="plotsegments" v-model="selField">
</b-form-select>
</b-form-group>
</div>
<div class="col-mb-3 ml-2">
<b-button variant="primary" @click="addBar">Add</b-button>
</div>
</div>
</div>
<div class="row">
<CandleChart :pair="pair" :timeframe="timeframe" :dataset="dataset" :plotConfig="plotConfig">
<CandleChart
:pair="pair"
:timeframe="timeframe"
:dataset="dataset"
:plotConfig="selectedPlotConfig"
>
</CandleChart>
</div>
</div>
@ -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);
}
}
</script>