@syncfusion/ej2-pivotview 20.1.56 → 20.1.61

package/src/common/popups/toolbar.js

@@ -263,7 +263,7 @@ var Toolbar = /** @class */ (function () {
     Toolbar.prototype.saveReport = function (args) {
         if (this.currentReport && this.currentReport !== '' && args.item.id === (this.parent.element.id + 'save')) {
             var saveArgs = {
-                report: this.parent.getPersistData(),
+                report: this.getCurrentReport(),
                 reportName: this.currentReport
             };
             this.parent.actionObj.actionName = this.parent.getActionCompleteName();
@@ -521,7 +521,7 @@ var Toolbar = /** @class */ (function () {
                     return;
                 }
                 var saveArgs = {
-                    report: _this_2.parent.getPersistData(),
+                    report: _this_2.getCurrentReport(),
                     reportName: reportInput.value
                 };
                 var actionInfo = {
@@ -557,7 +557,7 @@ var Toolbar = /** @class */ (function () {
                 }
                 _this_3.parent.trigger(events.newReport);
                 var saveArgs = {
-                    report: _this_3.parent.getPersistData(),
+                    report: _this_3.getCurrentReport(),
                     reportName: reportInput.value
                 };
                 var actionInfo = {
@@ -701,7 +701,7 @@ var Toolbar = /** @class */ (function () {
         else if (this.action === 'New' || (this.action !== 'Save' && this.action !== 'Rename' && this.action !== 'New')) {
             if (this.currentReport && this.currentReport !== '' && this.parent.isModified) {
                 var saveArgs = {
-                    report: this.parent.getPersistData(),
+                    report: this.getCurrentReport(),
                     reportName: this.currentReport
                 };
                 var actionInfo = {
@@ -726,7 +726,7 @@ var Toolbar = /** @class */ (function () {
             else if (this.action === 'New') {
                 this.parent.trigger(events.newReport);
                 var saveArgs = {
-                    report: this.parent.getPersistData(),
+                    report: this.getCurrentReport(),
                     reportName: this.currentReport
                 };
                 this.parent.trigger(events.saveReport, saveArgs);
@@ -737,7 +737,7 @@ var Toolbar = /** @class */ (function () {
         }
         else if (this.action === 'Save') {
             var saveArgs = {
-                report: this.parent.getPersistData(),
+                report: this.getCurrentReport(),
                 reportName: this.currentReport
             };
             this.parent.trigger(events.saveReport, saveArgs);
@@ -1036,6 +1036,15 @@ var Toolbar = /** @class */ (function () {
         }
         this.updateItemElements();
     };
+    Toolbar.prototype.getCurrentReport = function () {
+        var reportStr = this.parent.getPersistData();
+        if (this.parent.dataSourceSettings.type === 'CSV') {
+            var reportSettings = JSON.parse(reportStr);
+            reportSettings.dataSourceSettings.dataSource.splice(0, 0, this.parent.engineModule.fields);
+            reportStr = JSON.stringify(reportSettings);
+        }
+        return reportStr;
+    };
     Toolbar.prototype.updateItemElements = function () {
         var itemElements = [].slice.call(this.toolbar.element.querySelectorAll('.e-toolbar-item'));
         for (var _i = 0, itemElements_1 = itemElements; _i < itemElements_1.length; _i++) {

package/src/pivotchart/base/pivotchart.js

@@ -315,7 +315,7 @@ var PivotChart = /** @class */ (function () {
                             var columnSeries = colHeaders + ' | ' + actualText;
                             var yValue = (this.parent.dataType === 'pivot' ? (this.engineModule.aggregatedValueMatrix[rowIndex] &&
                                 !isNullOrUndefined(this.engineModule.aggregatedValueMatrix[rowIndex][cellIndex])) ?
-                                Number(this.engineModule.aggregatedValueMatrix[rowIndex][cellIndex]) : Number(cell.value) : Number(cell.value));
+                                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;
@@ -424,6 +424,9 @@ var PivotChart = /** @class */ (function () {
                 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);
             }
         }

package/src/pivotfieldlist/renderer/dialog-renderer.js

@@ -518,7 +518,7 @@ var DialogRenderer = /** @class */ (function () {
             this.parent.actionFailureMethod(execption);
         }
     };
-    DialogRenderer.prototype.onCloseFieldList = function () {
+    DialogRenderer.prototype.onCloseFieldList = function (args) {
         if (this.parent.allowDeferLayoutUpdate) {
             this.parent.dataSourceSettings =
                 extend({}, this.parent.clonedDataSource.properties, null, true); /* eslint-disable-line */
@@ -541,7 +541,9 @@ var DialogRenderer = /** @class */ (function () {
             }
             if (this.parent.isPopupView && this.parent.pivotGridModule) {
                 this.parent.pivotGridModule.notify(events.uiUpdate, this);
-                this.parent.pivotGridModule.notify(events.contentReady, this);
+                if (!args.currentTarget.classList.contains('e-defer-cancel-button')) {
+                    this.parent.pivotGridModule.notify(events.contentReady, this);
+                }
             }
             else {
                 this.cancelButtonClick();

package/src/pivotview/actions/drill-through.js

@@ -67,7 +67,7 @@ var DrillThrough = /** @class */ (function () {
         var valueCaption = '';
         var aggType = '';
         var rawData = [];
-        if (pivotValue.rowHeaders !== undefined && pivotValue.columnHeaders !== undefined && !isNullOrUndefined(pivotValue.value)) {
+        if (pivotValue.rowHeaders !== undefined && pivotValue.columnHeaders !== undefined) {
             if (this.parent.dataType === 'olap') {
                 var tupleInfo = void 0;
                 if (this.parent.dataSourceSettings.valueAxis === 'row') {
@@ -141,7 +141,7 @@ var DrillThrough = /** @class */ (function () {
                     }
                 }
                 if (!isNullOrUndefined(rawData[k])) {
-                    var calculatedFeildValue = this.parent.engineModule.getAggregateValue([Number(indexArray[k])], colIndex, indexValue, 'calculatedfield');
+                    var calculatedFeildValue = this.parent.engineModule.getAggregateValue([Number(indexArray[k])], colIndex, indexValue, 'calculatedfield', false);
                     rawData[k][this.parent.dataSourceSettings.calculatedFieldSettings[i].name] = (isNaN(calculatedFeildValue) && isNullOrUndefined(calculatedFeildValue)) ? '#DIV/0!' : calculatedFeildValue;
                 }
             }

package/src/pivotview/actions/excel-export.js

@@ -129,7 +129,8 @@ var ExcelExport = /** @class */ (function () {
                             var styles = (pivotCell.axis == 'row') ? { hAlign: 'Left', bold: true, wrapText: true } : { numberFormat: formatList[field], bold: false, wrapText: true };
                             var headerStyle = { bold: true, vAlign: 'Center', wrapText: true, indent: cCnt === 0 ? pivotCell.level * 10 : 0 };
                             if (!(pivotCell.level === -1 && !pivotCell.rowSpan)) {
-                                var cellValue = pivotCell.axis === 'value' ? pivotCell.value : pivotCell.formattedText;
+                                var aggMatrix = this.parent.engineModule.aggregatedValueMatrix;
+                                var cellValue = pivotCell.axis === 'value' ? ((aggMatrix[rCnt] && aggMatrix[rCnt][cCnt]) ? aggMatrix[rCnt][cCnt] : (pivotCell.formattedText === '#DIV/0!' ? pivotCell.formattedText : pivotCell.value)) : pivotCell.formattedText;
                                 var isgetValuesHeader = ((this.parent.dataSourceSettings.rows.length === 0 && this.parent.dataSourceSettings.valueAxis === 'row')
                                     || (this.parent.dataSourceSettings.columns.length === 0 && this.parent.dataSourceSettings.valueAxis === 'column'));
                                 if (pivotCell.type === 'grand sum' && !(this.parent.dataSourceSettings.values.length === 1 && this.parent.dataSourceSettings.valueAxis === 'row' && pivotCell.axis === 'column')) {

package/src/pivotview/base/pivotview.js

@@ -2563,7 +2563,7 @@ var PivotView = /** @class */ (function (_super) {
         if (cell && hasField) {
             var rowHeaders = this.getRowText(rowIndex, 0);
             var columnHeaders = this.getColText(0, colIndex, rowIndex);
-            var value = ((cell.formattedText === '0' || cell.formattedText === '') ? this.localeObj.getConstant('noValue') :
+            var value = (cell.formattedText === '' ? this.localeObj.getConstant('noValue') :
                 cell.formattedText);
             if (this.tooltipTemplate && this.getTooltipTemplate() !== undefined) {
                 var rowFields = this.getHeaderField(rowIndex, colIndex, 'row');
@@ -2772,9 +2772,12 @@ var PivotView = /** @class */ (function (_super) {
         }
         var target = e.target;
         var ele = null;
+        var axis = (target.parentElement.classList.contains(cls.ROWSHEADER) || target.classList.contains(cls.ROWSHEADER)) ? 'row' : 'column';
+        ele = axis === 'column' ? closest(target, 'th') : closest(target, 'td');
+        if (axis === 'column' && !ele && this.gridSettings.selectionSettings.mode !== 'Row') {
+            ele = closest(target, 'td');
+        }
         if (!target.classList.contains(cls.COLLAPSE) && !target.classList.contains(cls.EXPAND) && this.enableValueSorting && this.dataType === 'pivot') {
-            var axis = (target.parentElement.classList.contains(cls.ROWSHEADER) || target.classList.contains(cls.ROWSHEADER)) ? 'row' : 'column';
-            ele = axis === 'column' ? closest(target, 'th') : closest(target, 'td');
             this.cellClicked(target, ele, e);
             try {
                 if ((ele.parentElement.parentElement.parentElement.parentElement.classList.contains('e-movableheader')

package/src/pivotview/model/chartsettings-model.d.ts

@@ -786,7 +786,7 @@ export interface EmptyPointSettingsModel {
 
     /**
      * Allows you To customize the mode of empty points.
-     * @default Gap
+     * @default Zero
      */
     mode?: EmptyPointMode | AccEmptyPointMode;
 
@@ -1522,7 +1522,7 @@ export interface PivotChartSeriesEmptyPointSettingsModel {
 
     /**
      * To customize the mode of empty points.
-     * @default Gap
+     * @default Zero
      */
     mode?: EmptyPointMode | AccEmptyPointMode;
 

package/src/pivotview/model/chartsettings.d.ts

@@ -684,7 +684,7 @@ export declare class EmptyPointSettings extends ChildProperty<EmptyPointSettings
     border: PivotChartBorderModel;
     /**
      * Allows you To customize the mode of empty points.
-     * @default Gap
+     * @default Zero
      */
     mode: EmptyPointMode | AccEmptyPointMode;
 }
@@ -1295,7 +1295,7 @@ export declare class PivotChartSeriesEmptyPointSettings {
     border: PivotChartBorderModel;
     /**
      * To customize the mode of empty points.
-     * @default Gap
+     * @default Zero
      */
     mode: EmptyPointMode | AccEmptyPointMode;
 }

package/src/pivotview/model/chartsettings.js

@@ -529,7 +529,7 @@ var EmptyPointSettings = /** @class */ (function (_super) {
         Complex({ color: 'transparent', width: 0 }, Border)
     ], EmptyPointSettings.prototype, "border", void 0);
     __decorate([
-        Property('Gap')
+        Property('Zero')
     ], EmptyPointSettings.prototype, "mode", void 0);
     return EmptyPointSettings;
 }(ChildProperty));
@@ -991,7 +991,7 @@ var PivotChartSeriesEmptyPointSettings = /** @class */ (function () {
         Complex({ color: 'transparent', width: 0 }, Border)
     ], PivotChartSeriesEmptyPointSettings.prototype, "border", void 0);
     __decorate([
-        Property('Gap')
+        Property('Zero')
     ], PivotChartSeriesEmptyPointSettings.prototype, "mode", void 0);
     return PivotChartSeriesEmptyPointSettings;
 }());

package/src/pivotview/renderer/render.js

@@ -157,6 +157,7 @@ var Render = /** @class */ (function () {
     Render.prototype.bindGrid = function (parent, isEmpty) {
         this.injectGridModules(parent);
         this.parent.grid = new Grid({
+            cssClass: this.parent.cssClass,
             frozenColumns: 1,
             frozenRows: 0,
             enableHover: false,
@@ -349,9 +350,6 @@ var Render = /** @class */ (function () {
     /* eslint-disable */
     Render.prototype.contextMenuOpen = function (args) {
         var _this = this;
-        if (args.element && this.parent.cssClass) {
-            addClass([args.element.parentElement], this.parent.cssClass);
-        }
         var _loop_1 = function (item) {
             var cellTarget = this_1.parent.lastCellClicked;
             var elem = null;
@@ -1822,6 +1820,12 @@ var Render = /** @class */ (function () {
                 }
             }
             else {
+                if ((['PercentageOfDifferenceFrom', 'PercentageOfRowTotal', 'PercentageOfColumnTotal', 'PercentageOfGrandTotal', 'PercentageOfParentRowTotal', 'PercentageOfParentColumnTotal', 'PercentageOfParentTotal']).indexOf(field.type) > -1) {
+                    format = 'P2';
+                }
+                else if (['PopulationStDev', 'SampleStDev', 'PopulationVar', 'SampleVar', 'Index'].indexOf(field.type) > -1) {
+                    format = undefined;
+                }
                 if (this.parent.dataSourceSettings.formatSettings.length > 0) {
                     for (var fCnt = 0; fCnt < this.parent.dataSourceSettings.formatSettings.length; fCnt++) {
                         var formatSettings = this.parent.dataSourceSettings.formatSettings[fCnt];
@@ -1916,12 +1920,18 @@ var Render = /** @class */ (function () {
         else {
             this.colPos++;
             /* eslint-disable-next-line */
-            if (isNullOrUndefined(args.data[this.colPos].value) || isNullOrUndefined(args.data[this.colPos].formattedText) || args.data[this.colPos].formattedText === "") {
+            var pivotValue = args.data[this.colPos];
+            if (isNullOrUndefined(pivotValue.value) || isNullOrUndefined(pivotValue.formattedText) || pivotValue.formattedText === "") {
                 args.value = this.parent.exportType === 'Excel' ? null : '';
             }
             else {
-                /* eslint-disable-next-line */
-                args.value = !isNullOrUndefined(args.data[this.colPos].value) ? args.data[this.colPos].value : args.data[this.colPos].formattedText;
+                var aggMatrix = this.parent.dataType === 'pivot' && this.parent.engineModule ? this.parent.engineModule.aggregatedValueMatrix : undefined;
+                if (aggMatrix && aggMatrix[pivotValue.rowIndex] && aggMatrix[pivotValue.rowIndex][pivotValue.colIndex]) {
+                    args.value = aggMatrix[pivotValue.rowIndex][pivotValue.colIndex];
+                }
+                else {
+                    args.value = !isNullOrUndefined(pivotValue.value) ? (pivotValue.formattedText === '#DIV/0!' ? pivotValue.formattedText : pivotValue.value) : pivotValue.formattedText;
+                }
             }
         }
         args = this.exportContentEvent(args);

package/styles/bootstrap4.css

@@ -611,7 +611,7 @@
 }
 .e-pivotview .e-pivot-toolbar .e-pivot-toolbar-menu ul .e-menu-item.e-focused .e-menu-icon,
 .e-pivotview .e-pivot-toolbar .e-pivot-toolbar-menu ul .e-menu-item.e-focused .e-icons {
-  color: #ffffff;
+  color: #fff;
 }
 .e-pivotview .e-pivot-toolbar .e-tab .e-tab-header .e-toolbar-item.e-active {
   margin-left: 18px !important;

package/styles/pivotfieldlist/_layout.scss

@@ -28,7 +28,7 @@
       font-weight: normal;
       @if ($field-list-skin == 'bootstrap4') {
         // sass-lint:disable-all
-        color: #000;
+        color: $black;
         // sass-lint:enable-all
         opacity: .5;
       }
@@ -1113,9 +1113,9 @@
 
           &:hover {
             @if ($field-list-skin == 'bootstrap4') {
-              background-color: #6c757d !important;
-              border-color: #6c757d !important;
-              color: #fff !important;
+              background-color: $gray-600 !important;
+              border-color: $gray-600 !important;
+              color: $white !important;
             }
           }
 
@@ -1135,9 +1135,9 @@
 
           &:focus {
             @if ($field-list-skin == 'bootstrap4') {
-              background-color: #6c757d !important;
-              border-color: #6c757d !important;
-              color: #fff !important;
+              background-color: $gray-600 !important;
+              border-color: $gray-600 !important;
+              color: $white !important;
             }
 
             &.e-active {

package/styles/pivotfieldlist/_theme.scss

@@ -1041,7 +1041,7 @@
                   font-size: 14px !important;
 
                   @if ($field-list-skin == 'bootstrap4') {
-                    color: #fff;
+                    color: $white;
                   }
 
                   @if ($skin-name == 'bootstrap5') {

package/styles/pivotview/_layout.scss

@@ -147,9 +147,9 @@
 
           &:hover {
             @if ($pivotgrid-skin == 'bootstrap4') {
-              background-color: #6c757d !important;
-              border-color: #6c757d !important;
-              color: #fff !important;
+              background-color: $gray-600 !important;
+              border-color: $gray-600 !important;
+              color: $white !important;
             }
           }
 
@@ -169,9 +169,9 @@
 
           &:focus {
             @if ($pivotgrid-skin == 'bootstrap4') {
-              background-color: #6c757d !important;
-              border-color: #6c757d !important;
-              color: #fff !important;
+              background-color: $gray-600 !important;
+              border-color: $gray-600 !important;
+              color: $white !important;
             }
 
             &.e-active {
@@ -637,8 +637,8 @@
         background-color: transparent;
         border: none;
         @if ($pivotgrid-skin == 'bootstrap4') {
-          background-color: #f8f9fa;
-          color: #495057;
+          background-color: $gray-100;
+          color: $gray-700;
         }
 
         // sass-lint:disable-all
@@ -649,8 +649,8 @@
           overflow: hidden;
           padding-left: 10px;
           @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: #f8f9fa;
-            color: #495057;
+            background-color: $gray-100;
+            color: $gray-700;
           }
 
           .e-menu-icon {
@@ -658,7 +658,7 @@
             margin-right: 0;
             font-size: 16px;
             @if ($pivotgrid-skin == 'bootstrap4') {
-              color: #495057;
+              color: $gray-700;
             }
 
             @if ($pivotgrid-skin == 'FluentUI') {
@@ -676,7 +676,7 @@
 
           .e-caret {
             @if ($pivotgrid-skin == 'bootstrap4') {
-              color: #495057;
+              color: $gray-700;
             }
 
             @if ($pivotgrid-skin == 'FluentUI') {
@@ -695,14 +695,14 @@
 
         ul .e-menu-item.e-focused {
           @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: #6c757d;
+            background-color: $gray-600;
             border-radius: $pivotgrid-default-border-radius;
         }
 
         .e-menu-icon,
         .e-icons{
           @if ($pivotgrid-skin == 'bootstrap4') {
-            color:#ffffff;
+            color: $white;
           }
 
           @if ($pivotgrid-skin == 'FluentUI') {

package/styles/pivotview/_theme.scss

@@ -221,7 +221,7 @@
     .e-grid .e-icons {
       color: $pivotgrid-button-icon-color !important;
       @if ($pivotgrid-skin == 'bootstrap4') {
-        color: #495057 !important;
+        color: $gray-700 !important;
       }
 
       @if ($skin-name == 'bootstrap5') {
@@ -231,7 +231,7 @@
       &:hover {
         color: $pivotgrid-icon-hover-color !important;
         @if ($pivotgrid-skin == 'bootstrap4') {
-          color: #495057 !important;
+          color: $gray-700 !important;
         }
 
         @if ($skin-name == 'bootstrap5') {
@@ -260,7 +260,7 @@
         .e-icons {
           color: $pivotgrid-button-active-icon-color !important;
           @if ($pivotgrid-skin == 'bootstrap4') {
-            color: #495057 !important;
+            color: $gray-700 !important;
           }
 
           @if ($skin-name == 'bootstrap5') {

package/styles/pivotview/bootstrap4.css

@@ -611,7 +611,7 @@
 }
 .e-pivotview .e-pivot-toolbar .e-pivot-toolbar-menu ul .e-menu-item.e-focused .e-menu-icon,
 .e-pivotview .e-pivot-toolbar .e-pivot-toolbar-menu ul .e-menu-item.e-focused .e-icons {
-  color: #ffffff;
+  color: #fff;
 }
 .e-pivotview .e-pivot-toolbar .e-tab .e-tab-header .e-toolbar-item.e-active {
   margin-left: 18px !important;