Skip to content

Commit afd7316

Browse files
author
minjk-bl
committed
Set Seaborn's default style
1 parent 27ac318 commit afd7316

File tree

3 files changed

+53
-44
lines changed

3 files changed

+53
-44
lines changed

‎html/m_visualize/seaborn.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<label for="data" class="vp-bold">Data</label>
7272
<div class="vp-grid-col-p50">
7373
<input type="text" id="data" class="vp-input vp-state"/>
74-
<label><input type="checkbox" id="useData" class="vp-state" checked><span>Use data</span></label>
74+
<label><input type="checkbox" id="setXY" class="vp-state"><span>Set X and Y indivisually</span></label>
7575
</div>
7676
<div class="vp-grid-col-p50">
7777
<div class="vp-grid-box">

‎js/m_visualize/ChartSetting.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ define([
3131
this.state = {
3232
figureWidth: 12,
3333
figureHeight: 8,
34-
styleSheet: '',
34+
styleSheet: 'seaborn-darkgrid',
3535
fontName: '',
3636
fontSize: 10,
3737
...this.state

‎js/m_visualize/Seaborn.js

Lines changed: 51 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ define([
2929
super._init();
3030

3131
this.config.dataview = false;
32-
this.config.size = { width: 900, height: 550 };
32+
this.config.size = { width: 1064, height: 550 };
3333

3434
this.state = {
3535
chartType: 'scatterplot',
@@ -39,7 +39,7 @@ define([
3939
figColumn: 0,
4040
shareX: false,
4141
shareY: false,
42-
useData: true, // FIXME: use data default?
42+
setXY: false,
4343
data: '',
4444
x: '',
4545
y: '',
@@ -115,17 +115,17 @@ define([
115115
});
116116

117117
// use data or not
118-
$(this.wrapSelector('#useData')).on('change', function() {
119-
let useData = $(this).prop('checked');
120-
if (useData) {
121-
// use data
118+
$(this.wrapSelector('#setXY')).on('change', function() {
119+
let setXY = $(this).prop('checked');
120+
if (setXY == false) {
121+
// set Data
122122
$(that.wrapSelector('#data')).prop('disabled', false);
123123

124124
$(that.wrapSelector('#x')).closest('.vp-vs-box').replaceWith('<select id="x"></select>');
125125
$(that.wrapSelector('#y')).closest('.vp-vs-box').replaceWith('<select id="y"></select>');
126126
$(that.wrapSelector('#hue')).closest('.vp-vs-box').replaceWith('<select id="hue"></select>');
127127
} else {
128-
// not use data
128+
// set X Y indivisually
129129
// disable data selection
130130
$(that.wrapSelector('#data')).prop('disabled', true);
131131
$(that.wrapSelector('#data')).val('');
@@ -154,11 +154,6 @@ define([
154154
}
155155
});
156156

157-
// bind column by dataframe
158-
// $(this.wrapSelector('#data')).on('change', function() {
159-
// com_generator.vp_bindColumnSource(that.wrapSelector(), this, ['x', 'y', 'hue'], 'select');
160-
// });
161-
162157
// preview refresh
163158
$(this.wrapSelector('#previewRefresh')).on('click', function() {
164159
that.loadPreview();
@@ -216,6 +211,7 @@ define([
216211
$(that.wrapSelector('#y')).prop('disabled', false);
217212
$(that.wrapSelector('#hue')).prop('disabled', false);
218213

214+
// bind column source using selected dataframe
219215
com_generator.vp_bindColumnSource(that.wrapSelector(), $(that.wrapSelector('#data')), ['x', 'y', 'hue'], 'select');
220216
} else {
221217
$(that.wrapSelector('#x')).prop('disabled', true);
@@ -295,10 +291,10 @@ define([
295291
// set size
296292
$(this.wrapSelector('.vp-inner-popup-box')).css({ width: 400, height: 260});
297293

298-
this.bindImportOptions();
294+
this.bindSettingBox();
299295
}
300296

301-
bindImportOptions() {
297+
bindSettingBox() {
302298
//====================================================================
303299
// Stylesheet suggestinput
304300
//====================================================================
@@ -317,6 +313,7 @@ define([
317313
suggestInput.setComponentID('styleSheet');
318314
suggestInput.setSuggestList(function() { return varList; });
319315
suggestInput.setPlaceholder('style name');
316+
suggestInput.setValue('seaborn-darkgrid'); // set default (seaborn-darkgrid)
320317
// suggestInput.setNormalFilter(false);
321318
$(stylesheetTag).replaceWith(function() {
322319
return suggestInput.toTagString();
@@ -449,62 +446,74 @@ define([
449446
x_limit_from, x_limit_to, y_limit_from, y_limit_to,
450447
useSampling, sampleCount
451448
} = this.state;
449+
450+
let indent = '';
452451
let code = new com_String();
453452
let config = this.chartConfig[chartType];
454453
let state = JSON.parse(JSON.stringify(this.state));
455454

456-
let chartCode = com_generator.vp_codeGenerator(this, config, state, (userOption != ''? ', ' + userOption : ''));
457-
458-
let convertedData = data;
459-
if (preview && data != '') {
460-
// set font for KR
461-
code.appendLine("plt.rc('font', family='Gulim')"); // FIXME: is it ok for non-Korean?
462-
// set figure size for preview chart
463-
let defaultWidth = 5;
464-
let defaultHeight = 4;
465-
let previewSize = parseInt($(this.wrapSelector('#previewSize')).val());
466-
code.appendFormatLine('plt.figure(figsize=({0}, {1}))', defaultWidth + previewSize, defaultHeight + previewSize);
467-
if (useSampling) {
468-
// data sampling code for preview
469-
convertedData = data + '.sample(n=' + sampleCount + ', random_state=0)';
470-
}
471-
}
472-
473-
// replace pre-defined options
474-
chartCode = chartCode.replace(data, convertedData);
455+
let chartCode = new com_String();
475456

476-
code.appendLine(chartCode);
457+
let generatedCode = com_generator.vp_codeGenerator(this, config, state, (userOption != ''? ', ' + userOption : ''));
477458

478459
// Info
479460
if (title && title != '') {
480-
code.appendFormatLine("plt.title('{0}')", title);
461+
chartCode.appendFormatLine("plt.title('{0}')", title);
481462
}
482463
if (x_label && x_label != '') {
483-
code.appendFormatLine("plt.xlabel('{0}')", x_label);
464+
chartCode.appendFormatLine("plt.xlabel('{0}')", x_label);
484465
}
485466
if (y_label && y_label != '') {
486-
code.appendFormatLine("plt.ylabel('{0}')", y_label);
467+
chartCode.appendFormatLine("plt.ylabel('{0}')", y_label);
487468
}
488469
if (x_limit_from != '' && x_limit_to != '') {
489-
code.appendFormatLine("plt.xlim(({0}, {1}))", x_limit_from, x_limit_to);
470+
chartCode.appendFormatLine("plt.xlim(({0}, {1}))", x_limit_from, x_limit_to);
490471
}
491472
if (y_limit_from != '' && y_limit_to != '') {
492-
code.appendFormatLine("plt.ylim(({0}, {1}))", y_limit_from, y_limit_to);
473+
chartCode.appendFormatLine("plt.ylim(({0}, {1}))", y_limit_from, y_limit_to);
493474
}
494475
if (useLegend == 'True' && legendPos != '') {
495-
code.appendFormatLine("plt.legend(loc='{0}')", legendPos);
476+
chartCode.appendFormatLine("plt.legend(loc='{0}')", legendPos);
496477
}
497478
if (useGrid == 'True') {
498-
code.appendLine("plt.grid(True)");
479+
chartCode.appendLine("plt.grid(True)");
499480
// TODO: grid types
500481
// plt.grid(True, axis='x', color='red', alpha=0.5, linestyle='--')
501482
}
502483
if (useMarker == 'True') {
503484
// TODO: marker to seaborn argument (ex. marker='+' / markers={'Lunch':'s', 'Dinner':'X'})
504485
}
486+
chartCode.append('plt.show()');
505487

488+
let convertedData = data;
489+
if (preview) {
490+
// set indent
491+
indent = ' '.repeat(4);
492+
493+
// Ignore warning
494+
code.appendLine('import warnings');
495+
code.appendLine('with warnings.catch_warnings():');
496+
code.appendFormatLine("{0}warnings.simplefilter('ignore')", indent);
497+
498+
// set figure size for preview chart
499+
let defaultWidth = 5;
500+
let defaultHeight = 4;
501+
let previewSize = parseInt($(this.wrapSelector('#previewSize')).val());
502+
code.appendFormatLine('{0}plt.figure(figsize=({1}, {2}))', indent, defaultWidth + previewSize, defaultHeight + previewSize);
503+
if (useSampling) {
504+
// data sampling code for preview
505+
convertedData = data + '.sample(n=' + sampleCount + ', random_state=0)';
506+
// replace pre-defined options
507+
generatedCode = generatedCode.replace(data, convertedData);
508+
}
506509

507-
code.append('plt.show()');
510+
code.appendFormatLine("{0}{1}", indent, generatedCode);
511+
code.appendFormatLine("{0}{1}", indent, chartCode.toString().replaceAll('\n', '\n' + indent));
512+
513+
} else {
514+
code.appendLine(generatedCode);
515+
code.appendLine(chartCode.toString());
516+
}
508517

509518
return code.toString();
510519
}

0 commit comments

Comments
 (0)