allow selection of several lines (y-columns) in a configured csv plot

Author: aseeland

viplab-standalone-frontend-vue/src/components/csv-plots/CsvPlot.vue

@@ -151,7 +151,7 @@ export default {
       for (let k = 0; k < keys.length; k++) {
         if (this.datasetProp.key) {
           // multiply y-axis by factor if given
-          if (keys[k] === this.datasetProp.key) {
+          if (keys[k] === this.datasetProp.key || this.datasetProp.key.includes(keys[k])) {
             if (this.datasetProp.factor !== undefined) {
               for (let j = 0; j < obj[(xkey)].length; j++) {
                 obj[(keys[k])][j] = obj[(keys[k])][j] * this.datasetProp.factor;
@@ -160,7 +160,7 @@ export default {
             const trace = {
               x: obj[(xkey)],
               y: obj[(keys[k])],
-              name: this.datasetProp.label,
+              name: (typeof this.datasetProp.key == 'string') ? this.datasetProp.label : keys[k],
             };
             traces.push(trace);
           }

viplab-standalone-frontend-vue/src/pages/teacher/App.vue

@@ -668,7 +668,7 @@
                                       </div>
                                     </div>
                                     <!-- plots -->
-                                    <label class="mr-2" for="csvConfig.plots">Information about the Y-Axes: </label>
+                                    <label class="mr-2" for="csvConfig.plots">Information about the Y-Axis: </label>
                                     <div class="d-flex ml-4 mr-4">
                                       <div class="flex-grow-1">
                                         <label class="mr-2" for="csvConfig.plots">Define multiple Plots generated from one CSV: </label>
@@ -687,7 +687,7 @@
                                         <!-- key -->
                                         <div class="d-flex form-group">
                                           <div class="flex-grow-1">
-                                            <label class="mr-2" for="csvPlot.key">Key of Y-Axes in CSV: </label>
+                                            <label class="mr-2" for="csvPlot.key">Key(s) of Y-Axis in CSV: </label>
                                           </div>
                                           <!-- Delete CSV-Config -->
                                           <div class="tooltip-icon pl-2" @click="removePlot($event, csvConfig, csvPlot)">
@@ -700,7 +700,7 @@
                                           </div>
                                           <!-- tooltip -->
                                           <div class="tooltip-icon pl-2">
-                                              <b-icon-info-circle v-tooltip.top-center="'Key for y-axis given in csv header.'"></b-icon-info-circle>
+                                              <b-icon-info-circle v-tooltip.top-center="'Key(s) for y-axis given in csv header.'"></b-icon-info-circle>
                                           </div>
                                         </div>
                                         <!-- label -->

viplab-standalone-frontend-vue/src/pages/teacher/json-schema/computation-template-container.json

@@ -82,9 +82,9 @@
                                             "type": "object",
                                             "properties": {
                                                 "key" : {
-                                                    "type" : "string",
+                                                    "type" : ["string", "array"],
                                                     "minLength": 1,
-                                                    "description": "key for y-axis given in csv header"
+                                                    "description": "key(s) for y-axis given in csv header"
                                                 },
                                                 "label" : {
                                                     "type" : "string",

viplab-standalone-frontend-vue/src/pages/viplab/App.vue

@@ -341,7 +341,7 @@
                                   class="outPartcontent"
                                 >
                                   <div v-if="artifact.plots">
-                                    <div v-for="plot in artifact.plots" :key="plot.key">
+                                    <div v-for="plot in artifact.plots" :key="(typeof plot.key == 'string') ? plot.key : plot.key[0]">
                                       <csv-plot
                                         :csvsProp=artifact.urlsOrContents
                                         :areUrlsProp="false"
@@ -420,7 +420,7 @@
                                 </div>
                                 <div v-else-if="artifact.MIMEtype == 'text/csv'">
                                   <div v-if="artifact.plots">
-                                    <div v-for="plot in artifact.plots" :key="plot.key">
+                                    <div v-for="plot in artifact.plots" :key="(typeof plot.key == 'string') ? plot.key : plot.key[0]">
                                       <csv-plot
                                         :csvsProp=artifact.urlsOrContents
                                         :areUrlsProp="true"