/*

* Project Name : Visual Python

* Description : GUI-based Python code generator

* File Name : Groupby.js

* Author : Black Logic

* Note : Apps > Groupby

* License : GNU GPLv3 with Visual Python special exception

* Date : 2021. 11. 18

* Change Date :

*/

//============================================================================

// [CLASS] Groupby

//============================================================================

define([

__VP_TEXT_LOADER__('vp_base/html/m_apps/groupby.html'), // INTEGRATION: unified version of text loader

__VP_CSS_LOADER__('vp_base/css/m_apps/groupby'), // INTEGRATION: unified version of css loader

'vp_base/js/com/com_Const',

'vp_base/js/com/com_String',

'vp_base/js/com/com_util',

'vp_base/js/com/component/PopupComponent',

'vp_base/js/com/component/SuggestInput',

'vp_base/js/com/component/MultiSelector'

], function(gbHtml, gbCss, com_Const, com_String, com_util, PopupComponent, SuggestInput, MultiSelector) {

/**

* Groupby

*/

class Groupby extends PopupComponent {

_init() {

super._init();

/** Write codes executed before rendering */

this.config.size = { width: 700, height: 550 };

this.config.checkModules = ['pd'];

this.periodList = [

{ label: 'business day', value: 'B'},

{ label: 'custom business day', value: 'C'},

{ label: 'calendar day', value: 'D'},

{ label: 'weekly', value: 'W'},

{ label: 'month end', value: 'M'},

{ label: 'semi-month end', value: 'SM'},

{ label: 'business month end', value: 'BM'},

{ label: 'custom business month end', value: 'CBM'},

{ label: 'month start', value: 'MS'},

{ label: 'semi-month start', value: 'SMS'},

{ label: 'business month start', value: 'BMS'},

{ label: 'custom business month start', value: 'CBMS'},

{ label: 'quarter end', value: 'Q'},

{ label: 'business quarter end', value: 'BQ'},

{ label: 'quarter start', value: 'QS'},

{ label: 'business quarter start', value: 'BQS'},

{ label: 'year end', value: 'Y'},

{ label: 'business year end', value: 'BY'},

{ label: 'year start', value: 'YS'},

{ label: 'business year start', value: 'BYS'},

{ label: 'business hour', value: 'BH'},

{ label: 'hourly', value: 'H'},

{ label: 'minutely', value: 'min'},

{ label: 'secondly', value: 'S'},

{ label: 'milliseconds', value: 'ms'},

{ label: 'microseconds', value: 'us'},

{ label: 'nanoseconds', value: 'N'}

]

this.methodList = [

{ label: 'None', value: '' },

{ label: 'count', value: "count" },

{ label: 'first', value: "first" },

{ label: 'last', value: "last" },

{ label: 'size', value: "size" },

{ label: 'std', value: "std" },

{ label: 'sum', value: "sum" },

{ label: 'max', value: "max" },

{ label: 'mean', value: "mean" },

{ label: 'median', value: "median" },

{ label: 'min', value: "min" },

{ label: 'quantile', value: "quantile" },

]

this.state = {

variable: '',

groupby: [],

useGrouper: false,

grouperNumber: 0,

grouperPeriod: this.periodList[0].value,

display: [],

method: this.methodList[0].value,

advanced: false,

allocateTo: '',

resetIndex: false,

advPageDom: '',

advColList: [],

advMethodList: [],

advMethodUserList: [],

advNamingList: [],

...this.state

};

this.popup = {

type: '',

targetSelector: '',

ColSelector: undefined

}

}

_bindEvent() {

super._bindEvent();

/** Implement binding events */

let that = this;

//====================================================================

// User operation Events

//====================================================================

// variable change event

$(document).on('change', this.wrapSelector('#vp_gbVariable'), function() {

// if variable changed, clear groupby, display

var newVal = $(this).val();

if (newVal != that.state.variable) {

$(that.wrapSelector('#vp_gbBy')).val('');

$(that.wrapSelector('#vp_gbDisplay')).val('');

that.state.variable = newVal;

that.state.groupby = [];

that.state.display = [];

}

});

// variable refresh event

$(document).on('click', this.wrapSelector('.vp-gb-df-refresh'), function() {

that.loadVariableList();

});

// groupby change event

$(document).on('change', this.wrapSelector('#vp_gbBy'), function(event) {

var colList = event.dataList;

that.state.groupby = colList;

if (colList && colList.length == 1

&& colList[0].type.includes('datetime')) {

$(that.wrapSelector('#vp_gbByGrouper')).removeAttr('disabled');

} else {

$(that.wrapSelector('#vp_gbByGrouper')).attr('disabled', true);

}

});

// groupby select button event

$(document).on('click', this.wrapSelector('#vp_gbBy'), function() {

that.openColumnSelector($(that.wrapSelector('#vp_gbBy')), 'Select columns to group');

});

// groupby grouper event

$(document).on('change', this.wrapSelector('#vp_gbByGrouper'), function() {

var useGrouper = $(this).prop('checked');

that.state.useGrouper = useGrouper;

if (useGrouper == true) {

$(that.wrapSelector('.vp-gb-by-grouper-box')).show();

} else {

$(that.wrapSelector('.vp-gb-by-grouper-box')).hide();

}

});

// grouper number change event

$(document).on('change', this.wrapSelector('#vp_gbByGrouperNumber'), function() {

that.state.grouperNumber = $(this).val();

});

// grouper period change event

$(document).on('change', this.wrapSelector('#vp_gbByGrouperPeriod'), function() {

that.state.grouperPeriod = $(this).val();

});

// display change event

$(document).on('change', this.wrapSelector('#vp_gbDisplay'), function(event) {

var colList = event.dataList;

that.state.display = colList;

if ((colList && colList.length == 1) || that.state.method === 'size') {

$(that.wrapSelector('#vp_gbToFrame')).parent().show();

} else {

$(that.wrapSelector('#vp_gbToFrame')).parent().hide();

}

});

// display select button event

$(document).on('click', this.wrapSelector('#vp_gbDisplay'), function() {

// exclude groupby columns

let excludeList = that.state.groupby.map(x => x.code);

that.openColumnSelector($(that.wrapSelector('#vp_gbDisplay')), 'Select columns to display', [], excludeList);

});

// method select event

$(document).on('change', this.wrapSelector('#vp_gbMethodSelect'), function() {

var method = $(this).val();

that.state.method = method;

$(that.wrapSelector('#vp_gbMethod')).val(method);

if (method === 'size' || (that.state.display && that.state.display.length == 1)) {

$(that.wrapSelector('#vp_gbToFrame')).parent().show();

} else {

$(that.wrapSelector('#vp_gbToFrame')).parent().hide();

}

});

// advanced checkbox event

$(document).on('change', this.wrapSelector('#vp_gbAdvanced'), function() {

var advanced = $(this).prop('checked');

that.state.advanced = advanced;

if (advanced == true) {

// change method display

$(that.wrapSelector('#vp_gbMethod')).val('aggregate');

$(that.wrapSelector('#vp_gbMethodSelect')).hide();

$(that.wrapSelector('#vp_gbMethod')).show();

// show advanced box

$(that.wrapSelector('.vp-gb-adv-box')).show();

} else {

$(that.wrapSelector('#vp_gbMethod')).val('sum');

$(that.wrapSelector('#vp_gbMethodSelect')).show();

$(that.wrapSelector('#vp_gbMethod')).hide();

// hide advanced box

$(that.wrapSelector('.vp-gb-adv-box')).hide();

}

});

// allocateTo event

$(document).on('change', this.wrapSelector('#vp_gbAllocateTo'), function() {

that.state.allocateTo = $(this).val();

});

// to dataframe event

$(document).on('change', this.wrapSelector('#vp_gbToFrame'), function() {

that.state.toFrame = $(this).prop('checked') == true;

});

// reset index checkbox event

$(document).on('change', this.wrapSelector('#vp_gbResetIndex'), function() {

that.state.resetIndex = $(this).prop('checked');

});

//====================================================================

// Advanced box Events

//====================================================================

// add advanced item

$(document).on('click', this.wrapSelector('#vp_gbAdvAdd'), function() {

that.renderAdvancedItem();

});

// advanced item - column change event

$(document).on('change', this.wrapSelector('.vp-gb-adv-col'), function(event) {

var colList = event.dataList;

var idx = $(that.wrapSelector('.vp-gb-adv-col')).index(this);

// if there's change, reset display namings

// var previousList = that.state.advColList[idx];

// if (!previousList || colList.length !== previousList.length

// || !colList.map(col=>col.code).slice().sort().every((val, idx) => {

// return val === previousList.map(col=>col.code).slice().sort()[idx]

// })) {

// that.state.advNamingList = []

// $(this).parent().find('.vp-gb-adv-naming').val('');

// $(this).parent().find('.vp-gb-adv-naming').data('dict', {});

// }

var namingDict = that.state.advNamingList[idx];

if (namingDict) {

// namingDict = namingDict.filter(key => colList.map(col=>col.code).includes(key));

Object.keys(namingDict).forEach(key => {

if (!colList.map(col=>col.code).includes(key)) {

delete namingDict[key];

}

});

that.state.advNamingList[idx] = namingDict;

$(this).parent().find('.vp-gb-adv-naming').val(Object.values(namingDict).map(val => "'" + val +"'").join(','));

$(this).parent().find('.vp-gb-adv-naming').data('dict', namingDict);

}

that.state.advColList[idx] = colList;

});

// edit target columns

$(document).on('click', this.wrapSelector('.vp-gb-adv-col'), function() {

var includeList = that.state.display;

if (includeList && includeList.length > 0) {

includeList = includeList.map(col => col.code);

}

// exclude groupby columns

let excludeList = that.state.groupby.map(x => x.code);

that.openColumnSelector($(this).parent().find('.vp-gb-adv-col'), 'Select columns', includeList, excludeList);

});

// select method

$(document).on('click', this.wrapSelector('.vp-gb-adv-method'), function() {

// var method = $(this).val();

// var parentDiv = $(this).parent();

// if (method == 'typing') {

// // change it to typing input

// $(parentDiv).find('.vp-gb-adv-method-selector').hide();

// $(parentDiv).find('.vp-gb-adv-method').val('');

// $(parentDiv).find('.vp-gb-adv-method-box').show();

// } else {

// $(parentDiv).find('.vp-gb-adv-method').val(com_util.formatString("'{0}'", method));

// }

that.openMethodSelector($(this).parent().find('.vp-gb-adv-method'), 'Select methods');

});

// return to selecting method

// $(document).on('click', this.wrapSelector('.vp-gb-adv-method-return'), function() {

// var defaultValue = '';

// var parentDiv = $(this).parent().parent();

// $(parentDiv).find('.vp-gb-adv-method-selector').val(defaultValue);

// $(parentDiv).find('.vp-gb-adv-method').val(defaultValue);

// // show and hide

// $(parentDiv).find('.vp-gb-adv-method-selector').show();

// $(parentDiv).find('.vp-gb-adv-method-box').hide();

// });

// advanced item - method change event

$(document).on('change', this.wrapSelector('.vp-gb-adv-method'), function(event) {

var { list, userList } = event;

var idx = $(that.wrapSelector('.vp-gb-adv-method')).index(this);

that.state.advMethodList[idx] = list;

that.state.advMethodUserList[idx] = userList;

});

// advanced item - user method add event

$(document).on('click', this.wrapSelector('#vp_gbMethodUserAdd'), function(event) {

let userMethod = $(that.wrapSelector('#vp_gbMethodUser')).val();

let useText = $(that.wrapSelector('#vp_gbMethodUserAsText')).prop('checked');

let userCode = userMethod;

if (useText) {

userCode = "'" + userMethod + "'";

}

that._addUserMethod(userCode);

});

// advanced item - user method add event by enter

$(document).on('keyup', this.wrapSelector('#vp_gbMethodUser'), function(event) {

var keycode = event.keyCode

? event.keyCode

: event.which;

if (keycode == 13) { // enter

let userMethod = $(this).val();

let useText = $(that.wrapSelector('#vp_gbMethodUserAsText')).prop('checked');

let userCode = userMethod;

if (useText) {

userCode = "'" + userMethod + "'";

}

that._addUserMethod(userCode);

}

});

// advanced item - naming change event

$(document).on('change', this.wrapSelector('.vp-gb-adv-naming'), function(event) {

var namingDict = event.namingDict;

var idx = $(that.wrapSelector('.vp-gb-adv-naming')).index(this);

that.state.advNamingList[idx] = namingDict;

});

// edit columns naming

$(document).on('click', this.wrapSelector('.vp-gb-adv-naming'), function() {

var parentDiv = $(this).parent();

var columns = $(parentDiv).find('.vp-gb-adv-col').data('list');

if (columns && columns.length > 0) {

columns = columns.map(col => col.code);

}

var method = $(parentDiv).find('.vp-gb-adv-method').data('list');

var userMethod = $(parentDiv).find('.vp-gb-adv-method').data('userList');

method = [ ...method, ...userMethod ];

if (method == undefined || method.length <= 0) {

// set focus on selecting method tag

$(parentDiv).find('.vp-gb-adv-method').focus();

return;

}

that.openNamingPopup($(parentDiv).find('.vp-gb-adv-naming'), columns, method);

});

// delete advanced item

$(document).on('click', this.wrapSelector('.vp-gb-adv-item-delete'), function() {

if ($(that.wrapSelector('.vp-gb-adv-item')).length > 1) {

$(this).closest('.vp-gb-adv-item').remove();

}

});

}

_addUserMethod(userMethod) {

var addedMethodTag = $(this.wrapSelector(`.vp-gb-method-user-func[value="${userMethod}"]`));

if (addedMethodTag.length > 0) {

// already added

addedMethodTag.prop('checked', true);

$(this.wrapSelector('#vp_gbMethodUser')).val('');

return;

}

$(`<label><input type="checkbox" class="vp-gb-method-user-func" value="${userMethod}" checked/><span>${userMethod}</span><label>`)

.appendTo($(this.wrapSelector('.vp-gb-method-user-box')));

$(this.wrapSelector('#vp_gbMethodUser')).val('');

}

/**

* Unbind events

*/

_unbindEvent() {

super._unbindEvent();

// user operation event

$(document).off('change', this.wrapSelector('#vp_gbVariable'));

$(document).off('click', this.wrapSelector('.vp-gb-df-refresh'));

$(document).off('change', this.wrapSelector('#vp_gbBy'));

$(document).off('click', this.wrapSelector('#vp_gbBy'));

$(document).off('change', this.wrapSelector('#vp_gbByGrouper'));

$(document).off('change', this.wrapSelector('#vp_gbByGrouperNumber'));

$(document).off('change', this.wrapSelector('#vp_gbByGrouperPeriod'));

$(document).off('change', this.wrapSelector('#vp_gbDisplay'));

$(document).off('click', this.wrapSelector('#vp_gbDisplay'));

$(document).off('change', this.wrapSelector('#vp_gbMethodSelect'));

$(document).off('change', this.wrapSelector('#vp_gbAdvanced'));

$(document).off('change', this.wrapSelector('#vp_gbAllocateTo'));

$(document).off('change', this.wrapSelector('#vp_gbToFrame'));

$(document).off('change', this.wrapSelector('#vp_gbResetIndex'));

$(document).off('click', this.wrapSelector('#vp_gbAdvAdd'));

$(document).off('change', this.wrapSelector('.vp-gb-adv-col'));

$(document).off('click', this.wrapSelector('.vp-gb-adv-col'));

// $(document).off('change', this.wrapSelector('.vp-gb-adv-method-selector'));

$(document).off('click', this.wrapSelector('.vp-gb-adv-method'));

// $(document).off('click', this.wrapSelector('.vp-gb-adv-method-return'));

$(document).off('change', this.wrapSelector('.vp-gb-adv-naming'));

$(document).off('click', this.wrapSelector('.vp-gb-adv-naming'));

$(document).off('click', this.wrapSelector('.vp-gb-adv-item-delete'));

$(document).off('click.' + this.uuid);

}

templateForBody() {

return gbHtml;

}

/**

* Template for variable list (for dataframe)

* @param {Array<object>} varList

* @param {string} defaultValue previous value

*/

templateForVariableList(varList, defaultValue='') {

// var tag = new com_String();

// tag.appendFormatLine('<select id="{0}">', 'vp_gbVariable');

// varList.forEach(vObj => {

// // varName, varType

// var label = vObj.varName;

// tag.appendFormatLine('<option value="{0}" data-type="{1}" {2}>{3}</option>'

// , vObj.varName, vObj.varType

// , defaultValue == vObj.varName?'selected':''

// , label);

// });

// tag.appendLine('</select>'); // VP_VS_VARIABLES

// return tag.toString();

let mappedList = varList.map(obj => { return { label: obj.varName, value: obj.varName, dtype: obj.varType } });

var variableInput = new SuggestInput();

variableInput.setComponentID('vp_gbVariable');

variableInput.addClass('vp-state');

variableInput.setPlaceholder('Select variable');

variableInput.setSuggestList(function () { return mappedList; });

variableInput.setNormalFilter(true);

variableInput.addAttribute('required', true);

variableInput.setValue(defaultValue);

return variableInput.toTagString();

}

/**

* Template for advanced item and return it

* @returns Advanced box's item

*/

templateForAdvancedItem() {

var page = new com_String();

page.appendFormatLine('<div class="{0}">', 'vp-gb-adv-item');

// target columns

page.appendFormatLine('<input type="text" class="{0}" placeholder="{1}" title="{2}" readonly/>'

, 'vp-gb-adv-col', 'All columns', 'Apply All columns, if not selected');

// method select

// page.appendFormatLine('<select class="{0}">', 'vp-gb-adv-method-selector');

// var defaultMethod = '';

// page.appendFormatLine('<option value="{0}">{1}</option>', '', 'Select method type');

// page.appendFormatLine('<option value="{0}">{1}</option>', 'typing', 'Typing');

// page.appendLine('<option disabled>-----------------------</option>');

// this.methodList.forEach(method => {

// if (method.value == '') {

// return;

// }

// page.appendFormatLine('<option value="{0}">{1}</option>', method.value, method.label);

// });

// page.appendLine('</select>');

page.appendFormatLine('<input type="text" class="{0}" placeholder="{1}" title="{2}" readonly/>'

, 'vp-gb-adv-method', 'Select methods to apply', '');

page.appendFormatLine('<div class="{0}" style="display: none;">', 'vp-gb-adv-method-box');

// page.appendFormatLine('<input type="text" class="{0}" placeholder="{1}" value="{2}"/>', 'vp-gb-adv-method', 'Type function name', "'" + defaultMethod + "'");

// page.appendFormatLine('<i class="fa fa-search {0}"></i>', 'vp-gb-adv-method-return');

// page.appendFormatLine('<div class="{0} {1}" title="{2}"></div>'

// , 'vp-icon-arrow-left', 'vp-gb-adv-method-return', 'Return to select method');

page.appendLine('</div>');

// naming

page.appendFormatLine('<input type="text" class="{0}" placeholder="{1}" title="{2}" data-dict={} readonly/>', 'vp-gb-adv-naming', 'Click to rename columns', 'Click to rename columns');

// delete button

page.appendFormatLine('<div class="{0} {1} {2}"></div>', 'vp-gb-adv-item-delete', 'vp-cursor', 'vp-icon-close-small');

page.appendLine('</div>');

return page.toString();

}

templateForDataView() {

return '';

}

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('<div class="{0} vp-close-on-blur vp-scrollbar">', 'vp_rendered_html'); // 'rendered_html' style from jupyter output area

if (isHtml) {

tag.appendLine(renderedText);

} else {

tag.appendFormatLine('<pre>{0}</pre>', renderedText);

}

tag.appendLine('</div>');

$(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 = '';

if (msg.content && msg.content.ename) {

errorContent = com_util.templateForErrorBox(msg.content.ename, msg.content?.evalue);

}

vpLog.display(VP_LOG_TYPE.ERROR, msg.content?.ename, msg.content?.evalue, msg.content);

that.renderDataPage(errorContent);

}

}).catch(function(resultObj) {

let { msg } = resultObj;

var errorContent = '';

if (msg.content && msg.content.ename) {

errorContent = com_util.templateForErrorBox(msg.content.ename, msg.content?.evalue);

}

vpLog.display(VP_LOG_TYPE.ERROR, msg.content?.ename, msg.content?.evalue, msg.content);

that.renderDataPage(errorContent);

});

}

