Skip to content

Commit e68ae27

Browse files
author
minjk-bl
committed
Seaborn - refresh fixed
1 parent 2c5a6b6 commit e68ae27

3 files changed

Lines changed: 100 additions & 100 deletions

File tree

‎html/m_visualize/seaborn.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@
4343
<!-- Hide for next version -->
4444
<!-- <div class="vp-tab-item" data-type="2">Plot 2</div>
4545
<div class="vp-tab-item" data-type="3">Plot 3</div> -->
46+
47+
<!-- Temporary position : Change its position after enabling Subplots -->
48+
<span id="chartSetting" class="vp-chart-setting vp-no-selection">
49+
<i class="fa fa-gear"></i> Setting
50+
</span>
4651
</div>
4752
<div class="vp-tab-page-box figure vp-grid-border-box">
4853
<div class="vp-tab-page" data-type="1">

‎js/com/component/PopupComponent.js‎

Lines changed: 41 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -297,45 +297,7 @@ define([
297297

298298
// save state values
299299
$(document).on('change', this.wrapSelector('.vp-state'), function() {
300-
let id = $(this)[0].id;
301-
let customKey = $(this).data('key');
302-
let tagName = $(this).prop('tagName'); // returns with UpperCase
303-
let newValue = '';
304-
switch(tagName) {
305-
case 'INPUT':
306-
let inputType = $(this).prop('type');
307-
if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
308-
newValue = $(this).val();
309-
break;
310-
}
311-
if (inputType == 'checkbox') {
312-
newValue = $(this).prop('checked');
313-
break;
314-
}
315-
break;
316-
case 'TEXTAREA':
317-
case 'SELECT':
318-
default:
319-
newValue = $(this).val();
320-
if (!newValue) {
321-
newValue = '';
322-
}
323-
break;
324-
}
325-
326-
// if custom key is available, use it
327-
if (customKey && customKey != '') {
328-
// allow custom key until level 2
329-
let customKeys = customKey.split('.');
330-
if (customKeys.length == 2) {
331-
that.state[customKeys[0]][customKeys[1]] = newValue;
332-
} else {
333-
that.state[customKey] = newValue;
334-
}
335-
} else {
336-
that.state[id] = newValue;
337-
}
338-
vpLog.display(VP_LOG_TYPE.DEVELOP, 'saved state : ' + id+ '/'+tagName+'/'+newValue);
300+
that._saveSingleState($(this)[0]);
339301
});
340302

341303
// Click buttons
@@ -423,7 +385,7 @@ define([
423385
});
424386

425387
// click on data selector input filter
426-
$(this.wrapSelector('.vp-data-selector ')).on('click', function(evt) {
388+
$(this.wrapSelector('.vp-data-selector')).on('click', function(evt) {
427389

428390
});
429391
}
@@ -618,46 +580,50 @@ define([
618580
/** Implementation needed */
619581
let that = this;
620582
$(this.wrapSelector('.vp-state')).each((idx, tag) => {
621-
let id = tag.id;
622-
let customKey = $(tag).data('key');
623-
let tagName = $(tag).prop('tagName'); // returns with UpperCase
624-
let newValue = '';
625-
switch(tagName) {
626-
case 'INPUT':
627-
let inputType = $(tag).prop('type');
628-
if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
629-
newValue = $(tag).val();
630-
break;
631-
}
632-
if (inputType == 'checkbox') {
633-
newValue = $(tag).prop('checked');
634-
break;
635-
}
636-
break;
637-
case 'TEXTAREA':
638-
case 'SELECT':
639-
default:
583+
that._saveSingleState(tag);
584+
});
585+
vpLog.display(VP_LOG_TYPE.DEVELOP, 'savedState', that.state);
586+
}
587+
588+
_saveSingleState(tag) {
589+
let id = tag.id;
590+
let customKey = $(tag).data('key');
591+
let tagName = $(tag).prop('tagName'); // returns with UpperCase
592+
let newValue = '';
593+
switch(tagName) {
594+
case 'INPUT':
595+
let inputType = $(tag).prop('type');
596+
if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
640597
newValue = $(tag).val();
641-
if (!newValue) {
642-
newValue = '';
643-
}
644598
break;
645-
}
646-
647-
// if custom key is available, use it
648-
if (customKey && customKey != '') {
649-
// allow custom key until level 2
650-
let customKeys = customKey.split('.');
651-
if (customKeys.length == 2) {
652-
that.state[customKeys[0]][customKeys[1]] = newValue;
653-
} else {
654-
that.state[customKey] = newValue;
655599
}
600+
if (inputType == 'checkbox') {
601+
newValue = $(tag).prop('checked');
602+
break;
603+
}
604+
break;
605+
case 'TEXTAREA':
606+
case 'SELECT':
607+
default:
608+
newValue = $(tag).val();
609+
if (!newValue) {
610+
newValue = '';
611+
}
612+
break;
613+
}
614+
615+
// if custom key is available, use it
616+
if (customKey && customKey != '') {
617+
// allow custom key until level 2
618+
let customKeys = customKey.split('.');
619+
if (customKeys.length == 2) {
620+
this.state[customKeys[0]][customKeys[1]] = newValue;
656621
} else {
657-
that.state[id] = newValue;
622+
this.state[customKey] = newValue;
658623
}
659-
});
660-
vpLog.display(VP_LOG_TYPE.DEVELOP, 'savedState', that.state);
624+
} else {
625+
this.state[id] = newValue;
626+
}
661627
}
662628

663629
run(execute=true, addcell=true) {

‎js/m_visualize/Seaborn.js‎

Lines changed: 54 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,22 @@ define([
4444
x: '',
4545
y: '',
4646
hue: '',
47+
// info options
48+
title: '',
49+
x_label: '',
50+
y_label: '',
51+
useLegend: 'False',
52+
legendPos: '',
53+
// style options
54+
useGrid: 'False',
55+
useMarker: 'False',
56+
markerStyle: '',
57+
// setting options
58+
x_limit_from: '',
59+
x_limit_to: '',
60+
y_limit_from: '',
61+
y_limit_to: '',
62+
// preview options
4763
useSampling: true,
4864
sampleCount: 30,
4965
autoRefresh: true,
@@ -60,10 +76,10 @@ define([
6076
}
6177

6278
_bindEvent() {
63-
super._bindEvent();
64-
6579
let that = this;
6680

81+
super._bindEvent();
82+
6783
// setting popup
6884
$(this.wrapSelector('#chartSetting')).on('click', function() {
6985
// show popup box
@@ -147,18 +163,21 @@ define([
147163
$(this.wrapSelector('#previewRefresh')).on('click', function() {
148164
that.loadPreview();
149165
});
150-
$(this.wrapSelector('.vp-state')).on('change', function() {
151-
if (that.state.autoRefresh && that.state.data != '') {
152-
console.log('refresh');
166+
// auto refresh
167+
$(document).off('change', this.wrapSelector('.vp-state'));
168+
$(document).on('change', this.wrapSelector('.vp-state'), function(evt) {
169+
that._saveSingleState($(this)[0]);
170+
if (that.state.autoRefresh) {
153171
that.loadPreview();
154172
}
173+
evt.stopPropagation();
155174
});
156175

157176
// set preview size
158177
$(this.wrapSelector('#previewSize')).on('change', function() {
159178
that.loadPreview();
160179
});
161-
180+
162181
}
163182

164183
templateForBody() {
@@ -438,6 +457,8 @@ define([
438457

439458
let convertedData = data;
440459
if (preview && data != '') {
460+
// set font for KR
461+
code.appendLine("plt.rc('font', family='Gulim')"); // FIXME: is it ok for non-Korean?
441462
// set figure size for preview chart
442463
let defaultWidth = 5;
443464
let defaultHeight = 4;
@@ -454,25 +475,33 @@ define([
454475

455476
code.appendLine(chartCode);
456477

457-
// // Info
458-
// if (title && title != '') {
459-
// code.appendFormatLine("plt.title('{0}')", title);
460-
// }
461-
// if (x_label && x_label != '') {
462-
// code.appendFormatLine("plt.xlabel('{0}')", x_label);
463-
// }
464-
// if (y_label && y_label != '') {
465-
// code.appendFormatLine("plt.ylabel('{0}')", y_label);
466-
// }
467-
// if (x_limit_from != '' && x_limit_to != '') {
468-
// code.appendFormatLine("plt.xlim(({0}, {1}))", x_limit_from, x_limit_to);
469-
// }
470-
// if (y_limit_from != '' && y_limit_to != '') {
471-
// code.appendFormatLine("plt.ylim(({0}, {1}))", y_limit_from, y_limit_to);
472-
// }
473-
// if (useLegend && legendPos != '') {
474-
// code.appendFormatLine("plt.legend(loc='{0}')", legendPos);
475-
// }
478+
// Info
479+
if (title && title != '') {
480+
code.appendFormatLine("plt.title('{0}')", title);
481+
}
482+
if (x_label && x_label != '') {
483+
code.appendFormatLine("plt.xlabel('{0}')", x_label);
484+
}
485+
if (y_label && y_label != '') {
486+
code.appendFormatLine("plt.ylabel('{0}')", y_label);
487+
}
488+
if (x_limit_from != '' && x_limit_to != '') {
489+
code.appendFormatLine("plt.xlim(({0}, {1}))", x_limit_from, x_limit_to);
490+
}
491+
if (y_limit_from != '' && y_limit_to != '') {
492+
code.appendFormatLine("plt.ylim(({0}, {1}))", y_limit_from, y_limit_to);
493+
}
494+
if (useLegend == 'True' && legendPos != '') {
495+
code.appendFormatLine("plt.legend(loc='{0}')", legendPos);
496+
}
497+
if (useGrid == 'True') {
498+
code.appendLine("plt.grid(True)");
499+
// TODO: grid types
500+
// plt.grid(True, axis='x', color='red', alpha=0.5, linestyle='--')
501+
}
502+
if (useMarker == 'True') {
503+
// TODO: marker to seaborn argument (ex. marker='+' / markers={'Lunch':'s', 'Dinner':'X'})
504+
}
476505

477506

478507
code.append('plt.show()');

0 commit comments

Comments
 (0)