Add empty option for x, y, hue

minjk-bl · minjk-bl · commit a9304f468b69 · 2022-04-26T11:44:10.000+09:00
diff --git a/html/m_visualize/seaborn.html b/html/m_visualize/seaborn.html
@@ -120,9 +120,6 @@
                                 </div>
                                 <div class="vp-tab-page vp-grid-box" data-type="style" style="display: none;">
                                     <!-- STYLE: grid / marker / color -->
-                                    <div class="vp-italic">
-                                        <span class="vp-orange-text">STYLE: </span> grid / marker / color
-                                    </div>
                                     <label for="useGrid" class="vp-bold">Grid</label>
                                     <select id="useGrid" class="vp-select vp-state">
                                         <option value="False">False</option>
diff --git a/js/com/com_generatorV2.js b/js/com/com_generatorV2.js
@@ -656,12 +656,13 @@ define([
      * @param {object} target 
      * @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
      * Usage : 
      *  $(document).on('change', this.wrapSelector('#dataframe_tag_id'), function() {
-     *      pdGen.vp_bindColumnSource(that.wrapSelector(), this, ['column_input_id']);
+     *      pdGen.vp_bindColumnSource(that.wrapSelector(), this, ['column_input_id'], 'select', [true, true, true]);
      *  });
      */
-    var vp_bindColumnSource = function(selector, target, columnInputIdList, tagType="input") {
+    var vp_bindColumnSource = function(selector, target, columnInputIdList, tagType="input", columnWithEmpty=false) {
         var varName = '';
         if ($(target).length > 0) {
             varName = $(target).val();
@@ -701,8 +702,22 @@ define([
                 let { result, type, msg } = resultObj;
                 var varResult = JSON.parse(result);
 
+                // check if it needs to add empty option
+                let addEmpty = false;
+                if (Array.isArray(columnWithEmpty)) {
+                    addEmpty = columnWithEmpty[idx];
+                } else {
+                    addEmpty = columnWithEmpty;
+                }
+                if (addEmpty == true) {
+                    varResult = [
+                        {value: '', label: ''},
+                        ...varResult
+                    ]
+                }
+
                 // columns using suggestInput
-                columnInputIdList && columnInputIdList.forEach(columnInputId => {
+                columnInputIdList && columnInputIdList.forEach((columnInputId, idx) => {
                     let defaultValue = $(selector + ' #' + columnInputId).val();
                     if (defaultValue == null || defaultValue == undefined) {
                         defaultValue = '';
@@ -724,6 +739,7 @@ define([
                             'id': columnInputId,
                             'class': 'vp-select vp-state'
                         });
+                        // make tag
                         varResult.forEach(listVar => {
                             var option = document.createElement('option');
                             $(option).attr({
diff --git a/js/m_visualize/Seaborn.js b/js/m_visualize/Seaborn.js
@@ -69,9 +69,9 @@ define([
             this.chartConfig = CHART_LIBRARIES;
             this.chartTypeList = {
                 'Relational': [ 'scatterplot', 'lineplot' ],
-                'Distributions': [ 'histplot', 'kdeplot', 'ecdfplot', 'rugplot' ], // FIXME: ecdf : no module
+                'Distributions': [ 'histplot', 'kdeplot', 'rugplot' ], 
                 'Categorical': [ 'stripplot', 'swarmplot', 'boxplot', 'violinplot', 'pointplot', 'barplot' ],
-                'ETC': [ ]
+                // 'ETC': [ ]
             }
         }
 
@@ -212,7 +212,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');
+                    com_generator.vp_bindColumnSource(that.wrapSelector(), $(that.wrapSelector('#data')), ['x', 'y', 'hue'], 'select', true);
                 } else {
                     $(that.wrapSelector('#x')).prop('disabled', true);
                     $(that.wrapSelector('#y')).prop('disabled', true);
