logitude-dashboard-library 3.2.62 → 3.2.63

package/dist/index.js

@@ -12,6 +12,10 @@ var column = require('primereact/column');
 var PivotGrid = require('devextreme-react/pivot-grid');
 var PivotGrid__default = _interopDefault(PivotGrid);
 var PivotGridDataSource = _interopDefault(require('devextreme/ui/pivot_grid/data_source'));
+var agGridReact = require('ag-grid-react');
+var agGridEnterprise = require('ag-grid-enterprise');
+require('ag-grid-community/dist/styles/ag-grid.css');
+require('ag-grid-community/dist/styles/ag-theme-balham.css');
 var ReactFC = _interopDefault(require('react-fusioncharts'));
 var FusionCharts = _interopDefault(require('fusioncharts'));
 var Charts = _interopDefault(require('fusioncharts/fusioncharts.charts'));
@@ -81,6 +85,7 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
 }
 
 var Session = function Session() {};
+Session.UseAgGridPivot = false;
 
 var Tools = /*#__PURE__*/function () {
   function Tools() {}
@@ -2373,6 +2378,943 @@ var PivotTable = React.forwardRef(function (props, comRef) {
   })));
 });
 
+var isRowPivotField = function isRowPivotField(field) {
+  return !!(field.PivotCode && field.PivotCode.indexOf('Row') !== -1);
+};
+var truncateToTwoDecimals = function truncateToTwoDecimals(value) {
+  var numericValue = isNullOrUndefinedOrEmpty(value) ? 0 : Number(value);
+  var safeValue = isNaN(numericValue) ? 0 : numericValue;
+  var decimalParts = safeValue.toString().split('.');
+  var firstPart = decimalParts[0] ? decimalParts[0] : '0';
+  var secondPart = decimalParts[1] ? decimalParts[1].toString().substr(0, 2) : '0';
+  return Number(firstPart + '.' + secondPart);
+};
+var isPivotMeasureValueEmpty = function isPivotMeasureValueEmpty(value) {
+  return value === null || value === undefined || value === '';
+};
+var logitudeSumAgg = function logitudeSumAgg(params) {
+  var values = params && params.values ? params.values : [];
+  if (values.length === 0) return null;
+  var total = 0;
+  var hasValue = false;
+
+  for (var i = 0; i < values.length; i++) {
+    if (isPivotMeasureValueEmpty(values[i])) continue;
+    hasValue = true;
+    total += truncateToTwoDecimals(values[i]);
+  }
+
+  return hasValue ? total : null;
+};
+var formatPivotMeasureValue = function formatPivotMeasureValue(value, measure) {
+  if (isPivotMeasureValueEmpty(value)) return '';
+  var isInteger = isValueInteger(measure.MeasureCode, measure.MeasureFieldDataType);
+  var minimumFraction = isInteger ? 0 : 2;
+  return getNumberInSystemLocalFormat(value, 2, minimumFraction);
+};
+var getPivotGroupFooterLabel = function getPivotGroupFooterLabel(node, fieldCode, rawValue, lookupDisplayName) {
+  if (!node || !node.footer) return '';
+
+  if (node.level === -1) {
+    return 'Grand Total';
+  }
+
+  if (!fieldCode) return '';
+  var displayName = lookupDisplayName(fieldCode, rawValue);
+  return displayName ? displayName + " Total" : '';
+};
+var compareDimensionValues = function compareDimensionValues(aValue, bValue, dateCode, aText, bText) {
+  if (dateCode === 'Month') {
+    var aNumber = aValue == null ? -1 : Number(aValue);
+    var bNumber = bValue == null ? -1 : Number(bValue);
+    if (aNumber < bNumber) return -1;
+    if (aNumber > bNumber) return 1;
+    return 0;
+  }
+
+  if (dateCode != null) {
+    var aCompare = aValue == null ? '' : aValue;
+    var bCompare = bValue == null ? '' : bValue;
+    if (aCompare < bCompare) return -1;
+    if (aCompare > bCompare) return 1;
+    return 0;
+  }
+
+  var aDisplay = aText == null || aText === '' ? aValue == null ? '' : aValue : aText;
+  var bDisplay = bText == null || bText === '' ? bValue == null ? '' : bValue : bText;
+  if (aDisplay < bDisplay) return -1;
+  if (aDisplay > bDisplay) return 1;
+  return 0;
+};
+var getPivotDisplayName = function getPivotDisplayName(pivotData, fieldName, dataField, dataFieldValue) {
+  if (!pivotData || pivotData.length === 0) return '';
+  var data = pivotData.find(function (el) {
+    return el[dataField] == dataFieldValue;
+  });
+  return data ? ConvertStringToPascalCaseHelper(data[fieldName]) : '';
+};
+var isPivotRowGrandTotalColumnDef = function isPivotRowGrandTotalColumnDef(colDef) {
+  if (!colDef || !colDef.colId) {
+    return false;
+  }
+
+  return String(colDef.colId).indexOf('PivotRowTotal_') === 0;
+};
+var isPivotRowGrandTotalGroupDef = function isPivotRowGrandTotalGroupDef(colGroupDef) {
+  if (!colGroupDef) {
+    return false;
+  }
+
+  var groupId = colGroupDef.groupId || colGroupDef.colId || '';
+
+  if (String(groupId).indexOf('PivotRowTotal') >= 0) {
+    return true;
+  }
+
+  var children = colGroupDef.children;
+
+  if (!children || children.length === 0) {
+    return false;
+  }
+
+  return children.every(function (child) {
+    if (child && child.children) {
+      return isPivotRowGrandTotalGroupDef(child);
+    }
+
+    return isPivotRowGrandTotalColumnDef(child);
+  });
+};
+var resolvePivotGroupHeaderName = function resolvePivotGroupHeaderName(colGroupDef, columnFields, lookupDisplayName) {
+  if (isPivotRowGrandTotalGroupDef(colGroupDef)) {
+    return 'Grand Total';
+  }
+
+  var pivotKeys = colGroupDef && colGroupDef.pivotKeys ? colGroupDef.pivotKeys : [];
+
+  if (pivotKeys.length === 0) {
+    return null;
+  }
+
+  var field = columnFields[pivotKeys.length - 1];
+
+  if (!field) {
+    return null;
+  }
+
+  return lookupDisplayName(field, pivotKeys[pivotKeys.length - 1]);
+};
+var getPivotValueColumnId = function getPivotValueColumnId(pivotValueColumn) {
+  if (!pivotValueColumn) {
+    return null;
+  }
+
+  if (typeof pivotValueColumn.getId === 'function') {
+    return pivotValueColumn.getId();
+  }
+
+  if (typeof pivotValueColumn.getColId === 'function') {
+    return pivotValueColumn.getColId();
+  }
+
+  if (pivotValueColumn.colId) {
+    return String(pivotValueColumn.colId);
+  }
+
+  if (pivotValueColumn.field) {
+    return String(pivotValueColumn.field);
+  }
+
+  return null;
+};
+var resolveMeasureFromPivotValueColumn = function resolveMeasureFromPivotValueColumn(colDef, measures) {
+  if (!colDef || measures.length === 0) {
+    return undefined;
+  }
+
+  if (measures.length === 1) {
+    return measures[0];
+  }
+
+  var valueColumnId = getPivotValueColumnId(colDef.pivotValueColumn);
+
+  if (valueColumnId) {
+    var measureByValueColumn = measures.find(function (measure) {
+      return measure.PivotMeasureCode === valueColumnId;
+    });
+
+    if (measureByValueColumn) {
+      return measureByValueColumn;
+    }
+  }
+
+  var colId = colDef.colId ? String(colDef.colId) : '';
+
+  if (colId) {
+    var sortedMeasures = [].concat(measures).sort(function (left, right) {
+      return right.PivotMeasureCode.length - left.PivotMeasureCode.length;
+    });
+
+    for (var index = 0; index < sortedMeasures.length; index++) {
+      var measureCode = sortedMeasures[index].PivotMeasureCode;
+
+      if (colId.endsWith('_' + measureCode)) {
+        return sortedMeasures[index];
+      }
+    }
+  }
+
+  return undefined;
+};
+var resolvePivotLeafHeaderName = function resolvePivotLeafHeaderName(colDef, columnFields, lookupDisplayName, measureCount, measures) {
+  if (isPivotRowGrandTotalColumnDef(colDef)) {
+    return null;
+  }
+
+  if (measureCount > 1 && colDef.pivotValueColumn) {
+    return null;
+  }
+
+  var pivotKeys = colDef && colDef.pivotKeys ? colDef.pivotKeys : [];
+
+  if (pivotKeys.length === 0) {
+    return null;
+  }
+
+  var field = columnFields[pivotKeys.length - 1];
+
+  if (!field) {
+    return null;
+  }
+
+  return lookupDisplayName(field, pivotKeys[pivotKeys.length - 1]);
+};
+var resolveMeasureForSecondaryColDef = function resolveMeasureForSecondaryColDef(colDef, measures) {
+  return resolveMeasureFromPivotValueColumn(colDef, measures);
+};
+
+var getColumnGroupAtHeaderLevel = function getColumnGroupAtHeaderLevel(column, targetLevel) {
+  if (!column || typeof column.getParent !== 'function') {
+    return null;
+  }
+
+  var groupPointer = column.getParent();
+
+  while (groupPointer) {
+    var providedColumnGroup = typeof groupPointer.getProvidedColumnGroup === 'function' ? groupPointer.getProvidedColumnGroup() : null;
+
+    if (!providedColumnGroup) {
+      groupPointer = typeof groupPointer.getParent === 'function' ? groupPointer.getParent() : null;
+      continue;
+    }
+
+    var originalGroupLevel = typeof providedColumnGroup.getLevel === 'function' ? providedColumnGroup.getLevel() : 0;
+    var groupPointerLevel = typeof groupPointer.getPaddingLevel === 'function' ? groupPointer.getPaddingLevel() : 0;
+
+    if (originalGroupLevel + groupPointerLevel <= targetLevel) {
+      return groupPointer;
+    }
+
+    groupPointer = typeof groupPointer.getParent === 'function' ? groupPointer.getParent() : null;
+  }
+
+  return null;
+};
+
+var escapeColumnIdSelector = function escapeColumnIdSelector(columnId) {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+    return CSS.escape(columnId);
+  }
+
+  return columnId.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+};
+
+var findHeaderGroupCellByColumnGroup = function findHeaderGroupCellByColumnGroup(headerContainer, groupRows, targetGroupLevel, columnGroup) {
+  if (!columnGroup || typeof columnGroup.getUniqueId !== 'function') {
+    return null;
+  }
+
+  var groupId = columnGroup.getUniqueId();
+  var groupRowIndex = Math.min(Math.max(targetGroupLevel, 0), groupRows.length - 1);
+  var targetGroupRow = groupRows[groupRowIndex];
+
+  if (!targetGroupRow) {
+    return null;
+  }
+
+  return targetGroupRow.querySelector("[col-id=\"" + escapeColumnIdSelector(groupId) + "\"]");
+};
+
+var applyPivotRowGrandTotalGroupHeaderLabel = function applyPivotRowGrandTotalGroupHeaderLabel(gridRootElement, columnApi, measureCount, columnPivotFieldCount) {
+  if (!gridRootElement || !columnApi || measureCount <= 1) {
+    return;
+  }
+
+  clearPivotRowGrandTotalGroupHeaderMarkup(gridRootElement);
+  var displayedColumns = typeof columnApi.getAllDisplayedColumns === 'function' ? columnApi.getAllDisplayedColumns() : [];
+  var rowGrandTotalColumns = displayedColumns.filter(function (column) {
+    return String(column.getColId()).indexOf('PivotRowTotal_') === 0;
+  });
+
+  if (rowGrandTotalColumns.length <= 1) {
+    return;
+  }
+
+  var centerHeaderContainer = gridRootElement.querySelector('.ag-header-viewport .ag-header-container');
+
+  if (!centerHeaderContainer) {
+    return;
+  }
+
+  var groupRows = Array.from(centerHeaderContainer.querySelectorAll('.ag-header-row-column-group'));
+
+  if (groupRows.length === 0) {
+    return;
+  }
+
+  var targetGroupLevel = columnPivotFieldCount > 0 ? columnPivotFieldCount - 1 : 0;
+  var rowGrandTotalGroupCells = findRowGrandTotalGroupHeaderCells(centerHeaderContainer, groupRows, targetGroupLevel, rowGrandTotalColumns);
+
+  if (rowGrandTotalGroupCells.length === 0) {
+    return;
+  }
+
+  applyGrandTotalLabelToGroupHeaderCells(rowGrandTotalGroupCells);
+};
+
+var clearPivotRowGrandTotalGroupHeaderMarkup = function clearPivotRowGrandTotalGroupHeaderMarkup(gridRootElement) {
+  gridRootElement.querySelectorAll('.dl-pivot-row-grand-total-group-header, .dl-pivot-row-grand-total-group-header-sibling').forEach(function (element) {
+    element.classList.remove('dl-pivot-row-grand-total-group-header', 'dl-pivot-row-grand-total-group-header-sibling');
+  });
+  gridRootElement.querySelectorAll('.dl-pivot-row-grand-total-group-header-label').forEach(function (label) {
+    label.classList.remove('dl-pivot-row-grand-total-group-header-label');
+    var labelElement = label;
+    labelElement.textContent = '';
+    labelElement.style.width = '';
+    labelElement.style.display = '';
+    labelElement.style.textAlign = '';
+  });
+};
+
+var findRowGrandTotalGroupHeaderCells = function findRowGrandTotalGroupHeaderCells(centerHeaderContainer, groupRows, targetGroupLevel, rowGrandTotalColumns) {
+  var cellsByColumnGroup = [];
+  rowGrandTotalColumns.forEach(function (column) {
+    var columnGroup = getColumnGroupAtHeaderLevel(column, targetGroupLevel);
+    var matchingCell = findHeaderGroupCellByColumnGroup(centerHeaderContainer, groupRows, targetGroupLevel, columnGroup);
+
+    if (matchingCell) {
+      cellsByColumnGroup.push(matchingCell);
+    }
+  });
+
+  if (cellsByColumnGroup.length === rowGrandTotalColumns.length) {
+    return cellsByColumnGroup;
+  }
+
+  var groupRowIndex = Math.min(Math.max(targetGroupLevel, 0), groupRows.length - 1);
+  var targetGroupRow = groupRows[groupRowIndex];
+
+  if (!targetGroupRow) {
+    return cellsByColumnGroup;
+  }
+
+  var paddingCells = Array.from(targetGroupRow.querySelectorAll('.ag-header-group-cell-no-group'));
+  var trailingPaddingCells = paddingCells.slice(-rowGrandTotalColumns.length);
+
+  if (trailingPaddingCells.length === rowGrandTotalColumns.length) {
+    return trailingPaddingCells;
+  }
+
+  return cellsByColumnGroup;
+};
+
+var applyGrandTotalLabelToGroupHeaderCells = function applyGrandTotalLabelToGroupHeaderCells(rowGrandTotalGroupCells) {
+  var firstCell = rowGrandTotalGroupCells[0];
+  var firstLabel = firstCell.querySelector('.ag-header-group-text, .ag-header-cell-text');
+
+  if (!firstLabel) {
+    return;
+  }
+
+  var combinedWidth = rowGrandTotalGroupCells.reduce(function (totalWidth, cell) {
+    return totalWidth + cell.offsetWidth;
+  }, 0);
+  firstLabel.textContent = 'Grand Total';
+  firstLabel.style.width = combinedWidth + "px";
+  firstLabel.style.display = 'inline-block';
+  firstLabel.style.textAlign = 'center';
+  firstLabel.classList.add('dl-pivot-row-grand-total-group-header-label');
+  firstCell.classList.add('dl-pivot-row-grand-total-group-header');
+
+  for (var index = 1; index < rowGrandTotalGroupCells.length; index++) {
+    rowGrandTotalGroupCells[index].classList.add('dl-pivot-row-grand-total-group-header-sibling');
+    var siblingLabel = rowGrandTotalGroupCells[index].querySelector('.ag-header-group-text, .ag-header-cell-text');
+
+    if (siblingLabel) {
+      siblingLabel.textContent = '';
+    }
+  }
+};
+
+var applyPivotRowGrandTotalHeader = function applyPivotRowGrandTotalHeader(colDef, measureCount, measures) {
+  if (!isPivotRowGrandTotalColumnDef(colDef)) {
+    return;
+  }
+
+  if (measureCount <= 1) {
+    colDef.headerName = 'Grand Total';
+    return;
+  }
+
+  var measure = resolveMeasureFromPivotValueColumn(colDef, measures);
+
+  if (measure) {
+    colDef.headerName = getMeasureCaption(measure);
+  }
+
+  delete colDef.headerValueGetter;
+};
+var collectPivotRowPath = function collectPivotRowPath(startNode) {
+  var path = [];
+
+  if (!startNode) {
+    return path;
+  }
+
+  if (startNode.footer) {
+    if (startNode.level === -1) {
+      return path;
+    }
+
+    if (startNode.field != null && startNode.key !== undefined) {
+      path.unshift({
+        field: startNode.field,
+        key: startNode.key
+      });
+    }
+  }
+
+  var node = startNode.parent;
+
+  while (node && node.level >= 0) {
+    if (!node.footer && node.field != null && node.key !== undefined) {
+      path.unshift({
+        field: node.field,
+        key: node.key
+      });
+    }
+
+    node = node.parent;
+  }
+
+  return path;
+};
+var buildPivotDrillDownPivotFields = function buildPivotDrillDownPivotFields(colDef, startNode, apiFields) {
+  var columnFields = apiFields.filter(function (field) {
+    return !isRowPivotField(field);
+  });
+  var rowFields = apiFields.filter(isRowPivotField);
+  var pivotFields = [];
+  var columnKeys = colDef && colDef.pivotKeys ? colDef.pivotKeys : [];
+  columnKeys.forEach(function (key, index) {
+    if (key === undefined) {
+      return;
+    }
+
+    var field = columnFields[index];
+
+    if (!field) {
+      return;
+    }
+
+    pivotFields.push({
+      FieldId: field.FieldId,
+      FieldType: field.FieldType ? field.FieldType : 'Field',
+      FieldValue: key,
+      DateCode: field.DateCode
+    });
+  });
+  collectPivotRowPath(startNode).forEach(function (pathItem) {
+    var field = rowFields.find(function (f) {
+      return f.PivotCode === pathItem.field;
+    }) || apiFields.find(function (f) {
+      return f.PivotCode === pathItem.field;
+    });
+
+    if (!field) {
+      return;
+    }
+
+    pivotFields.push({
+      FieldId: field.FieldId,
+      FieldType: field.FieldType ? field.FieldType : 'Field',
+      FieldValue: pathItem.key,
+      DateCode: field.DateCode
+    });
+  });
+  return pivotFields;
+};
+var getMeasureCaption = function getMeasureCaption(measure) {
+  var displayName = typeof measure.DisplayName == 'string' ? measure.DisplayName : '';
+
+  if (measure.MeasureCode == 'Sum') {
+    return ConvertStringToPascalCaseHelper(displayName.replace('Sum of ', ''));
+  }
+
+  return ConvertStringToPascalCaseHelper(displayName);
+};
+var parseJsonArray = function parseJsonArray(json) {
+  if (isNullOrUndefinedOrEmpty(json)) return [];
+
+  try {
+    var parsed = JSON.parse(json);
+    return parsed || [];
+  } catch (error) {
+    return [];
+  }
+};
+var parsePivotTotalsSettings = function parsePivotTotalsSettings(json) {
+  if (isNullOrUndefinedOrEmpty(json)) return {};
+
+  try {
+    return JSON.parse(json) || {};
+  } catch (error) {
+    return {};
+  }
+};
+
+var ROW_GROUP_COLUMN_MIN_WIDTH = 100;
+
+var applyAgGridLicense = function applyAgGridLicense() {
+  if (!Session.AgGridLicenseKey) return;
+  agGridEnterprise.LicenseManager.setLicenseKey(Session.AgGridLicenseKey);
+};
+
+var AgPivotGrid = React.forwardRef(function (props, _comRef) {
+  var _useState = React.useState(),
+      widget = _useState[0],
+      setWidget = _useState[1];
+
+  var _useState2 = React.useState(true),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useState3 = React.useState([]),
+      rowData = _useState3[0],
+      setRowData = _useState3[1];
+
+  var _useState4 = React.useState([]),
+      columnDefs = _useState4[0],
+      setColumnDefs = _useState4[1];
+
+  var _useState5 = React.useState(0),
+      measureCount = _useState5[0],
+      setMeasureCount = _useState5[1];
+
+  var widgetRefData = React.useRef(null);
+  var tabledata = React.useRef();
+  var gridApiRef = React.useRef(null);
+  var columnApiRef = React.useRef(null);
+  var gridContainerRef = React.useRef(null);
+  var pivotFieldsRef = React.useRef([]);
+  var pivotMeasuresRef = React.useRef([]);
+  React.useEffect(function () {
+    var _props$customChartPro;
+
+    applyAgGridLicense();
+
+    if (props.customChartProps && props.customChartProps.widget) {
+      setWidget(props.customChartProps.widget);
+      widgetRefData.current = props.customChartProps.widget;
+      getPivotTableData(props.customChartProps.widget);
+    }
+
+    (_props$customChartPro = props.customChartProps.dataBinding) === null || _props$customChartPro === void 0 ? void 0 : _props$customChartPro.widgetUpdated.subscribe(function (updatedWidget) {
+      var _widgetRefData$curren;
+
+      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widgetRefData$curren = widgetRefData.current) === null || _widgetRefData$curren === void 0 ? void 0 : _widgetRefData$curren.key)) return;
+      setWidget(_extends({}, updatedWidget));
+    });
+    document.addEventListener('resizeStop', handleResize);
+    return function () {
+      document.removeEventListener('resizeStop', handleResize);
+    };
+  }, []);
+  React.useEffect(function () {
+    if (!props.customChartProps.isInEditMode) return;
+
+    if (gridContainerRef.current && gridContainerRef.current.classList) {
+      gridContainerRef.current.classList.add('force-overflow-hidden');
+    }
+
+    setTimeout(function () {
+      handleResize();
+
+      if (gridContainerRef.current && gridContainerRef.current.classList) {
+        gridContainerRef.current.classList.remove('force-overflow-hidden');
+      }
+    }, 5);
+  }, [props.customChartProps.isInEditMode]);
+
+  var handleResize = function handleResize() {
+    if (gridApiRef.current && gridApiRef.current.resetRowHeights) {
+      gridApiRef.current.resetRowHeights();
+    }
+  };
+
+  var getPivotTableData = function getPivotTableData(widgetPm) {
+    if (Session.Tenant == 0) {
+      tabledata.current = [];
+      setRowData([]);
+      setIsLoading(false);
+      return;
+    }
+
+    var dashboardAnalyticsService = new DashboardAnalyticsService();
+    var widgetLoadLogger = new WidgetLoadLogger(props.customChartProps.widget, props.customChartProps.isPreviewModeActive, 'PostGetPivotData');
+    dashboardAnalyticsService.getPivotData(widgetPm).then(function (res) {
+      tabledata.current = res.data;
+      buildGridFromPivotResponse();
+      setIsLoading(false);
+      widgetLoadLogger.log(res);
+    })["catch"](function (err) {
+      console.log('Error while Getting Pivot Table Data: ', err);
+      tabledata.current = null;
+      setRowData([]);
+      setIsLoading(false);
+    });
+  };
+
+  var lookupDisplayName = function lookupDisplayName(field, rawValue) {
+    var pivotData = tabledata.current && tabledata.current.PivotData ? tabledata.current.PivotData : [];
+    return getPivotDisplayName(pivotData, field.PivotName, field.PivotCode, rawValue);
+  };
+
+  var lookupDisplayNameByFieldCode = function lookupDisplayNameByFieldCode(fieldCode, rawValue) {
+    var field = pivotFieldsRef.current.find(function (f) {
+      return f.PivotCode === fieldCode;
+    });
+    if (!field) return rawValue == null ? '' : String(rawValue);
+    return lookupDisplayName(field, rawValue);
+  };
+
+  var applyPivotDataCellFormatting = function applyPivotDataCellFormatting(colDef) {
+    colDef.sortable = false;
+    colDef.filter = false;
+    colDef.cellClass = 'dl-ag-pivot-data-cell';
+    colDef.type = 'numericColumn';
+  };
+
+  var buildGridFromPivotResponse = function buildGridFromPivotResponse() {
+    if (!tabledata.current || !tabledata.current.PivoFields || !tabledata.current.PivotMeasures) {
+      setRowData([]);
+      return;
+    }
+
+    var apiFields = tabledata.current.PivoFields;
+    var apiMeasures = tabledata.current.PivotMeasures;
+    pivotFieldsRef.current = apiFields;
+    pivotMeasuresRef.current = apiMeasures;
+    setMeasureCount(apiMeasures.length);
+    var rowFields = apiFields.filter(isRowPivotField);
+    var columnFields = apiFields.filter(function (field) {
+      return !isRowPivotField(field);
+    });
+    var defs = [];
+    rowFields.forEach(function (field, index) {
+      defs.push(createRowGroupColDef(field, index));
+    });
+    columnFields.forEach(function (field, index) {
+      defs.push(createPivotColDef(field, index));
+    });
+    apiMeasures.forEach(function (measure) {
+      defs.push(createMeasureColDef(measure));
+    });
+    setColumnDefs(defs);
+    setRowData(tabledata.current.PivotData || []);
+  };
+
+  var createRowGroupColDef = function createRowGroupColDef(field, index) {
+    return {
+      field: field.PivotCode,
+      headerName: field.DisplayName,
+      rowGroup: true,
+      rowGroupIndex: index,
+      enableRowGroup: true,
+      hide: true,
+      width: ROW_GROUP_COLUMN_MIN_WIDTH,
+      wrapText: true,
+      autoHeight: true,
+      sortable: false,
+      filter: false,
+      comparator: function comparator(a, b) {
+        return compareDimensionValues(a, b, field.DateCode, lookupDisplayName(field, a), lookupDisplayName(field, b));
+      },
+      valueFormatter: function valueFormatter(params) {
+        return lookupDisplayName(field, params.value);
+      }
+    };
+  };
+
+  var createPivotColDef = function createPivotColDef(field, index) {
+    return {
+      field: field.PivotCode,
+      headerName: field.DisplayName,
+      pivot: true,
+      pivotIndex: index,
+      enablePivot: true,
+      hide: true,
+      sortable: false,
+      filter: false,
+      pivotComparator: function pivotComparator(a, b) {
+        return compareDimensionValues(a, b, field.DateCode, lookupDisplayName(field, a), lookupDisplayName(field, b));
+      }
+    };
+  };
+
+  var createMeasureColDef = function createMeasureColDef(measure) {
+    return {
+      field: measure.PivotMeasureCode,
+      headerName: getMeasureCaption(measure),
+      aggFunc: 'logitudeSum',
+      enableValue: true,
+      wrapText: true,
+      autoHeight: true,
+      sortable: false,
+      filter: false,
+      cellClass: 'dl-ag-pivot-data-cell',
+      type: 'numericColumn',
+      valueFormatter: function valueFormatter(params) {
+        return formatPivotMeasureValue(params.value, measure);
+      }
+    };
+  };
+
+  var isRowsEmptyAndColumnsNotEmpty = function isRowsEmptyAndColumnsNotEmpty() {
+    var pivotRows = parseJsonArray(widget === null || widget === void 0 ? void 0 : widget.PivotRows);
+    var pivotColumns = parseJsonArray(widget === null || widget === void 0 ? void 0 : widget.PivotColumns);
+    return pivotRows.length === 0 && pivotColumns.length > 0;
+  };
+
+  var isRowsNotEmptyAndColumnsEmpty = function isRowsNotEmptyAndColumnsEmpty() {
+    var pivotRows = parseJsonArray(widget === null || widget === void 0 ? void 0 : widget.PivotRows);
+    var pivotColumns = parseJsonArray(widget === null || widget === void 0 ? void 0 : widget.PivotColumns);
+    return pivotRows.length > 0 && pivotColumns.length === 0;
+  };
+
+  var canShowRowsGrandTotal = function canShowRowsGrandTotal() {
+    if (isRowsEmptyAndColumnsNotEmpty()) return true;
+    var settings = parsePivotTotalsSettings(widget === null || widget === void 0 ? void 0 : widget.PivotTotalsSettings);
+    return !isNullOrUndefinedOrEmpty(settings.ShowRowsGrandTotal) ? !!settings.ShowRowsGrandTotal : false;
+  };
+
+  var canShowColumnsGrandTotal = function canShowColumnsGrandTotal() {
+    if (isRowsNotEmptyAndColumnsEmpty()) return true;
+    var settings = parsePivotTotalsSettings(widget === null || widget === void 0 ? void 0 : widget.PivotTotalsSettings);
+    return !isNullOrUndefinedOrEmpty(settings.ShowColumnsGrandTotal) ? !!settings.ShowColumnsGrandTotal : false;
+  };
+
+  var canShowRowsTotal = function canShowRowsTotal() {
+    var settings = parsePivotTotalsSettings(widget === null || widget === void 0 ? void 0 : widget.PivotTotalsSettings);
+    return !isNullOrUndefinedOrEmpty(settings.ShowRowsTotal) ? !!settings.ShowRowsTotal : false;
+  };
+
+  var canShowColumnsTotal = function canShowColumnsTotal() {
+    var settings = parsePivotTotalsSettings(widget === null || widget === void 0 ? void 0 : widget.PivotTotalsSettings);
+    return !isNullOrUndefinedOrEmpty(settings.ShowColumnsTotal) ? !!settings.ShowColumnsTotal : false;
+  };
+
+  var isSingleMeasurePivot = measureCount <= 1;
+  var processSecondaryColGroupDef = React.useCallback(function (colGroupDef) {
+    var columnFields = pivotFieldsRef.current.filter(function (field) {
+      return !isRowPivotField(field);
+    });
+    var headerName = resolvePivotGroupHeaderName(colGroupDef, columnFields, lookupDisplayName);
+
+    if (headerName) {
+      colGroupDef.headerName = headerName;
+    }
+  }, []);
+  var processSecondaryColDef = React.useCallback(function (colDef) {
+    var columnFields = pivotFieldsRef.current.filter(function (field) {
+      return !isRowPivotField(field);
+    });
+    var colDefAny = colDef;
+
+    if (colDefAny.colId && String(colDefAny.colId).indexOf('PivotRowTotal_') === 0) {
+      applyPivotRowGrandTotalHeader(colDefAny, pivotMeasuresRef.current.length, pivotMeasuresRef.current);
+    } else {
+      var headerName = resolvePivotLeafHeaderName(colDefAny, columnFields, lookupDisplayName, pivotMeasuresRef.current.length);
+
+      if (headerName) {
+        colDef.headerName = headerName;
+      }
+    }
+
+    applyPivotDataCellFormatting(colDef);
+
+    colDef.valueFormatter = function (params) {
+      var measure = resolveMeasureForSecondaryColDef(params.colDef, pivotMeasuresRef.current);
+      if (!measure) return '';
+      return formatPivotMeasureValue(params.value, measure);
+    };
+  }, []);
+  var onCellClicked = React.useCallback(function (event) {
+    var colDef = event.colDef;
+    if (!colDef || !colDef.pivotValueColumn) return;
+    if (isPivotMeasureValueEmpty(event.value)) return;
+    var pivotFields = buildPivotDrillDownPivotFields(colDef, event.node, pivotFieldsRef.current);
+    props.customChartProps.onSelectDataPoint({
+      MeasureFieldId: '',
+      MeasureFieldType: '',
+      Widget: props.customChartProps.widget,
+      MeasureCode: '',
+      Formula: '',
+      GroupById: '',
+      PivotFields: pivotFields
+    });
+  }, []);
+  var defaultColDef = React.useMemo(function () {
+    return {
+      sortable: false,
+      filter: false,
+      resizable: false,
+      suppressMenu: true,
+      wrapText: true,
+      autoHeight: true
+    };
+  }, []);
+  var autoGroupColumnDef = React.useMemo(function () {
+    return {
+      minWidth: ROW_GROUP_COLUMN_MIN_WIDTH,
+      width: ROW_GROUP_COLUMN_MIN_WIDTH,
+      sortable: false,
+      filter: false,
+      wrapText: true,
+      autoHeight: true,
+      cellClass: 'dl-ag-pivot-row-label-cell',
+      headerValueGetter: function headerValueGetter(params) {
+        var colDef = params.colDef;
+        var showRowGroup = colDef && colDef.showRowGroup;
+        if (!showRowGroup) return '';
+        var field = pivotFieldsRef.current.find(function (f) {
+          return f.PivotCode === showRowGroup;
+        });
+        return field ? field.DisplayName : '';
+      },
+      valueFormatter: function valueFormatter(params) {
+        var colDef = params.colDef;
+        var showRowGroup = colDef && colDef.showRowGroup;
+        var field = pivotFieldsRef.current.find(function (f) {
+          return f.PivotCode === showRowGroup;
+        });
+        if (!field) return params.value == null ? '' : String(params.value);
+        return lookupDisplayName(field, params.value);
+      },
+      cellRendererParams: {
+        suppressCount: true,
+        footerValueGetter: function footerValueGetter(params) {
+          var fieldCode = params.node && params.node.field ? params.node.field : params.colDef && params.colDef.showRowGroup ? params.colDef.showRowGroup : null;
+          return getPivotGroupFooterLabel(params.node, fieldCode, params.value, lookupDisplayNameByFieldCode);
+        }
+      }
+    };
+  }, []);
+  var aggFuncs = React.useMemo(function () {
+    return {
+      logitudeSum: logitudeSumAgg
+    };
+  }, []);
+  var scheduleRowGrandTotalHeaderLabel = React.useCallback(function () {
+    var columnPivotFieldCount = pivotFieldsRef.current.filter(function (field) {
+      return !isRowPivotField(field);
+    }).length;
+
+    var applyLabel = function applyLabel() {
+      applyPivotRowGrandTotalGroupHeaderLabel(gridContainerRef.current, columnApiRef.current, measureCount, columnPivotFieldCount);
+    };
+
+    window.requestAnimationFrame(function () {
+      window.requestAnimationFrame(function () {
+        applyLabel();
+        window.setTimeout(applyLabel, 150);
+      });
+    });
+  }, [measureCount]);
+
+  var onGridReady = function onGridReady(event) {
+    gridApiRef.current = event.api;
+    columnApiRef.current = event.columnApi;
+  };
+
+  var onFirstDataRendered = function onFirstDataRendered(event) {
+    columnApiRef.current = event.columnApi;
+    var columnApi = event.columnApi;
+    if (!columnApi || !columnApi.getAllDisplayedColumns) return;
+    var autoGroupColumnIds = columnApi.getAllDisplayedColumns().map(function (col) {
+      return col.getColId();
+    }).filter(function (colId) {
+      return colId.indexOf('ag-Grid-AutoColumn') === 0;
+    });
+
+    if (autoGroupColumnIds.length > 0 && columnApi.autoSizeColumns) {
+      columnApi.autoSizeColumns(autoGroupColumnIds, false);
+    }
+
+    scheduleRowGrandTotalHeaderLabel();
+  };
+
+  var onColumnPivotChanged = function onColumnPivotChanged() {
+    scheduleRowGrandTotalHeaderLabel();
+  };
+
+  var onColumnResized = function onColumnResized() {
+    scheduleRowGrandTotalHeaderLabel();
+  };
+
+  var gridWrapperClassName = 'ag-theme-balham pivot-grid-element dl-ag-pivot-grid';
+  return React__default.createElement(React__default.Fragment, null, isLoading ? React__default.createElement("div", {
+    className: 'dl-full-hight dl-flex-content-center spinner-custome'
+  }, React__default.createElement(progressspinner.ProgressSpinner, {
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    strokeWidth: "4",
+    animationDuration: "2s"
+  })) : React__default.createElement("div", {
+    ref: gridContainerRef,
+    className: gridWrapperClassName
+  }, React__default.createElement(agGridReact.AgGridReact, {
+    rowData: rowData,
+    columnDefs: columnDefs,
+    defaultColDef: defaultColDef,
+    autoGroupColumnDef: autoGroupColumnDef,
+    aggFuncs: aggFuncs,
+    pivotMode: true,
+    groupDisplayType: "multipleColumns",
+    groupDefaultExpanded: -1,
+    suppressAggFuncInHeader: true,
+    removePivotHeaderRowWhenSingleValueColumn: isSingleMeasurePivot,
+    groupIncludeFooter: canShowRowsTotal(),
+    groupIncludeTotalFooter: canShowRowsGrandTotal(),
+    pivotRowTotals: canShowColumnsGrandTotal() ? 'after' : undefined,
+    pivotColumnGroupTotals: canShowColumnsTotal() ? 'after' : undefined,
+    processSecondaryColGroupDef: processSecondaryColGroupDef,
+    processSecondaryColDef: processSecondaryColDef,
+    onCellClicked: onCellClicked,
+    onGridReady: onGridReady,
+    onFirstDataRendered: onFirstDataRendered,
+    onColumnPivotChanged: onColumnPivotChanged,
+    onColumnResized: onColumnResized,
+    animateRows: false,
+    suppressContextMenu: true,
+    suppressMovableColumns: true,
+    headerHeight: 36,
+    rowHeight: 36
+  })));
+});
+
 var parseSelectedQueries = function parseSelectedQueries(widgetJson) {
   if (!widgetJson) {
     return [];
@@ -2453,7 +3395,9 @@ var CustomChart = function CustomChart(props) {
         });
 
       case "pivot":
-        return React__default.createElement(PivotTable, {
+        return props.useAgGridPivot ? React__default.createElement(AgPivotGrid, {
+          customChartProps: props
+        }) : React__default.createElement(PivotTable, {
           customChartProps: props
         });
 
@@ -4296,6 +5240,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     if (((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
       isInEditMode: props.isInEditMode,
       isPreviewModeActive: props.isPreviewModeActive,
+      useAgGridPivot: props.useAgGridPivot,
       dataBinding: props.dataBinding,
       widget: widget.current,
       widgetRef: props.widgetRef,
@@ -4307,6 +5252,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     if (((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.TypeCode) == "table" || ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.TypeCode) == "pivot" || ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.TypeCode) == "views") return React__default.createElement(CustomChart, {
       isInEditMode: props.isInEditMode,
       isPreviewModeActive: props.isPreviewModeActive,
+      useAgGridPivot: props.useAgGridPivot,
       dataBinding: props.dataBinding,
       widget: widget.current,
       widgetRef: props.widgetRef,
@@ -4751,6 +5697,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
       editBtnClicked: editWidget,
       deleteBtnClicked: confirmDeleteWidget,
       onSelectDataPoint: props.onSelectDataPoint,
+      useAgGridPivot: props.useAgGridPivot,
       duplicateBtnClicked: copyWidget,
       copyToClipboardBtnClicked: copyWidgetToClipboard,
       ref: function ref(el) {
@@ -4781,6 +5728,8 @@ var layoutGridProps = {
 var Dashboard = function Dashboard(props) {
   var _previewWidget$Layout, _previewWidget$Layout2;
 
+  Session.UseAgGridPivot = !!props.useAgGridPivot;
+  Session.AgGridLicenseKey = props.agGridLicenseKey;
   var Widgetlayouts = React.useRef({
     lg: []
   });
@@ -4809,6 +5758,8 @@ var Dashboard = function Dashboard(props) {
     Session.Token = props === null || props === void 0 ? void 0 : props.token;
     Session.NumberFormatCode = props === null || props === void 0 ? void 0 : props.numberFormatCode;
     Session.isMasterNumberClickable = props === null || props === void 0 ? void 0 : props.isMasterNumberClickable;
+    Session.UseAgGridPivot = !!props.useAgGridPivot;
+    Session.AgGridLicenseKey = props.agGridLicenseKey;
     setIsPreviewModeActive(props.isPreviewMode);
     props.dataBinding.onGetLayouts.subscribe(function (layouts) {
       Widgetlayouts.current = layouts;
@@ -4822,6 +5773,10 @@ var Dashboard = function Dashboard(props) {
       setWidgetlayoutsState(deepClone(Widgetlayouts.current));
     });
   }, []);
+  React.useEffect(function () {
+    Session.UseAgGridPivot = !!props.useAgGridPivot;
+    Session.AgGridLicenseKey = props.agGridLicenseKey;
+  }, [props.useAgGridPivot, props.agGridLicenseKey]);
   React.useEffect(function () {
     if (props.widgetData) {
       setPreviewWidget(JSON.parse(JSON.stringify(props.widgetData)));
@@ -4892,13 +5847,15 @@ var Dashboard = function Dashboard(props) {
     },
     onSelectDataPoint: function onSelectDataPoint() {
       return true;
-    }
+    },
+    useAgGridPivot: props.useAgGridPivot
   }))) : React.createElement("div", {
     className: 'dl-full-hight'
   }, React.createElement("div", {
     className: 'dl-dashboard-body'
   }, React.createElement(DashboardDesigner, {
     onSelectDataPoint: props.onSelectDataPoint,
+    useAgGridPivot: props.useAgGridPivot,
     Widgetlayouts: widgetlayoutsState,
     dataBinding: props.dataBinding,
     editMode: isInEditMode,