Skip to content

Commit ed7479d

Browse files
author
minjk-bl
committed
Apply DataSelector on Matplotlib app'
1 parent a96371d commit ed7479d

2 files changed

Lines changed: 29 additions & 271 deletions

File tree

‎html/m_visualize/chart.html‎

Lines changed: 10 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,5 @@
11
<body>
22
<div class="vp-option-page">
3-
<!-- Variable Selector -->
4-
<div id="vp_varViewBox" class="vp-var-view-box vp-close-on-blur">
5-
<div class="vp-icon-btn vp-close-view"><img src="/nbextensions/visualpython/img/close_big.svg"/></div>
6-
<div class="vp-var-view-div">
7-
<table id="vp_varViewList" class="vp-option-table vp-var-view-list no-selection wp100">
8-
<colgroup><col width="40%"/><col width="*"/></colgroup>
9-
<thead>
10-
<tr><th>Variable</th><th>Data Type</th></tr>
11-
<tr><th colspan="2"><hr style="margin: 0px;"/></th></tr>
12-
</thead>
13-
<tbody>
14-
15-
</tbody>
16-
</table>
17-
</div>
18-
<hr style="margin: 0px;"/>
19-
<div id="vp_varViewDetail">
20-
<table class="vp-option-table vp-var-view-detail no-selection wp100">
21-
<colgroup>
22-
<col width="50%"/>
23-
<col width="50%"/>
24-
</colgroup>
25-
<thead>
26-
<tr>
27-
<th>Column</th>
28-
<th>Method</th>
29-
</tr>
30-
</thead>
31-
<tbody>
32-
<tr>
33-
<td>
34-
<div id="vp_varDetailColList" class="vp-column-select vp-scrollbar">
35-
36-
</div>
37-
</td>
38-
<td>
39-
<div id="vp_varDetailArray" class="vp-method-select vp-scrollbar">
40-
41-
</div>
42-
</td>
43-
</tr>
44-
</tbody>
45-
</table>
46-
</div>
47-
<div class="var-view-footer">
48-
<input id="vp_varSelectCode" type="text" class="vp-input" readonly/>
49-
<input id="vp_varSelectBtn" type="button" class="vp-button w50" value="select"/>
50-
</div>
51-
</div>
523
<!-- Import option -->
534
<div class="vp-accordian-container">
545
<div class="vp-accordian vp-close">
@@ -148,21 +99,25 @@
14899
<tbody>
149100
<tr>
150101
<th class="vp-orange-text">X Value</th>
151-
<td><input type="text" class="vp-input vp-state" id="x" />
152-
<input type="button" class="vp-button vp-select-data" data-axes="x" value="Select" /></td>
102+
<td>
103+
<input type="text" class="vp-input vp-state" id="x" />
104+
</td>
153105
</tr>
154106
<tr>
155107
<th class="vp-orange-text">Y Value</th>
156-
<td><input type="text" class="vp-input vp-state" id="y" />
157-
<input type="button" class="vp-button vp-select-data" data-axes="y" value="Select" /></td>
108+
<td>
109+
<input type="text" class="vp-input vp-state" id="y" />
110+
</td>
158111
</tr>
159112
<tr>
160113
<th class="vp-orange-text">Z Value</th>
161-
<td><input type="text" class="vp-input vp-state" id="z" placeholder="[[2-dimension]]" /></td>
114+
<td>
115+
<input type="text" class="vp-input vp-state" id="z" placeholder="[[2-dimension]]" />
116+
</td>
162117
</tr>
163118
<tr>
164119
<th class="vp-orange-text">Bins</th>
165-
<td><input type="text" class="vp-input vp-state" id="bins" value="10" /></td>
120+
<td><input type="number" class="vp-input vp-state" id="bins" value="10" step="5" /></td>
166121
</tr>
167122
<tr>
168123
<th>X, Y Extent</th>

‎js/m_visualize/Chart.js‎

