_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: [],

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.wrapSelector('#vp_gbToFrame')).parent().show();

} else {

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

}

});

// display select button event

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

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

});

// 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);

});

// 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);

}

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

});

// select method

$(document).on('change', this.wrapSelector('.vp-gb-adv-method-selector'), 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));

}

});

// 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 - 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').val();

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

// 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();

}

});

}

/**

_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-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;

}

/**

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();

}

/**

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', 'Column list', '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('<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('<img src="{0}" class="{1}" title="{2}">'

, '/nbextensions/visualpython/img/arrow_left.svg', 'vp-gb-adv-method-return', 'Return to select method');

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

// naming

page.appendFormatLine('<input type="text" class="{0}" placeholder="{1}" data-dict={} readonly/>', 'vp-gb-adv-naming', 'Display name');

// delete button

page.appendFormatLine('<div class="{0} {1}"><img src="{2}"/></div>', 'vp-gb-adv-item-delete', 'vp-cursor', '/nbextensions/visualpython/img/close_small.svg');

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">', '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.ename) {

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

}

that.renderDataPage(errorContent);

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

}

}).catch(function(resultObj) {

let { msg } = resultObj;

var errorContent = '';

if (msg.content.ename) {

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

}

that.renderDataPage(errorContent);

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

});

}

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')));

}

/**

renderMultiSelector(previousList, includeList) {

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

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

);

}

/**

renderNamingBox(columns, method, previousDict) {

var page = new com_String();

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

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

page.appendFormatLine('<label>Replace {0} as ...</label>', method);

columns.forEach(col => {

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

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

var previousValue = '';

if (previousDict[col]) {

previousValue = previousDict[col];

}

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

, 'vp-gb-naming-text', 'Name to replace ' + method, previousValue, col);

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

});

} else {

var previousValue = '';

if (previousDict[method]) {

previousValue = previousDict[method];

}

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

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

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

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

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) {

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').val();

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

if (!advMethod || advMethod == '' || advMethod == "''") {

continue;

}

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

advColumns.forEach(col => {

var naming = advNaming[col];

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

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

}

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

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

} else {

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

}

});

} else {

var naming = advNaming[advMethod];

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

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

}

advColumnDict['nothing'].push({ method: advMethod, 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 = [];