@datarailsshared/dr_renderer 1.2.43-beta → 1.2.45-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.43-beta",
+  "version": "1.2.45-beta",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/dataformatter.js

@@ -1003,6 +1003,10 @@ var DataFormatterImpl = function () {
 
                 // Call function
                 result = this.memoized[pattern].call(this, n, type);
+
+                if (result.value === result.pattern) {
+                    result.value = n;
+                }
             }
             catch (e) {
 

package/src/dr_pivottable.js

@@ -133,21 +133,75 @@ let initDRPivotTable = function($, window, document) {
             return key;
         };
 
-        DRPivotData.prototype.processRecord = function(record) {
+        let newProcessKey = function (record, totals, keys, attrs, getAggregator) {
+            var addKey, attr, flatKey, k, key, len, ref;
+            key = [];
+            addKey = false;
+            for (k = 0, len = attrs.length; k < len; k++) {
+                attr = attrs[k];
+                if (record.hasOwnProperty(attr)) {
+                    key.push((ref = record[attr]));
+                    flatKey = key.join(delim);
+                }
+                if (totals[flatKey] && totals[flatKey].isChangeable) {
+                    continue;
+                }
+                if (!flatKey) return [];
+                if (!totals[flatKey]) {
+                    totals[flatKey] = getAggregator(key.slice());
+                    addKey = true;
+                } else {
+                    totals[flatKey] = getAggregator(key.slice());
+                    totals[flatKey].push(record);
+                }
+            }
+            if (addKey) {
+                keys.push(key);
+            }
+            return key;
+        };
+
+        DRPivotData.prototype.processRecord = function(record, useTotalsCalculation) {
             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) {
-                return function(key) {
-                    return _this.aggregator(_this, key, []);
-                };
-            })(this));
-            colKey = processKey(record, this.colTotals, this.colKeys, this.colAttrs, (function(_this) {
-                return function(key) {
-                    return _this.aggregator(_this, [], key);
-                };
-            })(this));
+            if (useTotalsCalculation) {
+                rowKey = newProcessKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, (function(_this) {
+                    return function(key) {
+                        return _this.aggregator(_this, key, []);
+                    };
+                })(this));
+                colKey = newProcessKey(record, this.colTotals, this.colKeys, this.colAttrs, (function(_this) {
+                    return function(key) {
+                        return _this.aggregator(_this, [], key);
+                    };
+                })(this));
+
+                if (!colKey.length && !rowKey.length) {
+                    this.allTotal.push(record);
+                }
+                if (!colKey.length && rowKey.length === 1) {
+                    this.rowTotals[rowKey[0]].push(record);
+                    this.rowTotals[rowKey[0]].isChangeable = true;
+                }
+                if (!rowKey.length && colKey.length === 1) {
+                    this.colTotals[colKey[0]].push(record);
+                    this.colTotals[colKey[0]].isChangeable = true;
+                }
+            } else {
+                this.allTotal.push(record);
+                rowKey = processKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, (function(_this) {
+                    return function(key) {
+                        return _this.aggregator(_this, key, []);
+                    };
+                })(this));
+                colKey = processKey(record, this.colTotals, this.colKeys, this.colAttrs, (function(_this) {
+                    return function(key) {
+                        return _this.aggregator(_this, [], key);
+                    };
+                })(this));
+            }
+
             m = rowKey.length - 1;
             n = colKey.length - 1;
             if (m < 0 || n < 0) {
@@ -384,12 +438,14 @@ let initDRPivotTable = function($, window, document) {
                 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) {
+    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, 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, getColorsWithOffsetForTable, offsetColors, handleFreezePanesScroll, selectFreezableElements, removeRowHeaderNullValue;
         var edit_assumptions;
@@ -2001,6 +2057,8 @@ let initDRPivotTable = function($, window, document) {
 
         handleFreezePanesScroll = function(freezableElements) {
             return function(event) {
+                if (event.target.dataset.canFreezePanes) return;
+
                 const wrapper = event.target;
 
                 const translateY = `translate(0px, ${wrapper.scrollTop}px)`;
@@ -2130,7 +2188,9 @@ 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, useNewUx) || defaultPlaceholder);
             } else {
                 var tableContainer = document.createElement("div");
                 tableContainer.className = "pivot-div";

package/src/highcharts_renderer.js

@@ -1,8 +1,12 @@
 let getHighchartsRenderer = function ($, document, Highcharts, default_colors, highchartsRenderer,
                                       DataFormatter, lodash, moment_lib) {
 
-    const useNewUx = document.ReportHippo && document.ReportHippo && document.ReportHippo.user &&
-      document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
+    let useNewUx = false;
+    let useTotalsCalculation = false;
+    if (document.ReportHippo && document.ReportHippo && document.ReportHippo.user) {
+        useTotalsCalculation = _.includes(document.ReportHippo.user.features, 'enable_server_totals_calculation');
+        useNewUx = document.ReportHippo.user.organization && document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
+    }
     const textColor = "#151a41";
     const chartLabelColor = "#cfd7dd";
 
@@ -721,9 +725,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         if (to_match) {
-            resultsArr.push($('<div class="noData"><i class="' + (useNewUx ? 'noData-image' : 'fa fa-info') + '"></i> Too much data to show</div>'));
+            resultsArr.push(highchartsRenderer.getWidgetPlaceholder(highchartsRenderer.widgetPlaceholders.tooMuchData));
         } else {
-            resultsArr.push($('<div class="noData"><i class="' + (useNewUx ? 'noData-image' : 'fa fa-info') + '"></i> no data</div>'));
+            resultsArr.push(highchartsRenderer.getWidgetPlaceholder(highchartsRenderer.widgetPlaceholders.nodata));
         }
 
         temp_result.html(resultsArr);
@@ -731,6 +735,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return temp_result;
     };
 
+    highchartsRenderer.getWidgetPlaceholder = function(placeholder) {
+        const defaultPlaceholder = $('<div class="noData"><i class="' + (useNewUx ? 'noData-image' : 'fa fa-info') + '"></i> no data</div>');
+        return $.pivotUtilities.errorHandling.getErrorPlaceholder(placeholder, useNewUx) || defaultPlaceholder;
+    }
+
     highchartsRenderer.ptCreateElementAndDraw = function (chartOptions, opts) {
         if (lodash.get(opts, 'paletteOptions.widgetPalette', null)) {
             const mc_palette = lodash.find(lodash.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
@@ -820,8 +829,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         if (!seriesDataLength && !chartOptions.onlyText) {
             result = highchartsRenderer.getNoDataResult(chartOptions);
+            opts.error_has_occurred = true;
+            opts.error_params = highchartsRenderer.widgetPlaceholders.nodata;
         } else if (!chartOptions.onlyText && chartOptions.series && toMatch) {
             result = highchartsRenderer.getNoDataResult(chartOptions, toMatch);
+            opts.error_has_occurred = true;
+            opts.error_params = highchartsRenderer.widgetPlaceholders.tooMuchData;
         } else {
             chartOptions = highchartsRenderer.updateChartOptions(chartOptions, opts);
             chartOptions = highchartsRenderer.updateChartOptions(chartOptions, {credits: {enabled: false}});
@@ -2547,7 +2560,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 style = {};
             }
         }
+
+        if(typeof style !== 'object' || style === null){
+            style = {};
+        }
+
         style.fontWeight = useNewUx ? 'normal' : 'bold';
+
         return style;
     }
 
@@ -2833,6 +2852,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 has_errors: false,
                 widget_values_format: widget_values_format,
                 calculated_formats: calculated_info.formats,
+                isChangeable: false,
                 push: function (record) {
                     if (record.hasOwnProperty('data_types') && $.isArray(record['data_types'])) {
                         this.data_types = this.data_types.concat(record['data_types']);
@@ -2853,7 +2873,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
                         this.ignoreValue = true;
                     }
-                    if (!isNaN(parseFloat(record[attr]))) {
+
+                    if (useTotalsCalculation && !isNaN(parseFloat(record[attr]))) {
+                        return this.sum = parseFloat(record[attr]);
+                    } else if (!isNaN(parseFloat(record[attr]))) {
                         return this.sum += parseFloat(record[attr]);
                     }
                 },
@@ -2984,6 +3007,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 has_errors: false,
                 widget_values_format: widget_values_format,
                 calculated_formats: calculated_info.formats,
+                isChangeable: false,
                 push: function (record) {
                     if (record.hasOwnProperty('data_types') && record['data_types']) {
                         if (record['data_types'].length > 0) {
@@ -3016,7 +3040,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.ignoreValue = true;
                         }
 
-                        return this.sum += val;
+                        if (useTotalsCalculation) {
+                            return this.sum = val;
+                        } else {
+                            return this.sum += val;
+                        }
                     } else {
                         return this.sum = NaN;
                     }
@@ -3079,6 +3107,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 has_errors: false,
                 widget_values_format: widget_values_format,
                 calculated_formats: calculated_info.formats,
+                isChangeable: false,
                 push: function (record) {
                     if (record.hasOwnProperty('data_types') && record['data_types']) {
                         if (record['data_types'].length > 0) {
@@ -3111,7 +3140,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
                             this.ignoreValue = true;
                         }
-                        return this.val = Math.min(x, (ref = this.val) != null ? ref : x);
+                        if (useTotalsCalculation) {
+                            return this.val = x;
+                        } else {
+                            return this.val = Math.min(x, (ref = this.val) != null ? ref : x);
+                        }
                     }
                 },
                 value: function () {
@@ -3172,6 +3205,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 has_errors: false,
                 widget_values_format: widget_values_format,
                 calculated_formats: calculated_info.formats,
+                isChangeable: false,
                 push: function (record) {
                     if (record.hasOwnProperty('data_types') && record['data_types']) {
                         if (record['data_types'].length > 0) {
@@ -3204,8 +3238,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
                             this.ignoreValue = true;
                         }
-                        return this.val = Math.max(x, (ref = this.val) != null ? ref : x);
-                    }
+
+                        if (useTotalsCalculation) {
+                            return this.val = x;
+                        } else {
+                            return this.val = Math.min(x, (ref = this.val) != null ? ref : x);
+                        }                    }
                 },
                 value: function () {
                     if (this.ignoreValue) {
@@ -3266,6 +3304,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 has_errors: false,
                 widget_values_format: widget_values_format,
                 calculated_formats: calculated_info.formats,
+                isChangeable: false,
                 push: function (record) {
                     if (record.hasOwnProperty('data_types') && record['data_types']) {
                         if (record['data_types'].length > 0) {
@@ -3299,7 +3338,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.ignoreValue = true;
                         }
 
-                        this.sum += parseFloat(x);
+
+                        if (useTotalsCalculation) {
+                            this.sum = parseFloat(x);
+                        } else {
+                            this.sum += parseFloat(x);
+                        }
+
                         return this.len++;
                     }
                 },
@@ -3459,6 +3504,30 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         filter = (a) => a > bottomx;
                 }
                 break;
+            case "filter_smallest":
+                const smallest_sumOfFields = lodash.reduce(totals, (acc, curr) => acc += curr.sum, 0);
+                const smallest = Math.floor((smallest_sumOfFields * vals[0])/100);
+
+                if (is_absolute)
+                    filter = (a) =>  Math.abs(a) > smallest;
+                else
+                    filter = (a) =>  a > smallest;
+                break;
+            case "filter_largest":
+                const largest_sumOfFields = lodash.reduce(totals, (acc, curr) => acc += curr.sum, 0);
+                const largest = Math.floor((largest_sumOfFields * vals[0])/100);
+
+                if (is_absolute)
+                    filter = (a) =>  Math.abs(a) < largest;
+                else
+                    filter = (a) =>  a < largest;
+                break;
+            case "filter_out_zero":
+                if (is_absolute)
+                    filter = (a) =>  Math.abs(a) == 0;
+                else
+                    filter = (a) =>  a == 0;
+                break;
             default:
 
         }
@@ -3709,6 +3778,30 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return to_return;
     };
 
+    highchartsRenderer.checkFreezePanesAvaliable = function (pivotView) {
+        if (!pivotView || !pivotView.querySelector) {
+            return;
+        }
+
+        const tableContainer = pivotView.querySelector('.pivot-div');
+        const tableHead = pivotView.querySelector('table.pvtTable thead');
+        const tableHeadChildren = tableHead ? tableHead.children[0] : null;
+        const trChildren = tableHeadChildren ? tableHeadChildren.children : [];
+        let thWidth = 0;
+
+        for (let th of trChildren) {
+            if (th.classList.contains('axis-freeze-pane') || th.classList.contains('horizontal-freeze-pane')) {
+                thWidth += th.offsetWidth;
+            }
+        }
+
+        if (thWidth >= tableContainer.offsetWidth) {
+            tableContainer.dataset.canFreezePanes = 'false';
+        } else if (thWidth < tableContainer.offsetWidth &&  tableContainer.dataset.canFreezePanes) {
+            delete tableContainer.dataset.canFreezePanes;
+        }
+    };
+
     highchartsRenderer.rhPivotView = function (rowData, options, isTable = false) {
         if (!rowData || !rowData) {
             if (options.onlyOptions) {
@@ -3722,6 +3815,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
+            options.error_has_occurred = true;
+            options.error_params = highchartsRenderer.widgetPlaceholders.nodata;
             return highchartsRenderer.getNoDataResult(options.rendererOptions);
         }
 
@@ -3730,6 +3825,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
+            options.error_has_occurred = true;
+            options.error_params = highchartsRenderer.widgetPlaceholders.tooMuchData;
             return highchartsRenderer.getNoDataResult(options.rendererOptions, true);
         }
 
@@ -4168,7 +4265,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             options.chartOptions.legends_position = { value: 'none' };
             delete options.chartOptions.chart.hideLegends;
         }
-        if (['pie-chart', 'pie-chart-drilldown'].includes(type)) {
+        if (lodash.includes(['pie-chart', 'pie-chart-drilldown'], type)) {
             if (options.chartOptions && options.chartOptions.label) {
                 if (options.chartOptions.label.only_value) {
                     options.chartOptions.label.show_percentage_in_labels = false;
@@ -4293,6 +4390,60 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         exTableOptions.pivot.calculatedValues = highchartsRenderer.objectCopyJsonMethod(exTableOptions.calculated_values || []);
     };
 
+    highchartsRenderer.addTemplateDataToDynamicRangeOptions = function (selectedTemplate, dynamicRangeOptions) {
+        highchartsRenderer.setWidgetFieldsToTemplate(selectedTemplate);
+
+        var fields = highchartsRenderer.objectCopyJsonMethod(selectedTemplate.widget_fields);
+        var fieldOb;
+        var filterFields = [];
+        var selectedFields = [];
+
+        lodash.forEach(dynamicRangeOptions.filters, function (filterObj) {
+            fieldOb = lodash.find(fields, {id: filterObj.field});
+            if (fieldOb && filterObj.values && filterObj.values.datetype && filterObj.values.datetype === 'list') {
+                filterObj.values = filterObj.values.val
+            } else if (fieldOb && filterObj.values && filterObj.values.datetype && filterObj.values.datetype !== 'list') {
+                fieldOb.values = filterObj.values;
+            } else if (fieldOb && filterObj.values && filterObj.values.type === 'advanced') {
+                fieldOb.values = filterObj.values;
+            }
+            if (fieldOb && filterObj.values && filterObj.values instanceof Array) {
+                if (filterObj.is_excluded == true) {
+                    fieldOb.excludes = filterObj.values;
+                } else {
+                    fieldOb.includes = filterObj.values;
+                }
+            }
+            if (filterObj.allow_nulls && fieldOb) {
+                fieldOb.allow_nulls = filterObj.allow_nulls;
+            }
+        });
+
+        // fill selected fields
+        lodash.forEach(dynamicRangeOptions.fields, function (valObj) {
+            fieldOb = lodash.find(fields, {id: valObj.field_id});
+            if (fieldOb) {
+                selectedFields.push(fieldOb);
+                lodash.remove(fields, {id: fieldOb.id});
+            }
+        });
+
+        // fill filter fields
+        lodash.forEach(dynamicRangeOptions.filters, function (valObj) {
+            fieldOb = lodash.find(fields, {id: valObj.field});
+            if (fieldOb) {
+                filterFields.push(fieldOb);
+                lodash.remove(fields, {id: fieldOb.id});
+            }
+        });
+
+        dynamicRangeOptions.pivot = {};
+        dynamicRangeOptions.pivot.fieldsArray = fields;
+        dynamicRangeOptions.pivot.selectedFieldsArray = selectedFields;
+        dynamicRangeOptions.pivot.filtersArray = filterFields;
+        dynamicRangeOptions.pivot.calculatedValues = highchartsRenderer.objectCopyJsonMethod(dynamicRangeOptions.calculated_values || []);
+    }
+
     highchartsRenderer.addTemplateDataToFunctionOptions = function (selectedTemplate, functionOptions) {
         highchartsRenderer.setWidgetFieldsToTemplate(selectedTemplate);
 
@@ -4648,6 +4799,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return valToReturn;
     };
 
+    highchartsRenderer.widgetPlaceholders = Object.assign({}, $.pivotUtilities.errorHandling.placeholders);
+
     highchartsRenderer.suboptions = {
         'default_show': {
             category_class: 'google-visualization-charteditor-mini-more',
@@ -6579,7 +6732,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         const isCustomSorting = widget.options.sortingFields && Array.isArray(widget.options.sortingFields) && widget.options.sortingFields.length > 0;
         if (isCustomSorting) {
             lodash.forEach(datesFields, function (field) {
-                const fieldToSort = widget.options.sortingFields.find(element => element.id === field.id);
+                const fieldToSort = lodash.find(widget.options.sortingFields, element => element.id === field.id);
                 field.sorting = fieldToSort ? fieldToSort.sorting : field.sorting;
             });
         }
@@ -6626,7 +6779,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         if (isCustomSorting) {
             lodash.forEach(rowsAndCols, function (field) {
-                const fieldToSort = widget.options.sortingFields.find(element => element.id === field.id);
+                const fieldToSort = lodash.find(widget.options.sortingFields, element => element.id === field.id);
                 field.sorting = fieldToSort ? fieldToSort.sorting : field.sorting;
             });
         }

package/src/pivottable.js

@@ -7,7 +7,7 @@ let initPivotTable = function($, window, document) {
     /*
     Utilities
      */
-    var PivotData, addSeparators, aggregatorTemplates, aggregators, dayNamesEn, derivers, getSort, locales, mthNamesEn, naturalSort, numberFormat, pivotTableRenderer, rd, renderers, rx, rz, sortAs, usFmt, usFmtInt, usFmtPct, zeroPad;
+    var PivotData, addSeparators, aggregatorTemplates, aggregators, dayNamesEn, derivers, getSort, locales, mthNamesEn, naturalSort, numberFormat, pivotTableRenderer, rd, renderers, rx, rz, sortAs, usFmt, usFmtInt, usFmtPct, zeroPad, errorHandling;
     addSeparators = function(nStr, thousandsSep, decimalSep) {
         var rgx, x, x1, x2;
         nStr += '';
@@ -20,6 +20,10 @@ let initPivotTable = function($, window, document) {
         }
         return x1 + x2;
     };
+    let useTotalsCalculation = false;
+    if (document.ReportHippo && document.ReportHippo && document.ReportHippo.user) {
+        useTotalsCalculation = _.includes(document.ReportHippo.user.features, 'enable_server_totals_calculation');
+    }
     numberFormat = function(opts) {
         var defaults;
         defaults = {
@@ -610,6 +614,47 @@ let initPivotTable = function($, window, document) {
         }
         return naturalSort;
     };
+    errorHandling = {
+        placeholders: {
+            nodata: {
+                title: 'No Data Available',
+                text: 'This might happen because of a global filter or a change in the underlying data',
+                btnText: '',
+                class: 'nodata',
+            },
+            noPermission: {
+                title: 'No Permission',
+                text: 'You do not have permission to view the data',
+                btnText: 'Request Permission',
+                class: 'no-permission',
+            },
+            tooMuchData: {
+                title: 'There is too much data. Please edit this widget',
+                text: '',
+                btnText: 'Edit Widget',
+                class: 'too-much-data',
+            },
+            noPublishItem: {
+                title: 'We can’t find the published item in the source file',
+                text: '',
+                btnText: 'Go to filebox',
+                class: 'no-publish-item',
+            },
+        },
+        getErrorPlaceholder: function(placeholder, useNewUx = true) {
+            if (placeholder && typeof placeholder === 'object') {
+                return $(`
+                    <div class="noData">
+                        <div class="noData-title">${placeholder.title}</div>
+                        <i class="noData-image ${useNewUx ? placeholder.class : 'fa fa-info'}"></i>
+                        <div class="noData-text">${placeholder.text}</div>
+                        <div class="noData-error-action"></div>
+                    </div>
+                `);
+            }
+            return null;
+        },
+    };
 
     /*
     Data Model class
@@ -648,7 +693,7 @@ let initPivotTable = function($, window, document) {
             PivotData.forEachRecord(this.input, this.derivedAttributes, (function(_this) {
                 return function(record) {
                     if (_this.filter(record)) {
-                        return _this.processRecord(record);
+                        return _this.processRecord(record, useTotalsCalculation);
                     }
                 };
             })(this));
@@ -890,7 +935,8 @@ let initPivotTable = function($, window, document) {
         naturalSort: naturalSort,
         numberFormat: numberFormat,
         sortAs: sortAs,
-        PivotData: PivotData
+        PivotData: PivotData,
+        errorHandling: errorHandling,
     };
 
     /*
@@ -1821,4 +1867,4 @@ let initPivotTable = function($, window, document) {
     };
 };
 
-module.exports = initPivotTable;
+module.exports = initPivotTable;

package/src/published_items_renderer.js

@@ -15,9 +15,9 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
 
   publishedItemsRenderer.resizeTable = function (options, window) {
     options.alreadySetTimeout = null;
-    const publish_item_image = document.getElementById('publish_item_image');
-    const table = document.getElementsByTagName("table")[0];
-    const body = document.getElementsByTagName("body")[0];
+    const publish_item_image = window.document.getElementById('publish_item_image');
+    const table = window.document.getElementsByTagName("table")[0];
+    const body = window.document.getElementsByTagName("body")[0];
     let body_zoom = body.style.zoom;
     body_zoom = parseFloat(body_zoom);
 
@@ -124,8 +124,11 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     const metaData = options.inputValuesData ? options.inputValuesData[name] : null;
     let newValue = inputElement.value;
     if (metaData) {
-      if (metaData.type === 'editInput')
+      if (metaData.type === 'editInput') {
         newValue = parseFloat(newValue);
+      } else if (metaData.type === 'editInputPercent') {
+        newValue = parseFloat(newValue) + '%';
+      }
 
       if (metaData.value !== newValue) {
         metaData.value = newValue;
@@ -158,19 +161,14 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
             }, 1)
           });
 
-          if (inputMetaData.type === 'editInputPercent')
-            inEl.setAttribute("type", "text");
-          else if (inputMetaData.type === 'editInput')
-            inEl.setAttribute("type", "number");
-
+          inEl.setAttribute("type", "number");
           inEl.setAttribute("name", inputMetaData.name);
           inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
-          inEl.value = inputMetaData.value;
+          inEl.value = inputMetaData.type === 'editInputPercent' ? parseFloat(inputMetaData.value.replace('%', '')) : inputMetaData.value;
           inEl.addEventListener("focusout", function (event) {
             event.preventDefault();
             publishedItemsRenderer.changedInputElement(event, scope, options);
             inEl.style.display = 'none';
-            labelEl.innerText = inEl.value;
             labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inEl.value).value : inputMetaData.value;
             labelEl.style.display = 'block';
           });
@@ -190,7 +188,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
           break;
         case "dateInput":
           let dateEl = document.createElement("DIV");
-          const format = inputMetaData.format.toUpperCase() || 'MM/DD/YYYY';
+          const format = inputMetaData.format ? inputMetaData.format.toUpperCase() : 'MM/DD/YYYY';
           const formattedDate = formatValue('d', format, inputMetaData.value).value
           dateEl.innerHTML = '<label class="value" style="cursor: pointer;">' + formattedDate + '</label>';
           tdElement.appendChild(dateEl);