Improve Plotconfig layout

This commit is contained in:
Matthias 2021-06-22 21:08:03 +02:00
parent 30955c39f5
commit 65e55986a0
2 changed files with 27 additions and 9 deletions

View File

@ -91,8 +91,8 @@
<b-form-input id="idPlotConfigName" v-model="plotConfigName" :options="availableGraphTypes"> <b-form-input id="idPlotConfigName" v-model="plotConfigName" :options="availableGraphTypes">
</b-form-input> </b-form-input>
</b-form-group> </b-form-group>
<div class="row"> <div class="row px-2">
<b-button class="ml-3" variant="primary" size="sm" @click="loadPlotConfig">Load</b-button> <b-button class="ml-1" variant="primary" size="sm" @click="loadPlotConfig">Load</b-button>
<b-button class="ml-1" variant="primary" size="sm" @click="loadPlotConfigFromStrategy"> <b-button class="ml-1" variant="primary" size="sm" @click="loadPlotConfigFromStrategy">
Load from strategy Load from strategy
</b-button> </b-button>
@ -115,6 +115,15 @@
@click="showConfig = !showConfig" @click="showConfig = !showConfig"
>Show</b-button >Show</b-button
> >
<b-button
v-if="showConfig"
class="ml-1"
variant="primary"
size="sm"
title="Load configuration from text box below"
@click="resetConfig"
>Reset</b-button
>
<b-button <b-button
v-if="showConfig" v-if="showConfig"
class="ml-1" class="ml-1"
@ -125,7 +134,7 @@
>Load from String</b-button >Load from String</b-button
> >
</div> </div>
<div v-if="showConfig" class="col-mb-5 ml-2 mt-2"> <div v-if="showConfig" class="col-mb-5 ml-1 mt-2">
<b-textarea <b-textarea
id="TextArea" id="TextArea"
v-model="plotConfigJson" v-model="plotConfigJson"
@ -319,6 +328,10 @@ export default class PlotConfigurator extends Vue {
} }
} }
resetConfig() {
this.plotConfig = { ...EMPTY_PLOTCONFIG };
}
async loadPlotConfigFromStrategy() { async loadPlotConfigFromStrategy() {
await this.getStrategyPlotConfig(); await this.getStrategyPlotConfig();
this.plotConfig = this.strategyPlotConfig; this.plotConfig = this.strategyPlotConfig;

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="d-flex flex-column h-100"> <div class="d-flex flex-column h-100">
<div v-if="false" class="mr-auto ml-3"> <div v-if="isWebserverMode" class="mr-auto ml-3">
<!-- Currently only available in Webserver mode --> <!-- Currently only available in Webserver mode -->
<b-checkbox v-model="historicView">HistoricData</b-checkbox> <b-checkbox v-model="historicView">HistoricData</b-checkbox>
</div> </div>
@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<div class="flex-fill mx-2 mt-2"> <div class="mx-2 mt-2 pb-1 h-100">
<CandleChartContainer <CandleChartContainer
:available-pairs="historicView ? pairlist : whitelist" :available-pairs="historicView ? pairlist : whitelist"
:historic-view="historicView" :historic-view="historicView"
@ -26,6 +26,7 @@
:trades="trades" :trades="trades"
:timerange="historicView ? timerange : ''" :timerange="historicView ? timerange : ''"
:strategy="historicView ? strategy : ''" :strategy="historicView ? strategy : ''"
:plot-config-modal="false"
> >
</CandleChartContainer> </CandleChartContainer>
</div> </div>
@ -48,7 +49,7 @@ const ftbot = namespace('ftbot');
components: { CandleChartContainer, StrategySelect, TimeRangeSelect, TimeframeSelect }, components: { CandleChartContainer, StrategySelect, TimeRangeSelect, TimeframeSelect },
}) })
export default class Graphs extends Vue { export default class Graphs extends Vue {
historicView = true; historicView = false;
strategy = ''; strategy = '';
@ -58,12 +59,14 @@ export default class Graphs extends Vue {
@ftbot.State pairlist; @ftbot.State pairlist;
@ftbot.State whitelist; @ftbot.State whitelist!: string[];
@ftbot.State trades; @ftbot.State trades;
@ftbot.Getter [BotStoreGetters.timeframe]!: string; @ftbot.Getter [BotStoreGetters.timeframe]!: string;
@ftbot.Getter [BotStoreGetters.isWebserverMode]!: boolean;
@ftbot.Action public getWhitelist!: () => Promise<WhitelistResponse>; @ftbot.Action public getWhitelist!: () => Promise<WhitelistResponse>;
@ftbot.Action public getAvailablePairs!: ( @ftbot.Action public getAvailablePairs!: (
@ -72,10 +75,12 @@ export default class Graphs extends Vue {
) => Promise<AvailablePairResult>; ) => Promise<AvailablePairResult>;
mounted() { mounted() {
this.getWhitelist(); if (!this.whitelist || this.whitelist.length === 0) {
this.getWhitelist();
}
// this.refresh(); // this.refresh();
this.getAvailablePairs({ timeframe: this.timeframe }).then((val) => { this.getAvailablePairs({ timeframe: this.timeframe }).then((val) => {
console.log(val); // console.log(val);
}); });
} }
} }