Seaborn - add index to x, y, hue option

minjk-bl · minjk-bl · commit 041329339d59 · 2022-05-06T15:26:31.000+09:00
diff --git a/js/com/com_generatorV2.js b/js/com/com_generatorV2.js
@@ -657,12 +657,13 @@ define([
      * @param {array} columnInputIdList 
      * @param {string} tagType input / select (tag type)
      * @param {array/boolean} columnWithEmpty boolean array or value to decide whether select tag has empty space
+     * @param {array/boolean} columnWithIndex boolean array or value to decide whether select tag has index option
      * Usage : 
      *  $(document).on('change', this.wrapSelector('#dataframe_tag_id'), function() {
      *      pdGen.vp_bindColumnSource(that.wrapSelector(), this, ['column_input_id'], 'select', [true, true, true]);
      *  });
      */
-    var vp_bindColumnSource = function(selector, target, columnInputIdList, tagType="input", columnWithEmpty=false) {
+    var vp_bindColumnSource = function(selector, target, columnInputIdList, tagType="input", columnWithEmpty=false, columnWithIndex=false) {
         var varName = '';
         if ($(target).length > 0) {
             varName = $(target).val();
@@ -702,6 +703,20 @@ define([
                 let { result, type, msg } = resultObj;
                 var varResult = JSON.parse(result);
 
+                // check if it needs to add index option
+                let addIndex = false;
+                if (Array.isArray(columnWithIndex)) {
+                    addIndex = columnWithIndex[idx];
+                } else {
+                    addIndex = columnWithIndex;
+                }
+                if (addIndex == true) {
+                    varResult = [
+                        {value: varName + '.index', label: 'index'},
+                        ...varResult
+                    ]
+                }
+
                 // check if it needs to add empty option
                 let addEmpty = false;
                 if (Array.isArray(columnWithEmpty)) {
@@ -711,7 +726,7 @@ define([
                 }
                 if (addEmpty == true) {
                     varResult = [
-                        {value: '', label: ''},
+                        {value: '', label: 'Select option...'},
                         ...varResult
                     ]
                 }
diff --git a/js/m_visualize/Seaborn.js b/js/m_visualize/Seaborn.js
@@ -246,7 +246,7 @@ define([
                     $(that.wrapSelector('#hue')).prop('disabled', false);
                     
                     // bind column source using selected dataframe
-                    com_generator.vp_bindColumnSource(that.wrapSelector(), $(that.wrapSelector('#data')), ['x', 'y', 'hue'], 'select', true);
+                    com_generator.vp_bindColumnSource(that.wrapSelector(), $(that.wrapSelector('#data')), ['x', 'y', 'hue'], 'select', true, true);
                 } else {
                     $(that.wrapSelector('#x')).prop('disabled', true);
                     $(that.wrapSelector('#y')).prop('disabled', true);
@@ -592,7 +592,7 @@ define([
                     // data sampling code for preview
                     convertedData = data + '.sample(n=' + sampleCount + ', random_state=0)';
                     // replace pre-defined options
-                    generatedCode = generatedCode.replace(data, convertedData);
+                    generatedCode = generatedCode.replaceAll(data, convertedData);
                 }   
 
                 code.appendFormatLine("{0}{1}", indent, generatedCode);
@@ -603,7 +603,8 @@ define([
                 code.appendLine(chartCode.toString());
             }
 
-            return code.toString();
+            // remove last Enter(\n) from code and then run it
+            return code.toString().replace(/\n+$/, "");
         }
         
     }

Original file line number	Diff line number	Diff line change
`@@ -246,7 +246,7 @@ define([`
`246`	`246`	`$(that.wrapSelector('#hue')).prop('disabled', false);`
`247`	`247`
`248`	`248`	`// bind column source using selected dataframe`
`249`		`- com_generator.vp_bindColumnSource(that.wrapSelector(), $(that.wrapSelector('#data')), ['x', 'y', 'hue'], 'select', true);`
	`249`	`+ com_generator.vp_bindColumnSource(that.wrapSelector(), $(that.wrapSelector('#data')), ['x', 'y', 'hue'], 'select', true, true);`
`250`	`250`	`} else {`
`251`	`251`	`$(that.wrapSelector('#x')).prop('disabled', true);`
`252`	`252`	`$(that.wrapSelector('#y')).prop('disabled', true);`
`@@ -592,7 +592,7 @@ define([`
`592`	`592`	`// data sampling code for preview`
`593`	`593`	`convertedData = data + '.sample(n=' + sampleCount + ', random_state=0)';`
`594`	`594`	`// replace pre-defined options`
`595`		`- generatedCode = generatedCode.replace(data, convertedData);`
	`595`	`+ generatedCode = generatedCode.replaceAll(data, convertedData);`
`596`	`596`	`}`
`597`	`597`
`598`	`598`	`code.appendFormatLine("{0}{1}", indent, generatedCode);`
`@@ -603,7 +603,8 @@ define([`
`603`	`603`	`code.appendLine(chartCode.toString());`
`604`	`604`	`}`
`605`	`605`
`606`		`- return code.toString();`
	`606`	`+ // remove last Enter(\n) from code and then run it`
	`607`	`+ return code.toString().replace(/\n+$/, "");`
`607`	`608`	`}`
`608`	`609`
`609`	`610`	`}`