Skip to content

Commit 9ade0c8

Browse files
author
minjk-bl
committed
Seaborn - changes
1 parent 771c893 commit 9ade0c8

1 file changed

Lines changed: 110 additions & 8 deletions

File tree

‎js/m_visualize/Seaborn.js‎

Lines changed: 110 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ define([
3939
figColumn: 0,
4040
shareX: false,
4141
shareY: false,
42+
useData: true, // FIXME: use data default?
4243
data: '',
4344
x: '',
4445
y: '',
@@ -96,18 +97,59 @@ define([
9697
$(that.wrapSelector(com_util.formatString('.vp-tab-page-box.{0} > .vp-tab-page', level))).hide();
9798
$(that.wrapSelector(com_util.formatString('.vp-tab-page[data-type="{0}"]', type))).show();
9899
});
100+
101+
// use data or not
102+
$(this.wrapSelector('#useData')).on('change', function() {
103+
let useData = $(this).prop('checked');
104+
if (useData) {
105+
// use data
106+
$(that.wrapSelector('#data')).prop('disabled', false);
107+
108+
$(that.wrapSelector('#x')).closest('.vp-vs-box').replaceWith('<select id="x"></select>');
109+
$(that.wrapSelector('#y')).closest('.vp-vs-box').replaceWith('<select id="y"></select>');
110+
$(that.wrapSelector('#hue')).closest('.vp-vs-box').replaceWith('<select id="hue"></select>');
111+
} else {
112+
// not use data
113+
// disable data selection
114+
$(that.wrapSelector('#data')).prop('disabled', true);
115+
$(that.wrapSelector('#data')).val('');
116+
that.state.data = '';
117+
that.state.x = '';
118+
that.state.y = '';
119+
that.state.hue = '';
120+
121+
let varSelectorX = new VarSelector2(that.wrapSelector(), ['DataFrame', 'Series', 'list']);
122+
varSelectorX.setComponentID('x');
123+
varSelectorX.addClass('vp-state vp-input');
124+
varSelectorX.setValue(that.state.x);
125+
$(that.wrapSelector('#x')).replaceWith(varSelectorX.toTagString());
126+
127+
let varSelectorY = new VarSelector2(that.wrapSelector(), ['DataFrame', 'Series', 'list']);
128+
varSelectorY.setComponentID('y');
129+
varSelectorY.addClass('vp-state vp-input');
130+
varSelectorY.setValue(that.state.y);
131+
$(that.wrapSelector('#y')).replaceWith(varSelectorY.toTagString());
132+
133+
let varSelectorHue = new VarSelector2(that.wrapSelector(), ['DataFrame', 'Series', 'list']);
134+
varSelectorHue.setComponentID('hue');
135+
varSelectorHue.addClass('vp-state vp-input');
136+
varSelectorHue.setValue(that.state.hue);
137+
$(that.wrapSelector('#hue')).replaceWith(varSelectorHue.toTagString());
138+
}
139+
});
99140

100141
// bind column by dataframe
101-
$(document).on('change', this.wrapSelector('#data'), function() {
102-
com_generator.vp_bindColumnSource(that.wrapSelector(), this, ['x', 'y', 'hue'], 'select');
103-
});
142+
// $(this.wrapSelector('#data')).on('change', function() {
143+
// com_generator.vp_bindColumnSource(that.wrapSelector(), this, ['x', 'y', 'hue'], 'select');
144+
// });
104145

105146
// preview refresh
106147
$(this.wrapSelector('#previewRefresh')).on('click', function() {
107148
that.loadPreview();
108149
});
109150
$(this.wrapSelector('.vp-state')).on('change', function() {
110151
if (that.state.autoRefresh && that.state.data != '') {
152+
console.log('refresh');
111153
that.loadPreview();
112154
}
113155
});
@@ -142,8 +184,39 @@ define([
142184
varSelector.setComponentID('data');
143185
varSelector.addClass('vp-state vp-input');
144186
varSelector.setValue(this.state.featureData);
187+
varSelector.setSelectEvent(function (value, item) {
188+
$(this.wrapSelector()).val(value);
189+
190+
if (item.dtype == 'DataFrame') {
191+
$(that.wrapSelector('#x')).prop('disabled', false);
192+
$(that.wrapSelector('#y')).prop('disabled', false);
193+
$(that.wrapSelector('#hue')).prop('disabled', false);
194+
195+
com_generator.vp_bindColumnSource(that.wrapSelector(), $(that.wrapSelector('#data')), ['x', 'y', 'hue'], 'select');
196+
} else {
197+
$(that.wrapSelector('#x')).prop('disabled', true);
198+
$(that.wrapSelector('#y')).prop('disabled', true);
199+
$(that.wrapSelector('#hue')).prop('disabled', true);
200+
}
201+
});
145202
$(page).find('#data').replaceWith(varSelector.toTagString());
146203

204+
// legend position
205+
let legendPosList = [
206+
'best', 'upper right', 'upper left', 'lower left', 'lower right',
207+
'center left', 'center right', 'lower center', 'upper center', 'center'
208+
];
209+
let legendPosTag = new com_String();
210+
legendPosList.forEach(pos => {
211+
let selectedFlag = '';
212+
if (pos == that.state.legendPos) {
213+
selectedFlag = 'selected';
214+
}
215+
legendPosTag.appendFormatLine('<option value="{0}" {1}>{2}{3}</option>',
216+
pos, selectedFlag, pos, pos == 'best'?' (default)':'');
217+
});
218+
$(page).find('#legendPos').html(legendPosTag.toString());
219+
147220
// preview sample count
148221
let sampleCountList = [30, 50, 100, 300, 500, 700, 1000];
149222
let sampleCountTag = new com_String();
@@ -345,26 +418,55 @@ define([
345418
}
346419

347420
generateCode(preview=false) {
348-
let { chartType, data, x, y, userOption='', allocateTo='', useSampling } = this.state;
421+
let {
422+
chartType, data, userOption='',
423+
title, x_label, y_label, useLegend, legendPos,
424+
useGrid, useMarker, markerStyle,
425+
x_limit_from, x_limit_to, y_limit_from, y_limit_to,
426+
useSampling, sampleCount
427+
} = this.state;
349428
let code = new com_String();
350429
let config = this.chartConfig[chartType];
430+
let state = JSON.parse(JSON.stringify(this.state));
351431

352-
let chartCode = com_generator.vp_codeGenerator(this, config, this.state, (userOption != ''? ', ' + userOption : ''));
432+
let chartCode = com_generator.vp_codeGenerator(this, config, state, (userOption != ''? ', ' + userOption : ''));
353433

354434
let convertedData = data;
355-
if (preview) {
435+
if (preview && data != '') {
356436
// set figure size for preview chart
357-
code.appendLine('plt.figure(figsize=(4, 3))');
437+
code.appendLine('plt.figure(figsize=(6, 5))');
358438
if (useSampling) {
359439
// data sampling code for preview
360-
convertedData = data + '.sample(n=30, random_state=0)';
440+
convertedData = data + '.sample(n=' + sampleCount + ', random_state=0)';
361441
}
362442
}
363443

364444
// replace pre-defined options
365445
chartCode = chartCode.replace(data, convertedData);
366446

367447
code.appendLine(chartCode);
448+
449+
// // Info
450+
// if (title && title != '') {
451+
// code.appendFormatLine("plt.title('{0}')", title);
452+
// }
453+
// if (x_label && x_label != '') {
454+
// code.appendFormatLine("plt.xlabel('{0}')", x_label);
455+
// }
456+
// if (y_label && y_label != '') {
457+
// code.appendFormatLine("plt.ylabel('{0}')", y_label);
458+
// }
459+
// if (x_limit_from != '' && x_limit_to != '') {
460+
// code.appendFormatLine("plt.xlim(({0}, {1}))", x_limit_from, x_limit_to);
461+
// }
462+
// if (y_limit_from != '' && y_limit_to != '') {
463+
// code.appendFormatLine("plt.ylim(({0}, {1}))", y_limit_from, y_limit_to);
464+
// }
465+
// if (useLegend && legendPos != '') {
466+
// code.appendFormatLine("plt.legend(loc='{0}')", legendPos);
467+
// }
468+
469+
368470
code.append('plt.show()');
369471

370472
return code.toString();

0 commit comments

Comments
 (0)