', APP_SELECT_CONTAINER, this.uuid);
// select - left
tag.appendFormatLine('
', APP_SELECT_LEFT);
diff --git a/js/com/component/PopupComponent.js b/js/com/component/PopupComponent.js
index 64275051..2ac4b553 100644
--- a/js/com/component/PopupComponent.js
+++ b/js/com/component/PopupComponent.js
@@ -20,6 +20,7 @@ define([
'../com_String',
'../com_interface',
'./Component',
+ './DataSelector',
/** codemirror */
'codemirror/lib/codemirror',
@@ -28,7 +29,7 @@ define([
'codemirror/addon/display/placeholder',
'codemirror/addon/display/autorefresh'
], function(popupComponentHtml, popupComponentCss
- , com_util, com_Const, com_String, com_interface, Component, codemirror
+ , com_util, com_Const, com_String, com_interface, Component, DataSelector, codemirror
) {
'use strict';
@@ -52,6 +53,9 @@ define([
this.config = {
sizeLevel: 0, // 0: 400x400 / 1: 500x500 / 2: 600x500 / 3: 750x500
executeMode: 'code', // cell execute mode
+ // show header bar buttons
+ importButton: false, // import library button (#popupImport)
+ packageButton: false, // package manager button (#popupPackage)
// show view box
codeview: true,
dataview: true,
@@ -252,6 +256,27 @@ define([
component: that
});
});
+
+ // Click import library
+ $(this.wrapSelector('#popupImport')).on('click', function() {
+ // add import codes
+ var code = that.generateImportCode();
+ // create block and run it
+ $('#vp_wrapper').trigger({
+ type: 'create_option_page',
+ blockType: 'block',
+ menuId: 'lgExe_code',
+ menuState: { taskState: { code: code } },
+ afterAction: 'run'
+ });
+ });
+
+ // Click package manager
+ $(this.wrapSelector('#popupPackage')).on('click', function() {
+ // TODO:
+ });
+
+
// Focus recognization
$(this.wrapSelector()).on('click', function() {
$(that.eventTarget).trigger({
@@ -381,6 +406,16 @@ define([
break;
}
});
+
+ // focus on data selector input
+ $(this.wrapSelector('.vp-data-selector')).on('focus', function(evt) {
+
+ });
+
+ // click on data selector input filter
+ $(this.wrapSelector('.vp-data-selector ')).on('click', function(evt) {
+
+ });
}
_unbindEvent() {
@@ -428,7 +463,7 @@ define([
// set title
this.$pageDom.find('.vp-popup-title').text(this.state.config.name);
// set body
- this.$pageDom.find('.vp-popup-body').html(this.templateForBody());
+ this.$pageDom.find('.vp-popup-content').html(this.templateForBody());
return this.$pageDom;
}
@@ -439,7 +474,19 @@ define([
render(inplace=false) {
super.render(inplace);
- let {codeview, dataview, runButton, footer, sizeLevel, position} = this.config;
+ let {
+ importButton, packageButton,
+ codeview, dataview, runButton, footer,
+ sizeLevel, position
+ } = this.config;
+
+ // import & package manager button hide/show
+ if (!importButton) {
+ $(this.wrapSelector('#popupImport')).hide();
+ }
+ if (!packageButton) {
+ $(this.wrapSelector('#popupPackage')).hide();
+ }
// codeview & dataview button hide/show
if (!codeview) {
@@ -458,7 +505,7 @@ define([
if(!footer) {
$(this.wrapSelector('.vp-popup-footer')).hide();
// set body wider
- $(this.wrapSelector('.vp-popup-body')).css({
+ $(this.wrapSelector('.vp-popup-content')).css({
'height': 'calc(100% - 30px)'
})
}
@@ -505,6 +552,16 @@ define([
*/
renderInnerPopup() {
$(this.wrapSelector('.vp-inner-popup-body')).html(this.templateForInnerPopup());
+
+
+ // set position to center
+ let width = $(this.wrapSelector('.vp-inner-popup-box')).width();
+ let height = $(this.wrapSelector('.vp-inner-popup-box')).height();
+
+ $(this.wrapSelector('.vp-inner-popup-box')).css({
+ left: 'calc(50% - ' + parseInt(width/2) + 'px)',
+ top: 'calc(50% - ' + parseInt(height/2) + 'px)',
+ })
}
templateForDataView() {
@@ -517,6 +574,11 @@ define([
$('.vp-popup-dataview-box').html(this.templateForDataView());
}
+ generateImportCode() {
+ /** Implementation needed - Generated on clicking Import Library button */
+ return '';
+ }
+
generateCode() {
/** Implementation needed */
return '';
@@ -697,6 +759,7 @@ define([
*/
openView(viewType) {
if (viewType == 'code') {
+ this.saveState();
var code = this.generateCode();
let codeText = '';
if (Array.isArray(code)) {
diff --git a/js/com/component/SuggestInput.js b/js/com/component/SuggestInput.js
index fe5fa11f..b242ee16 100644
--- a/js/com/component/SuggestInput.js
+++ b/js/com/component/SuggestInput.js
@@ -141,6 +141,10 @@ define([
},
select: function (evt, ui) {
let result = true;
+ // trigger change
+ $(this).val(ui.item.value);
+ $(this).trigger('change');
+
if (typeof that._selectEvent == "function")
result = that._selectEvent(ui.item.value, ui.item);
if (result != undefined) {
diff --git a/js/com/component/VarSelector.js b/js/com/component/VarSelector.js
index be3efc98..0475f333 100644
--- a/js/com/component/VarSelector.js
+++ b/js/com/component/VarSelector.js
@@ -84,6 +84,9 @@ define([
this.attributes.push({ [key]: value });
}
setValue(value) {
+ if (value == null || value == undefined) {
+ value = '';
+ }
this.defaultValue = value;
if (value.includes('[') && value.includes(']') ) {
// divide it to variable / column
diff --git a/js/m_apps/Chart.js b/js/m_apps/Chart.js
index 09c7ef0c..76ed858e 100644
--- a/js/m_apps/Chart.js
+++ b/js/m_apps/Chart.js
@@ -122,7 +122,7 @@ define([
$(this.wrapSelector('#vp_openFileNavigationBtn')).click(function() {
let fileNavi = new FileNavigation({
type: 'save',
- extensions: ['PNG(*.png)'],
+ extensions: ['png'],
finish: function(filesPath, status, error) {
if (filesPath.length > 0) {
let { file, path } = filesPath[0];
diff --git a/js/m_apps/PDF.js b/js/m_apps/PDF.js
index cb36fedd..a8d43f3a 100644
--- a/js/m_apps/PDF.js
+++ b/js/m_apps/PDF.js
@@ -73,7 +73,7 @@ nltk.download('punkt')`;
$(this.wrapSelector('#vp_openFileNavigationBtn')).on('click', function() {
let fileNavi = new FileNavigation({
type: 'open',
- extensions: ['PDF(*.pdf)'],
+ extensions: ['pdf'],
finish: function(filesPath, status, error) {
let pathList = filesPath.map(obj => obj.path);
let pathStr = "'" + pathList.join("', '") + "'";
diff --git a/js/m_apps/Profiling.js b/js/m_apps/Profiling.js
index 4adb01a3..7190ab3a 100644
--- a/js/m_apps/Profiling.js
+++ b/js/m_apps/Profiling.js
@@ -113,7 +113,7 @@ define([
case LIST_MENU_ITEM.SAVE:
let fileNavi = new FileNavigation({
type: 'save',
- extensions: ['HTML(*.html)'],
+ extensions: ['html'],
fileName: 'report',
finish: function(filesPath, status, error) {
filesPath.forEach( fileObj => {
diff --git a/js/m_apps/Snippets.js b/js/m_apps/Snippets.js
index 4816acf3..43ed759b 100644
--- a/js/m_apps/Snippets.js
+++ b/js/m_apps/Snippets.js
@@ -118,7 +118,7 @@ define([
if (menu == 'import') {
let fileNavi = new FileNavigation({
type: 'open',
- extensions: ['Snippet(*.sn)'],
+ extensions: ['sn'],
finish: function(filesPath, status, error) {
// import sn file
filesPath.forEach(fileObj => {
@@ -282,7 +282,7 @@ define([
let fileNavi = new FileNavigation({
type: 'save',
- extensions: ['Snippet(*.sn)'],
+ extensions: ['sn'],
finish: function(filesPath, status, error) {
let fileObj = filesPath[0];
var fileName = fileObj.file;
diff --git a/js/m_apps/Subset.js b/js/m_apps/Subset.js
index a6676966..5e8e2d12 100644
--- a/js/m_apps/Subset.js
+++ b/js/m_apps/Subset.js
@@ -430,7 +430,6 @@ define([
tag.appendLine('
');
var varList = this.state.dataList;
- tag.appendLine(this.templateForConditionVariableInput(varList, this.state.pandasObject, this.state.dataType));
tag.appendLine('
');
tag.appendLine(this.templateForConditionColumnInput(colList));
@@ -1330,51 +1329,6 @@ define([
that.generateCode();
});
- // typing on condition variable
- $(document).on('change var_changed', this.wrapSelector('.vp-ds-cond-tbl .vp-cond-var'), function () {
- var varType = $(this).attr('data-type');
- var colTag = $(this).closest('td').find('.vp-col-list');
- if (varType == 'DataFrame') {
- // pd Object selected
- var varName = $(this).val();
- if (varName == '') {
- $(colTag).attr('disabled', true);
- $(colTag).replaceWith(function () {
- return that.templateForConditionColumnInput([]);
- });
- that.generateCode();
- return;
- }
- // dataframe column search
- var colCode = com_util.formatString('_vp_print(_vp_get_columns_list({0}))', varName);
- // get result and load column list
- vpKernel.execute(colCode).then(function (resultObj) {
- let { result } = resultObj;
- var colList = JSON.parse(result);
- colList = colList.map(function (x) {
- return {
- ...x,
- value: x.label,
- code: x.value
- };
- });
- $(colTag).replaceWith(function () {
- return that.templateForConditionColumnInput(colList);
- });
- $(colTag).attr('disabled', false);
- that.generateCode();
- });
- } else {
- $(colTag).val('');
- $(colTag).attr('placeholder', '');
- $(colTag).attr('disabled', true);
- $(colTag).replaceWith(function () {
- return that.templateForConditionColumnInput([]);
- });
- that.generateCode();
- }
- });
-
$(document).on('change', this.wrapSelector('.vp-ds-cond-tbl .vp-col-list'), function () {
var thisTag = $(this);
var varName = $(this).closest('td').find('.vp-cond-var').val();
@@ -1492,8 +1446,8 @@ define([
var useCondition = false;
for (var i = 0; i < condList.length; i++) {
var colTag = $(condList[i]);
- var varName = colTag.find('.vp-cond-var').val();
- var varType = colTag.find('.vp-cond-var').data('type');
+ var varName = this.state.pandasObject;
+ var varType = this.state.dataType;
var colName = colTag.find('.vp-col-list').find('option:selected').data('code');
colName = colName ? colName : '';
var oper = colTag.find('.vp-oper-list').val();
diff --git a/js/m_ml/AutoML.js b/js/m_ml/AutoML.js
index 24934a30..614c82cf 100644
--- a/js/m_ml/AutoML.js
+++ b/js/m_ml/AutoML.js
@@ -251,7 +251,7 @@ define([
// model code
let modelCode = config.code;
- modelCode = com_generator.vp_codeGenerator(this, config, this.state, userOption);
+ modelCode = com_generator.vp_codeGenerator(this, config, this.state, (userOption != ''? ', ' + userOption : ''));
code.appendFormat('{0} = {1}', allocateToCreation, modelCode);
} else {
/**
diff --git a/js/m_ml/Classification.js b/js/m_ml/Classification.js
index d45cf083..041008c5 100644
--- a/js/m_ml/Classification.js
+++ b/js/m_ml/Classification.js
@@ -250,7 +250,7 @@ define([
// model code
let modelCode = config.code;
- modelCode = com_generator.vp_codeGenerator(this, config, this.state, userOption);
+ modelCode = com_generator.vp_codeGenerator(this, config, this.state, (userOption != ''? ', ' + userOption : ''));
code.appendFormat('{0} = {1}', allocateToCreation, modelCode);
} else {
/**
diff --git a/js/m_ml/Clustering.js b/js/m_ml/Clustering.js
index f7f65976..efc469c0 100644
--- a/js/m_ml/Clustering.js
+++ b/js/m_ml/Clustering.js
@@ -254,7 +254,7 @@ define([
// model code
let modelCode = config.code;
- modelCode = com_generator.vp_codeGenerator(this, config, this.state, userOption);
+ modelCode = com_generator.vp_codeGenerator(this, config, this.state, (userOption != ''? ', ' + userOption : ''));
code.appendFormat('{0} = {1}', allocateToCreation, modelCode);
} else {
/**
diff --git a/js/m_ml/DataPrep.js b/js/m_ml/DataPrep.js
index 46455668..32f8a36f 100644
--- a/js/m_ml/DataPrep.js
+++ b/js/m_ml/DataPrep.js
@@ -21,8 +21,9 @@ define([
'vp_base/data/m_ml/mlLibrary',
'vp_base/js/com/component/PopupComponent',
'vp_base/js/com/component/VarSelector2',
- 'vp_base/js/com/component/ModelEditor'
-], function(msHtml, com_util, com_interface, com_String, com_generator, ML_LIBRARIES, PopupComponent, VarSelector2, ModelEditor) {
+ 'vp_base/js/com/component/ModelEditor',
+ 'vp_base/js/com/component/MultiSelector'
+], function(msHtml, com_util, com_interface, com_String, com_generator, ML_LIBRARIES, PopupComponent, VarSelector2, ModelEditor, MultiSelector) {
/**
* DataPrep
@@ -47,13 +48,24 @@ define([
...this.state
}
+ this.popup = {
+ type: '',
+ targetSelector: '',
+ colSelector: undefined // multi column selector
+ }
+
this.modelConfig = ML_LIBRARIES;
this.modelTypeList = {
'Encoding': ['prep-onehot', 'prep-label', 'prep-ordinal', 'prep-target', 'prep-smote'],
- 'Scaling': ['prep-standard', 'prep-robust', 'prep-minmax', 'prep-normalizer', 'prep-func-trsfrm-log', 'prep-func-trsfrm-exp', 'prep-poly-feat']
+ 'Scaling': ['prep-standard', 'prep-robust', 'prep-minmax', 'prep-normalizer', 'prep-func-trsfrm-log', 'prep-func-trsfrm-exp', 'prep-poly-feat', 'prep-kbins-discretizer'],
+ 'ETC': ['make-column-transformer']
}
+ this.mctEstimator = {
+ 'Encoding': ['prep-onehot', 'prep-label', 'prep-ordinal', 'prep-target', 'prep-smote'],
+ 'Scaling': ['prep-standard', 'prep-robust', 'prep-minmax', 'prep-normalizer', 'prep-func-trsfrm-log', 'prep-func-trsfrm-exp', 'prep-poly-feat', 'prep-kbins-discretizer'],
+ }
}
@@ -69,7 +81,7 @@ define([
$(that.wrapSelector(`.vp-model-box[data-type="${modelControlType}"]`)).show();
});
- // select model
+ // select model type
$(this.wrapSelector('#modelType')).on('change', function() {
let modelType = $(this).val();
that.state.modelType = modelType;
@@ -81,6 +93,12 @@ define([
} else {
$(that.wrapSelector('#vp_installLibrary')).hide();
}
+
+ if (modelType == 'make-column-transformer') {
+ // load mct-targetData
+ that.loadVariableList();
+ that.bindMCT();
+ }
});
// install library
@@ -98,6 +116,47 @@ define([
});
}
+ bindMCT() {
+ let that = this;
+ // mct : click column selector 1
+ $(this.wrapSelector('#mct_columns1btn')).on('click', function() {
+ that.openColumnSelector($(that.wrapSelector('#mct_columns1')), 'Select columns to transform');
+ });
+
+ // mct : click column selector 2
+ $(this.wrapSelector('#mct_columns2btn')).on('click', function() {
+ that.openColumnSelector($(that.wrapSelector('#mct_columns2')), 'Select columns to transform');
+ });
+ }
+
+ /**
+ * Open Inner popup page for column selection
+ * @param {Object} targetSelector
+ * @param {string} title
+ * @param {Array
} includeList
+ */
+ openColumnSelector(targetSelector, title='Select columns', includeList=[]) {
+ this.popup.type = 'column';
+ this.popup.targetSelector = targetSelector;
+ var previousList = targetSelector.data('list');
+ if (previousList) {
+ previousList = previousList.map(col => col.code)
+ }
+ this.renderMultiSelector(previousList, includeList);
+ this.openInnerPopup(title);
+ }
+
+ /**
+ * Render column selector using MultiSelector module
+ * @param {Array} previousList previous selected columns
+ * @param {Array} includeList columns to include
+ */
+ renderMultiSelector(previousList, includeList) {
+ this.popup.colSelector = new MultiSelector(this.wrapSelector('.vp-inner-popup-body'),
+ { mode: 'columns', parent: [this.state.mct_targetData], selectedList: previousList, includeList: includeList }
+ );
+ }
+
templateForBody() {
let page = $(msHtml);
@@ -212,28 +271,136 @@ define([
templateForOption(modelType) {
let config = this.modelConfig[modelType];
let state = this.state;
-
let optBox = new com_String();
- // render tag
- config.options.forEach(opt => {
- optBox.appendFormatLine('{2} '
- , opt.name, opt.name, com_util.optionToLabel(opt.name));
- let content = com_generator.renderContent(this, opt.component[0], opt, state);
- optBox.appendLine(content[0].outerHTML);
- });
- // show user option
- if (config.code.includes('${etc}')) {
- // render user option
- optBox.appendFormatLine('{1} ', 'userOption', 'User option');
- optBox.appendFormatLine('DataFrame ');
+ optBox.appendLine('Estimator 1 ');
+ optBox.appendLine('');
+ optBox.appendFormatLine('{1} ', '', 'None');
+ Object.keys(this.mctEstimator).forEach(modelCategory => {
+ let modelOptionTag = new com_String();
+ that.mctEstimator[modelCategory].forEach(opt => {
+ let optConfig = that.modelConfig[opt];
+ let selectedFlag = '';
+ if (opt == that.state.mct_estimator1) {
+ selectedFlag = 'selected';
+ }
+ modelOptionTag.appendFormatLine('{2} ',
+ opt, selectedFlag, optConfig.name);
+ })
+ optBox.appendFormatLine('{1} ',
+ modelCategory, modelOptionTag.toString());
+ });
+ optBox.appendLine(' ');
+ // Estimator 1 column selection
+ optBox.appendLine('Columns 1 ');
+ optBox.appendLine('');
+ optBox.appendLine('Edit ');
+ optBox.appendLine('
');
+
+ // Estimator 2 selection
+ optBox.appendLine('Estimator 2 ');
+ optBox.appendLine('');
+ optBox.appendFormatLine('{1} ', '', 'None');
+ Object.keys(this.mctEstimator).forEach(modelCategory => {
+ let modelOptionTag = new com_String();
+ that.mctEstimator[modelCategory].forEach(opt => {
+ let optConfig = that.modelConfig[opt];
+ let selectedFlag = '';
+ if (opt == that.state.mct_estimator2) {
+ selectedFlag = 'selected';
+ }
+ modelOptionTag.appendFormatLine('{2} ',
+ opt, selectedFlag, optConfig.name);
+ })
+ optBox.appendFormatLine('{1} ',
+ modelCategory, modelOptionTag.toString());
+ });
+ optBox.appendLine(' ');
+ // Estimator 2 column selection
+ optBox.appendLine('Columns 2 ');
+ optBox.appendLine('');
+ optBox.appendLine('Edit ');
+ optBox.appendLine('
');
+
+ } else {
+ // render tag
+ config.options.forEach(opt => {
+ optBox.appendFormatLine('{2} '
+ , opt.name, opt.name, com_util.optionToLabel(opt.name));
+ let content = com_generator.renderContent(this, opt.component[0], opt, state);
+ optBox.appendLine(content[0].outerHTML);
+ });
+ // show user option
+ if (config.code.includes('${etc}')) {
+ // render user option
+ optBox.appendFormatLine('{1} ', 'userOption', 'User option');
+ optBox.appendFormatLine('', 'mct_targetData');
+ varList.forEach(vObj => {
+ // varName, varType
+ var label = vObj.varName;
+ tag.appendFormatLine('{3} '
+ , vObj.varName, vObj.varType
+ , prevValue == vObj.varName?'selected':''
+ , label);
+ });
+ tag.appendLine(' '); // VP_VS_VARIABLES
+ return tag.toString();
+ });
+ $(that.wrapSelector('#mct_targetData')).trigger('change');
+ } catch (ex) {
+ vpLog.display(VP_LOG_TYPE.ERROR, 'DataPrep:', result);
+ }
+ });
+ }
+
+ handleInnerOk() {
+ // ok input popup
+ var dataList = this.popup.colSelector.getDataList();
+
+ $(this.popup.targetSelector).val(dataList.map(col => { return col.code }).join(','));
+ $(this.popup.targetSelector).data('list', dataList);
+ $(this.popup.targetSelector).trigger({ type: 'change', dataList: dataList });
+ this.closeInnerPopup();
+ }
+
render() {
super.render();
+ this.loadVariableList();
+ this.bindMCT();
+
// Instance Editor
this.modelEditor = new ModelEditor(this, "model", "instanceEditor");
}
@@ -250,11 +417,29 @@ define([
*/
let config = this.modelConfig[modelType];
code.appendLine(config.import);
- code.appendLine();
-
+
// model code
let modelCode = config.code;
- modelCode = com_generator.vp_codeGenerator(this, config, this.state, userOption);
+ modelCode = com_generator.vp_codeGenerator(this, config, this.state, (userOption != ''? ', ' + userOption : ''));
+
+ // generate mct code
+ if (modelType == 'make-column-transformer') {
+ let mctCodes = [];
+ let { mct_estimator1, mct_columns1, mct_estimator2, mct_columns2 } = this.state;
+ if (mct_estimator1 != undefined && mct_estimator1 != '') {
+ code.appendLine(this.modelConfig[mct_estimator1].import);
+ let estimator1code = com_generator.vp_codeGenerator(this, this.modelConfig[mct_estimator1], this.state, (userOption != ''? ', ' + userOption : ''));
+ mctCodes.push(com_util.formatString('({0}, [{1}])', estimator1code, mct_columns1));
+ }
+ if (mct_estimator2 != undefined && mct_estimator2 != '') {
+ code.appendLine(this.modelConfig[mct_estimator2].import);
+ let estimator2code = com_generator.vp_codeGenerator(this, this.modelConfig[mct_estimator2], this.state, (userOption != ''? ', ' + userOption : ''));
+ mctCodes.push(com_util.formatString('({0}, [{1}])', estimator2code, mct_columns2));
+ }
+ modelCode = modelCode.replace('${mct_code}', mctCodes.join(', '));
+ }
+
+ code.appendLine();
code.appendFormat('{0} = {1}', allocateToCreation, modelCode);
} else {
/**
diff --git a/js/m_ml/DataSets.js b/js/m_ml/DataSets.js
index 9ad3fe79..b5f2acf3 100644
--- a/js/m_ml/DataSets.js
+++ b/js/m_ml/DataSets.js
@@ -131,7 +131,7 @@ define([
// model code
let modelCode = config.code;
- modelCode = com_generator.vp_codeGenerator(this, config, this.state, userOption);
+ modelCode = com_generator.vp_codeGenerator(this, config, this.state, (userOption != ''? ', ' + userOption : ''));
let allocateToVar = allocateTo;
if (this.loadTypeList['Load Data'].includes(loadType)) {
diff --git a/js/m_ml/DimensionReduction.js b/js/m_ml/DimensionReduction.js
index 9f976a3d..642f12c9 100644
--- a/js/m_ml/DimensionReduction.js
+++ b/js/m_ml/DimensionReduction.js
@@ -250,7 +250,7 @@ define([
// model code
let modelCode = config.code;
- modelCode = com_generator.vp_codeGenerator(this, config, this.state, userOption);
+ modelCode = com_generator.vp_codeGenerator(this, config, this.state, (userOption != ''? ', ' + userOption : ''));
code.appendFormat('{0} = {1}', allocateToCreation, modelCode);
} else {
/**
diff --git a/js/m_ml/Regression.js b/js/m_ml/Regression.js
index b1e8d6c1..8c09228e 100644
--- a/js/m_ml/Regression.js
+++ b/js/m_ml/Regression.js
@@ -250,7 +250,7 @@ define([
// model code
let modelCode = config.code;
- modelCode = com_generator.vp_codeGenerator(this, config, this.state, userOption);
+ modelCode = com_generator.vp_codeGenerator(this, config, this.state, (userOption != ''? ', ' + userOption : ''));
code.appendFormat('{0} = {1}', allocateToCreation, modelCode);
} else {
/**
diff --git a/js/m_ml/addData.js b/js/m_ml/addData.js
deleted file mode 100644
index 00f0d719..00000000
--- a/js/m_ml/addData.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
- * Project Name : Visual Python
- * Description : GUI-based Python code generator
- * File Name : addData.js
- * Author : Black Logic
- * Note : Add data
- * License : GNU GPLv3 with Visual Python special exception
- * Date : 2022. 02. 07
- * Change Date :
- */
-
-//============================================================================
-// [CLASS] Add data
-//============================================================================
-define([
- 'text!vp_base/html/m_ml/addData.html!strip',
- 'vp_base/js/com/com_util',
- 'vp_base/js/com/com_Const',
- 'vp_base/js/com/com_String',
- 'vp_base/js/com/component/PopupComponent'
-], function(addDataHtml, com_util, com_Const, com_String, PopupComponent) {
-
- /**
- * Add data
- */
- class AddData extends PopupComponent {
- _init() {
- super._init();
-
- this.state = {
- targetVariable: '',
- predictData: 'pred',
- colName: 'pred_result',
- allocateTo: '_vp',
- ...this.state
- }
- }
-
- _bindEvent() {
- super._bindEvent();
- var that = this;
-
- }
-
- templateForDataView() {
- ;
- }
-
- renderDataView() {
- super.renderDataView();
-
- this.loadDataPage();
- $(this.wrapSelector('.vp-popup-dataview-box')).css('height', '300px');
- }
-
- renderDataPage(renderedText, isHtml = true) {
- var tag = new com_String();
- tag.appendFormatLine('');
- $(this.wrapSelector('.vp-popup-dataview-box')).html(tag.toString());
- }
-
- loadDataPage() {
- var that = this;
- var code = this.generateCode();
- // if not, get output of all data in selected pandasObject
- vpKernel.execute(code).then(function(resultObj) {
- let { msg } = resultObj;
- if (msg.content.data) {
- var htmlText = String(msg.content.data["text/html"]);
- var codeText = String(msg.content.data["text/plain"]);
- if (htmlText != 'undefined') {
- that.renderDataPage(htmlText);
- } else if (codeText != 'undefined') {
- // plain text as code
- that.renderDataPage(codeText, false);
- } else {
- that.renderDataPage('');
- }
- } else {
- var errorContent = new com_String();
- if (msg.content.ename) {
- errorContent.appendFormatLine('', 'vp-popup-data-error-box');
- errorContent.appendLine('
');
- errorContent.appendFormatLine('
{1} ',
- 'vp-popup-data-error-box-title', msg.content.ename);
- if (msg.content.evalue) {
- // errorContent.appendLine('
');
- errorContent.appendFormatLine('
{0} ', msg.content.evalue.split('\\n').join('
'));
- }
- errorContent.appendLine('
', 'vp-popup-data-error-box');
- errorContent.appendLine('
');
- errorContent.appendFormatLine('
{1} ',
- 'vp-popup-data-error-box-title', msg.content.ename);
- if (msg.content.evalue) {
- // errorContent.appendLine('
');
- errorContent.appendFormatLine('
{0} ', msg.content.evalue.split('\\n').join('
'));
- }
- errorContent.appendLine('
{3} ({4}) ',
- model.varName, model.varType, selectFlag, model.varName, model.varType);
- });
- $(page).find('#model').html(modelOptionTag.toString());
- $(that.wrapSelector('#model')).html(modelOptionTag.toString());
-
- if (!that.state.model || that.state.model == '') {
- that.state.model = $(that.wrapSelector('#model')).val();
- }
- });
-
- // feature data
- let varSelector = new VarSelector2(this.wrapSelector(), ['DataFrame', 'list', 'str']);
- varSelector.setComponentID('featureData');
- varSelector.addClass('vp-state vp-input');
- varSelector.setValue(this.state.featureData);
- $(page).find('#featureData').replaceWith(varSelector.toTagString());
-
- // target data
- varSelector = new VarSelector2(this.wrapSelector(), ['DataFrame', 'list', 'str']);
- varSelector.setComponentID('targetData');
- varSelector.addClass('vp-state vp-input');
- varSelector.setValue(this.state.featureData);
- $(page).find('#targetData').replaceWith(varSelector.toTagString());
-
- // load state
- Object.keys(this.state).forEach(key => {
- let tag = $(page).find('#' + key);
- let tagName = $(tag).prop('tagName'); // returns with UpperCase
- let value = that.state[key];
- if (value == undefined) {
- return;
- }
- switch(tagName) {
- case 'INPUT':
- let inputType = $(tag).prop('type');
- if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
- $(tag).val(value);
- break;
- }
- if (inputType == 'checkbox') {
- $(tag).prop('checked', value);
- break;
- }
- break;
- case 'TEXTAREA':
- case 'SELECT':
- default:
- $(tag).val(value);
- break;
- }
- });
-
- return page;
- }
-
- generateCode() {
- let { model, method, featureData, targetData, allocateTo } = this.state;
- if (!model) {
- model = '';
- }
-
- let code = new com_String();
-
- code.appendLine('%%time');
- if (allocateTo && allocateTo != '') {
- code.appendFormat('{0} = ', allocateTo);
- }
-
- code.appendFormat('{0}.{1}({2}, {3})', model, method, featureData, targetData);
-
- if (allocateTo && allocateTo != '') {
- code.appendLine();
- code.append(allocateTo);
- }
- return code.toString();
- }
-
- }
-
- return Fitting;
-});
\ No newline at end of file
diff --git a/js/m_ml/modelSelection.js b/js/m_ml/modelSelection.js
deleted file mode 100644
index a0873b2b..00000000
--- a/js/m_ml/modelSelection.js
+++ /dev/null
@@ -1,199 +0,0 @@
-/*
- * Project Name : Visual Python
- * Description : GUI-based Python code generator
- * File Name : modelSelection.js
- * Author : Black Logic
- * Note : Model selection and fitting
- * License : GNU GPLv3 with Visual Python special exception
- * Date : 2022. 02. 07
- * Change Date :
- */
-
-//============================================================================
-// [CLASS] Model selection
-//============================================================================
-define([
- 'text!vp_base/html/m_ml/modelSelection.html!strip',
- 'vp_base/js/com/com_util',
- 'vp_base/js/com/com_Const',
- 'vp_base/js/com/com_String',
- 'vp_base/js/com/com_generatorV2',
- 'vp_base/data/m_ml/mlLibrary',
- 'vp_base/js/com/component/PopupComponent',
- 'vp_base/js/com/component/VarSelector2'
-], function(msHtml, com_util, com_Const, com_String, com_generator, ML_LIBRARIES, PopupComponent, VarSelector2) {
-
- /**
- * Model selection
- */
- class ModelSelection extends PopupComponent {
- _init() {
- super._init();
- this.config.sizeLevel = 2;
- this.config.dataview = false;
-
- this.state = {
- model: 'ln-rgs',
- userOption: '',
- featureData: 'X_train',
- targetData: 'y_train',
- allocateTo: 'model',
- ...this.state
- }
-
- this.modelTypes = {
- 'Regression': ['ln-rgs', 'sv-rgs', 'dt-rgs', 'rf-rgs', 'gbm-rgs', 'xgb-rgs', 'lgbm-rgs', 'cb-rgs'],
- 'Classfication': ['lg-rgs', 'sv-clf', 'dt-clf', 'rf-clf', 'gbm-clf', 'xgb-clf', 'lgbm-clf', 'cb-clf'],
- 'Auto ML': ['tpot-rgs', 'tpot-clf'],
- 'Clustering': ['k-means', 'agg-cls', 'gaus-mix', 'dbscan'],
- 'Dimension Reduction': ['pca', 'lda', 'svd', 'nmf']
- }
-
- this.modelConfig = ML_LIBRARIES;
- }
-
- _bindEvent() {
- super._bindEvent();
- /** Implement binding events */
- var that = this;
- // select model
- $(this.wrapSelector('#model')).on('change', function() {
- let model = $(this).val();
- that.state.model = model;
- $(that.wrapSelector('.vp-model-option-box')).html(that.templateForOption(model));
-
- // show install button
- if (that.modelConfig[model].install != undefined) {
- $(that.wrapSelector('#vp_installLibrary')).show();
- } else {
- $(that.wrapSelector('#vp_installLibrary')).hide();
- }
- });
-
- // install library
- $(this.wrapSelector('#vp_installLibrary')).on('click', function() {
- let config = that.modelConfig[model];
- if (config && config.install != undefined) {
- // insert install code
- com_interface.insertCell('code', config.install);
- }
- });
- }
-
- templateForBody() {
- let page = $(msHtml);
-
- let that = this;
- // model types
- let modelTypeTag = new com_String();
- Object.keys(this.modelTypes).forEach(modelCategory => {
- let modelOptionTag = new com_String();
- that.modelTypes[modelCategory].forEach(opt => {
- let optConfig = that.modelConfig[opt];
- let selectedFlag = '';
- if (opt == that.state.model) {
- selectedFlag = 'selected';
- }
- modelOptionTag.appendFormatLine('{2} ',
- opt, selectedFlag, optConfig.name);
- })
- modelTypeTag.appendFormatLine('{1} ',
- modelCategory, modelOptionTag.toString());
- });
- $(page).find('#model').html(modelTypeTag.toString());
-
- // show install button
- if (this.modelConfig[this.state.model].install != undefined) {
- $(page).find('#vp_installLibrary').show();
- } else {
- $(page).find('#vp_installLibrary').hide();
- }
-
- // render option page
- $(page).find('.vp-model-option-box').html(this.templateForOption(this.state.model));
-
- let varSelector = new VarSelector2(this.wrapSelector(), ['DataFrame', 'list', 'str']);
- varSelector.setComponentID('featureData');
- varSelector.addClass('vp-state vp-input');
- varSelector.setValue(this.state.featureData);
- $(page).find('#featureData').replaceWith(varSelector.toTagString());
-
- varSelector = new VarSelector2(this.wrapSelector(), ['DataFrame', 'list', 'str']);
- varSelector.setComponentID('targetData');
- varSelector.addClass('vp-state vp-input');
- varSelector.setValue(this.state.targetData);
- $(page).find('#targetData').replaceWith(varSelector.toTagString());
-
- // load state
- Object.keys(this.state).forEach(key => {
- let tag = $(page).find('#' + key);
- let tagName = $(tag).prop('tagName'); // returns with UpperCase
- let value = that.state[key];
- if (value == undefined) {
- return;
- }
- switch(tagName) {
- case 'INPUT':
- let inputType = $(tag).prop('type');
- if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
- $(tag).val(value);
- break;
- }
- if (inputType == 'checkbox') {
- $(tag).prop('checked', value);
- break;
- }
- break;
- case 'TEXTAREA':
- case 'SELECT':
- default:
- $(tag).val(value);
- break;
- }
- });
-
- return page;
- }
-
- templateForOption(model) {
- let config = this.modelConfig[model];
- let state = this.state;
-
- let optBox = new com_String();
- // render tag
- config.options.forEach(opt => {
- optBox.appendFormatLine('{2} '
- , opt.name, opt.name, opt.name);
- let content = com_generator.renderContent(this, opt.component[0], opt, state);
- optBox.appendLine(content[0].outerHTML);
- });
- // render user option
- optBox.appendFormatLine('{1} ', 'userOption', 'User option');
- optBox.appendFormatLine('{3} ({4}) ',
- model.varName, model.varType, selectFlag, model.varName, model.varType);
- });
- $(page).find('#model').html(modelOptionTag.toString());
- $(that.wrapSelector('#model')).html(modelOptionTag.toString());
-
- if (!that.state.model || that.state.model == '') {
- that.state.model = $(that.wrapSelector('#model')).val();
- }
- });
-
- // feature data
- let varSelector = new VarSelector2(this.wrapSelector(), ['DataFrame', 'list', 'str']);
- varSelector.setComponentID('featureData');
- varSelector.addClass('vp-state vp-input');
- varSelector.setValue(this.state.featureData);
- $(page).find('#featureData').replaceWith(varSelector.toTagString());
-
- // load state
- Object.keys(this.state).forEach(key => {
- let tag = $(page).find('#' + key);
- let tagName = $(tag).prop('tagName'); // returns with UpperCase
- let value = that.state[key];
- if (value == undefined) {
- return;
- }
- switch(tagName) {
- case 'INPUT':
- let inputType = $(tag).prop('type');
- if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
- $(tag).val(value);
- break;
- }
- if (inputType == 'checkbox') {
- $(tag).prop('checked', value);
- break;
- }
- break;
- case 'TEXTAREA':
- case 'SELECT':
- default:
- $(tag).val(value);
- break;
- }
- });
-
- return page;
- }
-
- generateCode() {
- let { model, featureData, allocateTo } = this.state;
- if (!model) {
- model = '';
- }
-
- let code = new com_String();
- code.appendFormat('{0} = {1}.predict({2})', allocateTo, model, featureData);
-
- if (allocateTo && allocateTo != '') {
- code.appendLine();
- code.append(allocateTo);
- }
- return code.toString();
- }
-
- }
-
- return Prediction;
-});
\ No newline at end of file
diff --git a/js/m_ml/transformation.js b/js/m_ml/transformation.js
deleted file mode 100644
index 5f4b1801..00000000
--- a/js/m_ml/transformation.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/*
- * Project Name : Visual Python
- * Description : GUI-based Python code generator
- * File Name : transformation.js
- * Author : Black Logic
- * Note : Transformation
- * License : GNU GPLv3 with Visual Python special exception
- * Date : 2022. 02. 07
- * Change Date :
- */
-
-//============================================================================
-// [CLASS] Transformation
-//============================================================================
-define([
- 'text!vp_base/html/m_ml/prediction.html!strip',
- 'vp_base/js/com/com_util',
- 'vp_base/js/com/com_Const',
- 'vp_base/js/com/com_String',
- 'vp_base/js/com/component/PopupComponent',
- 'vp_base/js/com/component/VarSelector2'
-], function(predHTML, com_util, com_Const, com_String, PopupComponent, VarSelector2) {
-
- /**
- * Transformation
- */
- class Transformation extends PopupComponent {
- _init() {
- super._init();
- this.config.dataview = false;
-
- this.state = {
- model: '',
- featureData: 'X_test',
- allocateTo: 'pred',
- ...this.state
- }
- }
-
- _bindEvent() {
- super._bindEvent();
- /** Implement binding events */
- var that = this;
-
- }
-
- templateForBody() {
- let page = $(predHTML);
-
- let that = this;
- // set model list
- let modelOptionTag = new com_String();
- vpKernel.getModelList().then(function(resultObj) {
- let { result } = resultObj;
- var modelList = JSON.parse(result);
- modelList && modelList.forEach(model => {
- let selectFlag = '';
- if (model.varName == that.state.model) {
- selectFlag = 'selected';
- }
- modelOptionTag.appendFormatLine('{3} ({4}) ',
- model.varName, model.varType, selectFlag, model.varName, model.varType);
- });
- $(page).find('#model').html(modelOptionTag.toString());
- $(that.wrapSelector('#model')).html(modelOptionTag.toString());
-
- if (!that.state.model || that.state.model == '') {
- that.state.model = $(that.wrapSelector('#model')).val();
- }
- });
-
- // feature data
- let varSelector = new VarSelector2(this.wrapSelector(), ['DataFrame', 'list', 'str']);
- varSelector.setComponentID('featureData');
- varSelector.addClass('vp-state vp-input');
- varSelector.setValue(this.state.featureData);
- $(page).find('#featureData').replaceWith(varSelector.toTagString());
-
- // load state
- Object.keys(this.state).forEach(key => {
- let tag = $(page).find('#' + key);
- let tagName = $(tag).prop('tagName'); // returns with UpperCase
- let value = that.state[key];
- if (value == undefined) {
- return;
- }
- switch(tagName) {
- case 'INPUT':
- let inputType = $(tag).prop('type');
- if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
- $(tag).val(value);
- break;
- }
- if (inputType == 'checkbox') {
- $(tag).prop('checked', value);
- break;
- }
- break;
- case 'TEXTAREA':
- case 'SELECT':
- default:
- $(tag).val(value);
- break;
- }
- });
-
- return page;
- }
-
- generateCode() {
- let { model, featureData, allocateTo } = this.state;
- if (!model) {
- model = '';
- }
-
- let code = new com_String();
- code.appendFormat('{0} = {1}.transform({2})', allocateTo, model, featureData);
-
- if (allocateTo && allocateTo != '') {
- code.appendLine();
- code.append(allocateTo);
- }
- return code.toString();
- }
-
- }
-
- return Transformation;
-});
\ No newline at end of file
diff --git a/js/m_visualize/ChartSetting.js b/js/m_visualize/ChartSetting.js
new file mode 100644
index 00000000..ebcda860
--- /dev/null
+++ b/js/m_visualize/ChartSetting.js
@@ -0,0 +1,147 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : ChartSetting.js
+ * Author : Black Logic
+ * Note : Visualization > Setting
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2022. 03. 21
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Chart Setting
+//============================================================================
+define([
+ 'text!vp_base/html/m_visualize/chartSetting.html!strip',
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/com_util',
+ 'vp_base/js/com/component/PopupComponent',
+ 'vp_base/js/com/component/SuggestInput'
+], function(csHTML, com_String, com_util, PopupComponent, SuggestInput) {
+
+ class ChartSetting extends PopupComponent {
+ _init() {
+ super._init();
+
+ this.config.size = { width: 500, height: 400 };
+ this.config.importButton = true;
+ this.config.dataview = false;
+
+ this.state = {
+ figureWidth: 12,
+ figureHeight: 8,
+ styleSheet: '',
+ fontName: '',
+ fontSize: 10,
+ ...this.state
+ }
+ }
+
+ _bindEvent() {
+ super._bindEvent();
+
+ let that = this;
+
+ }
+
+ templateForBody() {
+ let page = $(csHTML);
+
+ return page;
+ }
+
+ render() {
+ super.render();
+
+ let that = this;
+
+ //====================================================================
+ // Stylesheet suggestinput
+ //====================================================================
+ var stylesheetTag = $(this.wrapSelector('#styleSheet'));
+ // search available stylesheet list
+ var code = new com_String();
+ // FIXME: convert it to kernelApi
+ code.appendLine('import matplotlib.pyplot as plt');
+ code.appendLine('import json');
+ code.append(`print(json.dumps([{ 'label': s, 'value': s } for s in plt.style.available]))`);
+ vpKernel.execute(code.toString()).then(function(resultObj) {
+ let { result } = resultObj;
+ // get available stylesheet list
+ var varList = JSON.parse(result);
+ var suggestInput = new SuggestInput();
+ suggestInput.setComponentID('styleSheet');
+ suggestInput.addClass('vp-input vp-state');
+ suggestInput.setSuggestList(function() { return varList; });
+ suggestInput.setPlaceholder('style name');
+ suggestInput.setValue(that.state.styleSheet);
+ // suggestInput.setNormalFilter(false);
+ $(stylesheetTag).replaceWith(function() {
+ return suggestInput.toTagString();
+ });
+ });
+
+ //====================================================================
+ // System font suggestinput
+ //====================================================================
+ var fontFamilyTag = $(this.wrapSelector('#fontName'));
+ // search system font list
+ var code = new com_String();
+ // FIXME: convert it to kernelApi
+ code.appendLine('import json');
+ code.appendLine("import matplotlib.font_manager as fm");
+ code.appendLine("_ttflist = fm.fontManager.ttflist");
+ code.append("print(json.dumps([{'label': f.name, 'value': f.name } for f in _ttflist]))");
+ vpKernel.execute(code.toString()).then(function(resultObj) {
+ let { result } = resultObj;
+ // get available font list
+ var varList = JSON.parse(result);
+ var suggestInput = new SuggestInput();
+ suggestInput.setComponentID('fontName');
+ suggestInput.addClass('vp-input vp-state');
+ suggestInput.setSuggestList(function() { return varList; });
+ suggestInput.setPlaceholder('font name');
+ suggestInput.setValue(that.state.fontName);
+ // suggestInput.setNormalFilter(false);
+ $(fontFamilyTag).replaceWith(function() {
+ return suggestInput.toTagString();
+ });
+ });
+ }
+
+ generateImportCode() {
+ var code = new com_String();
+ code.appendLine('import matplotlib.pyplot as plt');
+ code.append('import seaborn as sns');
+ return code.toString();
+ }
+
+ generateCode() {
+ var code = new com_String();
+
+ // get parameters
+ let { figureWidth, figureHeight, styleSheet, fontName, fontSize } = this.state;
+
+ code.appendLine('import matplotlib.pyplot as plt');
+ code.appendFormatLine("plt.rc('figure', figsize=({0}, {1}))", figureWidth, figureHeight);
+ if (styleSheet && styleSheet.length > 0) {
+ code.appendFormatLine("plt.style.use('{0}')", styleSheet);
+ }
+ code.appendLine();
+
+ code.appendLine('from matplotlib import rcParams');
+ if (fontName && fontName.length > 0) {
+ code.appendFormatLine("rcParams['font.family'] = '{0}'", fontName);
+ }
+ if (fontSize && fontSize.length > 0) {
+ code.appendFormatLine("rcParams['font.size'] = {0}", fontSize);
+ }
+ code.append("rcParams['axes.unicode_minus'] = False");
+
+ return code.toString();
+ }
+ }
+
+ return ChartSetting;
+});
\ No newline at end of file
diff --git a/js/m_visualize/Seaborn.js b/js/m_visualize/Seaborn.js
new file mode 100644
index 00000000..273c00c6
--- /dev/null
+++ b/js/m_visualize/Seaborn.js
@@ -0,0 +1,305 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : Seaborn.js
+ * Author : Black Logic
+ * Note : Visualization > Seaborn
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2022. 03. 21
+ * Change Date :
+ */
+
+//============================================================================
+// [CLASS] Seaborn
+//============================================================================
+define([
+ 'text!vp_base/html/m_visualize/seaborn.html!strip',
+ 'css!vp_base/css/m_visualize/seaborn.css',
+ 'vp_base/js/com/com_String',
+ 'vp_base/js/com/com_generatorV2',
+ 'vp_base/js/com/com_util',
+ 'vp_base/js/com/component/PopupComponent',
+ 'vp_base/js/com/component/SuggestInput',
+ 'vp_base/js/com/component/VarSelector2',
+ 'vp_base/data/m_visualize/chartLibrary'
+], function(chartHTml, chartCss, com_String, com_generator, com_util, PopupComponent, SuggestInput, VarSelector2, CHART_LIBRARIES) {
+
+ class Seaborn extends PopupComponent {
+ _init() {
+ super._init();
+
+ this.config.dataview = false;
+ this.config.sizeLevel = 3;
+
+ this.state = {
+ chartType: 'scatterplot',
+ data: '',
+ x: '',
+ y: '',
+ useSampling: true,
+ ...this.state
+ }
+
+ this.chartConfig = CHART_LIBRARIES;
+ this.chartTypeList = {
+ 'Relational': [ 'scatterplot', 'lineplot' ],
+ 'Distributions': [ 'histplot', 'kdeplot', 'ecdfplot', 'rugplot' ], // FIXME: ecdf : no module
+ 'Categorical': [ 'stripplot', 'swarmplot', 'boxplot', 'violinplot', 'pointplot', 'barplot' ]
+ }
+ }
+
+ _bindEvent() {
+ super._bindEvent();
+
+ let that = this;
+ // setting popup
+ $(this.wrapSelector('#chartSetting')).on('click', function() {
+ // show popup box
+ that.openInnerPopup('Chart Setting');
+ });
+
+ // change tab
+ $(this.wrapSelector('.vp-tab-item')).on('click', function() {
+ let type = $(this).data('type'); // info / element / figure
+
+ $(that.wrapSelector('.vp-tab-item')).removeClass('vp-focus');
+ $(this).addClass('vp-focus');
+
+ $(that.wrapSelector('.vp-tab-page')).hide();
+ $(that.wrapSelector(com_util.formatString('.vp-tab-page[data-type="{0}"]', type))).show();
+ })
+
+ // bind column by dataframe
+ $(document).on('change', this.wrapSelector('#data'), function() {
+ com_generator.vp_bindColumnSource(that.wrapSelector(), this, ['x', 'y'], 'select');
+ });
+
+ // chart preview FIXME: real-time preview, is it ok? ex/ violinplot ... too much time to load
+ $(this.wrapSelector('#previewTest')).on('click', function() {
+ that.loadPreview();
+ });
+ // $(this.wrapSelector('select')).on('change', function() {
+ // that.loadPreview();
+ // });
+ // $(this.wrapSelector('input')).on('change', function() {
+ // that.loadPreview();
+ // });
+
+ }
+
+ templateForBody() {
+ let page = $(chartHTml);
+
+ let that = this;
+
+ // chart types
+ let chartTypeTag = new com_String();
+ Object.keys(this.chartTypeList).forEach(chartCategory => {
+ let chartOptionTag = new com_String();
+ that.chartTypeList[chartCategory].forEach(opt => {
+ let optConfig = that.chartConfig[opt];
+ let selectedFlag = '';
+ if (opt == that.state.chartType) {
+ selectedFlag = 'selected';
+ }
+ chartOptionTag.appendFormatLine('{2} ',
+ opt, selectedFlag, opt);
+ })
+ chartTypeTag.appendFormatLine('{1} ',
+ chartCategory, chartOptionTag.toString());
+ });
+ $(page).find('#chartType').html(chartTypeTag.toString());
+
+ // chart variable
+ let varSelector = new VarSelector2(this.wrapSelector(), ['DataFrame', 'Series', 'list']);
+ varSelector.setComponentID('data');
+ varSelector.addClass('vp-state vp-input');
+ varSelector.setValue(this.state.featureData);
+ $(page).find('#data').replaceWith(varSelector.toTagString());
+
+ return page;
+ }
+
+ templateForSettingBox() {
+ return ``;
+ }
+
+ render() {
+ super.render();
+
+ //================================================================
+ // Chart Setting Popup
+ //================================================================
+ // set inner popup content (chart setting)
+ $(this.wrapSelector('.vp-inner-popup-body')).html(this.templateForSettingBox());
+
+ // set inner button
+ $(this.wrapSelector('.vp-inner-popup-button[data-type="ok"]')).text('Run');
+
+ // set size
+ $(this.wrapSelector('.vp-inner-popup-box')).css({ width: 400, height: 260});
+
+ this.renderImportOptions();
+ }
+
+ renderImportOptions() {
+ //====================================================================
+ // Stylesheet suggestinput
+ //====================================================================
+ var stylesheetTag = $(this.wrapSelector('#styleSheet'));
+ // search available stylesheet list
+ var code = new com_String();
+ // FIXME: convert it to kernelApi
+ code.appendLine('import matplotlib.pyplot as plt');
+ code.appendLine('import json');
+ code.append(`print(json.dumps([{ 'label': s, 'value': s } for s in plt.style.available]))`);
+ vpKernel.execute(code.toString()).then(function(resultObj) {
+ let { result } = resultObj;
+ // get available stylesheet list
+ var varList = JSON.parse(result);
+ var suggestInput = new SuggestInput();
+ suggestInput.setComponentID('styleSheet');
+ suggestInput.setSuggestList(function() { return varList; });
+ suggestInput.setPlaceholder('style name');
+ // suggestInput.setNormalFilter(false);
+ $(stylesheetTag).replaceWith(function() {
+ return suggestInput.toTagString();
+ });
+ });
+
+ //====================================================================
+ // System font suggestinput
+ //====================================================================
+ var fontFamilyTag = $(this.wrapSelector('#fontName'));
+ // search system font list
+ var code = new com_String();
+ // FIXME: convert it to kernelApi
+ code.appendLine('import json');
+ code.appendLine("import matplotlib.font_manager as fm");
+ code.appendLine("_ttflist = fm.fontManager.ttflist");
+ code.append("print(json.dumps([{'label': f.name, 'value': f.name } for f in _ttflist]))");
+ vpKernel.execute(code.toString()).then(function(resultObj) {
+ let { result } = resultObj;
+ // get available font list
+ var varList = JSON.parse(result);
+ var suggestInput = new SuggestInput();
+ suggestInput.setComponentID('fontName');
+ suggestInput.setSuggestList(function() { return varList; });
+ suggestInput.setPlaceholder('font name');
+ // suggestInput.setNormalFilter(false);
+ $(fontFamilyTag).replaceWith(function() {
+ return suggestInput.toTagString();
+ });
+ });
+ }
+
+ handleInnerOk() {
+ // generateImportCode
+ var code = this.generateImportCode();
+ // create block and run it
+ $('#vp_wrapper').trigger({
+ type: 'create_option_page',
+ blockType: 'block',
+ menuId: 'lgExe_code',
+ menuState: { taskState: { code: code } },
+ afterAction: 'run'
+ });
+
+ this.closeInnerPopup();
+ }
+
+ loadPreview() {
+ let that = this;
+ let code = this.generateCode();
+
+ // show variable information on clicking variable
+ vpKernel.execute(code).then(function(resultObj) {
+ let { result, type, msg } = resultObj;
+ var textResult = msg.content.data["text/plain"];
+ var htmlResult = msg.content.data["text/html"];
+ var imgResult = msg.content.data["image/png"];
+
+ $(that.wrapSelector('#chartPreview')).html('');
+ if (htmlResult != undefined) {
+ // 1. HTML tag
+ $(that.wrapSelector('#chartPreview')).append(htmlResult);
+ } else if (imgResult != undefined) {
+ // 2. Image data (base64)
+ var imgTag = ' 
+ 
+
+
+ Package Manager
+ 
+
+ 
';
+ $(that.wrapSelector('#chartPreview')).append(imgTag);
+ } else if (textResult != undefined) {
+ // 3. Text data
+ var preTag = document.createElement('pre');
+ $(preTag).text(textResult);
+ $(that.wrapSelector('#chartPreview')).html(preTag);
+ }
+ });
+ }
+
+ generateImportCode () {
+ var code = new com_String();
+
+ // get parameters
+ var figWidth = $(this.wrapSelector('#figureWidth')).val();
+ var figHeight = $(this.wrapSelector('#figureHeight')).val();
+ var styleName = $(this.wrapSelector('#styleSheet')).val();
+ var fontName = $(this.wrapSelector('#fontName')).val();
+ var fontSize = $(this.wrapSelector('#fontSize')).val();
+
+ code.appendLine('import matplotlib.pyplot as plt');
+ code.appendFormatLine("plt.rc('figure', figsize=({0}, {1}))", figWidth, figHeight);
+ if (styleName && styleName.length > 0) {
+ code.appendFormatLine("plt.style.use('{0}')", styleName);
+ }
+ code.appendLine();
+
+ code.appendLine('from matplotlib import rcParams');
+ if (fontName && fontName.length > 0) {
+ code.appendFormatLine("rcParams['font.family'] = '{0}'", fontName);
+ }
+ if (fontSize && fontSize.length > 0) {
+ code.appendFormatLine("rcParams['font.size'] = {0}", fontSize);
+ }
+ code.append("rcParams['axes.unicode_minus'] = False");
+
+ return code.toString();
+ }
+
+ generateCode() {
+ let { chartType, data, x, y, userOption='', allocateTo='', useSampling } = this.state;
+ let code = new com_String();
+ let config = this.chartConfig[chartType];
+
+ let chartCode = com_generator.vp_codeGenerator(this, config, this.state, (userOption != ''? ', ' + userOption : ''));
+
+ let convertedData = data;
+ if (useSampling) {
+ // FIXME: sampling code confirm needed, count confirm
+ convertedData = data + '.sample(n=30, random_state=0)';
+ }
+
+ // replace pre-defined options
+ chartCode = chartCode.replace(data, convertedData);
+
+ code.appendLine(chartCode);
+ code.append('plt.show()');
+
+ return code.toString();
+ }
+
+ }
+
+ return Seaborn;
+});
\ No newline at end of file