Add kde, stat option to histplot

minjk-bl · minjk-bl · commit ede4b9aeba74 · 2022-06-14T19:38:03.000+09:00
diff --git a/data/m_visualize/seabornLibrary.js b/data/m_visualize/seabornLibrary.js
@@ -48,14 +48,16 @@ define([
         /** Distribution plots */
         'histplot': {
             name: 'Histogram Plot',
-            code: '${allocateTo} = sns.histplot(${data}${x}${y}${hue}${bins}${etc})',
+            code: '${allocateTo} = sns.histplot(${data}${x}${y}${hue}${bins}${kde}${stat}${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: 'bins', component: ['input_number'], usePair: true },
+                { name: 'kde', component: ['option_select'], usePair: true },
+                { name: 'stat', component: ['bool_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
@@ -96,10 +96,24 @@
                         
                                             </select>
                                         </div>
-                                        <div class="vp-grid-box sb-option bins">
+                                        <div class="vp-grid-box sb-option">
                                             <label for="bins" class="vp-bold">Bins</label>
                                             <input type="number" class="vp-input vp-state" id="bins" placeholder="Type bins" step="5" min="0" />
                                         </div>
+                                        <div class="vp-grid-box sb-option">
+                                            <label for="kde" class="vp-bold">Kde</label>
+                                            <select id="kde" class="vp-select vp-state">
+                                                <option value="">Select option...</option>
+                                                <option value="True">True</option>
+                                                <option value="False">False</option>
+                                            </select>
+                                        </div>
+                                        <div class="vp-grid-box sb-option">
+                                            <label for="stat" class="vp-bold">Stat</label>
+                                            <select id="stat" class="vp-state">
+                                                <!-- Auto-create -->
+                                            </select>
+                                        </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, ..."/>
diff --git a/js/m_visualize/Seaborn.js b/js/m_visualize/Seaborn.js
@@ -45,6 +45,9 @@ define([
                 x: '',
                 y: '',
                 hue: '',
+                bins: '',
+                kde: '',
+                stat: '',
                 // axes options
                 x_limit_from: '',
                 x_limit_to: '',
@@ -127,6 +130,16 @@ define([
                 { label: 'diamond', value: 'D', title: 'diamond' }, 
                 { label: 'thin diamond', value: 'd', title: 'thin_diamond' }
             ]
+
+            this.statList = [
+                { label: 'Select option...', value: '' },
+                { label: 'count', value: "'count'" },
+                { label: 'frequency', value: "'frequency'" },
+                { label: 'density', value: "'density'" },
+                { label: 'probability', value: "'probability'" },
+                { label: 'proportion', value: "'proportion'" },
+                { label: 'percent', value: "'percent'" }
+            ];
         }
 
         _bindEvent() {
@@ -174,7 +187,9 @@ define([
                 let chartType = $(this).val();
                 $(that.wrapSelector('.sb-option')).hide();
                 if (chartType == 'histplot') {
-                    $(that.wrapSelector('.sb-option.bins')).show();
+                    $(that.wrapSelector('#bins')).closest('.sb-option').show();
+                    $(that.wrapSelector('#kde')).closest('.sb-option').show();
+                    $(that.wrapSelector('#stat')).closest('.sb-option').show();
                 }
             });
             
@@ -357,6 +372,18 @@ define([
                 $(page).find('#yticks_label').prop('readonly', false);
             }
 
+            // stat options
+            let statTag = new com_String();
+            this.statList.forEach(stat => {
+                let selectedFlag = '';
+                if (stat.value == that.state.stat) {
+                    selectedFlag = 'selected';
+                }
+                statTag.appendFormatLine('<option value="{0}" {1}>{2}</option>',
+                    stat.value, selectedFlag, stat.label);
+            });
+            $(page).find('#stat').html(statTag.toString());
+
             // preview sample count
             let sampleCountList = [30, 50, 100, 300, 500, 700, 1000];
             let sampleCountTag = new com_String();
@@ -373,7 +400,9 @@ define([
             // data options depend on chart type
             $(page).find('.sb-option').hide();
             if (this.state.chartType == 'histplot') {
-                $(page).find('.sb-option.bins').show();
+                $(page).find('#bins').closest('.sb-option').show();
+                $(page).find('#kde').closest('.sb-option').show();
+                $(page).find('#stat').closest('.sb-option').show();
             }
 
             //================================================================
