Move plotconfig logic to plotStore

src/components/charts/CandleChartContainer.vue

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

src/stores/plotConfig.ts

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