Fix Seaborn details

minjk-bl · minjk-bl · commit ef94fa1e8074 · 2022-04-26T12:24:27.000+09:00
diff --git a/css/m_visualize/seaborn.css b/css/m_visualize/seaborn.css
@@ -35,7 +35,7 @@
 }
 .vp-tab-page-box.plot {
     /* height: calc(100% - 30px); */
-    min-height: 310px;
+    min-height: 352px;
     align-content: baseline;
 }
 .vp-chart-plot-box {
diff --git a/html/m_visualize/seaborn.html b/html/m_visualize/seaborn.html
@@ -91,6 +91,8 @@
                                     <select id="hue" class="vp-select vp-state">
                 
                                     </select>
+                                    <label for="userOption" class="vp-bold">User Option</label>
+                                    <input type="text" id="userOption" class="vp-input vp-state wp100" placeholder="key=value, ..."/>
                                 </div>
                                 <div class="vp-tab-page vp-grid-box" data-type="info" style="display: none;">
                                     <label for="title" class="vp-bold">Title</label>
diff --git a/js/m_visualize/Seaborn.js b/js/m_visualize/Seaborn.js
@@ -73,6 +73,39 @@ define([
                 'Categorical': [ 'stripplot', 'swarmplot', 'boxplot', 'violinplot', 'pointplot', 'barplot' ],
                 // 'ETC': [ ]
             }
+
+            this.legendPosList = [
+                'best', 'upper right', 'upper left', 'lower left', 'lower right',
+                'center left', 'center right', 'lower center', 'upper center', 'center'
+            ];
+
+            this.markerList = [
+                // 'custom': { label: 'Custom', value: 'marker' },
+                { label: ' ', value: ' ', title: 'select marker style'},
+                { label: '.', value: '.', title: 'point' }, 
+                { label: ',', value: ',', title: 'pixel' }, 
+                { label: 'o', value: 'o', title: 'circle' }, 
+                { label: '▼', value: 'v', title: 'triangle_down' }, 
+                { label: '▲', value: '^', title: 'triangle_up' }, 
+                { label: '◀', value: '<', title: 'triangle_left' }, 
+                { label: '▶', value: '>', title: 'triangle_right' }, 
+                { label: '┬', value: '1', title: 'tri_down' }, 
+                { label: '┵', value: '2', title: 'tri_up' }, 
+                { label: '┤', value: '3', title: 'tri_left' }, 
+                { label: '├', value: '4', title: 'tri_right' }, 
+                { label: 'octagon', value: '8', title: 'octagon' }, 
+                { label: 'square', value: 's', title: 'square' }, 
+                { label: 'pentagon', value: 'p', title: 'pentagon' }, 
+                { label: 'filled plus', value: 'P', title: 'plus (filled)' }, 
+                { label: 'star', value: '*', title: 'star' }, 
+                { label: 'hexagon1', value: 'h', title: 'hexagon1' }, 
+                { label: 'hexagon2', value: 'H', title: 'hexagon2' }, 
+                { label: 'plus', value: '+', title: 'plus' }, 
+                { label: 'x', value: 'x', title: 'x' }, 
+                { label: 'filled x', value: 'X', title: 'x (filled)' }, 
+                { label: 'diamond', value: 'D', title: 'diamond' }, 
+                { label: 'thin diamond', value: 'd', title: 'thin_diamond' }
+            ]
         }
 
         _bindEvent() {
@@ -202,9 +235,10 @@ define([
             let varSelector = new VarSelector2(this.wrapSelector(), ['DataFrame', 'Series', 'list']);
             varSelector.setComponentID('data');
             varSelector.addClass('vp-state vp-input');
-            varSelector.setValue(this.state.featureData);
+            varSelector.setValue(this.state.data);
             varSelector.setSelectEvent(function (value, item) {
                 $(this.wrapSelector()).val(value);
+                that.state.dtype = item.dtype;
 
                 if (item.dtype == 'DataFrame') {
                     $(that.wrapSelector('#x')).prop('disabled', false);
@@ -222,12 +256,8 @@ define([
             $(page).find('#data').replaceWith(varSelector.toTagString());
 
             // legend position
-            let legendPosList = [
-                'best', 'upper right', 'upper left', 'lower left', 'lower right',
-                'center left', 'center right', 'lower center', 'upper center', 'center'
-            ];
             let legendPosTag = new com_String();
-            legendPosList.forEach(pos => {
+            this.legendPosList.forEach(pos => {
                 let selectedFlag = '';
                 if (pos == that.state.legendPos) {
                     selectedFlag = 'selected';
@@ -237,6 +267,18 @@ define([
             });
             $(page).find('#legendPos').html(legendPosTag.toString());
 
+            // marker style
+            let markerTag = new com_String();
+            this.markerList.forEach(marker => {
+                let selectedFlag = '';
+                if (marker.value == that.state.markerStyle) {
+                    selectedFlag = 'selected';
+                }
+                markerTag.appendFormatLine('<option value="{0}" title="{1}" {2}>{3}</option>',
+                    marker.value, marker.title, selectedFlag, marker.label);
+            });
+            $(page).find('#markerStyle').html(markerTag.toString());
+
             // preview sample count
             let sampleCountList = [30, 50, 100, 300, 500, 700, 1000];
             let sampleCountTag = new com_String();
@@ -250,6 +292,36 @@ define([
             });
             $(page).find('#sampleCount').html(sampleCountTag.toString());
 
+            //================================================================
+            // Load state
+            //================================================================
+            Object.keys(this.state).forEach(key => {
+                let tag = $(page).find('#' + key);
+                let tagName = $(tag).prop('tagName'); // returns with UpperCase
+                let value = that.state[key];
+                if (value == undefined) {
+                    return;
+                }
+                switch(tagName) {
+                    case 'INPUT':
+                        let inputType = $(tag).prop('type');
+                        if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
+                            $(tag).val(value);
+                            break;
+                        }
+                        if (inputType == 'checkbox') {
+                            $(tag).prop('checked', value);
+                            break;
+                        }
+                        break;
+                    case 'TEXTAREA':
+                    case 'SELECT':
+                    default:
+                        $(tag).val(value);
+                        break;
+                }
+            });
+
             return page;
         }
 
@@ -454,7 +526,25 @@ define([
 
             let chartCode = new com_String();
 
-            let generatedCode = com_generator.vp_codeGenerator(this, config, state, (userOption != ''? ', ' + userOption : ''));
+            let etcOptionCode = []
+            if (useMarker == 'True') {
+                // TODO: marker to seaborn argument (ex. marker='+' / markers={'Lunch':'s', 'Dinner':'X'})
+                etcOptionCode.push(com_util.formatString("marker='{0}'", markerStyle));
+            }
+
+            // add user option
+            if (userOption != '') {
+                etcOptionCode.push(userOption);
+            }
+
+            if (etcOptionCode.length > 0) {
+                etcOptionCode = [
+                    '',
+                    ...etcOptionCode
+                ]
+            }
+
+            let generatedCode = com_generator.vp_codeGenerator(this, config, state, etcOptionCode.join(', '));
 
             // Info
             if (title && title != '') {
@@ -480,9 +570,6 @@ define([
                 // TODO: grid types
                 // plt.grid(True, axis='x', color='red', alpha=0.5, linestyle='--')
             }
-            if (useMarker == 'True') {
-                // TODO: marker to seaborn argument (ex. marker='+' / markers={'Lunch':'s', 'Dinner':'X'})
-            }
             chartCode.append('plt.show()');
 
             let convertedData = data;

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@`
`35`	`35`	`}`
`36`	`36`	`.vp-tab-page-box.plot {`
`37`	`37`	`/* height: calc(100% - 30px); */`
`38`		`- min-height: 310px;`
	`38`	`+ min-height: 352px;`
`39`	`39`	`align-content: baseline;`
`40`	`40`	`}`
`41`	`41`	`.vp-chart-plot-box {`