@syncfusion/ej2-pivotview
Version:
The pivot grid, or pivot table, is used to visualize large sets of relational data in a cross-tabular format, similar to an Excel pivot table.
869 lines • 95.1 kB
JavaScript
import { createElement, Draggable, remove, extend, detach, isNullOrUndefined, SanitizeHtmlHelper, getInstance } from '@syncfusion/ej2-base';
import { EventHandler, select } from '@syncfusion/ej2-base';
import { isNullOrUndefined as isNOU, addClass, removeClass, closest, Browser } from '@syncfusion/ej2-base';
import { PivotFieldList } from '../../pivotfieldlist/base/field-list';
import * as cls from '../../common/base/css-constant';
import * as events from '../../common/base/constant';
import { PivotEngine } from '../../base/engine';
import { Button } from '@syncfusion/ej2-buttons';
import { showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { AggregateMenu } from '../popups/aggregate-menu';
import { AxisFieldRenderer } from '../../pivotfieldlist/renderer/axis-field-renderer';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { PivotUtil } from '../../base/util';
/**
* Module to render Pivot button
*/
/** @hidden */
var PivotButton = /** @class */ (function () {
/**
* Constructor for render module.
*
* @param {PivotView | PivotFieldList} parent - Component instance.
*/
function PivotButton(parent) {
this.parent = parent;
this.menuOption = new AggregateMenu(this.parent);
this.parent.pivotButtonModule = this;
this.addEventListener();
if (this.parent instanceof PivotFieldList) {
this.axisField = new AxisFieldRenderer(this.parent);
}
this.isDestroyed = false;
}
PivotButton.prototype.renderPivotButton = function (args) {
var _this = this;
var _a;
this.parentElement = this.parent.getModuleName() === 'pivotview' ? this.parent.element :
document.getElementById(this.parent.element.id + '_Container');
var currentAxisElements;
var currentChartAxisElements;
if ((!this.parent.isTabular) || (this.parent.isTabular && args.axis !== 'rows')) {
currentAxisElements = Array.prototype.slice.call(this.parentElement.querySelectorAll('.e-group-' + args.axis));
}
else if (this.parent.isTabular && args.axis === 'rows') {
if (!isNullOrUndefined(this.parentElement.querySelectorAll('.' + cls.GROUP_PIVOT_ROW)[0])) {
currentAxisElements = Array.prototype.slice.call(this.parentElement.querySelectorAll('.' + cls.GROUP_PIVOT_ROW));
}
if (!isNullOrUndefined(this.parentElement.querySelectorAll('.' + cls.GROUP_CHART_ROW)[0])) {
currentChartAxisElements = Array.prototype.slice.call(this.parentElement.querySelectorAll('.' + cls.GROUP_CHART_ROW));
}
}
var axisElement;
if (args.axis === 'rows' && this.parent.showGroupingBar && this.parent.groupingBarModule
&& isNullOrUndefined(this.parentElement.querySelector('.' + cls.GROUP_PIVOT_ROW)) && !isNullOrUndefined(currentAxisElements)) {
currentAxisElements.push(this.parent.groupingBarModule.rowPanel);
axisElement = this.parent.groupingBarModule.rowPanel;
}
var field = extend([], args.field, null, true);
var axis = args.axis;
var valuePos = -1;
var showValuesButton = (this.parent.dataType === 'pivot' ? (this.parent.getModuleName() === 'pivotfieldlist' &&
this.parent.pivotGridModule) ?
this.parent.pivotGridModule.showValuesButton : this.parent.showValuesButton : false);
if (((this.parent.dataSourceSettings.valueAxis === 'row' && args.axis === 'rows') ||
(this.parent.dataSourceSettings.valueAxis === 'column' && args.axis === 'columns')) && showValuesButton && this.parent.dataSourceSettings.values.length > 1) {
if (isNullOrUndefined(PivotUtil.getFieldByName('[Measures]', field))) {
var measureField = PivotUtil.getFieldByName('[Measures]', this.parent.dataSourceSettings.fieldMapping);
var valueField = {
name: '[Measures]', caption: this.parent.localeObj.getConstant('values'),
axis: args.axis,
showRemoveIcon: (measureField && 'showRemoveIcon' in measureField) ? measureField.showRemoveIcon : true,
allowDragAndDrop: (measureField && 'allowDragAndDrop' in measureField) ? measureField.allowDragAndDrop : true
};
if ((this.parent.dataSourceSettings.valueIndex === -1 || this.parent.dataSourceSettings.valueIndex > field.length)) {
valuePos = field.length;
field.push(valueField);
this.parent.setProperties({ dataSourceSettings: { valueIndex: -1 } }, true);
}
else {
valuePos = this.parent.dataSourceSettings.valueIndex;
field.splice(valuePos, 0, valueField);
}
}
}
if (this.parent.getModuleName() === 'pivotfieldlist') {
this.parentElement = document.getElementById(this.parent.element.id + '_Container');
if (this.parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-' + axis)) {
var axisPrompt = this.parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-' + axis)
.querySelector('.' + cls.AXIS_PROMPT_CLASS);
if (field.length === 0) {
removeClass([axisPrompt], cls.ICON_DISABLE);
}
else {
addClass([axisPrompt], cls.ICON_DISABLE);
}
axisElement =
this.parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-' + axis).querySelector('.' + cls.AXIS_CONTENT_CLASS);
}
else {
return;
}
}
else {
this.parentElement = this.parent.element;
if (!isNullOrUndefined(this.parentElement.querySelector('.e-group-' + axis))) {
axisElement = this.parentElement.querySelector('.e-group-' + axis);
}
}
if (axisElement) {
if (this.parent.getModuleName() === 'pivotview' && field.length === 0) {
for (var i = 0; i < currentAxisElements.length; i++) {
var element = currentAxisElements[i];
if (!element.classList.contains(cls.GROUP_CHART_VALUE) && !element.classList.contains(cls.GROUP_CHART_COLUMN)) {
var axisPrompt = createElement('span', {
className: cls.AXIS_PROMPT_CLASS
});
axisPrompt.innerText = (this.parent.groupingBarSettings.allowDragAndDrop ? axis === 'rows' ? this.parent.localeObj.getConstant('rowAxisPrompt') :
axis === 'columns' ? this.parent.localeObj.getConstant('columnAxisPrompt') :
axis === 'values' ? this.parent.localeObj.getConstant('valueAxisPrompt') :
axis === 'filters' ? this.parent.localeObj.getConstant('filterAxisPrompt') :
this.parent.localeObj.getConstant('allFields') : '');
element.appendChild(axisPrompt);
}
}
}
else {
if ((!this.parent.isTabular) || (this.parent.isTabular && args.axis !== 'rows')) {
for (var i = 0, cnt = field.length; i < cnt; i++) {
var elements = this.parent.getModuleName() === 'pivotfieldlist' ?
[axisElement] : currentAxisElements;
for (var j = 0; j < elements.length; j++) {
var element = elements[j];
this.appendPivotButton(element, field, axis, valuePos, i, args);
}
}
}
else {
if (!isNullOrUndefined(currentAxisElements)) {
for (var i = 0, cnt = field.length; i < cnt; i++) {
var elements = this.parent.getModuleName() === 'pivotfieldlist' ?
[axisElement] : currentAxisElements;
var valueBtnExist = this.parent.dataSourceSettings.valueAxis === 'row' &&
this.parent.dataSourceSettings.values.length > 1 && elements.length > 1;
var elemIdx = void 0;
if (valueBtnExist && showValuesButton) {
elemIdx = (i === field.length - 1)
? elements.length - 1
: i % (elements.length - 1);
}
else if ((valueBtnExist && !showValuesButton) || (this.parent.dataSourceSettings.alwaysShowValueHeader
&& this.parent.dataSourceSettings.values.length === 1)) {
elemIdx = i % (elements.length - 1);
}
else {
elemIdx = i % elements.length;
}
var element = elements[elemIdx];
this.appendPivotButton(element, field, axis, valuePos, i, args);
}
}
if (!isNullOrUndefined(currentChartAxisElements)) {
for (var i = 0, cnt = field.length; i < cnt; i++) {
var elements = this.parent.getModuleName() === 'pivotfieldlist' ?
[axisElement] : currentChartAxisElements;
for (var j = 0; j < elements.length; j++) {
var element = elements[j];
this.appendPivotButton(element, field, axis, valuePos, i, args);
}
}
}
}
if (axis === 'values') {
var valueFiedDropDownList = select('.' + cls.GROUP_CHART_VALUE_DROPDOWN_DIV, this.parentElement) ?
getInstance(select('.' + cls.GROUP_CHART_VALUE_DROPDOWN_DIV, this.parentElement), DropDownList) : null;
var _loop_1 = function (i) {
var element = currentAxisElements[i];
if (element.classList.contains(cls.GROUP_CHART_VALUE) && this_1.parent.pivotChartModule) {
var valueData = field.map(function (item) {
return { text: item.caption ? item.caption : item.name, value: item.name };
});
var parent_1 = this_1.parent;
if (valueFiedDropDownList && element.querySelector('.' + cls.GROUP_CHART_VALUE_DROPDOWN_DIV)) {
valueFiedDropDownList.dataSource = valueData;
valueFiedDropDownList.value = !parent_1.chartSettings.enableMultipleAxis ?
parent_1.pivotChartModule.currentMeasure : valueData[0].value;
}
else {
var ddlDiv = createElement('div', { className: cls.GROUP_CHART_VALUE_DROPDOWN_DIV });
element.appendChild(ddlDiv);
valueFiedDropDownList = new DropDownList({
dataSource: valueData,
enableRtl: this_1.parent.enableRtl,
locale: this_1.parent.locale,
value: !parent_1.chartSettings.enableMultipleAxis ?
parent_1.pivotChartModule.currentMeasure : valueData[0].value,
width: this_1.parent.isAdaptive ? 150 : 200,
fields: { value: 'value', text: 'text' },
cssClass: cls.GROUP_CHART_VALUE_DROPDOWN + (this_1.parent.cssClass ? (' ' + this_1.parent.cssClass) : ''),
change: function (args) {
if (args.e && args.e !== null) {
parent_1.chartSettings.value = args.value;
}
}
});
valueFiedDropDownList.isStringTemplate = true;
valueFiedDropDownList.appendTo(ddlDiv);
}
}
};
var this_1 = this;
for (var i = 0; i < currentAxisElements.length; i++) {
_loop_1(i);
}
}
else if (axis === 'columns') {
var availColindex = undefined;
var columnFieldDropDownList = select('.' + cls.GROUP_CHART_COLUMN_DROPDOWN_DIV, this.parentElement) ?
getInstance(select('.' + cls.GROUP_CHART_COLUMN_DROPDOWN_DIV, this.parentElement), DropDownList) : null;
for (var i = 0; i < currentAxisElements.length; i++) {
var element = currentAxisElements[i];
if (element.classList.contains(cls.GROUP_CHART_COLUMN) && this.parent.pivotChartModule) {
var currentMeasure = this.parent.pivotChartModule.currentMeasure;
var delimiter = this.parent.chartSettings.columnDelimiter ? this.parent.chartSettings.columnDelimiter : '-';
var columnHeader = (this.parent.chartSettings.columnHeader && this.parent.chartSettings.columnHeader !== '') ?
this.parent.chartSettings.columnHeader.split(delimiter).join(' - ') : '';
var engineModule = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule;
var pivotValues = engineModule.pivotValues;
var totColIndex = this.parent.pivotChartModule.getColumnTotalIndex(pivotValues);
var rKeys = Object.keys(pivotValues);
var columnData = [];
var firstValueRow = false;
for (var _i = 0, rKeys_1 = rKeys; _i < rKeys_1.length; _i++) {
var rKey = rKeys_1[_i];
if (firstValueRow) {
break;
}
var rowIndex = Number(rKey);
if (pivotValues[rowIndex] && pivotValues[rowIndex][0] && pivotValues[rowIndex][0].axis === 'row' &&
(this.parent.dataSourceSettings.rows.length === 0 ? true : pivotValues[rowIndex][0].type !== 'grand sum')) {
var firstRowCell = pivotValues[rowIndex][0];
var tupInfo = this.parent.dataType === 'olap' ?
engineModule.tupRowInfo[firstRowCell.ordinal] : undefined;
var rows = pivotValues[rowIndex];
var cKeys = Object.keys(rows);
for (var _b = 0, cKeys_1 = cKeys; _b < cKeys_1.length; _b++) {
var cKey = cKeys_1[_b];
var cellIndex = Number(cKey);
var cell = pivotValues[rowIndex][cellIndex];
var actualText = (this.parent.dataType === 'olap' && tupInfo && tupInfo.measureName) ?
tupInfo.measureName : cell.actualText;
if (!totColIndex[cell.colIndex] && cell.axis === 'value' && firstRowCell.type !== 'header' &&
actualText !== '' && actualText === currentMeasure) {
firstValueRow = true;
var columnSeries = this.parent.dataType === 'olap' ? cell.columnHeaders.toString().split(/~~|::/).join(' - ')
: cell.columnHeaders.toString().split(this.parent.dataSourceSettings.valueSortSettings.headerDelimiter).join(' - ');
columnData.push({ value: columnSeries, text: columnSeries, title: (_a = {}, _a['title'] = columnSeries, _a) });
if (columnSeries === columnHeader) {
availColindex = columnData.length;
}
}
}
}
}
if (columnFieldDropDownList && element.querySelector('.' + cls.GROUP_CHART_COLUMN_DROPDOWN_DIV)) {
columnFieldDropDownList.dataSource = columnData;
if (availColindex !== undefined) {
columnFieldDropDownList.value = columnData[availColindex - 1].value;
}
else {
columnFieldDropDownList.value = columnData[0].value;
}
}
else {
var ddlDiv = createElement('div', { className: cls.GROUP_CHART_COLUMN_DROPDOWN_DIV });
element.appendChild(ddlDiv);
columnFieldDropDownList = new DropDownList({
dataSource: columnData,
enableRtl: this.parent.enableRtl,
locale: this.parent.locale,
value: availColindex ? columnData[availColindex - 1].value : (columnData[0] ? columnData[0].value : ''),
width: '200',
fields: { value: 'value', text: 'text', htmlAttributes: 'title' },
cssClass: cls.GROUP_CHART_COLUMN_DROPDOWN + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
change: function (args) {
if (args.e && args.e !== null) {
var delimiter_1 = _this.parent.chartSettings.columnDelimiter ? _this.parent.chartSettings.columnDelimiter : '-';
_this.parent.chartSettings.columnHeader = args.value.split(' - ').join(delimiter_1);
}
}
});
columnFieldDropDownList.isStringTemplate = true;
columnFieldDropDownList.appendTo(ddlDiv);
}
}
}
}
}
}
else {
return;
}
};
PivotButton.prototype.appendPivotButton = function (element, field, axis, valuePos, i, args) {
if (!isNullOrUndefined(element) && ((this.parent.olapEngineModule &&
(this.parent.olapEngineModule.fieldList[field[i].name] || field[i].name === '[Measures]'))
|| this.parent.engineModule)) {
var isMeasureAvail = (this.parent.dataType === 'olap' && (field[i].name.toLowerCase() === '[measures]' || axis === 'values'));
var isMeasureFieldsAvail = (this.parent.dataType === 'olap' && axis === 'values');
if (!element.classList.contains(cls.GROUP_CHART_VALUE) && !element.classList.contains(cls.GROUP_CHART_COLUMN)) {
var buttonWrapper = createElement('div', {
className: cls.PIVOT_BUTTON_WRAPPER_CLASS + (i === 0 && axis !== 'all-fields' ? ' e-first-btn' : '') + (this.parent.isTabular ? (' ' + cls.TABULAR_PIVOT_BUTTON) : ''),
attrs: { 'data-tag': axis + ':' + field[i].name }
});
if (this.parent.isTabular) {
buttonWrapper.style.width = args.axis === 'rows' && element.classList.contains(cls.GROUP_PIVOT_ROW) ? '100%' : 'auto';
}
var buttonCaption = field[i].caption ? field[i].caption :
field[i].name;
buttonCaption = this.parent.enableHtmlSanitizer ?
SanitizeHtmlHelper.sanitize(buttonCaption) : buttonCaption;
var buttonElement = createElement('div', {
id: this.parent.element.id + '_' + field[i].name, className: cls.PIVOT_BUTTON_CLASS + ' ' + field[i].name.replace(/[^A-Z0-9]/ig, '') + (this.parent.isTabular ? (' ' + cls.TABULAR_ROW_BUTTON) : ''),
attrs: {
'data-uid': field[i].name,
'tabindex': (this.parent.getModuleName() === 'pivotview' && this.parent.grid && axis === 'rows' && !element.classList.contains(cls.GROUP_CHART_ROW)) ? '-1' : '0',
'isvalue': (i === valuePos || isMeasureAvail && !isMeasureFieldsAvail) ? 'true' : 'false',
'aria-disabled': 'false', 'aria-label': buttonCaption,
'data-type': (this.parent.dataType === 'olap' ? isMeasureFieldsAvail ? 'isMeasureFieldsAvail' : isMeasureAvail ? 'isMeasureAvail' : field[i].type : field[i].type),
'data-caption': buttonCaption,
'data-basefield': this.parent.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(field[i].baseField) : field[i].baseField,
'data-baseitem': this.parent.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(field[i].baseItem) : field[i].baseItem,
'role': 'button'
}
});
var dropIndicatorElement = createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },
className: cls.DROP_INDICATOR_CLASS
});
var dropLastIndicatorElement = createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },
className: cls.DROP_INDICATOR_CLASS + '-last'
});
var dragWrapper = this.createButtonDragIcon(field[i], buttonElement);
var contentElement = this.createButtonText(field, i, axis, valuePos);
buttonElement.appendChild(contentElement);
if (axis !== 'all-fields') {
if (!isMeasureAvail && !field[i].isNamedSet && !field[i].isCalculatedField) {
if (['filters', 'values'].indexOf(axis) === -1 && valuePos !== i &&
!(this.parent.dataType === 'olap' && ((this.parent.getModuleName() === 'pivotview' &&
this.parent.enableVirtualization) || (this.parent.getModuleName() === 'pivotfieldlist' &&
this.parent.pivotGridModule !== undefined &&
this.parent.pivotGridModule.enableVirtualization)))) {
this.createSortOption(buttonElement, field[i].name, field[i]);
}
if (axis !== 'values' && valuePos !== i) {
this.createFilterOption(buttonElement, field[i].name, axis, field[i]);
}
if (axis === 'values') {
this.getTypeStatus(field, i, buttonElement);
}
}
if ((field[i].isCalculatedField || field[i].type === 'CalculatedField')) {
var calcElement = createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('editCalculatedField') },
className: cls.ICON + ' ' + cls.CALC_EDIT
});
if (this.parent.allowCalculatedField && this.parent.calculatedFieldModule &&
(field[i].showEditIcon || field[i].showEditIcon === undefined)) {
removeClass([calcElement], cls.ICON_DISABLE);
}
else {
addClass([calcElement], cls.ICON_DISABLE);
}
buttonElement.appendChild(calcElement);
}
var removeElement = createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('remove') },
className: cls.ICON + ' ' + cls.REMOVE_CLASS
});
if (this.parent.getModuleName() === 'pivotview') {
if ((this.parent.groupingBarSettings.showRemoveIcon &&
(field[i].showRemoveIcon || field[i].showRemoveIcon === undefined))) {
removeClass([removeElement], cls.ICON_DISABLE);
}
else {
addClass([removeElement], cls.ICON_DISABLE);
}
}
else {
if (field[i].showRemoveIcon || field[i].showRemoveIcon === undefined) {
removeClass([removeElement], cls.ICON_DISABLE);
}
else {
addClass([removeElement], cls.ICON_DISABLE);
}
}
buttonElement.appendChild(removeElement);
buttonWrapper.appendChild(dropIndicatorElement);
buttonWrapper.appendChild(buttonElement);
buttonWrapper.appendChild(dropLastIndicatorElement);
}
else {
buttonWrapper.appendChild(dropIndicatorElement);
buttonWrapper.appendChild(buttonElement);
}
element.appendChild(buttonWrapper);
var pivotButton = new Button({
enableRtl: this.parent.enableRtl, locale: this.parent.locale,
enableHtmlSanitizer: this.parent.enableHtmlSanitizer, cssClass: this.parent.cssClass
});
pivotButton.isStringTemplate = true;
pivotButton.appendTo(buttonElement);
this.unWireEvent(buttonWrapper, i === valuePos && axis !== 'all-fields' ? 'values' : axis, isMeasureAvail);
this.wireEvent(buttonWrapper, i === valuePos && axis !== 'all-fields' ? 'values' : axis, isMeasureAvail);
if ((this.parent.getModuleName() === 'pivotview' && !this.parent.isAdaptive) ||
this.parent.getModuleName() === 'pivotfieldlist') {
this.createDraggable(field[i], this.parent.getModuleName() === 'pivotview' ? contentElement : dragWrapper);
getInstance(buttonElement.querySelector('.' + cls.BUTTON_DRAGGABLE), Draggable).enableAutoScroll = false;
}
}
}
};
PivotButton.prototype.createButtonText = function (field, i, axis, valuePos) {
var aggregation;
var filterMem;
if (axis === 'filters') {
filterMem = this.updateButtontext(field[i].name);
}
var engineModule;
if (this.parent.dataType === 'olap') {
engineModule = this.parent.olapEngineModule;
}
else {
engineModule = this.parent.engineModule;
}
if (engineModule.fieldList && engineModule.fieldList[field[i].name] !== undefined) {
aggregation = engineModule.fieldList[field[i].name].aggregateType;
if ((aggregation !== 'DistinctCount') && (engineModule.fieldList[field[i].name].type !== 'number' || engineModule.fieldList[field[i].name].type === 'include' ||
engineModule.fieldList[field[i].name].type === 'exclude')) {
aggregation = 'Count';
}
else {
aggregation = aggregation === undefined ? 'Sum' :
engineModule.fieldList[field[i].name].aggregateType;
}
}
var text = field[i].caption ? field[i].caption : field[i].name;
text = this.parent.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(text) : text;
var buttonText = createElement('span', {
attrs: {
title: axis === 'filters' ? (this.parent.dataType === 'olap' && engineModule.fieldList[field[i].name].type === 'CalculatedField') ?
text : (text + ' (' + filterMem + ')') : (this.parent.dataType === 'olap' ?
text : (((!this.parent.dataSourceSettings.showAggregationOnValueField || axis !== 'values' || aggregation === 'CalculatedField') ?
text : this.parent.localeObj.getConstant(aggregation) + ' ' + this.parent.localeObj.getConstant('of') + ' ' + text))),
'tabindex': '-1', 'aria-disabled': 'false', 'oncontextmenu': 'return false;',
'data-type': valuePos === i ? '' : aggregation
},
className: cls.PIVOT_BUTTON_CONTENT_CLASS + ' ' +
(this.parent.getModuleName() === 'pivotview' ?
this.parent.groupingBarSettings.allowDragAndDrop && (field[i].allowDragAndDrop || field[i].allowDragAndDrop === undefined) ? '' : cls.DRAG_DISABLE_CLASS : '')
});
buttonText.innerText = axis === 'filters' ? (this.parent.dataType === 'olap' && engineModule.fieldList[field[i].name].type === 'CalculatedField') ?
text : (text + ' (' + filterMem + ')') : (this.parent.dataType === 'olap' ?
text : (!this.parent.dataSourceSettings.showAggregationOnValueField || axis !== 'values' || aggregation === 'CalculatedField' ?
text : this.parent.localeObj.getConstant(aggregation) + ' ' + this.parent.localeObj.getConstant('of') + ' ' + text));
return buttonText;
};
PivotButton.prototype.getTypeStatus = function (field, i, buttonElement) {
var engineModule;
if (this.parent.dataType === 'olap') {
engineModule = this.parent.olapEngineModule;
}
else {
engineModule = this.parent.engineModule;
}
if (engineModule.fieldList) {
var fieldListItem = engineModule.fieldList[field[i].name];
if (fieldListItem && fieldListItem.aggregateType !== 'CalculatedField' && this.validateDropdown(fieldListItem.type)) {
this.createSummaryType(buttonElement, field[i].name, field[i]);
}
}
};
PivotButton.prototype.validateDropdown = function (type) {
var aggregateType = this.parent.aggregateTypes;
if (type !== 'number') {
return (aggregateType.indexOf('Count') > -1 || aggregateType.indexOf('DistinctCount') > -1);
}
else {
for (var i = 0; i < aggregateType.length; i++) {
if (this.parent.getAllSummaryType().indexOf(aggregateType[i]) > -1) {
return true;
}
}
return false;
}
};
PivotButton.prototype.createSummaryType = function (pivotButton, fieldName, field) {
var spanElement = createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('format') },
className: cls.ICON + ' ' + cls.AXISFIELD_ICON_CLASS
});
if (this.parent.getModuleName() === 'pivotview') {
if (this.parent.groupingBarSettings.showValueTypeIcon && field.showValueTypeIcon) {
removeClass([spanElement], cls.ICON_DISABLE);
}
else {
addClass([spanElement], cls.ICON_DISABLE);
}
}
else {
if (field.showValueTypeIcon) {
removeClass([spanElement], cls.ICON_DISABLE);
}
else {
addClass([spanElement], cls.ICON_DISABLE);
}
}
pivotButton.appendChild(spanElement);
return spanElement;
};
PivotButton.prototype.createMenuOption = function (args) {
this.menuOption.render(args, this.parentElement);
this.parent.pivotButtonModule = this;
};
PivotButton.prototype.openCalculatedFieldDialog = function (args) {
var fieldName = args.target.parentElement.getAttribute('data-uid');
var fieldInfo = PivotUtil.getFieldInfo(fieldName, this.parent);
this.parent.actionObj.actionName = events.editCalculatedField;
this.parent.actionObj.fieldInfo = fieldInfo;
if (this.parent.actionBeginMethod()) {
return;
}
try {
if (this.parent.getModuleName() === 'pivotview') {
if (this.parent.isAdaptive && (this.parent.showFieldList &&
this.parent.pivotFieldListModule &&
!this.parent.pivotFieldListModule.isDestroyed)) {
this.parent.pivotFieldListModule.element
.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS).click();
this.parent.pivotFieldListModule.dialogRenderer.adaptiveElement.select(4);
(this.parent.pivotFieldListModule.calculatedFieldModule).updateAdaptiveCalculatedField(true, fieldName);
}
else {
if (!this.parent.isAdaptive) {
this.parent.calculatedFieldModule.buttonCall = true;
}
this.parent.notify(events.initCalculatedField, { edit: true, fieldName: fieldName });
}
}
else if (this.parent.getModuleName() === 'pivotfieldlist') {
if (this.parent.isAdaptive) {
this.parent.dialogRenderer.adaptiveElement.select(4);
(this.parent.calculatedFieldModule).updateAdaptiveCalculatedField(true, fieldName);
this.parent.calculatedFieldModule.buttonCall = true;
}
else {
if (this.parent.dialogRenderer.fieldListDialog) {
this.parent.dialogRenderer.fieldListDialog.hide();
addClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);
}
this.parent.notify(events.initCalculatedField, { edit: true, fieldName: fieldName });
if (this.parent.calculatedFieldModule) {
this.parent.calculatedFieldModule.buttonCall = true;
}
}
}
}
catch (execption) {
this.parent.actionFailureMethod(execption);
}
};
PivotButton.prototype.createDraggable = function (field, target) {
this.draggable = new Draggable(target, {
clone: true,
enableTailMode: true,
enableAutoScroll: true,
helper: this.createDragClone.bind(this),
dragStart: this.onDragStart.bind(this),
drag: this.onDragging.bind(this),
dragStop: this.onDragStop.bind(this),
abort: (this.parent.getModuleName() === 'pivotview' ?
!(this.parent.groupingBarSettings.allowDragAndDrop && field.allowDragAndDrop) ?
'.' + cls.PIVOT_BUTTON_CLASS : '' : !field.allowDragAndDrop ? '.' + cls.PIVOT_BUTTON_CLASS : '')
});
};
PivotButton.prototype.createButtonDragIcon = function (field, pivotButton) {
var dragWrapper = createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false' }
});
var dragElement = createElement('span', {
attrs: {
'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('drag')
},
className: cls.ICON + ' ' + cls.DRAG_CLASS + ' ' + ((field.allowDragAndDrop || field.allowDragAndDrop === undefined) ? '' : cls.DRAG_DISABLE_CLASS)
});
dragWrapper.appendChild(dragElement);
if (this.parent.getModuleName() === 'pivotfieldlist') {
pivotButton.appendChild(dragWrapper);
}
return dragWrapper;
};
PivotButton.prototype.createSortOption = function (pivotButton, fieldName, field) {
var sortCLass;
var spanElement;
var engineModule;
if (this.parent.dataType === 'olap') {
engineModule = this.parent.olapEngineModule;
}
else {
engineModule = this.parent.engineModule;
}
if (this.parent.isDeferLayoutUpdate === false || (this.parent.pivotGridModule &&
this.parent.pivotGridModule.pivotDeferLayoutUpdate === false)) {
sortCLass = engineModule.fieldList[fieldName].sort === 'Descending' ? cls.SORT_DESCEND_CLASS : '';
}
else {
sortCLass = '';
for (var i = 0; i < this.parent.dataSourceSettings.sortSettings.length; i++) {
if (this.parent.dataSourceSettings.sortSettings[i].name === fieldName) {
sortCLass = this.parent.dataSourceSettings.sortSettings[i].order === 'Descending' ? cls.SORT_DESCEND_CLASS : '';
}
}
}
if (engineModule.fieldList && engineModule.fieldList[fieldName].sort === 'None') {
spanElement = createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('sort') },
className: cls.ICON
});
}
else {
spanElement = createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('sort') },
className: cls.ICON + ' ' + cls.SORT_CLASS + ' ' + sortCLass
});
}
if (this.parent.dataSourceSettings.enableSorting) {
if (this.parent.getModuleName() === 'pivotview') {
if (field.showSortIcon && this.parent.groupingBarSettings.showSortIcon) {
removeClass([spanElement], cls.ICON_DISABLE);
}
else {
addClass([spanElement], cls.ICON_DISABLE);
}
}
else {
if (field.showSortIcon) {
removeClass([spanElement], cls.ICON_DISABLE);
}
else {
addClass([spanElement], cls.ICON_DISABLE);
}
}
}
else {
addClass([spanElement], cls.ICON_DISABLE);
}
pivotButton.appendChild(spanElement);
return spanElement;
};
PivotButton.prototype.createFilterOption = function (pivotButton, fieldName, axis, field) {
var filterCLass;
var engineModule;
if (this.parent.dataType === 'olap') {
engineModule = this.parent.olapEngineModule;
}
else {
engineModule = this.parent.engineModule;
}
var filterField = PivotUtil.getFieldByName(fieldName, this.parent.dataSourceSettings.filterSettings);
if (this.parent.isDeferLayoutUpdate === false || (this.parent.pivotGridModule &&
this.parent.pivotGridModule.pivotDeferLayoutUpdate === false)) {
engineModule.fieldList[fieldName].filter = engineModule.fieldList[fieldName].filter === null ?
[] : engineModule.fieldList[fieldName].filter;
filterCLass = ((this.parent.dataSourceSettings.mode === 'Server' && !filterField) ||
(this.parent.dataSourceSettings.mode === 'Local' && engineModule.fieldList[fieldName].filter.length === 0)) ?
!engineModule.fieldList[fieldName].isExcelFilter ? cls.FILTER_CLASS : cls.FILTERED_CLASS : cls.FILTERED_CLASS;
}
else {
filterCLass = cls.FILTER_CLASS;
for (var i = 0; i < this.parent.dataSourceSettings.filterSettings.length; i++) {
if (this.parent.dataSourceSettings.filterSettings[i].name === fieldName) {
filterCLass = cls.FILTERED_CLASS;
}
}
}
var spanElement = createElement('span', {
attrs: {
'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('filter')
},
className: cls.FILTER_COMMON_CLASS + ' ' + cls.ICON + ' ' + filterCLass
});
if ((((this.parent.dataSourceSettings.allowLabelFilter || this.parent.dataSourceSettings.allowValueFilter) &&
axis !== 'filters') || this.parent.dataSourceSettings.allowMemberFilter)) {
removeClass([spanElement], cls.ICON_DISABLE);
}
else {
addClass([spanElement], cls.ICON_DISABLE);
}
if (this.parent.getModuleName() === 'pivotview') {
if ((((this.parent.dataSourceSettings.allowLabelFilter || this.parent.dataSourceSettings.allowValueFilter) &&
axis !== 'filters') || this.parent.dataSourceSettings.allowMemberFilter) &&
this.parent.groupingBarSettings.showFilterIcon && field.showFilterIcon) {
removeClass([spanElement], cls.ICON_DISABLE);
}
else {
addClass([spanElement], cls.ICON_DISABLE);
}
}
else {
if (field.showFilterIcon && (((this.parent.dataSourceSettings.allowLabelFilter ||
this.parent.dataSourceSettings.allowValueFilter) && axis !== 'filters') ||
this.parent.dataSourceSettings.allowMemberFilter)) {
removeClass([spanElement], cls.ICON_DISABLE);
}
else {
addClass([spanElement], cls.ICON_DISABLE);
}
}
pivotButton.appendChild(spanElement);
return spanElement;
};
// To update button text
PivotButton.prototype.updateButtontext = function (fieldName) {
var engineModule;
if (this.parent.dataType === 'olap') {
engineModule = this.parent.olapEngineModule;
}
else {
engineModule = this.parent.engineModule;
}
var filterCount = engineModule.fieldList[fieldName].filter.length;
var filterType = engineModule.fieldList[fieldName].filterType;
var memLen = engineModule.fieldList[fieldName].dateMember.length;
var filterMem;
var firstNode = engineModule.fieldList[fieldName].filter[0];
if (this.parent.dataType === 'olap') {
filterMem = this.updateOlapButtonText(engineModule, fieldName, firstNode, filterCount);
}
else if (filterType === 'include') {
if (filterCount === 1) {
filterMem = firstNode;
}
else if (filterCount > 1) {
if (filterCount === memLen) {
filterMem = this.parent.localeObj.getConstant('all');
}
else {
filterMem = this.parent.localeObj.getConstant('multipleItems');
}
}
}
else if (filterType === 'exclude') {
if (filterCount === 1) {
if (memLen === 2) {
if (firstNode !== engineModule.fieldList[fieldName].dateMember[0].actualText) {
filterMem = firstNode;
}
else {
filterMem = engineModule.fieldList[fieldName].dateMember[0].actualText;
}
}
else {
filterMem = this.parent.localeObj.getConstant('multipleItems');
}
}
else if (filterCount > 1) {
var j = void 0;
var allNodes = Object.keys(engineModule.fieldList[fieldName].members);
var filteredItems = engineModule.fieldList[fieldName].filter;
if (filterCount === (allNodes.length - 1)) {
for (j = 0; j < allNodes.length; j++) {
var test = allNodes[j];
var x = filteredItems.indexOf(test);
if (x === -1) {
filterMem = allNodes[j];
break;
}
}
}
else {
filterMem = this.parent.localeObj.getConstant('multipleItems');
}
}
}
else {
filterMem = this.parent.localeObj.getConstant('all');
}
return filterMem;
};
PivotButton.prototype.updateOlapButtonText = function (engineModule, fieldName, firstNode, filterCount) {
var filterMem;
var filterItems = engineModule.fieldList[fieldName].actualFilter;
if (filterItems.length > 0) {
var cMembers = engineModule.fieldList[fieldName].members;
var actualFilterItems = [];
if (engineModule.fieldList[fieldName].filterMembers.length > 0) {
var dummyfilterItems = {};
for (var _i = 0, filterItems_1 = filterItems; _i < filterItems_1.length; _i++) {
var item = filterItems_1[_i];
dummyfilterItems[item] = item;
if (cMembers[item]) {
dummyfilterItems = this.parent.pivotCommon.eventBase.getParentNode(fieldName, item, dummyfilterItems);
}
}
var updatedFilterItems = dummyfilterItems ? Object.keys(dummyfilterItems) : [];
for (var _a = 0, updatedFilterItems_1 = updatedFilterItems; _a < updatedFilterItems_1.length; _a++) {
var item = updatedFilterItems_1[_a];
if (cMembers[item].isSelected) {
if (!(cMembers[item].parent && cMembers[cMembers[item].parent].isSelected)) {
actualFilterItems.push(item);
}
}
}
firstNode = actualFilterItems.length === 1 ? cMembers[actualFilterItems[0]].caption : firstNode;
}
filterCount = actualFilterItems.length === 0 ? filterCount : actualFilterItems.length;
}
if (filterCount === 0) {
filterMem = (engineModule.fieldList[fieldName].allMember ?
engineModule.fieldList[fieldName].allMember : this.parent.localeObj.getConstant('all'));
}
else if (filterCount === 1) {
filterMem = firstNode;
}
else if (filterCount > 1) {
filterMem = this.parent.localeObj.getConstant('multipleItems');
}
return filterMem;
};
PivotButton.prototype.createDragClone = function (args) {
var element = closest(args.element, '.' + cls.PIVOT_BUTTON_CLASS);
var cloneElement = createElement('div', {
id: this.parent.element.id + '_DragClone',
className: cls.DRAG_CLONE_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
});
var contentElement = createElement('span', {
className: cls.TEXT_CONTENT_CLASS
});
contentElement.innerText = this.parent.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(element.textContent) : element.textContent;
cloneElement.appendChild(contentElement);
document.body.appendChild(cloneElement);
return cloneElement;
};
PivotButton.prototype.onDragStart = function (e) {
var _this = this;
var element = closest(e.element, '.' + cls.PIVOT_BUTTON_CLASS);
var dragItem = document.getElementById(this.parent.element.id + '_DragClone');
var fieldInfo = PivotUtil.getFieldInfo(element.getAttribute('data-uid'), this.parent);
var dragEventArgs = {
fieldName: fieldInfo.fieldName,
fieldItem: fieldInfo.fieldItem,
axis: fieldInfo.axis,
dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),
cancel: false
};
var control = this.parent.getModuleName() === 'pivotfieldlist' &&
this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;
control.trigger(events.fieldDragStart, dragEventArgs, function (observedArgs) {
if (!observedArgs.cancel) {
_this.parent.isDragging = true;
var engineModule = void 0;
if (_this.parent.dataType === 'olap') {
engineModule = _this.parent.olapEngineModule;
}
else {
engineModule = _this.parent.engineModule;
}
var data = engineModule.fieldList[element.getAttribute('data-uid')];
var axis = [cls.ROW_AXIS_CLASS, cls.COLUMN_AXIS_CLASS, cls.FILTER_AXIS_CL