Add heatmap option to Seaborn app

minjk-bl · minjk-bl · commit e2f86786d627 · 2023-04-26T18:03:25.000+09:00
diff --git a/visualpython/data/m_visualize/seabornLibrary.js b/visualpython/data/m_visualize/seabornLibrary.js
@@ -56,8 +56,8 @@ define([
                 { name: 'y', component: ['col_select'], usePair: true },
                 { name: 'hue', 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: 'kde', component: ['bool_select'], usePair: true },
+                { name: 'stat', component: ['option_select'], usePair: true },
                 { name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
             ]
         },
@@ -169,6 +169,19 @@ define([
                 { name: 'hue', component: ['col_select'], usePair: true },
                 { name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
             ]
+        },
+        'heatmap': {
+            name: 'Heatmap',
+            code: '${allocateTo} = sns.heatmap(${data}${x}${y}${hue}${annot}${etc})',
+            description: 'Plot rectangular data as a color-encoded matrix.',
+            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: 'annot', component: ['bool_select'], usePair: true },
+                { name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
+            ]
         }
     }
 
diff --git a/visualpython/html/m_visualize/seaborn.html b/visualpython/html/m_visualize/seaborn.html
@@ -114,6 +114,14 @@
                                                 <!-- Auto-create -->
                                             </select>
                                         </div>
+                                        <div class="vp-grid-box sb-option">
+                                            <label for="annot" class="vp-bold">Annot</label>
+                                            <select id="annot" class="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" style="grid-column-start: 1;grid-column-end: 3;">
                                             <hr style="margin:5px;"/>
                                             <label class="vp-tab-group-title">Sort</label>
diff --git a/visualpython/js/m_visualize/Seaborn.js b/visualpython/js/m_visualize/Seaborn.js
@@ -92,8 +92,8 @@ define([
             this.chartTypeList = {
                 'Relational': [ 'scatterplot', 'lineplot' ],
                 'Distributions': [ 'histplot', 'kdeplot', 'rugplot' ], 
-                'Categorical': [ 'stripplot', 'swarmplot', 'boxplot', 'violinplot', 'pointplot', 'barplot' ],
-                'ETC': [ 'countplot' ]
+                'Categorical': [ 'stripplot', 'swarmplot', 'boxplot', 'violinplot', 'pointplot', 'barplot', 'countplot' ],
+                'Axes-level': [ 'heatmap' ],
             }
 
             this.legendPosList = [
@@ -217,6 +217,8 @@ define([
                             $(that.wrapSelector('#sortHue')).closest('.sb-option').show();
                         }
                     }
+                } else if (chartType == 'heatmap') {
+                    $(that.wrapSelector('#annot')).closest('.sb-option').show();
                 }
             });
             
@@ -545,6 +547,8 @@ define([
                         $(page).find('#sortHue').closest('.sb-option').show();
                     }
                 }
+            } else if (this.state.chartType == 'heatmap') {
+                $(page).find('#annot').closest('.sb-option').show();
             }
 
             //================================================================

Original file line number	Diff line number	Diff line change
`@@ -92,8 +92,8 @@ define([`
`92`	`92`	`this.chartTypeList = {`
`93`	`93`	`'Relational': [ 'scatterplot', 'lineplot' ],`
`94`	`94`	`'Distributions': [ 'histplot', 'kdeplot', 'rugplot' ],`
`95`		`- 'Categorical': [ 'stripplot', 'swarmplot', 'boxplot', 'violinplot', 'pointplot', 'barplot' ],`
`96`		`- 'ETC': [ 'countplot' ]`
	`95`	`+ 'Categorical': [ 'stripplot', 'swarmplot', 'boxplot', 'violinplot', 'pointplot', 'barplot', 'countplot' ],`
	`96`	`+ 'Axes-level': [ 'heatmap' ],`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`this.legendPosList = [`
`@@ -217,6 +217,8 @@ define([`
`217`	`217`	`$(that.wrapSelector('#sortHue')).closest('.sb-option').show();`
`218`	`218`	`}`
`219`	`219`	`}`
	`220`	`+ } else if (chartType == 'heatmap') {`
	`221`	`+ $(that.wrapSelector('#annot')).closest('.sb-option').show();`
`220`	`222`	`}`
`221`	`223`	`});`
`222`	`224`
`@@ -545,6 +547,8 @@ define([`
`545`	`547`	`$(page).find('#sortHue').closest('.sb-option').show();`
`546`	`548`	`}`
`547`	`549`	`}`
	`550`	`+ } else if (this.state.chartType == 'heatmap') {`
	`551`	`+ $(page).find('#annot').closest('.sb-option').show();`
`548`	`552`	`}`
`549`	`553`
`550`	`554`	`//================================================================`