Move plotconfig logic to plotStore

This commit is contained in:
Matthias 2022-11-01 14:45:37 +01:00
parent 1b21177351
commit e99deff46f
2 changed files with 18 additions and 36 deletions

View File

@ -9,7 +9,7 @@
hide-backdrop hide-backdrop
button-size="sm" button-size="sm"
> >
<PlotConfigurator v-model="plotConfig" :columns="datasetColumns" /> <PlotConfigurator v-model="plotStore.plotConfig" :columns="datasetColumns" />
</b-modal> </b-modal>
<div class="row mr-0"> <div class="row mr-0">
@ -50,7 +50,7 @@
v-model="plotStore.plotConfigName" v-model="plotStore.plotConfigName"
:options="plotStore.availablePlotConfigNames" :options="plotStore.availablePlotConfigNames"
size="sm" size="sm"
@change="plotConfigChanged" @change="plotStore.plotConfigChanged"
> >
</b-select> </b-select>
</div> </div>
@ -67,7 +67,7 @@
v-if="hasDataset" v-if="hasDataset"
:dataset="dataset" :dataset="dataset"
:trades="trades" :trades="trades"
:plot-config="plotConfig" :plot-config="plotStore.plotConfig"
:heikin-ashi="settingsStore.useHeikinAshiCandles" :heikin-ashi="settingsStore.useHeikinAshiCandles"
:use-u-t-c="settingsStore.timezone === 'UTC'" :use-u-t-c="settingsStore.timezone === 'UTC'"
:theme="settingsStore.chartTheme" :theme="settingsStore.chartTheme"
@ -85,24 +85,20 @@
</div> </div>
<transition name="fade" mode="in-out"> <transition name="fade" mode="in-out">
<div v-if="!plotConfigModal" v-show="showPlotConfig" class="w-25 config-sidebar"> <div v-if="!plotConfigModal" v-show="showPlotConfig" class="w-25 config-sidebar">
<PlotConfigurator v-model="plotConfig" :columns="datasetColumns" :as-modal="false" /> <PlotConfigurator
v-model="plotStore.plotConfig"
:columns="datasetColumns"
:as-modal="false"
/>
</div> </div>
</transition> </transition>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { Trade, PairHistory, LoadingStatus, ChartSliderPosition } from '@/types';
Trade,
PairHistory,
EMPTY_PLOTCONFIG,
PlotConfig,
LoadingStatus,
ChartSliderPosition,
} from '@/types';
import CandleChart from '@/components/charts/CandleChart.vue'; import CandleChart from '@/components/charts/CandleChart.vue';
import PlotConfigurator from '@/components/charts/PlotConfigurator.vue'; import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
import vSelect from 'vue-select'; import vSelect from 'vue-select';
import { useSettingsStore } from '@/stores/settings'; import { useSettingsStore } from '@/stores/settings';
import { usePlotConfigStore } from '@/stores/plotConfig'; import { usePlotConfigStore } from '@/stores/plotConfig';
@ -136,7 +132,6 @@ export default defineComponent({
const plotStore = usePlotConfigStore(); const plotStore = usePlotConfigStore();
const pair = ref(''); const pair = ref('');
const plotConfig = ref<PlotConfig>({ ...EMPTY_PLOTCONFIG });
const showPlotConfig = ref(props.plotConfigModal); const showPlotConfig = ref(props.plotConfigModal);
const dataset = computed((): PairHistory => { const dataset = computed((): PairHistory => {
@ -175,12 +170,6 @@ export default defineComponent({
} }
}); });
const plotConfigChanged = () => {
console.log('plotConfigChanged');
plotConfig.value = getCustomPlotConfig(plotStore.plotConfigName);
plotStore.setPlotConfigName(plotStore.plotConfigName);
};
const showConfigurator = () => { const showConfigurator = () => {
if (props.plotConfigModal) { if (props.plotConfigModal) {
root?.proxy.$bvModal.show('plotConfiguratorModal'); root?.proxy.$bvModal.show('plotConfiguratorModal');
@ -232,8 +221,7 @@ export default defineComponent({
} else if (props.availablePairs.length > 0) { } else if (props.availablePairs.length > 0) {
[pair.value] = props.availablePairs; [pair.value] = props.availablePairs;
} }
plotStore.plotConfigName = getPlotConfigName(); plotStore.plotConfigChanged();
plotConfig.value = getCustomPlotConfig(plotStore.plotConfigName);
if (!hasDataset) { if (!hasDataset) {
refresh(); refresh();
@ -251,12 +239,10 @@ export default defineComponent({
isLoadingDataset, isLoadingDataset,
noDatasetText, noDatasetText,
hasDataset, hasDataset,
plotConfigChanged,
showPlotConfig, showPlotConfig,
showConfigurator, showConfigurator,
refresh, refresh,
pair, pair,
plotConfig,
}; };
}, },
}); });

View File

@ -1,5 +1,6 @@
import { import {
getAllPlotConfigNames, getAllPlotConfigNames,
getCustomPlotConfig,
getPlotConfigName, getPlotConfigName,
storeCustomPlotConfig, storeCustomPlotConfig,
storePlotConfigName, storePlotConfigName,
@ -13,10 +14,11 @@ export const usePlotConfigStore = defineStore('plotConfig', {
customPlotConfig: {} as PlotConfigStorage, customPlotConfig: {} as PlotConfigStorage,
plotConfigName: getPlotConfigName(), plotConfigName: getPlotConfigName(),
availablePlotConfigNames: getAllPlotConfigNames(), availablePlotConfigNames: getAllPlotConfigNames(),
plotConfig: { ...EMPTY_PLOTCONFIG },
}; };
}, },
getters: { getters: {
plotConfig: (state) => state.customPlotConfig[state.plotConfigName] || { ...EMPTY_PLOTCONFIG }, // plotConfig: (state) => state.customPlotConfig[state.plotConfigName] || { ...EMPTY_PLOTCONFIG },
}, },
actions: { actions: {
saveCustomPlotConfig(plotConfig: PlotConfigStorage) { saveCustomPlotConfig(plotConfig: PlotConfigStorage) {
@ -24,20 +26,14 @@ export const usePlotConfigStore = defineStore('plotConfig', {
storeCustomPlotConfig(plotConfig); storeCustomPlotConfig(plotConfig);
this.availablePlotConfigNames = getAllPlotConfigNames(); this.availablePlotConfigNames = getAllPlotConfigNames();
}, },
updatePlotConfigName(plotConfigName: string) {
// Set default plot config name
this.plotConfigName = plotConfigName;
storePlotConfigName(plotConfigName);
},
setPlotConfigName(plotConfigName: string) { setPlotConfigName(plotConfigName: string) {
// TODO: This is identical to updatePlotConfigName
this.plotConfigName = plotConfigName; this.plotConfigName = plotConfigName;
storePlotConfigName(plotConfigName); storePlotConfigName(plotConfigName);
}, },
// plotConfigChanged() { plotConfigChanged() {
// console.log('plotConfigChanged'); console.log('plotConfigChanged');
// plotConfig.value = getCustomPlotConfig(this.plotConfigName); this.plotConfig = getCustomPlotConfig(this.plotConfigName);
// plotStore.setPlotConfigName(plotConfigName.value); this.setPlotConfigName(this.plotConfigName);
// }, },
}, },
}); });