Skip to content

Commit ef94fa1

Browse files
author
minjk-bl
committed
Fix Seaborn details
1 parent a9304f4 commit ef94fa1

3 files changed

Lines changed: 100 additions & 11 deletions

File tree

‎css/m_visualize/seaborn.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
}
3636
.vp-tab-page-box.plot {
3737
/* height: calc(100% - 30px); */
38-
min-height: 310px;
38+
min-height: 352px;
3939
align-content: baseline;
4040
}
4141
.vp-chart-plot-box {

‎html/m_visualize/seaborn.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@
9191
<select id="hue" class="vp-select vp-state">
9292

9393
</select>
94+
<label for="userOption" class="vp-bold">User Option</label>
95+
<input type="text" id="userOption" class="vp-input vp-state wp100" placeholder="key=value, ..."/>
9496
</div>
9597
<div class="vp-tab-page vp-grid-box" data-type="info" style="display: none;">
9698
<label for="title" class="vp-bold">Title</label>

‎js/m_visualize/Seaborn.js‎

Lines changed: 97 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,39 @@ define([
7373
'Categorical': [ 'stripplot', 'swarmplot', 'boxplot', 'violinplot', 'pointplot', 'barplot' ],
7474
// 'ETC': [ ]
7575
}
76+
77+
this.legendPosList = [
78+
'best', 'upper right', 'upper left', 'lower left', 'lower right',
79+
'center left', 'center right', 'lower center', 'upper center', 'center'
80+
];
81+
82+
this.markerList = [
83+
// 'custom': { label: 'Custom', value: 'marker' },
84+
{ label: ' ', value: ' ', title: 'select marker style'},
85+
{ label: '.', value: '.', title: 'point' },
86+
{ label: ',', value: ',', title: 'pixel' },
87+
{ label: 'o', value: 'o', title: 'circle' },
88+
{ label: '▼', value: 'v', title: 'triangle_down' },
89+
{ label: '▲', value: '^', title: 'triangle_up' },
90+
{ label: '◀', value: '<', title: 'triangle_left' },
91+
{ label: '▶', value: '>', title: 'triangle_right' },
92+
{ label: '┬', value: '1', title: 'tri_down' },
93+
{ label: '┵', value: '2', title: 'tri_up' },
94+
{ label: '┤', value: '3', title: 'tri_left' },
95+
{ label: '├', value: '4', title: 'tri_right' },
96+
{ label: 'octagon', value: '8', title: 'octagon' },
97+
{ label: 'square', value: 's', title: 'square' },
98+
{ label: 'pentagon', value: 'p', title: 'pentagon' },
99+
{ label: 'filled plus', value: 'P', title: 'plus (filled)' },
100+
{ label: 'star', value: '*', title: 'star' },
101+
{ label: 'hexagon1', value: 'h', title: 'hexagon1' },
102+
{ label: 'hexagon2', value: 'H', title: 'hexagon2' },
103+
{ label: 'plus', value: '+', title: 'plus' },
104+
{ label: 'x', value: 'x', title: 'x' },
105+
{ label: 'filled x', value: 'X', title: 'x (filled)' },
106+
{ label: 'diamond', value: 'D', title: 'diamond' },
107+
{ label: 'thin diamond', value: 'd', title: 'thin_diamond' }
108+
]
76109
}
77110

78111
_bindEvent() {
@@ -202,9 +235,10 @@ define([
202235
let varSelector = new VarSelector2(this.wrapSelector(), ['DataFrame', 'Series', 'list']);
203236
varSelector.setComponentID('data');
204237
varSelector.addClass('vp-state vp-input');
205-
varSelector.setValue(this.state.featureData);
238+
varSelector.setValue(this.state.data);
206239
varSelector.setSelectEvent(function (value, item) {
207240
$(this.wrapSelector()).val(value);
241+
that.state.dtype = item.dtype;
208242

209243
if (item.dtype == 'DataFrame') {
210244
$(that.wrapSelector('#x')).prop('disabled', false);
@@ -222,12 +256,8 @@ define([
222256
$(page).find('#data').replaceWith(varSelector.toTagString());
223257

224258
// legend position
225-
let legendPosList = [
226-
'best', 'upper right', 'upper left', 'lower left', 'lower right',
227-
'center left', 'center right', 'lower center', 'upper center', 'center'
228-
];
229259
let legendPosTag = new com_String();
230-
legendPosList.forEach(pos => {
260+
this.legendPosList.forEach(pos => {
231261
let selectedFlag = '';
232262
if (pos == that.state.legendPos) {
233263
selectedFlag = 'selected';
@@ -237,6 +267,18 @@ define([
237267
});
238268
$(page).find('#legendPos').html(legendPosTag.toString());
239269

270+
// marker style
271+
let markerTag = new com_String();
272+
this.markerList.forEach(marker => {
273+
let selectedFlag = '';
274+
if (marker.value == that.state.markerStyle) {
275+
selectedFlag = 'selected';
276+
}
277+
markerTag.appendFormatLine('<option value="{0}" title="{1}" {2}>{3}</option>',
278+
marker.value, marker.title, selectedFlag, marker.label);
279+
});
280+
$(page).find('#markerStyle').html(markerTag.toString());
281+
240282
// preview sample count
241283
let sampleCountList = [30, 50, 100, 300, 500, 700, 1000];
242284
let sampleCountTag = new com_String();
@@ -250,6 +292,36 @@ define([
250292
});
251293
$(page).find('#sampleCount').html(sampleCountTag.toString());
252294

295+
//================================================================
296+
// Load state
297+
//================================================================
298+
Object.keys(this.state).forEach(key => {
299+
let tag = $(page).find('#' + key);
300+
let tagName = $(tag).prop('tagName'); // returns with UpperCase
301+
let value = that.state[key];
302+
if (value == undefined) {
303+
return;
304+
}
305+
switch(tagName) {
306+
case 'INPUT':
307+
let inputType = $(tag).prop('type');
308+
if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
309+
$(tag).val(value);
310+
break;
311+
}
312+
if (inputType == 'checkbox') {
313+
$(tag).prop('checked', value);
314+
break;
315+
}
316+
break;
317+
case 'TEXTAREA':
318+
case 'SELECT':
319+
default:
320+
$(tag).val(value);
321+
break;
322+
}
323+
});
324+
253325
return page;
254326
}
255327

@@ -454,7 +526,25 @@ define([
454526

455527
let chartCode = new com_String();
456528

457-
let generatedCode = com_generator.vp_codeGenerator(this, config, state, (userOption != ''? ', ' + userOption : ''));
529+
let etcOptionCode = []
530+
if (useMarker == 'True') {
531+
// TODO: marker to seaborn argument (ex. marker='+' / markers={'Lunch':'s', 'Dinner':'X'})
532+
etcOptionCode.push(com_util.formatString("marker='{0}'", markerStyle));
533+
}
534+
535+
// add user option
536+
if (userOption != '') {
537+
etcOptionCode.push(userOption);
538+
}
539+
540+
if (etcOptionCode.length > 0) {
541+
etcOptionCode = [
542+
'',
543+
...etcOptionCode
544+
]
545+
}
546+
547+
let generatedCode = com_generator.vp_codeGenerator(this, config, state, etcOptionCode.join(', '));
458548

459549
// Info
460550
if (title && title != '') {
@@ -480,9 +570,6 @@ define([
480570
// TODO: grid types
481571
// plt.grid(True, axis='x', color='red', alpha=0.5, linestyle='--')
482572
}
483-
if (useMarker == 'True') {
484-
// TODO: marker to seaborn argument (ex. marker='+' / markers={'Lunch':'s', 'Dinner':'X'})
485-
}
486573
chartCode.append('plt.show()');
487574

488575
let convertedData = data;

0 commit comments

Comments
 (0)