Lines changed: 19 additions & 216 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@ define([
2121
'vp_base/js/com/com_generator',
2222
'vp_base/js/com/component/PopupComponent',
2323
'vp_base/js/com/component/FileNavigation',
24-
'vp_base/js/com/component/SuggestInput'
25-
], function(chartHTml, chartCss, com_String, com_Const, com_util, com_generator, PopupComponent, FileNavigation, SuggestInput) {
24+
'vp_base/js/com/component/SuggestInput',
25+
'vp_base/js/com/component/DataSelector'
26+
], function(chartHTml, chartCss, com_String, com_Const, com_util, com_generator, PopupComponent, FileNavigation, SuggestInput, DataSelector) {
2627

2728
/**
2829
* Chart
@@ -57,17 +58,17 @@ define([
5758
$(this).parent().find('.vp-plot-item').removeClass('selected');
5859
$(this).addClass('selected');
5960

60-
// select 태그 강제 선택
61+
// load selected kind
6162
var kind = $(this).data('kind');
6263
$(that.wrapSelector('#kind')).val(kind).prop('selected', true);
6364

6465
var thisPackage = { ...that.plotPackage[kind] };
6566
if (thisPackage == undefined) thisPackage = that.plotPackage['plot'];
6667

67-
// 모두 숨기기 (단, 대상 변수 입력란과 차트 유형 선택지 제외)
68+
// hide all (without chart type, variable)
6869
$(that.wrapSelector('table.vp-plot-setting-table tr:not(:last)')).hide();
6970

70-
// 해당 옵션에 있는 선택지만 보이게 처리
71+
// show selected chart type's option page
7172
thisPackage.input && thisPackage.input.forEach(obj => {
7273
$(that.wrapSelector('#' + obj.name)).closest('tr').show();
7374

@@ -94,7 +95,7 @@ define([
9495
$(this.wrapSelector('#useColor')).change(function() {
9596
var checked = $(this).prop('checked');
9697
if (checked == true) {
97-
// 색상 선택 가능하게
98+
// enable color selector
9899
$(that.wrapSelector('#color')).removeAttr('disabled');
99100
} else {
100101
$(that.wrapSelector('#color')).attr('disabled', 'true');
@@ -404,219 +405,21 @@ define([
404405

405406
bindVariableSelector() {
406407
var that = this;
407-
// view button click - view little popup to show variable & details
408-
$(this.wrapSelector('.vp-select-data')).click(function(event) {
409-
var axes = $(this).data('axes');
410-
411-
if($(that.wrapSelector('#vp_varViewBox')).is(":hidden")) {
412-
// refresh variables
413-
that.refreshVariables(function(varList) {
414-
// set position
415-
var boxSize = { width: 280, height: 260 };
416-
var boxPosition = { position: 'fixed', left: event.pageX - 20, top: event.pageY + 20 };
417-
418-
// set as center
419-
boxPosition.left = 'calc(50% - 140px)';
420-
boxPosition.top = 'calc(50% - 130px)';
421-
$('#vp_varViewBox').css({
422-
...boxPosition
423-
});
424-
425-
// set axes and prev code
426-
$(that.wrapSelector('#vp_varViewBox')).attr({
427-
'data-axes': axes
428-
});
429-
$(that.wrapSelector('#vp_varSelectCode')).val($(that.wrapSelector('#' + axes)).val());
430-
431-
// show popup area
432-
$(that.wrapSelector('#vp_varViewBox')).show();
433-
});
434-
435-
} else {
436-
// hide popup area
437-
$(that.wrapSelector('#vp_varViewBox')).hide();
438-
439-
// init boxes
440-
$(that.wrapSelector('#vp_varDetailColList')).html('');
441-
$(that.wrapSelector('#vp_varDetailDtype')).val('');
442-
$(that.wrapSelector('#vp_varDetailArray')).html('');
443-
}
444-
});
445-
// view close button click
446-
$(this.wrapSelector('.vp-close-view')).click(function(event) {
447-
// hide view
448-
// show/hide popup area
449-
$(that.wrapSelector('#vp_varViewBox')).toggle();
450-
});
451-
452-
// view object selection
453-
$(document).on('click', this.wrapSelector('.vp-var-view-item'), function(event) {
454-
// set selection style
455-
// TODO: attach .selected
456-
$(that.wrapSelector('.vp-var-view-item')).removeClass('selected');
457-
$(this).addClass('selected');
458-
459-
var varName = $(this).find('td:first').text();
460-
var varType = $(this).find('td:last').text();
461-
462-
// set code
463-
$(that.wrapSelector('#vp_varSelectCode')).val(varName);
464-
465-
// dataframe : columns, dtypes, array
466-
// series : array
467-
// use json.dumps to make python dict/list to become parsable with javascript JSON
468-
var code = new com_String();
469-
code.appendLine('import json');
470-
if (varType == 'DataFrame') {
471-
code.appendFormat(`print(json.dumps([ { "colName": c, "dtype": str({0}[c].dtype), "array": str({1}[c].array) } for c in list({2}.columns) ]))`, varName, varName, varName);
472-
} else if (varType == 'Series') {
473-
code.appendFormat(`print(json.dumps({"dtype": str({0}.dtype), "array": str({1}.array) }))`, varName, varName);
474-
}
475-
476-
// get result and show on detail box
477-
vpKernel.execute(code.toString()).then(function(resultObj) {
478-
let { result } = resultObj;
479-
var varResult = JSON.parse(result);
480-
481-
$(that.wrapSelector('#vp_varDetailColList')).html('');
482-
483-
var methodList = [];
484-
// DataFrame / Series Detail
485-
if (varType == 'DataFrame') {
486-
if (varResult.length > 0) {
487-
varResult.forEach(v => {
488-
var option = $(`<div class="vp-column-select-item"
489-
data-dtype="${v.dtype}" data-array="${v.array}" data-col="${v.colName}" title="${v.array}">
490-
${v.colName}</div>`);
491-
$(that.wrapSelector('#vp_varDetailColList')).append(option);
492-
});
493-
494-
// $(that.wrapSelector('#vp_varDetailDtype')).val(varResult[0].dtype);
495-
496-
// var array = varResult[0].array.replaceAll('/n', '\n');
497-
// $(that.wrapSelector('#vp_varDetailArray')).text(array);
498-
}
499-
500-
// method for object
501-
methodList = [
502-
{ method: 'index', label: 'index' },
503-
{ method: 'columns', label: 'columns' },
504-
{ method: 'values', label: 'values' }
505-
]
506-
var methodArrayCode = new com_String();
507-
methodList.forEach(m => {
508-
methodArrayCode.appendFormat('<div class="{0}" data-method="{1}">{2}</div>', 'vp-method-select-item', m.method, m.label);
509-
});
510-
$(that.wrapSelector('#vp_varDetailArray')).html(methodArrayCode.toString());
511-
512-
// show columns
513-
// $(that.wrapSelector('#vp_varDetailColList')).closest('tr').show();
514-
$(that.wrapSelector('#vp_varDetailColList')).attr({'disabled': false});
515-
} else if (varType == 'Series') {
516-
$(that.wrapSelector('#vp_varDetailDtype')).val(varResult.dtype);
517-
var array = varResult.array.replaceAll('/n', '\n');
518-
// $(that.wrapSelector('#vp_varDetailArray')).text(array);
519-
520-
// method for object
521-
methodList = [
522-
{ method: 'index', label: 'index' },
523-
{ method: 'values', label: 'values' }
524-
]
525-
var methodArrayCode = new com_String();
526-
methodList.forEach(m => {
527-
methodArrayCode.appendFormat('<div class="{0}" data-method="{1}">{2}</div>', 'vp-method-select-item', m.method, m.label);
528-
});
529-
$(that.wrapSelector('#vp_varDetailArray')).html(methodArrayCode.toString());
530-
531-
// disable columns
532-
$(that.wrapSelector('#vp_varDetailColList')).attr({'disabled': true});
533-
}
534-
535-
});
536-
});
537-
538-
// view column selection
539-
$(document).on('click', this.wrapSelector('#vp_varDetailColList .vp-column-select-item'), function() {
540-
var dtype = $(this).data('dtype');
541-
var array = $(this).data('array');
542-
543-
var kind = $(that.wrapSelector('#kind')).val();
544-
var axes = $(that.wrapSelector('#vp_varViewBox')).attr('data-axes');
545-
546-
$(this).toggleClass('selected');
547-
548-
// if ((kind == 'plot' && axes == 'y')
549-
// || (kind == 'bar' && axes == 'y')) {
550-
// allow multi select
551-
var methodArrayCode = new com_String();
552-
var methodList;
553-
// if categorical variable exists, set as categorical
554-
var hasObject = false;
555-
var selectedColumnList = $(that.wrapSelector('#vp_varDetailColList .vp-column-select-item.selected'));
556-
if (selectedColumnList.length > 0) {
557-
selectedColumnList.each((i, tag) => {
558-
var tagDtype = $(tag).data('dtype');
559-
if (tagDtype == 'object') {
560-
hasObject = true;
561-
}
562-
});
563-
}
564-
if (dtype != undefined) {
565-
if (hasObject == true) {
566-
// categorical variable
567-
methodList = that.methodList.categorical;
568-
} else {
569-
// numeric variable
570-
methodList = that.methodList.numerical;
571-
}
572-
methodList = [
573-
{ method: 'index', label: 'index' },
574-
{ method: 'columns', label: 'columns' },
575-
{ method: 'values', label: 'values' },
576-
...methodList
577-
]
578-
methodList.forEach(m => {
579-
methodArrayCode.appendFormat('<div class="{0}" data-method="{1}">{2}</div>', 'vp-method-select-item', m.method, m.label);
580-
});
581-
}
582-
$(that.wrapSelector('#vp_varDetailArray')).html(methodArrayCode.toString());
583-
584-
// set code
585-
var code = that.getSelectCode();
586-
$(that.wrapSelector('#vp_varSelectCode')).val(code);
408+
409+
let xSelector = new DataSelector({
410+
pageThis: this, id: 'x', placeholder: 'Select data'
587411
});
588-
589-
// view method selection
590-
$(document).on('click', this.wrapSelector('#vp_varDetailArray .vp-method-select-item'), function() {
591-
var method = $(this).data('method');
592-
var nowState = $(this).hasClass('selected');
593-
594-
$(that.wrapSelector('#vp_varDetailArray .vp-method-select-item')).removeClass('selected');
595-
if (nowState == false) {
596-
$(this).addClass('selected');
597-
}
598-
599-
// set code
600-
var code = that.getSelectCode();
601-
$(that.wrapSelector('#vp_varSelectCode')).val(code);
412+
$(this.wrapSelector('#x')).replaceWith(xSelector.toTagString());
413+
414+
let ySelector = new DataSelector({
415+
pageThis: this, id: 'y', placeholder: 'Select data'
602416
});
603-
604-
// enter variables button
605-
$(this.wrapSelector('#vp_varSelectBtn')).click(function() {
606-
var axes = $(that.wrapSelector('#vp_varViewBox')).attr('data-axes');
607-
var code = $(that.wrapSelector('#vp_varSelectCode')).val();
608-
609-
// set code
610-
$(that.wrapSelector('#' + axes)).val(code);
611-
612-
// hide view box
613-
$(that.wrapSelector('#vp_varViewBox')).hide();
614-
615-
// init boxes
616-
$(that.wrapSelector('#vp_varDetailColList')).html('');
617-
$(that.wrapSelector('#vp_varDetailDtype')).val('');
618-
$(that.wrapSelector('#vp_varDetailArray')).html('');
417+
$(this.wrapSelector('#y')).replaceWith(ySelector.toTagString());
418+
419+
let zSelector = new DataSelector({
420+
pageThis: this, id: 'z', placeholder: 'Select data'
619421
});
422+
$(this.wrapSelector('#z')).replaceWith(zSelector.toTagString());
620423
}
621424

622425
getSelectCode() {

0 commit comments

Comments
 (0)