@datarailsshared/dr_renderer 1.2.8 → 1.2.9

package/src/dr_pivottable.js

@@ -3,15 +3,19 @@ let initDRPivotTable = function($, window, document) {
     var slice = [].slice;
     var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-    var DRPivotData, sortDateStrings, getSort, processKey, SubtotalRenderer, getFormattedNumber, largeToSmallSort, NovixRenderer;
-
-    var delim = " , ";
+    var DRPivotData, sortDateStrings, getSort, processKey, SubtotalRenderer, getFormattedNumber, largeToSmallSort, largeToSmallSortByAbsolute, NovixRenderer;
     const newTableColors = ['rgb(127, 196, 255)', 'rgb(200, 243,243)', 'rgb(247, 161, 173)', 'rgb(255, 237, 178)', 'rgb(221, 239, 255)',
         'rgb(171, 216, 255)', 'rgb(174, 231, 220)', 'rgb(227, 255, 236)', 'rgb(162, 215, 227)', 'rgb(223, 239, 236)'];
+
+    var delim = " , ";
     const useNewUx = document.ReportHippo && document.ReportHippo && document.ReportHippo.user &&
       document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
     // const numberOfRows = 500; // change to activate the handsontable when num of rows bigger then this.
 
+    const isFlatKeyInPivotKeys = function(keys, flatKey) {
+        return keys.some(key => key.join(delim) === flatKey);
+    };
+
     DRPivotData = (function(superClass) {
         extend(DRPivotData, superClass);
 
@@ -91,6 +95,7 @@ let initDRPivotTable = function($, window, document) {
 
         DRPivotData.prototype.arrSort = function(attrs) {
             var a, sortersArr;
+            const sortByValueAttrs = this.sortByValueAttrs;
             sortersArr = (function() {
                 var l, len1, results;
                 results = [];
@@ -100,11 +105,21 @@ let initDRPivotTable = function($, window, document) {
                 }
                 return results;
             }).call(this);
+
             return function(a, b) {
                 var comparison, i, sorter;
                 for (i in sortersArr) {
-                    sorter = sortersArr[i];
-                    comparison = sorter(a[i], b[i]);
+                    const index = parseInt(i);
+                    sorter = sortersArr[index];
+                    if (sortByValueAttrs.indexOf(attrs[index]) !== -1) {
+
+                        // For case current Field attrs[index] is sorted by value we are concatenating values passed to sorter function
+                        // Concatenation is done from first field in a block (first axis or first series) until current field index.
+                        // Cause for this case sorting will be as list of these concatenated strings (which is prepared in getSortingByValueOrderList)
+                        comparison = sorter(a.slice(0, index + 1).join(','), b.slice(0, index + 1).join(','));
+                    } else {
+                        comparison = sorter(a[index], b[index]);
+                    }
                     if (comparison !== 0) {
                         return comparison;
                     }
@@ -113,7 +128,7 @@ let initDRPivotTable = function($, window, document) {
             };
         };
 
-        processKey = function(record, totals, keys, attrs, getAggregator) {
+        processKey = function(record, totals, keys, attrs, containsAverage, containsOthers, getAggregator) {
             var addKey, attr, flatKey, k, key, len, ref;
             key = [];
             addKey = false;
@@ -125,7 +140,17 @@ let initDRPivotTable = function($, window, document) {
                     totals[flatKey] = getAggregator(key.slice());
                     addKey = true;
                 }
-                totals[flatKey].push(record);
+
+                if (containsAverage || containsOthers) {
+                    if (containsAverage && !containsOthers && key[0] === 'DR_Average') {
+                        totals[flatKey].push(record);
+                    }
+                    if (containsOthers && !containsAverage && key[0] === 'DR_Others') {
+                        totals[flatKey].push(record);
+                    }
+                } else {
+                    totals[flatKey].push(record);
+                }
             }
             if (addKey) {
                 keys.push(key);
@@ -133,54 +158,79 @@ let initDRPivotTable = function($, window, document) {
             return key;
         };
 
+        DRPivotData.prototype.getAttrsKeys = function(record, attrs) {
+            const keys = [];
+            for (let k = 0; k < attrs.length; k++) {
+                const attr = attrs[k];
+                if (record.hasOwnProperty(attr)) {
+                    keys.push(record[attr] != null ? record[attr] : 'null');
+                }
+            }
+            return keys;
+        }
+
+        DRPivotData.prototype.getFlatKey = function(record, attrs) {
+            const keys = this.getAttrsKeys(record, attrs);
+            return keys.join(delim);
+        }
+
         DRPivotData.prototype.processRecord = function(record) {
-            var colKey, fColKey, fRowKey, flatColKey, flatRowKey, i, j, k, m, n, ref, results, rowKey;
-            rowKey = [];
-            colKey = [];
-            this.allTotal.push(record);
-            rowKey = processKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, (function(_this) {
+            if (!this.notFirst) {
+                this.keysLength = _.filter(_.keys(record), key => !_.includes(['data_types', 'formats', 'values_formats'], key)).length - 1;
+                this.notFirst = true;
+            }
+            let getRowAggregator = (function(_this) {
                 return function(key) {
                     return _this.aggregator(_this, key, []);
                 };
-            })(this));
-            colKey = processKey(record, this.colTotals, this.colKeys, this.colAttrs, (function(_this) {
+            })(this);
+            let getColAggregator = (function(_this) {
                 return function(key) {
                     return _this.aggregator(_this, [], key);
                 };
-            })(this));
-            m = rowKey.length - 1;
-            n = colKey.length - 1;
-            if (m < 0 || n < 0) {
-                return;
+            })(this);
+
+            const rowKey = this.getAttrsKeys(record, this.rowAttrs);
+            const colKey = this.getAttrsKeys(record, this.colAttrs);
+
+            let flatRowKey = rowKey.join(delim);
+            let flatColKey = colKey.join(delim);
+
+            if (this.keysLength === rowKey.length + colKey.length) {
+                if (!this.isKeysSortingDoneOnBackendSide && !isFlatKeyInPivotKeys(this.rowKeys, flatRowKey)) {
+                    this.rowKeys.push(rowKey);
+                }
+                if (!this.isKeysSortingDoneOnBackendSide && !isFlatKeyInPivotKeys(this.colKeys, flatColKey)) {
+                    this.colKeys.push(colKey);
+                }
             }
-            results = [];
-            for (i = k = 0, ref = m; 0 <= ref ? k <= ref : k >= ref; i = 0 <= ref ? ++k : --k) {
-                fRowKey = rowKey.slice(0, i + 1);
-                flatRowKey = fRowKey.join(delim);
+
+            if (!colKey.length && !rowKey.length) {
+                this.allTotal.push(record);
+            } else if (!colKey.length && rowKey.length) {
+                if (!this.rowTotals[flatRowKey]) {
+                    this.rowTotals[flatRowKey] = getRowAggregator(rowKey.slice());
+                    this.rowTotals[flatRowKey].push(record);
+                }
+            } else if (!rowKey.length && colKey.length) {
+                if (!this.colTotals[flatColKey]) {
+                    this.colTotals[flatColKey] = getColAggregator(colKey.slice());
+                    this.colTotals[flatColKey].push(record);
+                }
+            } else {
                 if (!this.tree[flatRowKey]) {
                     this.tree[flatRowKey] = {};
                 }
-                results.push((function() {
-                    var l, ref1, results1;
-                    results1 = [];
-                    for (j = l = 0, ref1 = n; 0 <= ref1 ? l <= ref1 : l >= ref1; j = 0 <= ref1 ? ++l : --l) {
-                        fColKey = colKey.slice(0, j + 1);
-                        flatColKey = fColKey.join(delim);
-                        if (!this.tree[flatRowKey][flatColKey]) {
-                            this.tree[flatRowKey][flatColKey] = this.aggregator(this, fRowKey, fColKey);
-                        }
-                        results1.push(this.tree[flatRowKey][flatColKey].push(record));
-                    }
-                    return results1;
-                }).call(this));
+                this.tree[flatRowKey][flatColKey] = this.aggregator(this, rowKey, colKey);
+                this.tree[flatRowKey][flatColKey].push(record);
             }
-            return results;
         };
 
         DRPivotData.prototype.getAggregator = function(rowKey, colKey) {
             var agg, flatColKey, flatRowKey;
-            flatRowKey = rowKey.join(delim);
-            flatColKey = colKey.join(delim);
+            let hebrewMarkRegex = new RegExp(String.fromCharCode(8206), 'g');
+            flatRowKey = rowKey.join(delim).replace(hebrewMarkRegex, '');
+            flatColKey = colKey.join(delim).replace(hebrewMarkRegex, '');
             if (rowKey.length === 0 && colKey.length === 0) {
                 agg = this.allTotal;
             } else if (rowKey.length === 0) {
@@ -286,7 +336,11 @@ let initDRPivotTable = function($, window, document) {
         };
     };
 
-    largeToSmallSort = function(as, bs) {
+    largeToSmallSortByAbsolute = function (as, bs) {
+        return largeToSmallSort(as , bs, true);
+    }
+
+    largeToSmallSort = function(as, bs, is_abs = false) {
         var a, a1, b, b1, rd, rx, rz;
         rx = /(\d+)|(\D+)/g;
         rd = /\d/;
@@ -298,6 +352,11 @@ let initDRPivotTable = function($, window, document) {
             if (isNaN(bs)) {
                 return 1;
             }
+
+            if (is_abs) {
+                return Math.abs(bs) - Math.abs(as);
+            }
+
             return bs - as;
         }
         a = String(as).toLowerCase();
@@ -337,13 +396,10 @@ let initDRPivotTable = function($, window, document) {
             switch (opts.chartOptions.negative_numbers.value) {
                 case 'red_minus':
                     return '<span style="color: red; fill: red;">' + aggregator.format(val, format_argument) + '</span>';
-                    break;
                 case 'absolute':
                     return '(' + aggregator.format(Math.abs(val), format_argument) + ')';
-                    break;
                 case 'red_absolute':
                     return '<span style="color: red; fill: red;">(' + aggregator.format(Math.abs(val), format_argument) + ')</span>';
-                    break;
                 default:
                     return aggregator.format(val, format_argument);
             }
@@ -379,20 +435,45 @@ let initDRPivotTable = function($, window, document) {
             return resultsArr;
         } else {
             let tooMuch = false;
-            if (pvtData && (pvtData.rowKeys.length > 1000 || pvtData.colKeys.length > 500) &&
-                (!opts.show_more_function_cols || !opts.show_more_function_cols)) {
+            const show_more_than_thousand_rows = _.get(opts, 'chartOptions.table_options.show_more_than_thousand_rows', false);
+            if (pvtData &&
+                (pvtData.rowKeys.length > 1000 || pvtData.colKeys.length > 500) &&
+                (!opts.show_more_function_cols || !opts.show_more_function_cols) &&
+                !show_more_than_thousand_rows) {
                 pvtData.rowKeys = [];
                 pvtData.colKeys = [];
                 tooMuch = true;
+                opts.error_has_occurred = true;
+                opts.error_params = $.pivotUtilities.errorHandling.placeholders.tooMuchData;
             }
-            return SubtotalRenderer(pvtData, opts, charttype, tooMuch);
+            return SubtotalRenderer(pvtData, opts, charttype, tooMuch, opts.error_params);
         }
     }
 
-    SubtotalRenderer = function(pivotData, opts, charttype, tooMuch = false) {
-        var addClass, allTotal, arrowCollapsed, arrowExpanded, buildColHeaderHeader, buildColHeaderHeaders, buildColHeaderHeadersClickEvents, buildColHeaders, buildColTotals, buildColTotalsHeader, buildGrandTotal, buildRowHeaderHeaders, buildRowHeaderHeadersClickEvents, buildRowHeaders, buildRowTotalsHeader, buildValues, classColCollapsed, classColExpanded, classColHide, classColShow, classCollapsed, classExpanded, classRowCollapsed, classRowExpanded, classRowHide, classRowShow, clickStatusCollapsed, clickStatusExpanded, colAttrs, colDisableAfter, colKeys, colTotals, collapseCol, collapseColsAt, collapseHideDescendantRow, collapseRow, collapseRowsAt, collapseShowColSubtotal, collapseShowRowSubtotal, createElement, defaults, expandChildCol, expandChildRow, expandCol, expandColsAt, expandHideColSubtotal, expandHideRowSubtotal, expandRow, expandRowsAt, expandShowColSubtotal, expandShowRowSubtotal, getTableEventHandlers, hasClass, hideDescendantCol, isColDisable, isColDisableExpandCollapse, isColHideOnExpand, isRowDisable, isRowDisableExpandCollapse, isRowHideOnExpand, main, getSubtotalInBrackets, processKeys, encodeHtmlEntities, ref, ref1, ref2, ref3, ref4, ref5, ref6, ref7, removeClass, replaceClass, rowAttrs, rowDisableAfter, rowKeys, rowTotals, setAttributes, showChildCol, showChildRow, toggleCol, toggleColHeaderHeader, toggleRow, toggleRowHeaderHeader, tree, assumptionSubscribe;
-        var createTotalValsBolder, createGrandTotalBolder, getHeaderColorProperties, colorizeRowLabelHeaders, colorizeTableIfNeed, valueNoDashes;
-        var edit_assumptions;
+    SubtotalRenderer = function(pivotData, opts, charttype, tooMuch = false, error_params) {
+        var addClass, allTotal, arrowCollapsed, arrowExpanded, buildColHeaderHeader, buildColHeaderHeaders, buildColHeaderHeadersClickEvents, buildColHeaders, buildColTotals, buildColTotalsHeader, buildGrandTotal, buildRowHeaderHeaders, buildRowHeaderHeadersClickEvents, buildRowHeaders, buildRowTotalsHeader, buildValues, classColCollapsed, classColExpanded, classColHide, classColShow, classCollapsed, classExpanded, classRowCollapsed, classRowExpanded, classRowHide, classRowShow, clickStatusCollapsed, clickStatusExpanded, colAttrs, colDisableAfter, colKeys, colTotals, collapseCol, collapseColsAt, collapseHideDescendantRow, collapseRow, collapseRowsAt, collapseShowColSubtotal, collapseShowRowSubtotal, applyInlineStyles, createElement, defaults, expandChildCol, expandChildRow, expandCol, expandColsAt, expandHideColSubtotal, expandHideRowSubtotal, expandRow, expandRowsAt, expandShowColSubtotal, expandShowRowSubtotal, getTableEventHandlers, hasClass, hideDescendantCol, isColDisable, isColDisableExpandCollapse, isColHideOnExpand, isRowDisable, isRowDisableExpandCollapse, isRowHideOnExpand, main, getSubtotalInBrackets, processKeys, encodeHtmlEntities, ref, ref1, ref2, ref3, ref4, ref5, ref6, ref7, removeClass, replaceClass, rowAttrs, rowDisableAfter, rowKeys, rowTotals, setAttributes, showChildCol, showChildRow, toggleCol, toggleColHeaderHeader, toggleRow, toggleRowHeaderHeader, tree, subscribeToClick;
+        var createTotalValsBolder, createGrandTotalBolder, getHeaderColorProperties, colorizeRowLabelHeaders, colorizeTableIfNeed, valueNoDashes, getColorsWithOffsetForTable, offsetColors, handleFreezePanesScroll, selectFreezableElements, removeRowHeaderNullValue;
+        var getAdditionalAggregation, buildAdditionalHeaderCols, buildAdditionalHeaderRows, buildAdditionalColValues, buildAdditionalRowValues, buildAdditionalRowTotals, buildAdditionalColTotals;
+        var additionalFieldsCol, additionalFieldsRow, additionalFieldsList;
+        var getExistingAggregator;
+
+        var horizontalFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' horizontal-freeze-pane' : '';
+        var verticalFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' vertical-freeze-pane' : '';
+        var axisFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' axis-freeze-pane' : '';
+
+        var elementToTransform = {
+            X: horizontalFreezePaneClass,
+            Y: verticalFreezePaneClass,
+            XY: axisFreezePaneClass,
+        }
+
+        additionalFieldsCol = [];
+        additionalFieldsRow = [];
+        additionalFieldsList = [
+            {key: 'DR_Average', name: 'DR_Average'},
+            {key: 'DR_Others', name: _.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others'}
+        ];
+        $.pivotUtilities.additionalFieldsList = additionalFieldsList;
 
         defaults = {
             table: {
@@ -425,7 +506,6 @@ let initDRPivotTable = function($, window, document) {
         if(opts.chartOptions.table_options.start_collapsed_columns) {
             opts.collapseColsAt = 0;
         }
-        edit_assumptions = opts.chartOptions.edit_assumptions;
         isRowDisable = (ref = opts.rowSubtotalDisplay) != null ? ref.disableSubtotal : void 0;
         isRowHideOnExpand = (ref1 = opts.rowSubtotalDisplay) != null ? ref1.hideOnExpand : !opts.chartOptions.table_options.show_subtotals_for_rows;
         isRowDisableExpandCollapse = (ref2 = opts.rowSubtotalDisplay) != null ? ref2.disableExpandCollapse : void 0;
@@ -437,13 +517,21 @@ let initDRPivotTable = function($, window, document) {
         arrowCollapsed = opts.arrowCollapsed != null ? opts.arrowCollapsed : opts.arrowCollapsed = '<i class="fa fa-plus dr-icon-add"></i> ';
         arrowExpanded = opts.arrowExpanded != null ? opts.arrowExpanded : opts.arrowExpanded = '<i class="fa fa-minus dr-icon-minus"></i> ';
         colAttrs = pivotData.colAttrs;
+        rowAttrs = pivotData.rowAttrs;
+        rowKeys = pivotData.getRowKeys();
 
         if (charttype == 'column-chart' || charttype == 'column-chart-stacked') {
-            colAttrs = [colAttrs[0]];
+            if (_.get(opts, 'chartOptions.table_options.transpose_table', false)) {
+                rowAttrs = [rowAttrs[0]];
+                if (rowKeys && rowKeys.length) {
+                    rowKeys = rowKeys.map( function(_, index) {
+                        return [rowKeys[index][0]];
+                    });
+                }
+            } else if (colAttrs.length) {
+                colAttrs = [colAttrs[0]];
+            }
         }
-
-        rowAttrs = pivotData.rowAttrs;
-        rowKeys = pivotData.getRowKeys();
         colKeys = pivotData.getColKeys();
         tree = pivotData.tree;
         rowTotals = pivotData.rowTotals;
@@ -510,19 +598,87 @@ let initDRPivotTable = function($, window, document) {
             return value;
         };
 
+        offsetColors = function (offset, colorsArray) {
+            if (offset > opts.defaults_colors.length) {
+                offset = offset % opts.defaults_colors;
+            }
+            var colors_to_return = JSON.parse(JSON.stringify(colorsArray));
+            for (var i = 0; i < offset; i++) {
+                colors_to_return.push(colors_to_return.shift());
+            }
+            return colors_to_return;
+        }
+
+        getColorsWithOffsetForTable = function (value) {
+            var colors = [];
+
+            if (opts.paletteOptions && opts.paletteOptions.widgetPalette) {
+                const mc_palette = _.find(_.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
+                colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
+            } else if (opts.paletteOptions && opts.paletteOptions.dashboardPalette && opts.paletteOptions.dashboardPalette.colors) {
+                colors = opts.paletteOptions.dashboardPalette.colors;
+            } else {
+                colors = newTableColors;
+            }
+
+            var isNewDesign = useNewUx && opts.chartOptions.table_options.use_new_table_design;
+            if (value) {
+                var offset = parseInt(value);
+                if (offset) {
+                    if (isNewDesign) {
+                        return offsetColors(offset, colors);
+                    } else {
+                        return offsetColors(offset, opts.defaults_colors);
+                    }
+                }
+            }
+            return isNewDesign ? colors : opts.defaults_colors;
+        }
+
+        function invertColors(color) {
+            const hexLuminance = 186;
+            const rgbLuminance = 0.5;
+            let isHex = color[0] === '#';
+            let r;
+            let g;
+            let b;
+            if (!isHex) {
+                let rgbaColorParts = color.replace(/[^0-9.,]/g, '').split(',');
+                r = rgbaColorParts[0]/255;
+                g = rgbaColorParts[1]/255;
+                b = rgbaColorParts[2]/255;
+            } else {
+                color = color.slice(1);
+
+                if (color.length === 3) {
+                    color = color[0].repeat(2) + color[1].repeat(2) + color[2].repeat(2);
+                } else if (color.length !== 6) {
+                    return "#FFFFFF";
+                }
+                r = parseInt(color.slice(0, 2), 16);
+                g = parseInt(color.slice(2, 4), 16);
+                b = parseInt(color.slice(4, 6), 16);
+            }
+            return (r * 0.299 + g * 0.587 + b * 0.114) > (isHex ? hexLuminance : rgbLuminance)
+                ? '#000000'
+                : '#FFFFFF';
+        }
+
         colorizeRowLabelHeaders = function(element, cols_count){
             if(opts.chartOptions.table_options.colorize_headers == true &&
                 opts.defaults_colors && opts.defaults_colors.length > 0){
-                if(cols_count > 0)
-                    cols_count = cols_count - 1;
-                var color_to_set = useNewUx && opts.chartOptions.table_options.use_new_table_design ?
-                  newTableColors[cols_count] :
-                  opts.defaults_colors[cols_count];
+                var offsetColor = getColorsWithOffsetForTable(opts.chartOptions.table_options.table_colors_offset);
+                var color_to_set = offsetColor[cols_count];
                 if(color_to_set){
                     element.style.setProperty("background-color", color_to_set, "important");
                     element.style.setProperty("border-color", color_to_set, "important");
-                    element.style.color = useNewUx && opts.chartOptions.table_options.use_new_table_design? '#3a3b39' : '#FFFFFF';
+                    element.style.color = invertColors(color_to_set);
                     element.style.fontWeight = "bold";
+                    if (opts.chartOptions.table_options.freeze_panes && element.firstChild) {
+                        for (const child of element.children) {
+                            child.style.setProperty("background-color", color_to_set, "important");
+                        }
+                    }
                 }
             }
         };
@@ -540,15 +696,19 @@ let initDRPivotTable = function($, window, document) {
         getHeaderColorProperties = function(element, col_number = 0){
             if(opts.chartOptions.table_options.colorize_headers == true &&
                 opts.defaults_colors && opts.defaults_colors.length > 0){
-                var color_to_set = useNewUx && opts.chartOptions.table_options.use_new_table_design ?
-                  newTableColors[col_number] :
-                  opts.defaults_colors[col_number];
+                const offsetColor = getColorsWithOffsetForTable(opts.chartOptions.table_options.table_colors_offset);
+                var color_to_set = offsetColor[col_number];
                 if(color_to_set){
                     element.style.setProperty("background-color", color_to_set, "important");
                     element.style.setProperty("border-color", color_to_set, "important");
                     element.style.setProperty("vertical-align", "baseline");
-                    element.style.color = useNewUx && opts.chartOptions.table_options.use_new_table_design? '#3a3b39' : '#FFFFFF';
+                    element.style.color = invertColors(color_to_set);
                     element.style.fontWeight = "bold";
+                    if (opts.chartOptions.table_options.freeze_panes && element.firstChild) {
+                        for (const child of element.children) {
+                            child.style.setProperty("background-color", color_to_set, "important");
+                        }
+                    }
                 }
             }
         };
@@ -583,6 +743,35 @@ let initDRPivotTable = function($, window, document) {
             }
             return eventHandlers;
         };
+        applyInlineStyles = function(element, className) {
+            const tableDesignOptions = opts.chartOptions.table_design_options;
+            let optionName;
+            if (!className) return element;
+
+            if(element.className){
+                if (_.includes(element.className, 'pvtAxisLabel') ||
+                    _.includes(element.className, 'pvtColLabel')) {
+                    optionName = 'columns';
+                }else if (_.includes(element.className,'pvtRowLabel')) {
+                    optionName = 'rows';
+                } else if (_.includes(element.className,'pvtVal') &&
+                    !_.includes(element.className,'pvtTotal')) {
+                    optionName = 'values';
+                } else if (_.includes(element.className,'colTotal') ||
+                    _.includes(element.className,'rowTotal') ||
+                    _.includes(element.className,'pvtGrandTotal')) {
+                    optionName = 'totals';
+                }
+            }
+
+            if(optionName && tableDesignOptions){
+                element.style.fontSize = tableDesignOptions[optionName + '_font_size'] + 'px';
+                element.style.textAlign = tableDesignOptions[optionName + '_align_text'];
+                element.style.fontFamily = tableDesignOptions[optionName + '_font_style'];
+            }
+
+            return element;
+        }
         createElement = function(elementType, className, textContent, attributes, eventHandlers) {
             var attr, e, event, handler, val;
             e = document.createElement(elementType);
@@ -607,6 +796,7 @@ let initDRPivotTable = function($, window, document) {
                     e.addEventListener(event, handler);
                 }
             }
+            applyInlineStyles(e, className);
             return e;
         };
         setAttributes = function(e, attrs) {
@@ -641,7 +831,7 @@ let initDRPivotTable = function($, window, document) {
             if(!string_val || typeof(string_val) != 'string' ){
                 return string_val;
             }
-            var entityMap = {"'":"&apos;","<":"&lt;",">":"&gt;"," ":"&nbsp;","¡":"&iexcl;","¢":"&cent;","£":"&pound;","¤":"&curren;","¥":"&yen;","¦":"&brvbar;","§":"&sect;","¨":"&uml;","©":"&copy;","ª":"&ordf;","«":"&laquo;","¬":"&not;","®":"&reg;","¯":"&macr;","°":"&deg;","±":"&plusmn;","²":"&sup2;","³":"&sup3;","´":"&acute;","µ":"&micro;","¶":"&para;","·":"&middot;","¸":"&cedil;","¹":"&sup1;","º":"&ordm;","»":"&raquo;","¼":"&frac14;","½":"&frac12;","¾":"&frac34;","¿":"&iquest;","À":"&Agrave;","Á":"&Aacute;","Â":"&Acirc;","Ã":"&Atilde;","Ä":"&Auml;","Å":"&Aring;","Æ":"&AElig;","Ç":"&Ccedil;","È":"&Egrave;","É":"&Eacute;","Ê":"&Ecirc;","Ë":"&Euml;","Ì":"&Igrave;","Í":"&Iacute;","Î":"&Icirc;","Ï":"&Iuml;","Ð":"&ETH;","Ñ":"&Ntilde;","Ò":"&Ograve;","Ó":"&Oacute;","Ô":"&Ocirc;","Õ":"&Otilde;","Ö":"&Ouml;","×":"&times;","Ø":"&Oslash;","Ù":"&Ugrave;","Ú":"&Uacute;","Û":"&Ucirc;","Ü":"&Uuml;","Ý":"&Yacute;","Þ":"&THORN;","ß":"&szlig;","à":"&agrave;","á":"&aacute;","â":"&acirc;","ã":"&atilde;","ä":"&auml;","å":"&aring;","æ":"&aelig;","ç":"&ccedil;","è":"&egrave;","é":"&eacute;","ê":"&ecirc;","ë":"&euml;","ì":"&igrave;","í":"&iacute;","î":"&icirc;","ï":"&iuml;","ð":"&eth;","ñ":"&ntilde;","ò":"&ograve;","ó":"&oacute;","ô":"&ocirc;","õ":"&otilde;","ö":"&ouml;","÷":"&divide;","ø":"&oslash;","ù":"&ugrave;","ú":"&uacute;","û":"&ucirc;","ü":"&uuml;","ý":"&yacute;","þ":"&thorn;","ÿ":"&yuml;","Œ":"&OElig;","œ":"&oelig;","Š":"&Scaron;","š":"&scaron;","Ÿ":"&Yuml;","ƒ":"&fnof;","ˆ":"&circ;","˜":"&tilde;","Α":"&Alpha;","Β":"&Beta;","Γ":"&Gamma;","Δ":"&Delta;","Ε":"&Epsilon;","Ζ":"&Zeta;","Η":"&Eta;","Θ":"&Theta;","Ι":"&Iota;","Κ":"&Kappa;","Λ":"&Lambda;","Μ":"&Mu;","Ν":"&Nu;","Ξ":"&Xi;","Ο":"&Omicron;","Π":"&Pi;","Ρ":"&Rho;","Σ":"&Sigma;","Τ":"&Tau;","Υ":"&Upsilon;","Φ":"&Phi;","Χ":"&Chi;","Ψ":"&Psi;","Ω":"&Omega;","α":"&alpha;","β":"&beta;","γ":"&gamma;","δ":"&delta;","ε":"&epsilon;","ζ":"&zeta;","η":"&eta;","θ":"&theta;","ι":"&iota;","κ":"&kappa;","λ":"&lambda;","μ":"&mu;","ν":"&nu;","ξ":"&xi;","ο":"&omicron;","π":"&pi;","ρ":"&rho;","ς":"&sigmaf;","σ":"&sigma;","τ":"&tau;","υ":"&upsilon;","φ":"&phi;","χ":"&chi;","ψ":"&psi;","ω":"&omega;","ϑ":"&thetasym;","ϒ":"&Upsih;","ϖ":"&piv;","–":"&ndash;","—":"&mdash;","‘":"&lsquo;","’":"&rsquo;","‚":"&sbquo;","“":"&ldquo;","”":"&rdquo;","„":"&bdquo;","†":"&dagger;","‡":"&Dagger;","•":"&bull;","…":"&hellip;","‰":"&permil;","′":"&prime;","″":"&Prime;","‹":"&lsaquo;","›":"&rsaquo;","‾":"&oline;","⁄":"&frasl;","€":"&euro;","ℑ":"&image;","℘":"&weierp;","ℜ":"&real;","™":"&trade;","ℵ":"&alefsym;","←":"&larr;","↑":"&uarr;","→":"&rarr;","↓":"&darr;","↔":"&harr;","↵":"&crarr;","⇐":"&lArr;","⇑":"&UArr;","⇒":"&rArr;","⇓":"&dArr;","⇔":"&hArr;","∀":"&forall;","∂":"&part;","∃":"&exist;","∅":"&empty;","∇":"&nabla;","∈":"&isin;","∉":"&notin;","∋":"&ni;","∏":"&prod;","∑":"&sum;","−":"&minus;","∗":"&lowast;","√":"&radic;","∝":"&prop;","∞":"&infin;","∠":"&ang;","∧":"&and;","∨":"&or;","∩":"&cap;","∪":"&cup;","∫":"&int;","∴":"&there4;","∼":"&sim;","≅":"&cong;","≈":"&asymp;","≠":"&ne;","≡":"&equiv;","≤":"&le;","≥":"&ge;","⊂":"&sub;","⊃":"&sup;","⊄":"&nsub;","⊆":"&sube;","⊇":"&supe;","⊕":"&oplus;","⊗":"&otimes;","⊥":"&perp;","⋅":"&sdot;","⌈":"&lceil;","⌉":"&rceil;","⌊":"&lfloor;","⌋":"&rfloor;","⟨":"&lang;","⟩":"&rang;","◊":"&loz;","♠":"&spades;","♣":"&clubs;","♥":"&hearts;","♦":"&diams;"};
+            var entityMap = {"'":"&apos;","<":"&lt;",">":"&gt;","¡":"&iexcl;","¢":"&cent;","£":"&pound;","¤":"&curren;","¥":"&yen;","¦":"&brvbar;","§":"&sect;","¨":"&uml;","©":"&copy;","ª":"&ordf;","«":"&laquo;","¬":"&not;","®":"&reg;","¯":"&macr;","°":"&deg;","±":"&plusmn;","²":"&sup2;","³":"&sup3;","´":"&acute;","µ":"&micro;","¶":"&para;","·":"&middot;","¸":"&cedil;","¹":"&sup1;","º":"&ordm;","»":"&raquo;","¼":"&frac14;","½":"&frac12;","¾":"&frac34;","¿":"&iquest;","À":"&Agrave;","Á":"&Aacute;","Â":"&Acirc;","Ã":"&Atilde;","Ä":"&Auml;","Å":"&Aring;","Æ":"&AElig;","Ç":"&Ccedil;","È":"&Egrave;","É":"&Eacute;","Ê":"&Ecirc;","Ë":"&Euml;","Ì":"&Igrave;","Í":"&Iacute;","Î":"&Icirc;","Ï":"&Iuml;","Ð":"&ETH;","Ñ":"&Ntilde;","Ò":"&Ograve;","Ó":"&Oacute;","Ô":"&Ocirc;","Õ":"&Otilde;","Ö":"&Ouml;","×":"&times;","Ø":"&Oslash;","Ù":"&Ugrave;","Ú":"&Uacute;","Û":"&Ucirc;","Ü":"&Uuml;","Ý":"&Yacute;","Þ":"&THORN;","ß":"&szlig;","à":"&agrave;","á":"&aacute;","â":"&acirc;","ã":"&atilde;","ä":"&auml;","å":"&aring;","æ":"&aelig;","ç":"&ccedil;","è":"&egrave;","é":"&eacute;","ê":"&ecirc;","ë":"&euml;","ì":"&igrave;","í":"&iacute;","î":"&icirc;","ï":"&iuml;","ð":"&eth;","ñ":"&ntilde;","ò":"&ograve;","ó":"&oacute;","ô":"&ocirc;","õ":"&otilde;","ö":"&ouml;","÷":"&divide;","ø":"&oslash;","ù":"&ugrave;","ú":"&uacute;","û":"&ucirc;","ü":"&uuml;","ý":"&yacute;","þ":"&thorn;","ÿ":"&yuml;","Œ":"&OElig;","œ":"&oelig;","Š":"&Scaron;","š":"&scaron;","Ÿ":"&Yuml;","ƒ":"&fnof;","ˆ":"&circ;","˜":"&tilde;","Α":"&Alpha;","Β":"&Beta;","Γ":"&Gamma;","Δ":"&Delta;","Ε":"&Epsilon;","Ζ":"&Zeta;","Η":"&Eta;","Θ":"&Theta;","Ι":"&Iota;","Κ":"&Kappa;","Λ":"&Lambda;","Μ":"&Mu;","Ν":"&Nu;","Ξ":"&Xi;","Ο":"&Omicron;","Π":"&Pi;","Ρ":"&Rho;","Σ":"&Sigma;","Τ":"&Tau;","Υ":"&Upsilon;","Φ":"&Phi;","Χ":"&Chi;","Ψ":"&Psi;","Ω":"&Omega;","α":"&alpha;","β":"&beta;","γ":"&gamma;","δ":"&delta;","ε":"&epsilon;","ζ":"&zeta;","η":"&eta;","θ":"&theta;","ι":"&iota;","κ":"&kappa;","λ":"&lambda;","μ":"&mu;","ν":"&nu;","ξ":"&xi;","ο":"&omicron;","π":"&pi;","ρ":"&rho;","ς":"&sigmaf;","σ":"&sigma;","τ":"&tau;","υ":"&upsilon;","φ":"&phi;","χ":"&chi;","ψ":"&psi;","ω":"&omega;","ϑ":"&thetasym;","ϒ":"&Upsih;","ϖ":"&piv;","–":"&ndash;","—":"&mdash;","‘":"&lsquo;","’":"&rsquo;","‚":"&sbquo;","“":"&ldquo;","”":"&rdquo;","„":"&bdquo;","†":"&dagger;","‡":"&Dagger;","•":"&bull;","…":"&hellip;","‰":"&permil;","′":"&prime;","″":"&Prime;","‹":"&lsaquo;","›":"&rsaquo;","‾":"&oline;","⁄":"&frasl;","€":"&euro;","ℑ":"&image;","℘":"&weierp;","ℜ":"&real;","™":"&trade;","ℵ":"&alefsym;","←":"&larr;","↑":"&uarr;","→":"&rarr;","↓":"&darr;","↔":"&harr;","↵":"&crarr;","⇐":"&lArr;","⇑":"&UArr;","⇒":"&rArr;","⇓":"&dArr;","⇔":"&hArr;","∀":"&forall;","∂":"&part;","∃":"&exist;","∅":"&empty;","∇":"&nabla;","∈":"&isin;","∉":"&notin;","∋":"&ni;","∏":"&prod;","∑":"&sum;","−":"&minus;","∗":"&lowast;","√":"&radic;","∝":"&prop;","∞":"&infin;","∠":"&ang;","∧":"&and;","∨":"&or;","∩":"&cap;","∪":"&cup;","∫":"&int;","∴":"&there4;","∼":"&sim;","≅":"&cong;","≈":"&asymp;","≠":"&ne;","≡":"&equiv;","≤":"&le;","≥":"&ge;","⊂":"&sub;","⊃":"&sup;","⊄":"&nsub;","⊆":"&sube;","⊇":"&supe;","⊕":"&oplus;","⊗":"&otimes;","⊥":"&perp;","⋅":"&sdot;","⌈":"&lceil;","⌉":"&rceil;","⌊":"&lfloor;","⌋":"&rfloor;","⟨":"&lang;","⟩":"&rang;","◊":"&loz;","♠":"&spades;","♣":"&clubs;","♥":"&hearts;","♦":"&diams;"};
             string_val = string_val.replace(/&/g, '&amp;');
             string_val = string_val.replace(/"/g, '&quot;');
             for (var key in entityMap) {
@@ -652,16 +842,28 @@ let initDRPivotTable = function($, window, document) {
             return string_val;
         };
 
-        processKeys = function(keysArr, className, dimention, attrs) {
+        processKeys = function(keysArr, className, dimention, attrs, formattedKeys) {
+            for (let i = 0; i < keysArr.length; i++) {
+                const additionalField = _.find(additionalFieldsList, {key: keysArr[i][0]})
+
+                if (additionalField) {
+                    dimention === 'rows'
+                        ? additionalFieldsRow.push(additionalField)
+                        : additionalFieldsCol.push(additionalField);
+                }
+            }
+
             var c, headers, k, key, lastCol, lastRow, node, nodePos, r, rMark, ref8, repeats, th, x;
+            const showAllData = opts && opts.chartOptions && opts.chartOptions.table_options && opts.chartOptions.table_options.show_all;
+
             headers = [];
             lastRow = keysArr.length - 1;
             lastCol = keysArr[0].length - 1;
-            if(lastCol > 0 && className == "pvtColLabel" && (charttype == 'column-chart' || charttype == 'column-chart-stacked')){
+            if(lastCol > 0 && className == "pvtColLabel" && !_.get(opts, 'chartOptions.table_options.transpose_table', false) && (charttype == 'column-chart' || charttype == 'column-chart-stacked')){
                 lastCol = 0;
             }
             rMark = [];
-            th = createElement("th", className, valueNoDashes(encodeHtmlEntities(keysArr[0][0]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, 0)));
+            th = createElement("th", className, valueNoDashes(encodeHtmlEntities(formattedKeys[0][0]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, 0)));
             key = [];
             key.push(keysArr[0][0]);
             nodePos = 0;
@@ -681,7 +883,7 @@ let initDRPivotTable = function($, window, document) {
             rMark[0] = node;
             c = 1;
             while (c <= lastCol) {
-                th = createElement("th", className, valueNoDashes(encodeHtmlEntities(keysArr[0][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, c)));
+                th = createElement("th", className, valueNoDashes(encodeHtmlEntities(formattedKeys[0][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, c)));
                 key = key.slice();
                 key.push(keysArr[0][c]);
                 ++nodePos;
@@ -718,7 +920,7 @@ let initDRPivotTable = function($, window, document) {
 
                     if(c === 0 && ((dimention == 'rows' && opts.show_more_function_rows)
                         || (dimention == 'cols' && opts.show_more_function_cols)
-                    ) && headers.length > opts.show_more_max_items)
+                    ) && headers.length > opts.show_more_max_items && !showAllData)
                     {
                         key=['...'];
 
@@ -747,7 +949,7 @@ let initDRPivotTable = function($, window, document) {
                     }
 
 
-                    th = createElement("th", className, valueNoDashes(encodeHtmlEntities(keysArr[r][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, r, c)));
+                    th = createElement("th", className, valueNoDashes(encodeHtmlEntities(formattedKeys[r][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, r, c)));
                     ++nodePos;
                     node = {
                         node: nodePos,
@@ -788,7 +990,7 @@ let initDRPivotTable = function($, window, document) {
             var className, colAttr, textContent, th, clickStatus;
             colAttr = colAttrs[col];
             textContent = opts.labelsConvertFunction(colAttr);
-            className = "pvtAxisLabel";
+            className = "pvtAxisLabel" + axisFreezePaneClass;
             if (col < colAttrs.length - 1) {
                 if (!(isColDisableExpandCollapse || isColDisable || col > colDisableAfter)) {
                     if(opts.collapseColsAt == 0){
@@ -826,13 +1028,14 @@ let initDRPivotTable = function($, window, document) {
                 else{
                     rowSpan = colAttrs.length;
                 }
-                tr.appendChild(createElement("th", null, null, {
+                tr.appendChild(createElement("th", axisFreezePaneClass, null, {
                     colspan: rowAttrs.length,
                     rowspan: rowSpan
                 }));
             }
-            getHeaderColorProperties(tr);
+
             buildColHeaderHeader(thead, colHeaderHeaders, rowAttrs, colAttrs, tr, 0);
+            getHeaderColorProperties(tr);
             results = [];
             for (c = k = 1, ref8 = colAttrs.length; 1 <= ref8 ? k <= ref8 : k >= ref8; c = 1 <= ref8 ? ++k : --k) {
                 if (!(c < colAttrs.length)) {
@@ -840,7 +1043,7 @@ let initDRPivotTable = function($, window, document) {
                 }
                 tr = createElement("tr");
                 if (opts.chartOptions.table_options.colorize_headers == true && rowAttrs.length !== 0) {
-                    tr.appendChild(createElement("th", null, null, {
+                    tr.appendChild(createElement("th", axisFreezePaneClass, null, {
                         colspan: rowAttrs.length
                     }));
                 }
@@ -869,6 +1072,9 @@ let initDRPivotTable = function($, window, document) {
             return results;
         };
         buildColHeaders = function(colHeaderHeaders, colHeaderCols, colHeader, rowAttrs, colAttrs) {
+            const additionalField = _.find(additionalFieldsList, {key: colHeader.key[0]})
+            if (additionalField) return;
+
             var colspan, h, hh, isColSubtotal, k, len, ref8, rowspan, sTh, style, th, tr;
             ref8 = colHeader.children;
             for (k = 0, len = ref8.length; k < len; k++) {
@@ -882,7 +1088,7 @@ let initDRPivotTable = function($, window, document) {
             ++hh.nHeaders;
             tr = hh.tr;
             th = colHeader.th;
-            addClass(th, "col" + colHeader.row + " colcol" + colHeader.col + " " + classColShow);
+            addClass(th, "col" + colHeader.row + " colcol" + colHeader.col + " " + classColShow + verticalFreezePaneClass);
             //getHeaderColorProperties(th, colHeader.col);
             if (isColHideOnExpand || isColDisable || (isColSubtotal && colHeader.col > colDisableAfter)) {
                 colspan = colHeader.leaves;
@@ -916,7 +1122,7 @@ let initDRPivotTable = function($, window, document) {
                     return toggleCol(colHeaderHeaders, colHeaderCols, parseInt(event.currentTarget.getAttribute("data-colnode")));
                 };
                 rowspan = colAttrs.length - (colHeader.col + 1) + (rowAttrs.length !== 0 ? 1 : 0);
-                style = "pvtColLabel pvtColSubtotal " + classColExpanded;
+                style = "pvtColLabel pvtColSubtotal " + classColExpanded + verticalFreezePaneClass;
                 style += " col" + colHeader.row + " colcol" + colHeader.col;
                 if (isColHideOnExpand || isColDisable || colHeader.col > colDisableAfter) {
                     style += " " + classColHide;
@@ -935,6 +1141,9 @@ let initDRPivotTable = function($, window, document) {
             }
             colHeader.clickStatus = clickStatusExpanded;
             tr.appendChild(th);
+            if (opts.chartOptions.table_options.freeze_panes) {
+                getHeaderColorProperties(tr);
+            }
             colHeader.tr = tr;
             return colHeaderCols.push(colHeader);
         };
@@ -946,7 +1155,7 @@ let initDRPivotTable = function($, window, document) {
                 if (!hasProp.call(rowAttrs, i)) continue;
                 rowAttr = rowAttrs[i];
                 textContent = opts.labelsConvertFunction(rowAttr);
-                className = "pvtAxisLabel";
+                className = "pvtAxisLabel" + axisFreezePaneClass;
                 if (i < rowAttrs.length - 1) {
                     className += " expanded";
                     if (!(isRowDisableExpandCollapse || isRowDisable || i > rowDisableAfter)) {
@@ -973,7 +1182,7 @@ let initDRPivotTable = function($, window, document) {
                 });
             }
             if (colAttrs.length !== 0) {
-                th = createElement("th");
+                th = createElement("th", axisFreezePaneClass);
                 tr.appendChild(th);
             }
             colorizeRowLabelHeaders(tr, colAttrs.length);
@@ -1010,7 +1219,7 @@ let initDRPivotTable = function($, window, document) {
                 rowspan = 1;
             }
 
-            th = createElement("th", "pvtTotalLabel rowTotal", opts.localeStrings.totals, {
+            th = createElement("th", "pvtTotalLabel rowTotal" + verticalFreezePaneClass , opts.localeStrings.totals, {
                 rowspan: rowspan
             });
 
@@ -1020,9 +1229,17 @@ let initDRPivotTable = function($, window, document) {
             }
 
             //getHeaderColorProperties(th);
-            return tr.appendChild(th);
+            if (opts.chartOptions.table_options.freeze_panes) {
+                tr.appendChild(th);
+                getHeaderColorProperties(tr);
+            } else {
+                return tr.appendChild(th);
+            }
         };
-        buildRowHeaders = function(tbody, rowHeaderHeaders, rowHeaderRows, rowHeader, rowAttrs, colAttrs, highlighted) {
+        buildRowHeaders = function(tbody, rowHeaderHeaders, rowHeaderRows, rowHeader, rowAttrs, colAttrs, highlighted, hasColLabels) {
+            const additionalField = _.find(additionalFieldsList, {key: rowHeader.key[0]})
+            if (additionalField) return;
+
             var colspan, h, hh, isRowSubtotal, k, len, ref8, results, style, th, tr;
             hh = rowHeaderHeaders.hh[rowHeader.col];
             ++hh.expandedCount;
@@ -1042,7 +1259,7 @@ let initDRPivotTable = function($, window, document) {
             }
 
             isRowSubtotal = rowHeader.children.length !== 0;
-            addClass(th, "row" + rowHeader.row + " rowcol" + rowHeader.col + " " + classRowShow);
+            addClass(th, "row" + rowHeader.row + " rowcol" + rowHeader.col + " " + classRowShow + horizontalFreezePaneClass);
             if (highlighted) {
               addClass(th, "highlighted");
             }
@@ -1052,9 +1269,17 @@ let initDRPivotTable = function($, window, document) {
                 "rowspan": rowHeader.descendants + 1,
                 "colspan": colspan
             });
-            if (opts.chartOptions.table_options.hide_nulls_in_headers && th.textContent === '[null]') {
-                th.textContent = '';
+            if (opts.chartOptions.table_options.hide_nulls_in_headers) {
+                th.textContent = th.textContent.replace('[null]', '');
+            }
+            if (th.textContent === 'DR Others') {
+                th.textContent = _.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others'
             }
+
+            if (th.hasAttribute('data_show_more') && th.colSpan > 0 && !hasColLabels) {
+                th.colSpan = th.colSpan - 1;
+            }
+
             tr.appendChild(th);
             if (isRowSubtotal) {
                 addClass(tr, classRowExpanded);
@@ -1070,6 +1295,7 @@ let initDRPivotTable = function($, window, document) {
                 style = "pvtRowLabel pvtRowSubtotal " + classRowExpanded;
                 style += " row" + rowHeader.row + " rowcol" + rowHeader.col;
                 style += isRowHideOnExpand || isRowDisable || rowHeader.col > rowDisableAfter ? " " + classRowHide : " " + classRowShow;
+                style += horizontalFreezePaneClass;
                 th = createElement("th", style, opts.localeStrings.subtotals, {
                     "colspan": colspan,
                     "data-rownode": rowHeader.node
@@ -1087,12 +1313,184 @@ let initDRPivotTable = function($, window, document) {
             results = [];
             for (k = 0, len = ref8.length; k < len; k++) {
                 h = ref8[k];
-                results.push(buildRowHeaders(tbody, rowHeaderHeaders, rowHeaderRows, h, rowAttrs, colAttrs, highlighted));
+                results.push(buildRowHeaders(tbody, rowHeaderHeaders, rowHeaderRows, h, rowAttrs, colAttrs, highlighted, hasColLabels));
             }
             return results;
         };
+
+        getAdditionalAggregation = function (rowKey, colKey) {
+            if ((tree && tree[rowKey] && tree[rowKey][colKey])
+                && (rowKey !== '...' || colKey !== '...')) {
+                return tree[rowKey][colKey];
+            } else {
+                return {
+                    value: (function() {
+                        return null;
+                    }),
+                    format: function() {
+                        return "";
+                    }
+                };
+            }
+        }
+
+        buildAdditionalHeaderCols = function (tr, rowAttrs, colAttrs) {
+            let rowspan, th;
+
+            rowspan = 1;
+            if (colAttrs.length !== 0) {
+                rowspan = colAttrs.length + (rowAttrs.length === 0 ? 0 : 1);
+            }
+
+            for (let i = 0; i < additionalFieldsCol.length; i++) {
+                const col = additionalFieldsCol[i];
+                th = createElement("th", "pvtColLabel" + verticalFreezePaneClass , col.name, {
+                    rowspan: rowspan
+                });
+
+                if (opts.chartOptions.table_options.freeze_panes) {
+                    tr.appendChild(th);
+                    getHeaderColorProperties(tr);
+                } else {
+                    return tr.appendChild(th);
+                }
+            }
+        };
+
+        buildAdditionalHeaderRows = function (fieldName, rowAttrs, colAttrs) {
+            let colspan, th, tr;
+
+            tr = createElement("tr");
+            colspan = rowAttrs.length + (colAttrs.length === 0 ? 0 : 1);
+            th = createElement("th", "pvtRowLabel" + horizontalFreezePaneClass, fieldName, {
+                colspan: colspan
+            });
+
+            tr.appendChild(th);
+            return tr;
+        };
+
+        buildAdditionalColValues = function (tr, rowKey, rowHeader) {
+            for (let i = 0; i < additionalFieldsCol.length; i++) {
+                const colKey = additionalFieldsCol[i].key;
+                const totalAggregator = getAdditionalAggregation(rowKey, colKey);
+                const val = totalAggregator.value();
+                const formattedValue = getFormattedNumber(val, totalAggregator, opts)
+
+                let className = "pvtVal rowshow colshow";
+                className += " row" + rowHeader.row + " rowcol" + rowHeader.col;
+
+                const td = createElement("td", className, formattedValue, {
+                    "data-value": val,
+                    "data-row": "row" + rowHeader.row,
+                    "data-rowcol": "col" + rowHeader.col,
+                    "data-rownode": rowHeader.node
+                }, getTableEventHandlers(val, rowHeader.key, []));
+
+                if (rowHeader.children.length && rowHeader.clickStatus === 'expanded') {
+                    td.style.display = 'none';
+                }
+
+                tr.appendChild(td)
+            }
+        }
+
+        buildAdditionalRowValues = function (tr, colHeaderCols, rowKey) {
+            for (let i = 0; i < colHeaderCols.length; i++) {
+                const colHeader = colHeaderCols[i];
+                const colKey = colHeader.flatKey;
+                const totalAggregator = getAdditionalAggregation(rowKey, colKey);
+                const val = totalAggregator.value();
+                const formattedValue = getFormattedNumber(val, totalAggregator, opts)
+
+                const className = "pvtVal col" + i + " colcol" + 0;
+                const td = createElement("td", className, formattedValue, {
+                    "data-value": val,
+                    "data-for": "col" + 0,
+                    "data-colnode": "" + i
+                });
+
+                if (colHeader.children.length && colHeader.clickStatus === 'expanded') {
+                    td.style.display = 'none';
+                }
+
+                tr.appendChild(td);
+            }
+
+            if (additionalFieldsCol.length) {
+                for (let i = 0; i < additionalFieldsCol.length; i++) {
+                    const totalAggregator = getAdditionalAggregation(rowKey, additionalFieldsCol[i].key);
+                    const val = totalAggregator.value();
+                    const formattedValue = getFormattedNumber(val, totalAggregator, opts)
+
+                    const className = "pvtVal col" + i + " colcol" + 0;
+                    const td = createElement("td", className, formattedValue, {
+                        "data-value": val,
+                        "data-for": "col" + 0,
+                        "data-colnode": "" + i
+                    });
+
+                    tr.appendChild(td);
+                }
+            }
+
+            if(opts.chartOptions.table_options.show_row_total) {
+                buildAdditionalRowTotals(tr, rowKey)
+            }
+        }
+
+        buildAdditionalRowTotals = function (tr, rowKey) {
+            const totalAggregator = getExistingAggregator(rowTotals, rowKey);
+            const value = totalAggregator.value();
+            const formattedValue = getFormattedNumber(value, totalAggregator, opts)
+
+            let style = "pvtTotal pvtAddFiled rowTotal";
+            const td = createElement("td", style, formattedValue, {
+                "data-value": value
+            });
+
+            tr.appendChild(td);
+        }
+
+        buildAdditionalColTotals = function (tr, rowHeaderRows, colKey, colHeader) {
+            const totalAggregator = getExistingAggregator(colTotals, colKey)
+            const value = totalAggregator.value();
+            const formattedValue = getFormattedNumber(value, totalAggregator, opts);
+
+            if (!colHeader) {
+                colHeader = {}
+            }
+
+            let style = "pvtTotal pvtAddField colTotal";
+            style += " col" + colHeader.row || "-1" + " colcol" + colHeader.col || "-1";
+
+            const td = createElement("td", style, formattedValue, {
+                "data-value": value,
+                "data-rowcol": "col" + colHeader.col || "-1",
+                "data-rownode": "" + colHeader.node || "-1"
+            }, getTableEventHandlers(value, [], colHeader.key || []));
+
+            return td;
+        }
+
+        getExistingAggregator = function (aggregator, key) {
+            if (!aggregator[key]) {
+                return {
+                    value: (function () {
+                        return null;
+                    }),
+                    format: function () {
+                        return "";
+                    }
+                };
+            }
+
+            return aggregator[key];
+        }
+
         buildValues = function(rowHeaderRows, colHeaderCols, rowAttrs, colAttrs) {
             var aggregator, colHeader, eventHandlers, flatColKey, flatRowKey, isColSubtotal, isRowSubtotal, k, l, len, len1, ref8, results, rowHeader, style, td, totalAggregator, tr, val;
+
             results = [];
             for (k = 0, len = rowHeaderRows.length; k < len; k++) {
                 rowHeader = rowHeaderRows[k];
@@ -1138,10 +1536,15 @@ let initDRPivotTable = function($, window, document) {
                     if ((isRowSubtotal && (isRowHideOnExpand || isRowDisable || rowHeader.col > rowDisableAfter)) || (isColSubtotal && (isColHideOnExpand || isColDisable || colHeader.col > colDisableAfter))) {
                         td.style.display = "none";
                     }
-                    assumptionSubscribe(td, rowHeader, rowAttrs, colHeader, colAttrs, val);
+                    subscribeToClick(td, rowHeader, rowAttrs, colHeader, colAttrs, val);
 
                     tr.appendChild(td);
                 }
+
+                if (additionalFieldsCol.length > 0) {
+                    buildAdditionalColValues(tr, flatRowKey, rowHeader);
+                }
+
                 totalAggregator = rowTotals[flatRowKey];
                 if(!totalAggregator){
                     totalAggregator = {
@@ -1171,7 +1574,7 @@ let initDRPivotTable = function($, window, document) {
                     td.style.display = "none";
                 }
 
-                assumptionSubscribe(td, rowHeader, rowAttrs, {key:[], flatKey:''}, colAttrs, val);
+                subscribeToClick(td, rowHeader, rowAttrs, {key:[], flatKey:''}, colAttrs, val);
 
                 if(opts.chartOptions.table_options.show_row_total)
                     tr.appendChild(td);
@@ -1181,43 +1584,7 @@ let initDRPivotTable = function($, window, document) {
             return results;
         };
 
-        assumptionSubscribe = function(td, rowHeader, rowAttrs, colHeader, colAttrs, val){
-            if(edit_assumptions){
-                var filters = [];
-                var i=0;
-                var temp;
-                for(i=0; i<rowHeader.key.length; i++){
-                    temp = {
-                        name: rowAttrs[i],
-                        values: [rowHeader.key[i]],
-                        is_excluded:false
-                    }
-                    filters.push(temp);
-                }
-                for(i=0; i<colHeader.key.length; i++){
-                    temp = {
-                        name: colAttrs[i],
-                        values: [colHeader.key[i]],
-                        is_excluded:false
-                    }
-                    filters.push(temp);
-                }
-                var obj_to_send = {
-                    "flatColKey": colHeader.flatKey,
-                    "flatRowKey": rowHeader.flatKey,
-                    "val": val,
-                    "filters": filters
-                };
-
-                // td.addEventListener('dblclick', function(){
-                //     edit_assumptions.fn(obj_to_send, this);
-                // });
-
-                td.addEventListener('click', function(){
-                    edit_assumptions.fn(obj_to_send, this);
-                });
-            }
-
+        subscribeToClick = function(td, rowHeader, rowAttrs, colHeader, colAttrs, val){
             if(opts.value_drill_down_fn){
                 td.classList.add('clickable');
                 td.addEventListener('click', function(rowKey, colKey, rowAttrs, colAttrs){
@@ -1233,7 +1600,7 @@ let initDRPivotTable = function($, window, document) {
             var colspan, th, tr;
             tr = createElement("tr");
             colspan = rowAttrs.length + (colAttrs.length === 0 ? 0 : 1);
-            th = createElement("th", "pvtTotalLabel colTotal", opts.localeStrings.totals, {
+            th = createElement("th", "pvtTotalLabel colTotal" + horizontalFreezePaneClass, opts.localeStrings.totals, {
                 colspan: colspan
             });
             if (opts.totalFilterElements && opts.totalFilterElements.col_total) {
@@ -1243,13 +1610,13 @@ let initDRPivotTable = function($, window, document) {
             tr.appendChild(th);
             return tr;
         };
-        buildColTotals = function(tr, colHeaderCols, rowAttrs, colAttrs) {
+        buildColTotals = function(tr, colHeaderCols, rowHeaderRows, rowAttrs, colAttrs) {
             var h, isColSubtotal, k, len, results, style, td, totalAggregator, val;
             results = [];
-            createGrandTotalBolder(tr);
             for (k = 0, len = colHeaderCols.length; k < len; k++) {
                 h = colHeaderCols[k];
                 isColSubtotal = h.children.length !== 0;
+
                 totalAggregator = colTotals[h.flatKey];
                 if(!totalAggregator){
                     totalAggregator = {
@@ -1278,25 +1645,42 @@ let initDRPivotTable = function($, window, document) {
                     td.style.display = "none";
                 }
 
-                assumptionSubscribe(td, {key:[], flatKey:''}, rowAttrs, h, colAttrs, val);
+                subscribeToClick(td, {key:[], flatKey:''}, rowAttrs, h, colAttrs, val);
 
                 results.push(tr.appendChild(td));
             }
+
+            if (additionalFieldsCol.length > 0) {
+                for (let i = 0; i < additionalFieldsCol.length; i++) {
+                    const colKey = additionalFieldsCol[i].key;
+
+                    td = buildAdditionalColTotals(tr, rowHeaderRows, colKey, h);
+                    results.push(tr.appendChild(td));
+                }
+            }
+
+            createGrandTotalBolder(tr);
             return results;
         };
         buildGrandTotal = function(result, tr, rowAttrs, colAttrs) {
             var td, totalAggregator, val;
+
             totalAggregator = allTotal;
             val = totalAggregator.value();
             td = createElement("td", "pvtGrandTotal", getFormattedNumber(val, totalAggregator, opts), {
                 "data-value": val
             }, getTableEventHandlers(val, [], []));
             createTotalValsBolder(td);
-            assumptionSubscribe(td, {key:[], flatKey:''}, rowAttrs,  {key:[], flatKey:''}, colAttrs, val);
+            subscribeToClick(td, {key:[], flatKey:''}, rowAttrs,  {key:[], flatKey:''}, colAttrs, val);
 
             tr.appendChild(td);
             return result.appendChild(tr);
         };
+        removeRowHeaderNullValue = function(h) {
+            if (opts.chartOptions.table_options.hide_nulls_in_headers) {
+                h.th.innerHTML = h.th.innerHTML.replace('[null]' , '');
+            }
+        };
         hideDescendantCol = function(d) {
             return $(d.th).closest('table.pvtTable').find("tbody tr td[data-colnode=\"" + d.node + "\"], th[data-colnode=\"" + d.node + "\"]").removeClass(classColShow).addClass(classColHide).css('display', "none");
         };
@@ -1512,6 +1896,9 @@ let initDRPivotTable = function($, window, document) {
                 collapseShowRowSubtotal(h);
                 --rowspan;
             }
+
+            removeRowHeaderNullValue(h);
+
             p = h.parent;
             while (p) {
                 p.th.rowSpan -= rowspan;
@@ -1638,6 +2025,9 @@ let initDRPivotTable = function($, window, document) {
                     expandShowRowSubtotal(h);
                 }
             }
+
+            removeRowHeaderNullValue(h);
+
             p = h.parent;
             while (p) {
                 p.th.rowSpan += rowspan;
@@ -1920,7 +2310,34 @@ let initDRPivotTable = function($, window, document) {
                 return collapseRowsAt(rowHeaderHeaders, rowHeaderRows, rowAttrs, rowAttr);
             }
         };
-        main = function(rowAttrs, rowKeys, colAttrs, colKeys) {
+
+        handleFreezePanesScroll = function(freezableElements) {
+            return function(event) {
+                if (event.target.dataset.canFreezePanes) return;
+
+                const wrapper = event.target;
+
+                const translateY = `translate(0px, ${wrapper.scrollTop}px)`;
+                const translateX = `translate(${wrapper.scrollLeft}px, 0px)`;
+                const translateXY = `translate(${wrapper.scrollLeft}px, ${wrapper.scrollTop}px)`;
+
+                _.forEach(freezableElements, function (element) {
+                    let currentTranslate = translateY;
+                    currentTranslate = element.className.includes(elementToTransform.X) ? translateX : currentTranslate;
+                    currentTranslate = element.className.includes(elementToTransform.XY) ? translateXY : currentTranslate;
+                    element.style.transform = currentTranslate;
+                });
+            }
+        };
+
+        selectFreezableElements = function(wrapper) {
+            const selectString =_.map(_.values(elementToTransform), function (item) {
+                return `.${item.replace(' ', '')}`;
+            }).join(',');
+            return Array.from(wrapper.querySelectorAll(selectString));
+        }
+
+        main = function(rowAttrs, rowKeys, colAttrs, colKeys, pivotData) {
             var c,rowspan, colHeaderCols, colHeaderHeaders, colHeaders, h, k, l, len, len1, result, rowHeaderHeaders, rowHeaderRows, rowHeaders, tbody, thead, tr;
             rowHeaders = [];
             colHeaders = [];
@@ -1929,13 +2346,21 @@ let initDRPivotTable = function($, window, document) {
             colHeaderHeaders = [];
             colHeaderCols = [];
             if (rowAttrs.length > 0 && rowKeys.length > 0) {
-                rowHeaders = processKeys(rowKeys, "pvtRowLabel", 'rows', rowAttrs);
+                const formattedKeys = pivotData.getFormattedRowKeys(rowKeys);
+                rowHeaders = processKeys(rowKeys, "pvtRowLabel", 'rows', rowAttrs, formattedKeys);
             }
             if (colAttrs.length > 0 && colKeys.length > 0) {
-                colHeaders = processKeys(colKeys, "pvtColLabel", 'cols', colAttrs);
+                const formattedKeys = pivotData.getFormattedColKeys(colKeys);
+                colHeaders = processKeys(colKeys, "pvtColLabel", 'cols', colAttrs, formattedKeys);
             }
-            var tableClasses = useNewUx && opts.chartOptions.table_options.use_new_table_design ? 'pvtTable newPvtTable' : 'pvtTable';
-            result = createElement("table", tableClasses , null, {
+            var tableClasses = ['pvtTable'];
+            if (opts.chartOptions.table_options.use_new_table_design) {
+                tableClasses.push('newPvtTable');
+            }
+            if (!pivotData.aggregator().uniq) {
+                tableClasses.push('numbers-to-right');
+            }
+            result = createElement("table", tableClasses.join(' ') , null, {
                 style: "display: none;"
             });
 
@@ -1953,10 +2378,20 @@ let initDRPivotTable = function($, window, document) {
             }
             if (rowAttrs.length > 0) {
                 buildRowHeaderHeaders(thead, rowHeaderHeaders, rowAttrs, colAttrs);
+
+                if (colAttrs.length === 0 && additionalFieldsCol.length > 0) {
+                    buildAdditionalHeaderCols(rowHeaderHeaders.tr, rowAttrs, colAttrs)
+                }
+
                 if (colAttrs.length === 0 && opts.chartOptions.table_options.show_row_total) {
                     buildRowTotalsHeader(rowHeaderHeaders.tr, rowAttrs, colAttrs);
                 }
             }
+
+            if (colAttrs.length > 0 && additionalFieldsCol.length > 0) {
+                buildAdditionalHeaderCols(colHeaderHeaders[0].tr, rowAttrs, colAttrs)
+            }
+
             if (colAttrs.length > 0 && opts.chartOptions.table_options.show_row_total) {
                 buildRowTotalsHeader(colHeaderHeaders[0].tr, rowAttrs, colAttrs);
                 if(opts.chartOptions.table_options.colorize_headers == true){
@@ -1965,24 +2400,44 @@ let initDRPivotTable = function($, window, document) {
                         if(c == colHeaderHeaders.length-1){
                             rowspan = 2;
                         }
-                        colHeaderHeaders[c].tr.appendChild(createElement("th", "", "",{rowspan: rowspan}));
+                        colHeaderHeaders[c].tr.appendChild(createElement("th", verticalFreezePaneClass, "",{rowspan: rowspan}));
+                        if (opts.chartOptions.table_options.freeze_panes) {
+                            getHeaderColorProperties(colHeaderHeaders[c].tr, c);
+                        }
                     }
                 }
             }
             tbody = createElement("tbody");
             result.appendChild(tbody);
+
+            const hasColLabels = !!thead.querySelector('.pvtColLabel');
+
             if (rowAttrs.length > 0) {
                 for (l = 0, len1 = rowHeaders.length; l < len1; l++) {
                     h = rowHeaders[l];
-                    buildRowHeaders(tbody, rowHeaderHeaders, rowHeaderRows, h, rowAttrs, colAttrs, l%2 === 0);
+                    buildRowHeaders(tbody, rowHeaderHeaders, rowHeaderRows, h, rowAttrs, colAttrs, l%2 === 0, hasColLabels);
                 }
             }
             buildRowHeaderHeadersClickEvents(rowHeaderHeaders, rowHeaderRows, rowAttrs);
             buildValues(rowHeaderRows, colHeaderCols, rowAttrs, colAttrs);
+
+            if (additionalFieldsRow.length > 0) {
+                for (let i = 0; i < additionalFieldsRow.length; i++) {
+                    const field = additionalFieldsRow[i];
+                    tr = buildAdditionalHeaderRows(field.name, rowAttrs, colAttrs);
+
+                    if (colAttrs.length > 0) {
+                        buildAdditionalRowValues(tr, colHeaderCols, field.key);
+                    }
+
+                    tbody.appendChild(tr);
+                }
+            }
+
             if(opts.chartOptions.table_options.show_column_total){
                 tr = buildColTotalsHeader(rowAttrs, colAttrs);
                 if (colAttrs.length > 0) {
-                    buildColTotals(tr, colHeaderCols, rowAttrs, colAttrs);
+                    buildColTotals(tr, colHeaderCols, rowHeaderRows, rowAttrs, colAttrs);
                 }
                 if(opts.chartOptions.table_options.show_row_total)
                     buildGrandTotal(tbody, tr, rowAttrs, colAttrs);
@@ -2021,11 +2476,16 @@ let initDRPivotTable = function($, window, document) {
             }
 
             if (tooMuch) {
-                resultsArr.push($('<div class="noData"><i class="fa fa-info"></i> There are too many rows to display in the table.<br>Please filter or change the table type in options.</div>'));
+                const defaultPlaceholder = $('<div class="noData"><i class="fa fa-info"></i> There are too many rows to display in the table.<br>Please filter or change the table type in options.</div>');
+
+                resultsArr.push($.pivotUtilities.errorHandling.getErrorPlaceholder(error_params) || defaultPlaceholder);
             } else {
                 var tableContainer = document.createElement("div");
                 tableContainer.className = "pivot-div";
                 tableContainer.appendChild(result);
+                if (opts.chartOptions.table_options.freeze_panes) {
+                    tableContainer.onscroll = handleFreezePanesScroll(selectFreezableElements(tableContainer));
+                }
                 resultsArr.push(tableContainer);
             }
 
@@ -2036,7 +2496,7 @@ let initDRPivotTable = function($, window, document) {
 
             return wrapper;
         };
-        return main(rowAttrs, rowKeys, colAttrs, colKeys);
+        return main(rowAttrs, rowKeys, colAttrs, colKeys, pivotData);
     };
     // $.pivotUtilities.subtotal_renderers = SubtotalRenderer;
     $.pivotUtilities.subtotal_renderers = NovixRenderer;
@@ -2045,6 +2505,7 @@ let initDRPivotTable = function($, window, document) {
     $.pivotUtilities.getFormattedNumber = getFormattedNumber;
     $.pivotUtilities.sortDateStrings = sortDateStrings;
     $.pivotUtilities.largeToSmallSort = largeToSmallSort;
+    $.pivotUtilities.largeToSmallSortByAbsolute = largeToSmallSortByAbsolute;
     $.pivotUtilities.getPivotDataModel = function(input, opts){ return new DRPivotData(input, opts); }
     $.pivotUtilities.getPivotTableFormula = function(rowData, opts, func, colFields, rowFields, aggregationDefaults, utils) {
         let totalStr = 'Grand Totals';
@@ -2081,7 +2542,7 @@ let initDRPivotTable = function($, window, document) {
                 headerRow.push(colAttrs[i]);
                 // Add row keys
                 _.forEach(colKeys, function (keys) {
-                    headerRow.push(utils.getHeaderValue(keys[i], colFields[i].type));
+                    headerRow.push(utils.getHeaderValue(keys[i], colFields[i].type, opts.dateValuesDictionary));
                     // Calc formulas in first time
                     if (i === 0) {
                         colFormulas.push(utils.createKeysFormula(colFields, keys, colFormulas.length + 1, true));
@@ -2099,7 +2560,7 @@ let initDRPivotTable = function($, window, document) {
                 // Formatting row keys
                 let keysFormatted = [];
                 for (let k = 0; k < rowKeys[i].length; k++) {
-                    keysFormatted.push(utils.getHeaderValue(rowKeys[i][k], rowFields[k].type))
+                    keysFormatted.push(utils.getHeaderValue(rowKeys[i][k], rowFields[k].type, opts.dateValuesDictionary))
                 }
                 // Add row keys
                 matrix.push(keysFormatted.concat(null));
@@ -2123,7 +2584,7 @@ let initDRPivotTable = function($, window, document) {
                 let headerRow = [colAttrs[i]];
                 // Add keys
                 _.forEach(colKeys, function (keys) {
-                    headerRow.push(utils.getHeaderValue(keys[i], colFields[i].type));
+                    headerRow.push(utils.getHeaderValue(keys[i], colFields[i].type, opts.dateValuesDictionary));
                     // Calc formulas in first time
                     if (i === 0) {
                         colFormulas.push(utils.createKeysFormula(colFields, keys, colFormulas.length + 1, true));
@@ -2153,7 +2614,7 @@ let initDRPivotTable = function($, window, document) {
                 // Formatting row keys
                 let keysFormatted = [];
                 for (let k = 0; k < rowKeys[i].length; k++) {
-                    keysFormatted.push(utils.getHeaderValue(rowKeys[i][k], rowFields[k].type))
+                    keysFormatted.push(utils.getHeaderValue(rowKeys[i][k], rowFields[k].type, opts.dateValuesDictionary))
                 }
                 // Add row keys
                 matrix.push(keysFormatted);