UNPKG

@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.

772 lines (771 loc) 120 kB
import * as events from '../../common/base/constant'; import * as cls from '../../common/base/css-constant'; import { Chart, ColumnSeries, LineSeries, Legend, Tooltip, Category, AreaSeries, Selection, StripLine, DataLabel, StackingLineSeries } from '@syncfusion/ej2-charts'; import { AccumulationChart, PieSeries, FunnelSeries, PyramidSeries } from '@syncfusion/ej2-charts'; import { SplineAreaSeries, MultiColoredLineSeries, RangeAreaSeries, StackingAreaSeries, StepAreaSeries } from '@syncfusion/ej2-charts'; import { MultiColoredAreaSeries, SplineSeries, StepLineSeries, AccumulationLegend, AccumulationTooltip } from '@syncfusion/ej2-charts'; import { StackingColumnSeries, RangeColumnSeries, BarSeries, StackingBarSeries, ScatterSeries } from '@syncfusion/ej2-charts'; import { RadarSeries } from '@syncfusion/ej2-charts'; import { ScrollBar, Zoom, PolarSeries } from '@syncfusion/ej2-charts'; import { ParetoSeries, Export, Crosshair, MultiLevelLabel } from '@syncfusion/ej2-charts'; import { BubbleSeries } from '@syncfusion/ej2-charts'; import { AccumulationDataLabel, getSeriesColor } from '@syncfusion/ej2-charts'; import { createElement, remove, isNullOrUndefined, select, getInstance } from '@syncfusion/ej2-base'; import { PivotUtil } from '../../base/util'; import { ContextMenu } from '@syncfusion/ej2-navigations'; import { hideSpinner } from '@syncfusion/ej2-popups'; import { DataManager } from '@syncfusion/ej2-data'; var PivotChart = /** @class */ (function () { /** * Constructor for pivot chart module. * * @param {PivotView} parent - Instance of pivot table. */ function PivotChart(parent) { this.headerColl = {}; this.maxLevel = 0; this.columnGroupObject = {}; this.selectedLegend = 0; this.chartSeriesInfo = {}; this.measurePos = -1; this.measuresNames = {}; this.accumulationType = ['Pie', 'Pyramid', 'Doughnut', 'Funnel']; this.isChartInitial = true; this.parent = parent; } /** * Get component name. * * @returns {string} - string * @private */ PivotChart.prototype.getModuleName = function () { return 'pivotChart'; }; /** * Initialize the pivot chart rendering * * @param {PivotView} parent - Specifies the pivot table component instance. * @param {ChartSettingsModel} chartSettings - Specifies the chart settings. * @returns {void} * @private */ PivotChart.prototype.loadChart = function (parent, chartSettings) { this.parent = parent; this.measuresNames = {}; this.engineModule = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule; this.dataSourceSettings = this.parent.dataSourceSettings; this.chartSettings = chartSettings; var isDataAvail = parent.dataType === 'olap' ? (parent.dataSourceSettings.url !== '' && !parent.olapEngineModule.isEmptyData && parent.olapEngineModule.tupColumnInfo.length > 0 && parent.olapEngineModule.tupRowInfo.length > 0 && (!isNullOrUndefined(parent.olapEngineModule.colMeasurePos) || !isNullOrUndefined(parent.olapEngineModule.rowMeasurePos))) : this.parent.dataSourceSettings.mode === 'Server' ? (!isNullOrUndefined(parent.dataSourceSettings.url) && parent.dataSourceSettings.url !== '' && parent.dataSourceSettings.values.length > 0 && !parent.engineModule.isEmptyData) : (parent.dataSourceSettings.values.length > 0 && parent.dataSourceSettings.dataSource && (parent.dataSourceSettings.dataSource.length > 0 || (parent.dataSourceSettings.dataSource instanceof DataManager)) && !parent.engineModule.isEmptyData); if (isDataAvail) { if (!this.parent.chart && (this.parent.element.querySelector('.e-chart') || this.parent.element.querySelector('.e-accumulationchart'))) { remove(select('#' + this.parent.element.id + '_chart', this.parent.element)); } if (this.chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') { this.measureList = this.dataSourceSettings.values.map(function (item) { return item.name; }); } else { this.measureList = [chartSettings.value === '' ? this.dataSourceSettings.values[0].name : chartSettings.value]; } for (var _i = 0, _a = this.dataSourceSettings.values; _i < _a.length; _i++) { var field = _a[_i]; var fieldName = field.name.replace(/[^A-Z0-9]+/ig, '_'); this.measuresNames[field.name] = fieldName; this.measuresNames[fieldName] = field.name; if ((this.chartSettings.chartSeries.type === 'Polar' || this.chartSettings.chartSeries.type === 'Radar')) { this.measuresNames[field.caption ? field.caption : field.name] = field.name; } } } else if (this.parent.chart) { if (this.parent.element.querySelector('.e-chart')) { this.parent.chart.series = []; this.parent.chart.rows = []; this.parent.chart.primaryXAxis.title = ''; this.parent.chart.primaryYAxis.title = ''; this.parent.chart.primaryXAxis.multiLevelLabels = []; this.parent.chart.primaryYAxis.multiLevelLabels = []; if (this.parent.chart.axes.length > 0) { this.parent.chart.axes[0].title = ''; } this.parent.chart.primaryXAxis.zoomFactor = isNullOrUndefined(this.parent.chartSettings.primaryXAxis.zoomFactor) ? 1 : this.parent.chartSettings.primaryXAxis.zoomFactor; } else if (this.parent.element.querySelector('.e-accumulationchart')) { this.parent.chart.series[0].dataSource = [{}]; this.parent.chart.series[0].dataLabel = {}; } this.parent.chart.refresh(); return; } else { this.parent.appendChartElement(); if (this.parent.enableVirtualization && this.isChartInitial) { this.isChartInitial = false; this.parent.onContentReady(); } this.parent.notify(events.contentReady, {}); return; } this.columnGroupObject = {}; this.accEmptyPoint = false; var pivotValues = this.engineModule.pivotValues; this.currentMeasure = (chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') ? this.measureList[0] : (((chartSettings.value === '' || this.dataSourceSettings.values.filter(function (item) { return item.name === chartSettings.value; }).length === 0) && this.dataSourceSettings.values.length > 0) ? this.dataSourceSettings.values[0].name : chartSettings.value); var totColIndex = this.getColumnTotalIndex(pivotValues); var rKeys = Object.keys(pivotValues); var prevLevel; var firstLevelUName; var levelCollection = {}; var prevCell; var integratedLevel = 0; var indexCount = -0.5; this.headerColl = {}; this.maxLevel = 0; var levelPos = {}; var lastHierarchy = ''; var lastDimension = ''; var memberCell; var drillDimension = ''; this.chartSeriesInfo = {}; this.selectedLegend = 0; var isDrill = false; var measureNames = {}; var isValidHeader = false; var delimiter = this.parent.dataSourceSettings.valueSortSettings.headerDelimiter; for (var _b = 0, _c = this.dataSourceSettings.values; _b < _c.length; _b++) { var field = _c[_b]; var fieldName = field.name; measureNames[fieldName] = field.caption ? field.caption : fieldName; measureNames[field.caption ? field.caption : fieldName] = fieldName; } if (this.parent.dataType === 'olap') { var fieldPosition = []; levelPos = this.groupHierarchyWithLevels(pivotValues, fieldPosition); lastHierarchy = fieldPosition[fieldPosition.length - 1]; lastDimension = (this.measurePos === (fieldPosition.length - 1) && fieldPosition.length > 1) ? fieldPosition[fieldPosition.length - 2] : lastHierarchy; drillDimension = lastDimension; } var reductionLevel = 0; var reductionLevelCount = 0; var finalReductionLevel = 0; var rowsInclude = false; var rowReduction = 0; var subTotals = []; for (var a = 0, b = rKeys.length; a < b; a++) { var rowIndex = Number(rKeys[a]); var drillMem = void 0; var previousRow = false; var firstRowCell = void 0; var indexReduction = void 0; if (rowsInclude) { firstRowCell = pivotValues[rowIndex - rowReduction][this.parent.engineModule.rowMaxLevel]; } else { firstRowCell = pivotValues[rowIndex] && pivotValues[rowIndex][this.parent.gridSettings.layout === 'Tabular' ? this.parent.engineModule.rowMaxLevel : 0]; } if (this.parent.gridSettings.layout === 'Tabular' && this.parent.dataType === 'pivot') { var parent_1 = firstRowCell && pivotValues[rowIndex - rowReduction][firstRowCell.level - 1]; var pField = parent_1 && parent_1.valueSort && this.engineModule.fieldList[parent_1.valueSort.axis]; if (pField && (!pField.showSubTotals || !this.dataSourceSettings.showSubTotals || !this.dataSourceSettings.showRowSubTotals) && subTotals.indexOf(parent_1.actualText) === -1) { firstRowCell = pivotValues[rowIndex - rowReduction][0]; subTotals.push(parent_1.actualText); a--; } } if (firstRowCell) { indexReduction = rowReduction === firstRowCell.level ? 1 : (rowReduction + 1); } if (!isNullOrUndefined(pivotValues[rowIndex - rowReduction])) { var colIndex = this.parent.gridSettings.layout === 'Tabular' ? this.parent.engineModule.rowMaxLevel : 0; var header = pivotValues[rowIndex - rowReduction][colIndex]; var valueSort = header && header.valueSort && !isNullOrUndefined(header.valueSort.levelName) ? header.valueSort.levelName.toString().split(delimiter) : undefined; isValidHeader = false; if (valueSort && valueSort[0] !== 'Grand Total') { if ((chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') || valueSort.indexOf(measureNames[this.currentMeasure]) > -1) { isValidHeader = true; } if (!isValidHeader) { for (var _d = 0, valueSort_1 = valueSort; _d < valueSort_1.length; _d++) { var levelName = valueSort_1[_d]; if (measureNames[levelName]) { isValidHeader = true; break; } } isValidHeader = isValidHeader ? false : true; } } if (header && header.axis === 'row' && (this.dataSourceSettings.rows.length === 0 ? true : (header.type !== 'grand sum' && isValidHeader))) { if (this.parent.gridSettings.layout !== 'Tabular') { if (firstRowCell.isSum) { continue; } } var tupInfo = this.parent.dataType === 'olap' ? this.engineModule.tupRowInfo[firstRowCell.ordinal] : undefined; var fieldPos = -1; var currrentLevel = firstRowCell.level; if (this.parent.dataType === 'olap') { isDrill = firstRowCell.hierarchy === '[Measures]' ? isDrill : this.isAttributeDrill(firstRowCell.hierarchy, tupInfo.drillInfo); drillDimension = drillDimension === lastDimension ? lastDimension : (firstRowCell.hierarchy === '[Measures]' || firstRowCell.isNamedSet || (this.engineModule.fieldList[firstRowCell.hierarchy] && !this.engineModule.fieldList[firstRowCell.hierarchy].hasAllMember)) ? lastDimension : drillDimension; fieldPos = tupInfo.drillInfo.length - 1; if (firstRowCell.memberType !== 3 && (tupInfo.measureName ? tupInfo.measureName === this.dataSourceSettings.values[0].name : true)) { firstLevelUName = firstLevelUName === undefined ? firstRowCell.levelUniqueName : firstLevelUName; integratedLevel = firstLevelUName === firstRowCell.levelUniqueName ? 0 : integratedLevel; levelCollection = integratedLevel === 0 ? {} : levelCollection; integratedLevel = (prevCell && firstLevelUName !== firstRowCell.levelUniqueName) ? (prevCell.hierarchy === firstRowCell.hierarchy ? (integratedLevel + (firstRowCell.level - prevCell.level)) : (isNullOrUndefined(levelCollection[firstRowCell.levelUniqueName]) ? (levelPos[firstRowCell.hierarchy].start) : levelCollection[firstRowCell.levelUniqueName])) : integratedLevel; levelCollection[firstRowCell.levelUniqueName] = integratedLevel; currrentLevel = integratedLevel; indexCount += (prevCell && drillDimension === prevCell.hierarchy && !(prevCell.isDrilled && prevCell.hasChild)) ? 1 : 0; drillDimension = isDrill ? firstRowCell.hierarchy : lastDimension; prevLevel = integratedLevel; prevCell = firstRowCell; } } else if (firstRowCell.type !== 'value') { if (this.parent.gridSettings.layout === 'Tabular') { var firstRowLevelName = firstRowCell.valueSort.levelName; var levelNameCollection = firstRowLevelName.split(delimiter); var formattedTextCollection = firstRowCell.formattedText.split(' '); drillMem = PivotUtil.isMemberDrilled(firstRowCell, levelNameCollection, this.parent.dataSourceSettings.drilledMembers); var valueSortIndex = (valueSort.length - 2) !== (this.parent.engineModule.rowMaxLevel - 1) ? (valueSort.length - 2) : this.parent.engineModule.rowMaxLevel - 1; for (var k = 0; k <= this.parent.engineModule.rowMaxLevel; k++) { if (this.headerColl[indexCount] && this.headerColl[indexCount][k] || previousRow) { if (firstRowCell.isSum || previousRow) { if (firstRowCell.level > 0) { indexCount = indexCount - (firstRowCell.level === this.parent.engineModule.rowMaxLevel - 1 ? reductionLevel - 1 : reductionLevelCount - 1); firstRowCell.formattedText = (!this.parent.dataSourceSettings.showSubTotals || (!this.parent.dataSourceSettings.showRowSubTotals && this.parent.dataSourceSettings.showColumnSubTotals)) ? firstRowCell.formattedText : formattedTextCollection.length > 2 ? formattedTextCollection.slice(0, formattedTextCollection.length - 1).join(' ') : formattedTextCollection[0]; firstRowCell.hasChild = true; break; } else { indexCount = indexCount - (finalReductionLevel - 1); firstRowCell.formattedText = (!this.parent.dataSourceSettings.showSubTotals || (!this.parent.dataSourceSettings.showRowSubTotals && this.parent.dataSourceSettings.showColumnSubTotals)) ? firstRowCell.formattedText : formattedTextCollection.length > 2 ? formattedTextCollection.slice(0, formattedTextCollection.length - 1).join(' ') : formattedTextCollection[0]; firstRowCell.hasChild = true; break; } } else { if (this.headerColl[indexCount][k] && valueSort[valueSortIndex] !== this.headerColl[indexCount][k].name) { indexCount++; break; } } } } if (!firstRowCell.isSum && !previousRow) { reductionLevel++; reductionLevelCount++; finalReductionLevel++; } if (!this.parent.dataSourceSettings.expandAll) { firstRowCell.isDrilled = drillMem ? true : false; } else { firstRowCell.isDrilled = drillMem ? false : true; } } else { if (!(prevLevel === undefined || prevLevel < currrentLevel)) { indexCount++; } } prevLevel = currrentLevel; } this.maxLevel = currrentLevel > this.maxLevel ? currrentLevel : this.maxLevel; var name_1 = this.parent.dataType === 'olap' ? firstRowCell.formattedText : (firstRowCell.actualText ? firstRowCell.actualText.toString() : firstRowCell.formattedText.toString()); var values = this.engineModule.fieldList[this.currentMeasure]; var text = this.parent.dataSourceSettings.rows.length === 0 ? this.parent.localeObj.getConstant('total') + ' ' + this.parent.localeObj.getConstant(values.aggregateType) + ' ' + this.parent.localeObj.getConstant('of') + ' ' + (!isNullOrUndefined(values.caption) ? values.caption : values.name) : firstRowCell.formattedText ? firstRowCell.formattedText.toString() : name_1; var caption = (firstRowCell.hasChild && !firstRowCell.isNamedSet) ? ((firstRowCell.isDrilled ? ' - ' : ' + ') + text) : text; var levelName = tupInfo ? tupInfo.uNameCollection : firstRowCell.valueSort.levelName.toString(); var cellInfo = { name: name_1, text: caption, hasChild: firstRowCell.hasChild, isDrilled: firstRowCell.isDrilled, levelName: levelName, level: currrentLevel, fieldName: firstRowCell.valueSort.axis ? firstRowCell.valueSort.axis.toString() : '', rowIndex: rowIndex - rowReduction, colIndex: 0, cell: firstRowCell }; if (this.parent.dataType === 'olap' ? firstRowCell.memberType !== 3 : firstRowCell.type !== 'value') { if (this.headerColl[indexCount]) { this.headerColl[indexCount][currrentLevel] = cellInfo; } else { this.headerColl[indexCount] = {}; this.headerColl[indexCount][currrentLevel] = cellInfo; } if (this.parent.gridSettings.layout === 'Tabular') { if (firstRowCell.isSum || previousRow) { if (firstRowCell.level > 0) { indexCount = indexCount + (firstRowCell.level === this.parent.engineModule.rowMaxLevel - 1 ? reductionLevel - 1 : reductionLevelCount - 1); } else { indexCount = indexCount + (finalReductionLevel - 1); } } if (firstRowCell.level === 0) { reductionLevelCount = 0; reductionLevel = 0; finalReductionLevel = 0; } else if (firstRowCell.level === this.parent.engineModule.rowMaxLevel - 1) { reductionLevel = 0; } else if (firstRowCell.level < this.parent.engineModule.rowMaxLevel - 1 && firstRowCell.level !== 0) { reductionLevel = 0; reductionLevelCount = 0; } } } var rows = this.parent.gridSettings.layout === 'Tabular' ? pivotValues[rowIndex - rowReduction] : pivotValues[rowIndex]; var cKeys = Object.keys(rows); var prevMemberCell = void 0; if (this.parent.dataType === 'olap') { memberCell = firstRowCell.memberType !== 3 ? firstRowCell : memberCell; } else { memberCell = firstRowCell.type !== 'value' ? firstRowCell : memberCell; if (firstRowCell.type !== 'value') { memberCell = firstRowCell; } else { var valueSort_2 = firstRowCell && firstRowCell.valueSort && firstRowCell.valueSort.levelName && firstRowCell.valueSort.levelName.toString().split(delimiter); var levelName_1 = void 0; if (valueSort_2 && valueSort_2.length > 0) { valueSort_2.splice(valueSort_2.length - 1, 1); levelName_1 = valueSort_2.join(delimiter); } if ((this.parent.dataSourceSettings.valueIndex <= 0 || this.engineModule.valueAxis && this.dataSourceSettings.rows.length === this.engineModule.measureIndex) || isNullOrUndefined(memberCell.valueSort) || (levelName_1 === memberCell.valueSort.levelName)) { memberCell = memberCell; } else { var prevIndex = rowIndex; while (prevIndex > -1) { if (pivotValues[prevIndex] && pivotValues[prevIndex][0] && pivotValues[prevIndex][0].valueSort && pivotValues[prevIndex][0].valueSort.levelName === levelName_1) { memberCell = pivotValues[prevIndex][0]; prevIndex = 0; } prevIndex--; } } } } for (var f = this.parent.gridSettings.layout === 'Tabular' ? this.parent.engineModule.rowMaxLevel : 0; f < cKeys.length; f++) { var cKey = cKeys[f]; var cellIndex = Number(cKey); var cell = pivotValues[rowIndex - rowReduction][cellIndex]; var measureAllow = isNullOrUndefined(cell.rowHeaders) ? this.dataSourceSettings.rows.length === 0 : true; var actualText = (this.parent.dataType === 'olap' && tupInfo && tupInfo.measureName) ? tupInfo.measureName : cell.actualText; if (!(this.parent.dataType === 'olap' && cell.isGrandSum) && !totColIndex[cell.colIndex] && cell.axis === 'value' && firstRowCell.type !== 'header' && actualText !== '' && ((chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') ? true : actualText === this.currentMeasure)) { if (isNullOrUndefined(firstRowCell.members)) { firstRowCell.members = []; } if (this.parent.dataType === 'olap' ? ((lastHierarchy === firstRowCell.hierarchy || isDrill) ? ((firstRowCell.memberType === 3 && prevMemberCell) ? (fieldPos === this.measurePos ? (prevMemberCell.isDrilled && prevMemberCell.hasChild) : true) : (firstRowCell.isDrilled && firstRowCell.hasChild)) : true) : (((firstRowCell.type === 'value' && prevMemberCell) ? (!isNullOrUndefined(prevMemberCell.members) && prevMemberCell.hasChild && prevMemberCell.isDrilled) : firstRowCell.hasChild && firstRowCell.isDrilled) || !measureAllow)) { break; } if (this.parent.dataType === 'olap' && cell.isSum === true && this.parent.dataSourceSettings.valueAxis === 'row') { continue; } var colHeaders = ''; if (this.parent.dataType === 'olap') { colHeaders = cell.columnHeaders.toString().split(/~~|::/).join(' - '); } else { var values_1 = cell.columnHeaders.toString().split(delimiter); colHeaders = PivotUtil.formatChartHeaders(values_1, this, true, cell); } var rowHeaders = ''; if (this.parent.dataType === 'olap') { rowHeaders = cell.rowHeaders.toString().split(/~~|::/).join(' - '); } else { var values_2 = cell.rowHeaders.toString().split(delimiter); rowHeaders = PivotUtil.formatChartHeaders(values_2, this, false, cell); } var columnSeries = colHeaders + ' | ' + actualText; this.chartSeriesInfo[colHeaders] = { uniqueName: colHeaders, caption: cell.hierarchyName && cell.hierarchyName.toString().split(delimiter).join(' - '), colorIndex: [] }; this.chartSeriesInfo[this.chartSeriesInfo[colHeaders].caption] = this.chartSeriesInfo[colHeaders]; var yValue = (this.parent.dataType === 'pivot' ? (this.engineModule.aggregatedValueMatrix[rowIndex] && !isNullOrUndefined(this.engineModule.aggregatedValueMatrix[rowIndex][cellIndex])) ? Number(this.engineModule.aggregatedValueMatrix[rowIndex][cellIndex]) : (!isNullOrUndefined(cell.value) ? Number(cell.value) : cell.value) : (!isNullOrUndefined(cell.value) ? Number(cell.value) : cell.value)); yValue = yValue === Infinity ? null : yValue; if (yValue === 0) { this.accEmptyPoint = true; } if (this.columnGroupObject[columnSeries]) { this.columnGroupObject[columnSeries].push({ x: this.dataSourceSettings.rows.length === 0 ? firstRowCell.formattedText : rowHeaders, y: yValue, rIndex: rowIndex - rowReduction, cIndex: cellIndex }); } else { this.columnGroupObject[columnSeries] = [{ x: this.dataSourceSettings.rows.length === 0 ? firstRowCell.formattedText : rowHeaders, y: yValue, rIndex: rowIndex - rowReduction, cIndex: cellIndex }]; } } prevMemberCell = memberCell; } } } } this.refreshChart(); }; /** * Refreshing chart based on the updated chartSettings. * * @returns {void} * @hidden */ PivotChart.prototype.refreshChart = function () { this.chartSeries = []; var prevColorIndex = 0; var chartSeriesInfo = {}; var columnKeys = Object.keys(this.columnGroupObject); this.persistSettings = JSON.parse(this.parent.getChartSettings()).chartSettings; var seriesColors = this.persistSettings.palettes && this.persistSettings.palettes.length > 0 ? this.persistSettings.palettes : getSeriesColor(this.chartSettings.theme); 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 chartType = this.chartSettings.chartSeries ? this.chartSettings.chartSeries.type : undefined; var fieldWithCaption = {}; for (var i = 0; i < this.parent.dataSourceSettings.values.length; i++) { fieldWithCaption[this.parent.dataSourceSettings.values[i].name] = !isNullOrUndefined(this.parent.dataSourceSettings.values[i].caption) ? this.parent.dataSourceSettings.values[i].caption : undefined; } if (this.accumulationType.indexOf(chartType) > -1 && columnKeys.length > 0) { this.currentColumn = (columnKeys.indexOf(columnHeader + ' | ' + this.currentMeasure) > -1 && columnHeader !== undefined) ? columnHeader + ' | ' + this.currentMeasure : columnKeys[0]; var currentSeries = {}; currentSeries = this.persistSettings.chartSeries ? this.frameChartSeries(this.persistSettings.chartSeries) : currentSeries; if ((isNullOrUndefined(currentSeries.palettes) || currentSeries.palettes.length === 0) && !isNullOrUndefined(this.persistSettings.palettes) && this.persistSettings.palettes.length > 0) { currentSeries.palettes = this.persistSettings.palettes; } currentSeries.dataSource = this.columnGroupObject[this.currentColumn]; currentSeries.xName = 'x'; currentSeries.yName = 'y'; if (this.persistSettings.chartSeries && this.persistSettings.chartSeries.dataLabel) { currentSeries.dataLabel = this.persistSettings.chartSeries.dataLabel; currentSeries.dataLabel.name = 'x'; } else { currentSeries.dataLabel = { visible: true, position: 'Outside', name: 'x' }; this.parent.setProperties({ chartSettings: { chartSeries: { dataLabel: { visible: true, position: 'Outside' } } } }, true); } if (this.accEmptyPoint && currentSeries.emptyPointSettings) { currentSeries.emptyPointSettings.mode = 'Zero'; } else if (this.accEmptyPoint) { currentSeries.emptyPointSettings = { mode: 'Zero' }; } currentSeries.name = this.currentColumn; if (chartType === 'Doughnut') { currentSeries.type = 'Pie'; currentSeries.innerRadius = this.chartSettings.chartSeries.innerRadius ? this.chartSettings.chartSeries.innerRadius : '40%'; } else if (chartType === 'Pie') { currentSeries.innerRadius = this.chartSettings.chartSeries.innerRadius ? this.chartSettings.chartSeries.innerRadius : '0'; } this.chartSeries = this.chartSeries.concat(currentSeries); } else { for (var _i = 0, columnKeys_1 = columnKeys; _i < columnKeys_1.length; _i++) { var key = columnKeys_1[_i]; var currentSeries = {}; currentSeries = this.persistSettings.chartSeries ? this.frameChartSeries(this.persistSettings.chartSeries) : currentSeries; if (!isNullOrUndefined(currentSeries.palettes) && currentSeries.palettes.length > 0 && (isNullOrUndefined(this.persistSettings.palettes) || this.persistSettings.palettes.length === 0)) { this.chartSettings.palettes = currentSeries.palettes; } for (var i = 0; i < this.columnGroupObject[key].length; i++) { var values = this.engineModule.fieldList[this.currentMeasure]; this.columnGroupObject[key][i].x = (this.parent.dataSourceSettings.rows.length === 0 && !this.chartSettings.showMultiLevelLabels) ? this.parent.localeObj.getConstant('total') + ' ' + this.parent.localeObj.getConstant(values.aggregateType) + ' ' + this.parent.localeObj.getConstant('of') + ' ' + (!isNullOrUndefined(values.caption) ? values.caption : values.name) : this.columnGroupObject[key][i].x === '' ? this.parent.localeObj.getConstant('blank') : this.columnGroupObject[key][i].x; } currentSeries.dataSource = this.columnGroupObject[key]; currentSeries.xName = 'x'; currentSeries.yName = 'y'; currentSeries.visible = true; var multiAxisKey = void 0; var fieldName = void 0; var currentSeriesName = void 0; for (var i = 0, j = key.split(' | '); i < j.length; i++) { if (this.measuresNames && this.measuresNames[j[i]]) { fieldName = j[i]; currentSeriesName = key.split((' | ' + fieldName))[0]; } } if (this.chartSettings.enableMultipleAxis) { var fieldCaptionName = fieldName; fieldCaptionName = !isNullOrUndefined(fieldWithCaption[fieldCaptionName]) ? fieldWithCaption[fieldCaptionName] : fieldCaptionName; multiAxisKey = currentSeriesName + ' | ' + fieldCaptionName; } currentSeries.name = this.chartSettings.enableMultipleAxis ? multiAxisKey : currentSeriesName; if (this.chartSettings.showPointColorByMembers && this.chartSettings.enableMultipleAxis) { currentSeries.name = currentSeriesName; var seriesName = this.chartSeriesInfo[currentSeries.name].caption; currentSeries.name = seriesName !== undefined && seriesName !== null ? seriesName : currentSeries.name; if (!chartSeriesInfo[currentSeries.name]) { prevColorIndex = seriesColors[prevColorIndex] ? prevColorIndex : 0; chartSeriesInfo[currentSeries.name] = { name: currentSeries.name, color: seriesColors[prevColorIndex] }; currentSeries.fill = seriesColors[prevColorIndex++]; this.chartSeriesInfo[currentSeries.name].colorIndex.push(this.selectedLegend++); } else { currentSeries.fill = chartSeriesInfo[currentSeries.name].color; this.chartSeriesInfo[currentSeries.name].colorIndex.push(this.selectedLegend++); currentSeries.name = undefined; } } if (['Radar', 'Polar'].indexOf(chartType) < 0) { var measure = fieldName; currentSeries.tooltipMappingName = this.measuresNames[measure]; currentSeries.yAxisName = (this.chartSettings.enableMultipleAxis && this.chartSettings.multipleAxisMode === 'Combined') ? this.measureList.join('_') : this.measuresNames[measure] ? this.measuresNames[measure] : measure; } if (this.persistSettings.chartSeries && this.persistSettings.chartSeries.emptyPointSettings) { currentSeries.emptyPointSettings = this.persistSettings.chartSeries.emptyPointSettings; } if (!currentSeries.emptyPointSettings) { currentSeries.emptyPointSettings = { mode: 'Zero' }; } this.chartSeries = this.chartSeries.concat(currentSeries); } } var seriesEvent = { series: this.chartSeries, cancel: false }; var pivotChart = this; this.parent.trigger(events.chartSeriesCreated, seriesEvent, function (observedArgs) { if (!observedArgs.cancel) { pivotChart.bindChart(); } else { if (pivotChart.element) { remove(pivotChart.element); } pivotChart.parent.notify(events.contentReady, {}); } }); }; PivotChart.prototype.frameObjectWithKeys = function (series) { var keys = Object.keys(series); var keyPos = 0; var framedSeries = {}; while (keyPos < keys.length) { framedSeries[keys[keyPos]] = series[keys[keyPos]]; keyPos++; } return framedSeries; }; PivotChart.prototype.frameChartSeries = function (series) { var keys = Object.keys(series); var keyPos = 0; var framedSeries = {}; while (keyPos < keys.length) { if ((this.accumulationType.indexOf(this.parent.chartSettings.chartSeries.type) > -1 && ['fill', 'dashArray', 'width', 'segmentAxis', 'drawType', 'isClosed', 'segments', 'stackingGroup', 'marker', 'errorBar', 'trendlines', 'minRadius', 'splineType', 'maxRadius', 'cardinalSplineTension', 'columnWidth', 'columnSpacing', 'cornerRadius'].indexOf(keys[keyPos]) > -1) || (this.accumulationType.indexOf(this.parent.chartSettings.chartSeries.type) < 0 && ['endAngle', 'explode', 'explodeAll', 'explodeIndex', 'explodeOffset', 'gapRatio', 'groupMode', 'groupTo', 'neckHeight', 'neckWidth', 'pyramidMode', 'startAngle', 'dataLabel', 'innerRadius'].indexOf(keys[keyPos]) > -1)) { keyPos++; continue; } framedSeries[keys[keyPos]] = series[keys[keyPos]]; keyPos++; } return framedSeries; }; PivotChart.prototype.bindChart = function () { this.parent.showWaitingPopup(); var currentXAxis = this.configXAxis(); var currentTooltipSettings = this.configTooltipSettings(); var currentLegendSettings = this.configLegendSettings(); var currentZoomSettings = this.configZoomSettings(); var axesWithRows = this.frameAxesWithRows(); var type = this.chartSettings.chartSeries.type; if (this.parent.displayOption.view === 'Both') { this.element = this.parent.displayOption.primary === 'Chart' ? (this.parent.element.insertBefore((!this.element ? (createElement('div', { className: cls.PIVOTCHART, id: this.parent.element.id + '_chart' })) : this.element), this.parent.element.querySelector('.' + cls.GRID_CLASS))) : (this.parent.element.appendChild(!this.element ? (createElement('div', { className: cls.PIVOTCHART, id: this.parent.element.id + '_chart' })) : this.element)); } else if (!this.element) { this.element = this.parent.element.appendChild(createElement('div', { className: cls.PIVOTCHART, id: this.parent.element.id + '_chart' })); } if (!this.chartElement && this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis && this.chartSettings.chartSeries.type !== 'Pareto') { this.parent.element.querySelector('.' + cls.PIVOTCHART).innerHTML = ''; this.chartElement = this.parent.element.querySelector('.' + cls.PIVOTCHART).appendChild(createElement('div', { className: cls.PIVOTCHART_INNER, id: this.parent.element.id + '_chartInner' })); } if (this.parent.element.querySelector('.' + cls.PIVOTCHART_INNER)) { this.parent.element.querySelector('.' + cls.PIVOTCHART_INNER).innerHTML = ''; } if (this.parent.showGroupingBar) { this.element.style.minWidth = this.parent.minWidth ? this.parent.minWidth + 'px' : '400px !important'; } else { this.element.style.minWidth = this.parent.minWidth ? this.parent.minWidth + 'px' : '310px !important'; } var width = this.parent.width.toString(); if (this.parent.showToolbar && this.parent.grid) { width = this.parent.getGridWidthAsNumber().toString(); } var height = this.getChartHeight(); if (this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis && this.accumulationType.indexOf(type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') { this.parent.element.querySelector('.' + cls.PIVOTCHART).style.height = (height === 'auto' ? this.getChartAutoHeight() : height) + 'px'; this.parent.element.querySelector('.' + cls.PIVOTCHART).style.width = width + 'px'; if (this.parent.chartSettings.chartSeries.type !== 'Polar' && this.parent.chartSettings.chartSeries.type !== 'Radar') { this.parent.element.querySelector('.' + cls.PIVOTCHART).style.overflow = 'auto'; this.parent.element.querySelector('.' + cls.PIVOTCHART).style.overflowX = 'hidden'; } } if (this.parent.chart && ((this.parent.chart.getModuleName() === 'accumulationchart' && this.accumulationType.indexOf(type) < 0) || (this.parent.chart.getModuleName() === 'chart' && this.accumulationType.indexOf(type) > -1 && this.chartSettings.chartSeries.type !== 'Pareto'))) { this.parent.chart.destroy(); if (select('#' + this.parent.element.id + '_chart', this.parent.element)) { select('#' + this.parent.element.id + '_chart', this.parent.element).innerHTML = ''; select('#' + this.parent.element.id + '_chart', this.parent.element).appendChild(createElement('div', { className: cls.PIVOTCHART_INNER, id: this.parent.element.id + '_chartInner' })); } } if (!(this.parent.chart && this.parent.chart.element && this.parent.element.querySelector('.e-chart') || this.parent.element.querySelector('.e-accumulationchart')) || (this.parent.toolbarModule && this.parent.toolbarModule.isMultiAxisChange)) { if (this.parent.toolbarModule && this.parent.toolbarModule.isMultiAxisChange && this.parent.chart) { if (!this.parent.chart.isDestroyed) { this.parent.chart.destroy(); } this.parent.chart = undefined; select('#' + this.parent.element.id + '_chart', this.parent.element).innerHTML = ''; select('#' + this.parent.element.id + '_chart', this.parent.element).appendChild(createElement('div', { className: cls.PIVOTCHART_INNER, id: this.parent.element.id + '_chartInner' })); this.parent.toolbarModule.isMultiAxisChange = false; } Chart.Inject(ColumnSeries, StackingColumnSeries, RangeColumnSeries, BarSeries, StackingBarSeries, ScatterSeries, BubbleSeries, LineSeries, StepLineSeries, SplineSeries, SplineAreaSeries, MultiColoredLineSeries, PolarSeries, RadarSeries, AreaSeries, RangeAreaSeries, StackingAreaSeries, StepAreaSeries, StackingLineSeries, MultiColoredAreaSeries, ParetoSeries, Legend, Tooltip, Category, MultiLevelLabel, ScrollBar, Zoom, Export, Crosshair, Selection, StripLine, DataLabel); AccumulationChart.Inject(PieSeries, FunnelSeries, PyramidSeries, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, Export); if (this.accumulationType.indexOf(type) > -1) { this.parent.chart = new AccumulationChart({ series: this.chartSeries.length > 0 ? this.chartSeries : [{}], legendSettings: currentLegendSettings, tooltip: currentTooltipSettings, width: width, height: height.toString(), title: this.chartSettings.title, enableSmartLabels: this.chartSettings.enableSmartLabels, center: this.chartSettings.pieCenter, enableBorderOnMouseMove: this.chartSettings.enableBorderOnMouseMove, highlightMode: this.chartSettings.highlightMode, highlightPattern: this.chartSettings.highlightPattern, titleStyle: this.chartSettings.titleStyle, subTitle: this.chartSettings.subTitle, subTitleStyle: this.chartSettings.subTitleStyle, margin: this.chartSettings.margin, border: this.chartSettings.border, background: this.chartSettings.background, theme: this.chartSettings.theme, selectionMode: this.chartSettings.accumulationSelectionMode, isMultiSelect: this.chartSettings.isMultiSelect, enableExport: this.chartSettings.enableExport, selectedDataIndexes: this.chartSettings.selectedDataIndexes, enableAnimation: this.chartSettings.enableAnimation, useGroupingSeparator: this.chartSettings.useGroupingSeparator, locale: this.parent.locale, enableRtl: this.parent.enableRtl, beforePrint: this.beforePrint.bind(this), animationComplete: this.animationComplete.bind(this), legendRender: this.legendRender.bind(this), textRender: this.textRender.bind(this), pointRender: this.pointRender.bind(this), seriesRender: this.seriesRender.bind(this), chartMouseMove: this.chartMouseMove.bind(this), chartMouseClick: this.chartMouseClick.bind(this), pointMove: this.pointMove.bind(this), pointClick: this.pointClick.bind(this), chartMouseLeave: this.chartMouseLeave.bind(this), chartMouseDown: this.chartMouseDown.bind(this),