plotconfig -> script setup

This commit is contained in:
Matthias 2022-12-13 06:19:25 +01:00
parent 2510b1f2d4
commit bfb594800b

View File

@ -119,219 +119,191 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { PlotConfig, EMPTY_PLOTCONFIG, IndicatorConfig } from '@/types'; import { PlotConfig, EMPTY_PLOTCONFIG, IndicatorConfig } from '@/types';
import { getCustomPlotConfig } from '@/shared/storage'; import { getCustomPlotConfig } from '@/shared/storage';
import PlotIndicator from '@/components/charts/PlotIndicator.vue'; import PlotIndicator from '@/components/charts/PlotIndicator.vue';
import { showAlert } from '@/stores/alerts'; import { showAlert } from '@/stores/alerts';
import { defineComponent, computed, ref, onMounted } from 'vue'; import { computed, ref, onMounted } from 'vue';
import { useBotStore } from '@/stores/ftbotwrapper'; import { useBotStore } from '@/stores/ftbotwrapper';
import { usePlotConfigStore } from '@/stores/plotConfig'; import { usePlotConfigStore } from '@/stores/plotConfig';
export default defineComponent({ defineProps({
name: 'PlotConfigurator', columns: { required: true, type: Array as () => string[] },
components: { PlotIndicator }, asModal: { required: false, default: true, type: Boolean },
props: { });
columns: { required: true, type: Array as () => string[] },
asModal: { required: false, default: true, type: Boolean },
},
setup() {
const plotStore = usePlotConfigStore();
const plotConfig = ref<PlotConfig>(EMPTY_PLOTCONFIG); const plotStore = usePlotConfigStore();
const plotConfigNameLoc = ref('default'); const plotConfig = ref<PlotConfig>(EMPTY_PLOTCONFIG);
const newSubplotName = 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);
const isMainPlot = computed(() => { const plotConfigNameLoc = ref('default');
return selSubPlot.value === 'main_plot'; const newSubplotName = 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);
const currentPlotConfig = computed(() => { const isMainPlot = computed(() => {
if (isMainPlot.value) { return selSubPlot.value === 'main_plot';
return plotConfig.value.main_plot; });
}
return plotConfig.value.subplots[selSubPlot.value]; const currentPlotConfig = computed(() => {
}); if (isMainPlot.value) {
const subplots = computed((): string[] => { return plotConfig.value.main_plot;
// 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 [];
});
const addIndicator = (newIndicator: Record<string, IndicatorConfig>) => { return plotConfig.value.subplots[selSubPlot.value];
console.log(plotConfig.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 [];
});
// const { plotConfig.value } = this; const addIndicator = (newIndicator: Record<string, IndicatorConfig>) => {
const name = Object.keys(newIndicator)[0]; console.log(plotConfig.value);
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 }; // const { plotConfig.value } = this;
// Reset random color const name = Object.keys(newIndicator)[0];
addNewIndicator.value = false; const indicator = newIndicator[name];
plotStore.setPlotConfig(plotConfig.value); 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 };
}
const selIndicator = computed({ plotConfig.value = { ...plotConfig.value };
get() { // Reset random color
if (addNewIndicator.value) { addNewIndicator.value = false;
return {}; plotStore.setPlotConfig(plotConfig.value);
} };
if (selIndicatorName.value) {
return {
[selIndicatorName.value]: currentPlotConfig.value[selIndicatorName.value],
};
}
return {};
},
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) {
addIndicator(newValue);
} else {
addNewIndicator.value = false;
}
},
});
const plotConfigJson = computed({ const selIndicator = computed({
get() { get() {
return JSON.stringify(plotConfig.value, null, 2); if (addNewIndicator.value) {
}, return {};
set(newValue: string) { }
try { if (selIndicatorName.value) {
tempPlotConfig.value = JSON.parse(newValue); return {
// TODO: Should Validate schema validity (should be PlotConfig type...) [selIndicatorName.value]: currentPlotConfig.value[selIndicatorName.value],
tempPlotConfigValid.value = true;
} catch (err) {
tempPlotConfigValid.value = false;
}
},
});
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(`Removing ${selIndicatorName.value} from ${selSubPlot.value}`);
delete plotConfig.value.subplots[selSubPlot.value][selIndicatorName.value];
}
plotConfig.value = { ...plotConfig.value };
console.log(plotConfig.value);
selIndicatorName.value = '';
plotStore.setPlotConfig(plotConfig.value);
};
const addSubplot = () => {
plotConfig.value.subplots = {
...plotConfig.value.subplots,
[newSubplotName.value]: {},
}; };
selSubPlot.value = newSubplotName.value; }
newSubplotName.value = ''; return {};
plotStore.setPlotConfig(plotConfig.value);
};
const delSubplot = () => {
delete plotConfig.value.subplots[selSubPlot.value];
plotConfig.value.subplots = { ...plotConfig.value.subplots };
selSubPlot.value = '';
plotStore.setPlotConfig(plotConfig.value);
};
const loadPlotConfig = () => {
plotConfig.value = getCustomPlotConfig(plotConfigNameLoc.value);
console.log(plotConfig.value);
console.log('loading config');
plotStore.setPlotConfig(plotConfig.value);
};
const loadConfigFromString = () => {
// this.plotConfig = JSON.parse();
if (tempPlotConfig.value !== undefined && tempPlotConfigValid.value) {
plotConfig.value = tempPlotConfig.value;
plotStore.setPlotConfig(plotConfig.value);
}
};
const resetConfig = () => {
plotConfig.value = { ...EMPTY_PLOTCONFIG };
};
const loadPlotConfigFromStrategy = async () => {
try {
const botStore = useBotStore();
await botStore.activeBot.getStrategyPlotConfig();
if (botStore.activeBot.strategyPlotConfig) {
plotConfig.value = botStore.activeBot.strategyPlotConfig;
plotStore.setPlotConfig(plotConfig.value);
}
} catch (data) {
//
showAlert('Failed to load Plot configuration from Strategy.');
}
};
const savePlotConfig = () => {
plotStore.saveCustomPlotConfig({ [plotConfigNameLoc.value]: plotConfig.value });
};
onMounted(() => {
// console.log('Config Mounted', props.value);
plotConfig.value = plotStore.plotConfig;
plotConfigNameLoc.value = plotStore.plotConfigName;
});
return {
plotStore,
removeIndicator,
addSubplot,
delSubplot,
loadPlotConfig,
loadConfigFromString,
resetConfig,
loadPlotConfigFromStrategy,
savePlotConfig,
showConfig,
addNewIndicator,
selIndicatorName,
usedColumns,
selSubPlot,
newSubplotName,
subplots,
plotConfigNameLoc,
selIndicator,
plotConfigJson,
tempPlotConfigValid,
};
}, },
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) {
addIndicator(newValue);
} else {
addNewIndicator.value = false;
}
},
});
const plotConfigJson = computed({
get() {
return JSON.stringify(plotConfig.value, null, 2);
},
set(newValue: string) {
try {
tempPlotConfig.value = JSON.parse(newValue);
// TODO: Should Validate schema validity (should be PlotConfig type...)
tempPlotConfigValid.value = true;
} catch (err) {
tempPlotConfigValid.value = false;
}
},
});
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(`Removing ${selIndicatorName.value} from ${selSubPlot.value}`);
delete plotConfig.value.subplots[selSubPlot.value][selIndicatorName.value];
}
plotConfig.value = { ...plotConfig.value };
console.log(plotConfig.value);
selIndicatorName.value = '';
plotStore.setPlotConfig(plotConfig.value);
};
const addSubplot = () => {
plotConfig.value.subplots = {
...plotConfig.value.subplots,
[newSubplotName.value]: {},
};
selSubPlot.value = newSubplotName.value;
newSubplotName.value = '';
plotStore.setPlotConfig(plotConfig.value);
};
const delSubplot = () => {
delete plotConfig.value.subplots[selSubPlot.value];
plotConfig.value.subplots = { ...plotConfig.value.subplots };
selSubPlot.value = '';
plotStore.setPlotConfig(plotConfig.value);
};
const loadPlotConfig = () => {
plotConfig.value = getCustomPlotConfig(plotConfigNameLoc.value);
console.log(plotConfig.value);
console.log('loading config');
plotStore.setPlotConfig(plotConfig.value);
};
const loadConfigFromString = () => {
// this.plotConfig = JSON.parse();
if (tempPlotConfig.value !== undefined && tempPlotConfigValid.value) {
plotConfig.value = tempPlotConfig.value;
plotStore.setPlotConfig(plotConfig.value);
}
};
const resetConfig = () => {
plotConfig.value = { ...EMPTY_PLOTCONFIG };
};
const loadPlotConfigFromStrategy = async () => {
try {
const botStore = useBotStore();
await botStore.activeBot.getStrategyPlotConfig();
if (botStore.activeBot.strategyPlotConfig) {
plotConfig.value = botStore.activeBot.strategyPlotConfig;
plotStore.setPlotConfig(plotConfig.value);
}
} catch (data) {
//
showAlert('Failed to load Plot configuration from Strategy.');
}
};
const savePlotConfig = () => {
plotStore.saveCustomPlotConfig({ [plotConfigNameLoc.value]: plotConfig.value });
};
onMounted(() => {
// console.log('Config Mounted', props.value);
plotConfig.value = plotStore.plotConfig;
plotConfigNameLoc.value = plotStore.plotConfigName;
}); });
</script> </script>