@datarailsshared/dr_renderer 1.2.44-beta → 1.2.46-beta

package/package.json

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

package/src/dr_pivottable.js

@@ -161,11 +161,11 @@ let initDRPivotTable = function($, window, document) {
             return key;
         };
 
-        DRPivotData.prototype.processRecord = function(record, isUserHasPermission) {
+        DRPivotData.prototype.processRecord = function(record, useTotalsCalculation) {
             var colKey, fColKey, fRowKey, flatColKey, flatRowKey, i, j, k, m, n, ref, results, rowKey;
             rowKey = [];
             colKey = [];
-            if (isUserHasPermission) {
+            if (useTotalsCalculation) {
                 rowKey = newProcessKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, (function(_this) {
                     return function(key) {
                         return _this.aggregator(_this, key, []);
@@ -439,12 +439,13 @@ let initDRPivotTable = function($, window, document) {
                 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;
@@ -2187,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,9 +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}});
@@ -2840,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']);
@@ -2860,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]);
                     }
                 },
@@ -3024,7 +3040,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.ignoreValue = true;
                         }
 
-                        if (data.isUserHasPermission) {
+                        if (useTotalsCalculation) {
                             return this.sum = val;
                         } else {
                             return this.sum += val;
@@ -3091,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) {
@@ -3123,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 () {
@@ -3184,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) {
@@ -3216,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) {
@@ -3278,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) {
@@ -3311,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++;
                     }
                 },
@@ -3782,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);
         }
 
@@ -3790,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);
         }
 
@@ -4353,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});
+            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);
 
@@ -4708,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',

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
@@ -626,7 +671,6 @@ let initPivotTable = function($, window, document) {
             this.sortKeys = bind(this.sortKeys, this);
             this.arrSort = bind(this.arrSort, this);
             this.input = input;
-            this.isUserHasPermission = opts.userHasPermission;
             this.aggregator = (ref = opts.aggregator) != null ? ref : aggregatorTemplates.count()();
             this.aggregatorName = (ref1 = opts.aggregatorName) != null ? ref1 : "Count";
             this.colAttrs = (ref2 = opts.cols) != null ? ref2 : [];
@@ -649,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, _this.isUserHasPermission);
+                        return _this.processRecord(record, useTotalsCalculation);
                     }
                 };
             })(this));
@@ -891,7 +935,8 @@ let initPivotTable = function($, window, document) {
         naturalSort: naturalSort,
         numberFormat: numberFormat,
         sortAs: sortAs,
-        PivotData: PivotData
+        PivotData: PivotData,
+        errorHandling: errorHandling,
     };
 
     /*

package/src/published_items_renderer.js

@@ -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';
           });