Provide a method to remap template columns

src/components/charts/PlotConfigurator.vue

@@ -73,7 +73,7 @@
       @indicator-selected="addNewIndicatorSelected"
     />
 
-    <PlotFromTemplate v-model:visible="fromPlotTemplateVisible" />
+    <PlotFromTemplate v-model:visible="fromPlotTemplateVisible" :columns="columns" />
 
     <PlotIndicator
       v-if="selIndicatorName && !fromPlotTemplateVisible"

src/components/charts/PlotFromTemplate.vue

@@ -1,32 +1,51 @@
 <script setup lang="ts">
-const { plotTemplateNames, applyPlotTemplate } = usePlotTemplates();
-
 const visible = defineModel<boolean>('visible');
+defineProps<{
+  columns: string[];
+}>();
 
+const { plotTemplateNames, applyPlotTemplate, getTemplateContent } = usePlotTemplates();
 const plotStore = usePlotConfigStore();
 
 function fromTemplateApply() {
   if (selTemplateName.value) {
     plotStore.editablePlotConfig = {
-      ...applyPlotTemplate(selTemplateName.value, plotStore.editablePlotConfig),
+      ...applyPlotTemplate(selTemplateName.value, plotStore.editablePlotConfig, indicatorMap.value),
     };
     visible.value = false;
   }
 }
+
+function clickStartUseTemplate() {
+  showIndicatorMapping.value = !showIndicatorMapping.value;
+
+  indicatorMap.value = plotConfigColumns(getTemplateContent(selTemplateName.value)).reduce(
+    (acc, indicator) => {
+      acc[indicator] = indicator;
+      return acc;
+    },
+    {},
+  );
+}
+
 const selTemplateName = ref<string>('');
 watch(
   () => visible.value,
   (v) => {
     if (v) {
       selTemplateName.value = '';
+      showIndicatorMapping.value = false;
     }
   },
 );
+
+const indicatorMap = ref<Record<string, string>>({});
+const showIndicatorMapping = ref(false);
 </script>
 
 <template>
   <div v-if="visible" class="pt-1">
-    <BFormGroup label="Select Templates" label-for="selectTemplate">
+    <BFormGroup v-if="!showIndicatorMapping" label="Select Templates" label-for="selectTemplate">
       <BFormSelect
         id="selectTemplate"
         v-model="selTemplateName"
@@ -35,13 +54,41 @@ watch(
       >
       </BFormSelect>
     </BFormGroup>
+    <div v-else>
+      <h5 class="mt-1 text-center">Re-map indicators</h5>
+      <div v-for="indicator in Object.keys(indicatorMap)" :key="indicator">
+        <div class="d-flex gap-2 align-items-center">
+          <span class="flex-grow-1 w-100">{{ indicator }}</span>
+          <BFormSelect
+            :id="`indicator-${indicator}`"
+            v-model="indicatorMap[indicator]"
+            class="flex-grow-1 w-100"
+            :options="columns"
+          >
+          </BFormSelect>
+        </div>
+      </div>
+    </div>
     <div class="mt-2 d-flex gap-1 justify-content-end">
       <BButton size="sm" title="Abort" variant="secondary" @click="visible = false">
         <i-mdi-close />
       </BButton>
       <BButton
+        v-if="!showIndicatorMapping"
         :disabled="!selTemplateName"
         size="sm"
+        style="width: 33%"
+        title="Use template"
+        variant="primary"
+        @click="clickStartUseTemplate"
+      >
+        <i-mdi-check class="me-1" />Use Template
+      </BButton>
+      <BButton
+        v-if="showIndicatorMapping"
+        :disabled="!selTemplateName"
+        size="sm"
+        style="width: 33%"
         title="Apply template"
         variant="primary"
         @click="fromTemplateApply"

src/composables/plotTemplates.ts

@@ -40,17 +40,50 @@ const plotTemplates = ref<PlotConfigTemplate>({
   },
 });
 
+function replaceTemplateColumns(template: Partial<PlotConfig>, nameMap: Record<string, string>) {
+  // Replace column names in the template with the actual column names
+  // Replace the keys of all elements in main_plot
+  const newTemplate = deepClone(template);
+  if (!nameMap) {
+    return newTemplate;
+  }
+  const newMainPlot: Record<string, any> = {};
+  for (const key in template.main_plot) {
+    const newKey = nameMap[key] || key;
+    newMainPlot[newKey] = template.main_plot[key];
+  }
+  newTemplate.main_plot = newMainPlot;
+
+  // Replace the keys of all elements in subplots
+  const newSubplots: Record<string, any> = {};
+  for (const subplotKey in template.subplots) {
+    const newSubplot: Record<string, any> = {};
+    for (const key in template.subplots[subplotKey]) {
+      const newKey = nameMap[key] || key;
+      newSubplot[newKey] = template.subplots[subplotKey][key];
+    }
+    newSubplots[subplotKey] = newSubplot;
+  }
+  newTemplate.subplots = newSubplots;
+  return newTemplate;
+}
+
 export function usePlotTemplates() {
   function getTemplateContent(templateName: string) {
     return plotTemplates.value[templateName] || {};
   }
 
-  function applyPlotTemplate(templateName: string, currentConfig: PlotConfig) {
+  function applyPlotTemplate(
+    templateName: string,
+    currentConfig: PlotConfig,
+    nameMap: Record<string, string> = {},
+  ) {
     const template = getTemplateContent(templateName);
     if (!template) {
       return currentConfig;
     }
-    return deepMerge(currentConfig, template);
+    const newTemplate = replaceTemplateColumns(template, nameMap);
+    return deepMerge(currentConfig, newTemplate);
   }
 
   return {