render() {

super.render();

this.loadVariableList();

this.renderPeriodList();

this.renderMethodList();

this.renderAdvancedItem();

}

renderPeriodList() {

let page = new com_String();

page.appendFormatLine('<select id="{0}">', 'vp_gbByGrouperPeriod');

var savedPeriod = this.state.period;

this.periodList.forEach(period => {

page.appendFormatLine('<option value="{0}"{1}>{2}</option>', period.value, savedPeriod==period.value?' selected':'',period.label);

});

page.appendLine('</select>');

$(this.wrapSelector('#vp_gbByGrouperPeriod')).replaceWith(page.toString());

}

renderMethodList() {

let page = new com_String();

page.appendFormatLine('<select id="{0}">', 'vp_gbMethodSelect');

var savedMethod = this.state.method;

this.methodList.forEach(method => {

page.appendFormatLine('<option value="{0}"{1}>{2}</option>', method.value, savedMethod==method.value?' selected':'',method.label);

});

page.appendLine('</select>');

$(this.wrapSelector('#vp_gbMethodSelect')).replaceWith(page.toString());

}

renderAdvancedItem() {

$(this.templateForAdvancedItem()).insertBefore($(this.wrapSelector('#vp_gbAdvAdd')));

}

/**

* Render column selector using MultiSelector module

* @param {Array<string>} previousList previous selected columns

* @param {Array<string>} includeList columns to include

* @param {Array<string>} excludeList columns to exclude

*/

