Add bins option to Seaborn - histplot

minjk-bl · minjk-bl · commit fc075b8e8db1 · 2022-06-03T15:08:06.000+09:00
diff --git a/data/m_visualize/seabornLibrary.js b/data/m_visualize/seabornLibrary.js
@@ -48,13 +48,14 @@ define([
         /** Distribution plots */
         'histplot': {
             name: 'Histogram Plot',
-            code: '${allocateTo} = sns.histplot(${data}${x}${y}${hue}${etc})',
+            code: '${allocateTo} = sns.histplot(${data}${x}${y}${hue}${bins}${etc})',
             description: 'Plot univariate or bivariate histograms to show distributions of datasets.',
             options: [
                 { name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
                 { name: 'x', component: ['col_select'], usePair: true },
                 { name: 'y', component: ['col_select'], usePair: true },
                 { name: 'hue', component: ['col_select'], usePair: true },
+                { name: 'bins', component: ['col_select'], usePair: true },
                 { name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
             ]
         },
diff --git a/html/m_visualize/seaborn.html b/html/m_visualize/seaborn.html
@@ -88,10 +88,18 @@
                                             </select>
                                         </div>
                                     </div>
-                                    <label for="hue" class="vp-bold">Hue</label>
-                                    <select id="hue" class="vp-select vp-state">
-                
-                                    </select>
+                                    <div class="vp-grid-col-p50">
+                                        <div class="vp-grid-box">
+                                            <label for="hue" class="vp-bold">Hue</label>
+                                            <select id="hue" class="vp-select vp-state">
+                        
+                                            </select>
+                                        </div>
+                                        <div class="vp-grid-box sb-option bins">
+                                            <label for="bins" class="vp-bold">Bins</label>
+                                            <input type="text" class="vp-input vp-state" id="bins" placeholder="Type bins" />
+                                        </div>
+                                    </div>
                                     <label for="userOption" class="vp-bold">User Option</label>
                                     <input type="text" id="userOption" class="vp-input vp-state wp100" placeholder="key=value, ..."/>
                                 </div>
diff --git a/js/m_visualize/Seaborn.js b/js/m_visualize/Seaborn.js
@@ -157,6 +157,15 @@ define([
                 $(that.wrapSelector(com_util.formatString('.vp-tab-page-box.{0} > .vp-tab-page', level))).hide();
                 $(that.wrapSelector(com_util.formatString('.vp-tab-page[data-type="{0}"]', type))).show();
             });
+
+            $(this.wrapSelector('#chartType')).on('change', function() {
+                // add bins to histplot
+                let chartType = $(this).val();
+                $(that.wrapSelector('.sb-option')).hide();
+                if (chartType == 'histplot') {
+                    $(that.wrapSelector('.sb-option.bins')).show();
+                }
+            })
             
             // use data or not
             $(this.wrapSelector('#setXY')).on('change', function() {
@@ -311,6 +320,12 @@ define([
             });
             $(page).find('#sampleCount').html(sampleCountTag.toString());
 
+            // data options depend on chart type
+            $(page).find('.sb-option').hide();
+            if (this.state.chartType == 'histplot') {
+                $(page).find('.sb-option.bins').show();
+            }
+
             //================================================================
             // Load state
             //================================================================
