mirror of
https://github.com/freqtrade/frequi.git
synced 2024-09-21 10:01:09 +00:00
composition: plotconfig
This commit is contained in:
Matthias
parent
2a49381c6c
commit
5298127402
|
|
@ -120,234 +120,242 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';
|
||||
import { namespace } from 'vuex-class';
|
||||
import { PlotConfig, EMPTY_PLOTCONFIG, IndicatorConfig } from '@/types';
|
||||
import { getCustomPlotConfig } from '@/shared/storage';
|
||||
import PlotIndicator from '@/components/charts/PlotIndicator.vue';
|
||||
import { BotStoreGetters } from '@/store/modules/ftbot';
|
||||
import StoreModules from '@/store/storeSubModules';
|
||||
import { showAlert } from '@/stores/alerts';
|
||||
|
||||
const ftbot = namespace(StoreModules.ftbot);
|
||||
import { defineComponent, computed, ref, watch, onMounted } from '@vue/composition-api';
|
||||
import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: 'PlotConfigurator',
|
||||
components: { PlotIndicator },
|
||||
})
|
||||
export default class PlotConfigurator extends Vue {
|
||||
@Prop({ required: true }) value!: PlotConfig;
|
||||
props: {
|
||||
value: { type: Object as () => PlotConfig, required: true },
|
||||
columns: { required: true, type: Array as () => string[] },
|
||||
asModal: { required: false, default: true, type: Boolean },
|
||||
},
|
||||
emits: ['input'],
|
||||
setup(props, { emit }) {
|
||||
const { getStrategyPlotConfig, saveCustomPlotConfig, updatePlotConfigName } =
|
||||
useNamespacedActions(StoreModules.ftbot, [
|
||||
'getStrategyPlotConfig',
|
||||
'saveCustomPlotConfig',
|
||||
'updatePlotConfigName',
|
||||
]);
|
||||
const { strategyPlotConfig, plotConfigName } = useNamespacedGetters(StoreModules.ftbot, [
|
||||
'strategyPlotConfig',
|
||||
'plotConfigName',
|
||||
]);
|
||||
const plotConfig = ref<PlotConfig>(EMPTY_PLOTCONFIG);
|
||||
|
||||
@Prop({ required: true }) columns!: Array<string>;
|
||||
const plotOptions = [
|
||||
{ text: 'Main Plot', value: 'main_plot' },
|
||||
{ text: 'Subplots', value: 'subplots' },
|
||||
];
|
||||
const plotConfigNameLoc = ref('default');
|
||||
const newSubplotName = ref('');
|
||||
const selAvailableIndicator = ref('');
|
||||
const selIndicatorName = ref('');
|
||||
const addNewIndicator = ref(false);
|
||||
const showConfig = ref(false);
|
||||
const selSubPlot = ref('main_plot');
|
||||
const tempPlotConfig = ref<PlotConfig>();
|
||||
const tempPlotConfigValid = ref(true);
|
||||
|
||||
@Prop({ required: false, default: true }) asModal!: boolean;
|
||||
const isMainPlot = computed(() => {
|
||||
return selSubPlot.value === 'main_plot';
|
||||
});
|
||||
|
||||
@Emit('input')
|
||||
emitPlotConfig() {
|
||||
return this.plotConfig;
|
||||
const currentPlotConfig = computed(() => {
|
||||
if (isMainPlot.value) {
|
||||
return plotConfig.value.main_plot;
|
||||
}
|
||||
|
||||
@ftbot.Action getStrategyPlotConfig;
|
||||
return plotConfig.value.subplots[selSubPlot.value];
|
||||
});
|
||||
const subplots = computed((): string[] => {
|
||||
// Subplot keys (for selection window)
|
||||
return ['main_plot', ...Object.keys(plotConfig.value.subplots)];
|
||||
});
|
||||
const usedColumns = computed((): string[] => {
|
||||
if (isMainPlot.value) {
|
||||
return Object.keys(plotConfig.value.main_plot);
|
||||
}
|
||||
if (selSubPlot.value in plotConfig.value.subplots) {
|
||||
return Object.keys(plotConfig.value.subplots[selSubPlot.value]);
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
@ftbot.Getter [BotStoreGetters.strategyPlotConfig];
|
||||
const addIndicator = (newIndicator: Record<string, IndicatorConfig>) => {
|
||||
console.log(plotConfig.value);
|
||||
|
||||
get selIndicator(): Record<string, IndicatorConfig> {
|
||||
if (this.addNewIndicator) {
|
||||
// const { plotConfig.value } = this;
|
||||
const name = Object.keys(newIndicator)[0];
|
||||
const indicator = newIndicator[name];
|
||||
if (isMainPlot.value) {
|
||||
console.log(`Adding ${name} to MainPlot`);
|
||||
plotConfig.value.main_plot[name] = { ...indicator };
|
||||
} else {
|
||||
console.log(`Adding ${name} to ${selSubPlot.value}`);
|
||||
plotConfig.value.subplots[selSubPlot.value][name] = { ...indicator };
|
||||
}
|
||||
|
||||
plotConfig.value = { ...plotConfig.value };
|
||||
// Reset random color
|
||||
addNewIndicator.value = false;
|
||||
emit('input', plotConfig.value);
|
||||
};
|
||||
|
||||
const selIndicator = computed({
|
||||
get() {
|
||||
if (addNewIndicator.value) {
|
||||
return {};
|
||||
}
|
||||
if (this.selIndicatorName) {
|
||||
if (selIndicatorName.value) {
|
||||
return {
|
||||
[this.selIndicatorName]: this.currentPlotConfig[this.selIndicatorName],
|
||||
[selIndicatorName.value]: currentPlotConfig.value[selIndicatorName.value],
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
set selIndicator(newValue: Record<string, IndicatorConfig>) {
|
||||
},
|
||||
set(newValue: Record<string, IndicatorConfig>) {
|
||||
// console.log('newValue', newValue);
|
||||
const name = Object.keys(newValue)[0];
|
||||
// this.currentPlotConfig[this.selIndicatorName] = { ...newValue[name] };
|
||||
// this.emitPlotConfig();
|
||||
if (name && newValue) {
|
||||
this.addIndicator(newValue);
|
||||
addIndicator(newValue);
|
||||
} else {
|
||||
this.addNewIndicator = false;
|
||||
}
|
||||
addNewIndicator.value = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
plotConfig: PlotConfig = EMPTY_PLOTCONFIG;
|
||||
|
||||
plotOptions = [
|
||||
{ text: 'Main Plot', value: 'main_plot' },
|
||||
{ text: 'Subplots', value: 'subplots' },
|
||||
];
|
||||
|
||||
plotConfigNameLoc = 'default';
|
||||
|
||||
newSubplotName = '';
|
||||
|
||||
selAvailableIndicator = '';
|
||||
|
||||
selIndicatorName = '';
|
||||
|
||||
addNewIndicator = false;
|
||||
|
||||
showConfig = false;
|
||||
|
||||
selSubPlot = 'main_plot';
|
||||
|
||||
tempPlotConfig?: PlotConfig = undefined;
|
||||
|
||||
tempPlotConfigValid = true;
|
||||
|
||||
@ftbot.Action saveCustomPlotConfig;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
@ftbot.Action updatePlotConfigName!: (plotConfigName: string) => void;
|
||||
|
||||
@ftbot.Getter [BotStoreGetters.plotConfigName]!: string;
|
||||
|
||||
get plotConfigJson() {
|
||||
return JSON.stringify(this.plotConfig, null, 2);
|
||||
}
|
||||
|
||||
set plotConfigJson(newValue: string) {
|
||||
const plotConfigJson = computed({
|
||||
get() {
|
||||
return JSON.stringify(plotConfig.value, null, 2);
|
||||
},
|
||||
set(newValue: string) {
|
||||
try {
|
||||
this.tempPlotConfig = JSON.parse(newValue);
|
||||
tempPlotConfig.value = JSON.parse(newValue);
|
||||
// TODO: Should Validate schema validity (should be PlotConfig type...)
|
||||
this.tempPlotConfigValid = true;
|
||||
tempPlotConfigValid.value = true;
|
||||
} catch (err) {
|
||||
this.tempPlotConfigValid = false;
|
||||
}
|
||||
tempPlotConfigValid.value = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
get subplots(): string[] {
|
||||
// Subplot keys (for selection window)
|
||||
return ['main_plot', ...Object.keys(this.plotConfig.subplots)];
|
||||
}
|
||||
|
||||
get usedColumns(): string[] {
|
||||
if (this.isMainPlot) {
|
||||
return Object.keys(this.plotConfig.main_plot);
|
||||
}
|
||||
if (this.selSubPlot in this.plotConfig.subplots) {
|
||||
return Object.keys(this.plotConfig.subplots[this.selSubPlot]);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
get isMainPlot() {
|
||||
return this.selSubPlot === 'main_plot';
|
||||
}
|
||||
|
||||
get currentPlotConfig() {
|
||||
if (this.isMainPlot) {
|
||||
return this.plotConfig.main_plot;
|
||||
}
|
||||
|
||||
return this.plotConfig.subplots[this.selSubPlot];
|
||||
}
|
||||
|
||||
mounted() {
|
||||
console.log('Config Mounted', this.value);
|
||||
this.plotConfig = this.value;
|
||||
this.plotConfigNameLoc = this.plotConfigName;
|
||||
}
|
||||
|
||||
@Watch('value')
|
||||
watchValue() {
|
||||
this.plotConfig = this.value;
|
||||
this.plotConfigNameLoc = this.plotConfigName;
|
||||
}
|
||||
|
||||
addIndicator(newIndicator: Record<string, IndicatorConfig>) {
|
||||
console.log(this.plotConfig);
|
||||
|
||||
const { plotConfig } = this;
|
||||
const name = Object.keys(newIndicator)[0];
|
||||
const indicator = newIndicator[name];
|
||||
if (this.isMainPlot) {
|
||||
console.log(`Adding ${name} to MainPlot`);
|
||||
plotConfig.main_plot[name] = { ...indicator };
|
||||
const removeIndicator = () => {
|
||||
console.log(plotConfig.value);
|
||||
// const { plotConfig } = this;
|
||||
if (isMainPlot.value) {
|
||||
console.log(`Removing ${selIndicatorName.value} from MainPlot`);
|
||||
delete plotConfig.value.main_plot[selIndicatorName.value];
|
||||
} else {
|
||||
console.log(`Adding ${name} to ${this.selSubPlot}`);
|
||||
plotConfig.subplots[this.selSubPlot][name] = { ...indicator };
|
||||
console.log(`Removing ${selIndicatorName.value} from ${selSubPlot.value}`);
|
||||
delete plotConfig.value.subplots[selSubPlot.value][selIndicatorName.value];
|
||||
}
|
||||
|
||||
this.plotConfig = { ...plotConfig };
|
||||
// Reset random color
|
||||
this.addNewIndicator = false;
|
||||
this.emitPlotConfig();
|
||||
}
|
||||
|
||||
removeIndicator() {
|
||||
console.log(this.plotConfig);
|
||||
const { plotConfig } = this;
|
||||
if (this.isMainPlot) {
|
||||
console.log(`Removing ${this.selIndicatorName} from MainPlot`);
|
||||
delete plotConfig.main_plot[this.selIndicatorName];
|
||||
} else {
|
||||
console.log(`Removing ${this.selIndicatorName} from ${this.selSubPlot}`);
|
||||
delete plotConfig.subplots[this.selSubPlot][this.selIndicatorName];
|
||||
}
|
||||
|
||||
this.plotConfig = { ...plotConfig };
|
||||
console.log(this.plotConfig);
|
||||
this.selIndicatorName = '';
|
||||
this.emitPlotConfig();
|
||||
}
|
||||
|
||||
addSubplot() {
|
||||
this.plotConfig.subplots = {
|
||||
...this.plotConfig.subplots,
|
||||
[this.newSubplotName]: {},
|
||||
plotConfig.value = { ...plotConfig.value };
|
||||
console.log(plotConfig.value);
|
||||
selIndicatorName.value = '';
|
||||
emit('input', plotConfig.value);
|
||||
};
|
||||
this.selSubPlot = this.newSubplotName;
|
||||
this.newSubplotName = '';
|
||||
const addSubplot = () => {
|
||||
plotConfig.value.subplots = {
|
||||
...plotConfig.value.subplots,
|
||||
[newSubplotName.value]: {},
|
||||
};
|
||||
selSubPlot.value = newSubplotName.value;
|
||||
newSubplotName.value = '';
|
||||
|
||||
console.log(this.plotConfig);
|
||||
this.emitPlotConfig();
|
||||
}
|
||||
console.log(plotConfig.value);
|
||||
emit('input', plotConfig.value);
|
||||
};
|
||||
|
||||
delSubplot() {
|
||||
delete this.plotConfig.subplots[this.selSubPlot];
|
||||
this.plotConfig.subplots = { ...this.plotConfig.subplots };
|
||||
this.selSubPlot = '';
|
||||
}
|
||||
|
||||
savePlotConfig() {
|
||||
this.saveCustomPlotConfig({ [this.plotConfigNameLoc]: this.plotConfig });
|
||||
}
|
||||
|
||||
loadPlotConfig() {
|
||||
this.plotConfig = getCustomPlotConfig(this.plotConfigNameLoc);
|
||||
console.log(this.plotConfig);
|
||||
const delSubplot = () => {
|
||||
delete plotConfig.value.subplots[selSubPlot.value];
|
||||
plotConfig.value.subplots = { ...plotConfig.value.subplots };
|
||||
selSubPlot.value = '';
|
||||
};
|
||||
const loadPlotConfig = () => {
|
||||
plotConfig.value = getCustomPlotConfig(plotConfigNameLoc.value);
|
||||
console.log(plotConfig.value);
|
||||
console.log('loading config');
|
||||
this.emitPlotConfig();
|
||||
}
|
||||
emit('input', plotConfig.value);
|
||||
};
|
||||
|
||||
loadConfigFromString() {
|
||||
const loadConfigFromString = () => {
|
||||
// this.plotConfig = JSON.parse();
|
||||
if (this.tempPlotConfig !== undefined && this.tempPlotConfigValid) {
|
||||
this.plotConfig = this.tempPlotConfig;
|
||||
this.emitPlotConfig();
|
||||
if (tempPlotConfig.value !== undefined && tempPlotConfigValid.value) {
|
||||
plotConfig.value = tempPlotConfig.value;
|
||||
emit('input', plotConfig.value);
|
||||
}
|
||||
}
|
||||
|
||||
resetConfig() {
|
||||
this.plotConfig = { ...EMPTY_PLOTCONFIG };
|
||||
}
|
||||
|
||||
async loadPlotConfigFromStrategy() {
|
||||
};
|
||||
const resetConfig = () => {
|
||||
plotConfig.value = { ...EMPTY_PLOTCONFIG };
|
||||
};
|
||||
const loadPlotConfigFromStrategy = async () => {
|
||||
try {
|
||||
await this.getStrategyPlotConfig();
|
||||
this.plotConfig = this.strategyPlotConfig;
|
||||
this.emitPlotConfig();
|
||||
await getStrategyPlotConfig();
|
||||
plotConfig.value = strategyPlotConfig.value;
|
||||
emit('input', plotConfig.value);
|
||||
} catch (data) {
|
||||
//
|
||||
showAlert('Failed to load Plot configuration from Strategy.');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const savePlotConfig = () => {
|
||||
saveCustomPlotConfig({ [plotConfigNameLoc.value]: plotConfig.value });
|
||||
};
|
||||
|
||||
watch(props.value, () => {
|
||||
console.log('config value');
|
||||
plotConfig.value = props.value;
|
||||
plotConfigNameLoc.value = plotConfigName.value;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
console.log('Config Mounted', props.value);
|
||||
plotConfig.value = props.value;
|
||||
plotConfigNameLoc.value = plotConfigName.value;
|
||||
});
|
||||
|
||||
return {
|
||||
saveCustomPlotConfig,
|
||||
getStrategyPlotConfig,
|
||||
updatePlotConfigName,
|
||||
strategyPlotConfig,
|
||||
plotConfigName,
|
||||
addIndicator,
|
||||
removeIndicator,
|
||||
addSubplot,
|
||||
delSubplot,
|
||||
loadPlotConfig,
|
||||
loadConfigFromString,
|
||||
resetConfig,
|
||||
loadPlotConfigFromStrategy,
|
||||
savePlotConfig,
|
||||
showConfig,
|
||||
addNewIndicator,
|
||||
selIndicatorName,
|
||||
usedColumns,
|
||||
selSubPlot,
|
||||
newSubplotName,
|
||||
subplots,
|
||||
plotConfigNameLoc,
|
||||
selIndicator,
|
||||
plotConfigJson,
|
||||
tempPlotConfigValid,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -358,6 +366,7 @@ export default class PlotConfigurator extends Vue {
|
|||
.form-group {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user