renderMultiSelector(previousList, includeList, excludeList) {

this.popup.ColSelector = new MultiSelector(this.wrapSelector('.vp-inner-popup-body'),

{ mode: 'columns', parent: [this.state.variable], selectedList: previousList, includeList: includeList, excludeList: excludeList }

);

}

/**

* Render method selector

* @param {Array<string>} previousList previously selected methods ["'count'", ... ]

* @param {Array<object>} userList previously added user methods ["np.sum", "'sum'", ...]

*/

renderMethodSelector(previousList = [], userList = []) {

var page = new com_String();

page.appendFormatLine('<div class="{0}">', 'vp-gb-method-selector');

// method list

page.appendFormatLine('<div class="{0}">', 'vp-gb-method-box');

this.methodList.forEach((method, idx) => {

if (idx == 0) {

return ;

}

var methodStr = "'" + method.value + "'";

var checked = "";

if (previousList && previousList.includes(methodStr)) {

checked = "checked"

}

page.appendFormatLine('<label><input class="vp-gb-method-checkbox" type="checkbox" value="{0}" {1}/><span>{2}</span></label>'

, methodStr, checked, method.label);

});

page.appendLine('</div>');

page.appendLine('<hr style="margin: 5px 0;">');

// user method list

page.appendFormatLine('<div class="{0}">', 'vp-gb-method-user-box');

userList && userList.forEach(userFunc => {

page.appendFormatLine('<label><input class="vp-gb-method-user-func" type="checkbox" value="{0}" checked/><span>{1}</span></label>'

, userFunc, userFunc);

});

page.appendLine('</div>');

page.appendLine('<hr style="margin: 5px 0;">');

// add user method

page.appendFormatLine('<div class="{0}">', 'vp-gb-method-user');

page.appendFormatLine('<label class="vp-bold">{0}</label>', 'User option');

page.appendFormatLine('<input type="text" placeholder="{0}" id="vp_gbMethodUser"/>', 'Type user method');

page.appendFormatLine('<label><input id="vp_gbMethodUserAsText" type="checkbox"/><span>{0}</span></label>'

, 'Text');

page.appendLine('<button id="vp_gbMethodUserAdd" class="vp-button">Add</button>');

page.appendLine('</div>');

page.appendLine('</div>');

$(this.wrapSelector('.vp-inner-popup-body')).html(page.toString());

}

