@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.
149 lines (148 loc) • 6.97 kB
JavaScript
import { createElement, EventHandler, removeClass, addClass, Droppable } from '@syncfusion/ej2-base';
import * as cls from '../../common/base/css-constant';
/**
* Module to render Axis Field Table
*/
/** @hidden */
var AxisTableRenderer = /** @class */ (function () {
/** Constructor for render module */
function AxisTableRenderer(parent) {
this.droppableInstances = [];
this.parent = parent;
}
/**
* Initialize the axis table rendering
*
* @returns {void}
* @private
*/
AxisTableRenderer.prototype.render = function () {
if (!this.parent.isAdaptive) {
var axisTable = createElement('div', {
className: cls.AXIS_TABLE_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_AXIS_TABLE_CLASS : '')
});
this.leftAxisPanel = createElement('div', { className: cls.LEFT_AXIS_PANEL_CLASS });
this.rightAxisPanel = createElement('div', { className: cls.RIGHT_AXIS_PANEL_CLASS });
this.parent.dialogRenderer.parentElement.appendChild(axisTable);
axisTable.appendChild(this.leftAxisPanel);
axisTable.appendChild(this.rightAxisPanel);
this.axisTable = axisTable;
this.renderAxisTable();
}
this.parent.axisFieldModule.render();
};
AxisTableRenderer.prototype.renderAxisTable = function () {
var fieldLabels = ['filters', 'rows', 'columns', 'values'];
for (var len = 0, lnt = fieldLabels.length; len < lnt; len++) {
var axis = createElement('div', {
className: cls.FIELD_LIST_CLASS + '-' + fieldLabels[len]
});
var axisTitleWrapper = createElement('div', {
className: cls.AXIS_ICON_CLASS + '-container'
});
var axisTitle = createElement('div', {
className: cls.AXIS_HEADER_CLASS,
attrs: { title: this.parent.localeObj.getConstant(fieldLabels[len]) }
});
axisTitle.innerText = this.parent.localeObj.getConstant(fieldLabels[len]);
axisTitleWrapper.appendChild(this.getIconupdate(fieldLabels[len]));
axisTitleWrapper.appendChild(axisTitle);
var axisContent = createElement('div', { className: cls.AXIS_CONTENT_CLASS + ' ' + 'e-' + fieldLabels[len] });
var localePrompt = void 0;
if (fieldLabels[len] === 'rows') {
localePrompt = this.parent.localeObj.getConstant('dropRowPrompt');
}
else if (fieldLabels[len] === 'columns') {
localePrompt = this.parent.localeObj.getConstant('dropColPrompt');
}
else if (fieldLabels[len] === 'values') {
localePrompt = this.parent.localeObj.getConstant('dropValPrompt');
}
else {
localePrompt = this.parent.localeObj.getConstant('dropFilterPrompt');
}
var axisPrompt = createElement('span', {
className: cls.AXIS_PROMPT_CLASS
});
axisPrompt.innerText = localePrompt;
var droppable = new Droppable(axisContent, {});
this.droppableInstances.push(droppable);
axis.appendChild(axisTitleWrapper);
axis.appendChild(axisContent);
axis.appendChild(axisPrompt);
if (len <= 1) {
this.leftAxisPanel.appendChild(axis);
}
else {
this.rightAxisPanel.appendChild(axis);
}
this.unWireEvent(axisContent);
this.wireEvent(axisContent);
}
};
AxisTableRenderer.prototype.getIconupdate = function (axis) {
var axisWrapper = createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },
className: cls.AXIS_ICON_CLASS + '-icon-container'
});
var axisElement = createElement('span', {
attrs: {
'tabindex': '-1', 'aria-disabled': 'false'
},
className: cls.ICON + ' ' + cls.AXIS_ICON_CLASS + '-' + axis
});
axisWrapper.appendChild(axisElement);
return axisWrapper;
};
AxisTableRenderer.prototype.wireEvent = function (element) {
EventHandler.add(element, 'mouseover', this.updateDropIndicator, this);
EventHandler.add(element, 'mouseleave', this.updateDropIndicator, this);
};
AxisTableRenderer.prototype.unWireEvent = function (element) {
EventHandler.remove(element, 'mouseover', this.updateDropIndicator);
EventHandler.remove(element, 'mouseleave', this.updateDropIndicator);
};
AxisTableRenderer.prototype.updateDropIndicator = function (e) {
var parentElement = this.parent.dialogRenderer.parentElement;
if (this.parent.isDragging && e.target.classList.contains(cls.AXIS_CONTENT_CLASS) && e.type === 'mouseover') {
removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);
removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS + '-last')), cls.INDICATOR_HOVER_CLASS);
var element = [].slice.call(e.target.querySelectorAll('.' + cls.PIVOT_BUTTON_WRAPPER_CLASS));
if (element.length > 0) {
addClass([element[element.length - 1].querySelector('.' + cls.DROP_INDICATOR_CLASS + '-last')], cls.INDICATOR_HOVER_CLASS);
}
}
else if (!this.parent.isDragging || (!e.target.classList.contains(cls.DROPPABLE_CLASS) && e.type === 'mouseleave')) {
removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);
removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS + '-last')), cls.INDICATOR_HOVER_CLASS);
}
};
/**
* Destroys the AxisTableRenderer instance
*
* @returns {void}
* @hidden
*/
AxisTableRenderer.prototype.destroy = function () {
if (this.axisTable) {
var axisContentElements = this.axisTable.querySelectorAll('.' + cls.AXIS_CONTENT_CLASS);
for (var i = 0; i < axisContentElements.length; i++) {
this.unWireEvent(axisContentElements[i]);
}
}
for (var i = 0; i < this.droppableInstances.length; i++) {
if (this.droppableInstances[i] && !this.droppableInstances[i].isDestroyed) {
this.droppableInstances[i].destroy();
}
}
this.droppableInstances = [];
if (this.axisTable && this.axisTable.parentNode) {
this.axisTable.parentNode.removeChild(this.axisTable);
}
this.axisTable = null;
this.leftAxisPanel = null;
this.rightAxisPanel = null;
};
return AxisTableRenderer;
}());
export { AxisTableRenderer };