/**

* Render naming box

* @param {Array<string>} columns

* @param {Array<string>} method

* @param {Object} previousDict

* @returns

*/

renderNamingBox(columns, methods, previousDict) {

var page = new com_String();

page.appendFormatLine('<div class="{0}">', 'vp-gb-naming-box');

if (columns && columns.length > 0) {

columns.forEach(col => {

page.appendLine('<div class="vp-grid-border-box mb5">');

page.appendFormatLine('<label>{0}</label>', col);

methods.forEach(met => {

page.appendFormatLine('<div class="{0}">', 'vp-gb-naming-item');

page.appendFormatLine('<label>{0}</label>', met);

var previousValue = '';

var key = col + '.' + met;

if (previousDict[key]) {

previousValue = previousDict[key];

}

page.appendFormatLine('<input type="text" class="{0}" placeholder="{1}" value="{2}" data-code="{3}"/>'

, 'vp-gb-naming-text', 'Name to replace ' + met, previousValue, key);

page.appendLine('</div>');

});

page.appendLine('</div>');

});

} else {

page.appendLine('<label>Rename methods</label>');

methods.forEach(met => {

page.appendFormatLine('<div class="{0}">', 'vp-gb-naming-item');

page.appendFormatLine('<label>{0}</label>', met);

var previousValue = '';

var key = met;

if (previousDict[key]) {

previousValue = previousDict[key];

}

page.appendFormatLine('<input type="text" class="{0}" placeholder="{1}" value="{2}" data-code="{3}"/>'

, 'vp-gb-naming-text', 'Name to replace ' + met, previousValue, key);

page.appendLine('</div>');

});

}

page.appendLine('</div>');

$(this.wrapSelector('.vp-inner-popup-body')).html(page.toString());

}

generateCode() {

var code = new com_String();

var {

variable, groupby, useGrouper, grouperNumber, grouperPeriod,

display, method, advanced, allocateTo, toFrame, resetIndex

} = this.state;

if (!variable || variable == '') {

return '';

}

// mapping colList states

groupby = groupby.map(col => col.code);

display = display.map(col => col.code);

//====================================================================

// Allocation

//====================================================================

if (allocateTo && allocateTo != '') {

code.appendFormat('{0} = ', allocateTo);

}

//====================================================================

// Dataframe variable & Groupby(with Grouper) columns

//====================================================================

var byStr = '';

if (groupby.length <= 1) {

byStr = groupby.join('');

} else {

byStr = '[' + groupby.join(',') + ']';

}

// Grouper

if (useGrouper) {

byStr = com_util.formatString("pd.Grouper(key={0}, freq='{1}')", byStr, grouperNumber + grouperPeriod);

} else if (resetIndex === true) {

// as_index option cannot use with Grouper -> use .reset_index() at the end

byStr += ', as_index=False';

}

// variable & groupby columns & option

code.appendFormat('{0}.groupby({1})', variable, byStr);

//====================================================================

// Display columns

//====================================================================

var colStr = '';

if (display && display.length > 0) {

if (toFrame || display.length > 1) {

// over 2 columns

colStr = '[[' + display.join(',') + ']]';

} else if (display.length == 1) {

// for 1 column

colStr = '[' + display.join('') + ']';

}

}

//====================================================================

// Aggregation/Method code generation

//====================================================================

var methodStr = new com_String();

if (advanced) {

//================================================================

// Aggregation code generation

//================================================================

methodStr.append('agg(');

// prepare variables for aggregation

var advItemTags = $(this.wrapSelector('.vp-gb-adv-item'));

if (advItemTags && advItemTags.length > 0) {

var advColumnDict = {

'nothing': []

}

for (var i = 0; i < advItemTags.length; i++) {

var advColumns = $(advItemTags[i]).find('.vp-gb-adv-col').data('list');

if (advColumns && advColumns.length > 0) {

advColumns = advColumns.map(col => col.code);

}

var advMethod = $(advItemTags[i]).find('.vp-gb-adv-method').data('list');

var advUserMethod = $(advItemTags[i]).find('.vp-gb-adv-method').data('userList');

if (!advMethod || advMethod == null) {

advMethod = [];

}

if (!advUserMethod || advUserMethod == null) {

advUserMethod = [];

}

advMethod = [ ...advMethod, ...advUserMethod ];

var advNaming = $(advItemTags[i]).find('.vp-gb-adv-naming').data('dict');

if (!advMethod || advMethod.length <= 0) {

continue;

}

if (advColumns && advColumns.length > 0) {

advColumns.forEach(col => {

advMethod.forEach(method => {

var naming = advNaming[col + '.' + method];

if (naming && naming != '') {

naming = "'" + naming + "'";

}

if (Object.keys(advColumnDict).includes(col)) {

advColumnDict[col].push({ method: method, naming: naming})

} else {

advColumnDict[col] = [{ method: method, naming: naming}];

}

});

});

} else {

var naming = advNaming[advMethod];

if (naming && naming != '') {

naming = "'" + naming + "'";

}

advMethod.forEach(method => {

var naming = advNaming[method];

if (naming && naming != '') {

naming = "'" + naming + "'";

}

advColumnDict['nothing'].push({ method: method, naming: naming});

});

}

}

// if target columns not selected

if (Object.keys(advColumnDict).length == 1) {

// EX) .agg([('average', 'mean'), ('maximum value', max')])

var noColList = advColumnDict['nothing'];

if (noColList.length == 1) {

// 1 method

if (noColList[0].naming && noColList[0].naming != '') {

methodStr.appendFormat("[({0}, {1})]", noColList[0].naming, noColList[0].method);

} else {

methodStr.appendFormat("{0}", noColList[0].method);

}

} else {

// more than 1 method

var tmpList = [];

noColList.forEach(obj => {

if (obj.naming && obj.naming != '') {

tmpList.push(com_util.formatString("({0}, {1})", obj.naming, obj.method));

} else {

tmpList.push(obj.method);

}

});

methodStr.appendFormat("[{0}]", tmpList.join(', '));

}

} else {

// EX) .agg({'col1':[('average', 'mean')], 'col2': 'max')})

// apply method with empty column to all columns(display)

var noColList = advColumnDict['nothing'];

delete advColumnDict['nothing'];

noColList.forEach(obj => {

display.forEach(col => {

if (Object.keys(advColumnDict).includes(col)) {

if (advColumnDict[col].filter(x => x.method == obj.method).length == 0) {

advColumnDict[col].push({ method: obj.method, naming: obj.naming})

}

} else {

advColumnDict[col] = [{ method: obj.method, naming: obj.naming}];

}

});

});

// with target columns

var tmpList1 = [];

Object.keys(advColumnDict).forEach(key => {

var colList = advColumnDict[key];

var tmpList2 = [];

var useTuple = false;

colList.forEach(obj => {

if (obj.naming && obj.naming != '') {

tmpList2.push(com_util.formatString("({0}, {1})", obj.naming, obj.method));

useTuple = true;

} else {

tmpList2.push(obj.method);

}

});

var tmpStr = tmpList2.join(',');

if (tmpList2.length > 1 || useTuple) {

tmpStr = '[' + tmpStr + ']';

}

tmpList1.push(com_util.formatString("{0}: {1}", key, tmpStr));

});

methodStr.appendFormat('{{0}}', tmpList1.join(', '));

}

}

methodStr.append(')');

} else {

//================================================================

// Method code generation

//================================================================

if (method != '') {

let numericOnlyList = ['std', 'sum', 'mean', 'median', 'quantile'];

if (numericOnlyList.includes(method)) {

methodStr.appendFormat('{0}(numeric_only=True)', method);

} else {

methodStr.appendFormat('{0}()', method);

if (method === 'size' && toFrame === true) {

// if to_Frame on size() method

methodStr.append(".to_frame(name='size')");

}

}

}

}

if (method != '' || advanced) {

// when using as_index option with Grouper, use .reset_index()

if (useGrouper && resetIndex) {

methodStr.append('.reset_index()');

}

// display columns

code.appendFormat('{0}.{1}', colStr, methodStr.toString());

}

if (allocateTo && allocateTo != '') {

code.appendLine();

code.append(allocateTo);

}

return code.toString();

}

/**

* Load state and set values on components

* @param {object} state

*/

loadState() {

super.loadState();

var {

variable, groupby, useGrouper, grouperNumber, grouperPeriod,

display, method, advanced, allocateTo, toFrame, resetIndex,

advPageDom, advColList, advNamingList, advMethodList, advMethodUserList

} = this.state;

$(this.wrapSelector('#vp_gbVariable')).val(variable);

$(this.wrapSelector('#vp_gbBy')).val(groupby.map(col=>col.code).join(','));

$(this.wrapSelector('#vp_gbBy')).data('list', groupby);

if (useGrouper) {

$(this.wrapSelector('#vp_gbByGrouper')).removeAttr('disabled');

$(this.wrapSelector('#vp_gbByGrouper')).prop('checked', useGrouper);

$(this.wrapSelector('#vp_gbByGrouperNumber')).val(grouperNumber);

$(this.wrapSelector('#vp_gbByGrouperPeriod')).val(grouperPeriod);

$(this.wrapSelector('.vp-gb-by-grouper-box')).show();

}

$(this.wrapSelector('#vp_gbDisplay')).val(display.map(col=>col.code).join(','));

$(this.wrapSelector('#vp_gbDisplay')).data('list', display);

$(this.wrapSelector('#vp_gbMethod')).val(method);

$(this.wrapSelector('#vp_gbMethodSelector')).val(method);

$(this.wrapSelector('#vp_gbAdvanced')).prop('checked', advanced);

if (advanced) {

$(this.wrapSelector('#vp_gbAdvanced')).trigger('change');

}

$(this.wrapSelector('#vp_gbAllocateTo')).val(allocateTo);

$(this.wrapSelector('#vp_gbToFrame')).val(toFrame);

$(this.wrapSelector('#vp_gbResetIndex')).prop('checked', resetIndex);

if (advPageDom != '') {

$(this.wrapSelector('.vp-gb-adv-box')).html(advPageDom);

}

advColList.forEach((arr, idx) => {

$($(this.wrapSelector('.vp-gb-adv-col'))[idx]).data('list', arr);

});

advMethodList.forEach((arr, idx) => {

$($(this.wrapSelector('.vp-gb-adv-method'))[idx]).data('list', arr);

});

advMethodUserList.forEach((arr, idx) => {

$($(this.wrapSelector('.vp-gb-adv-method'))[idx]).data('userList', arr);

});

advNamingList.forEach((obj, idx) => {

$($(this.wrapSelector('.vp-gb-adv-naming'))[idx]).data('dict', obj);

});

}

/**

* Save now state of components

*/

saveState() {

super.saveState();

// save input state

$(this.wrapSelector('.vp-gb-adv-box input')).each(function () {

this.defaultValue = this.value;

});

// save checkbox state

$(this.wrapSelector('.vp-gb-adv-box input[type="checkbox"]')).each(function () {

this.defaultValue = this.value;

});

// save select state

$(this.wrapSelector('.vp-gb-adv-box select > option')).each(function () {

if (this.selected) {

this.setAttribute("selected", true);

} else {

this.removeAttribute("selected");

}

});

// save advanced box