@datarailsshared/dr_renderer 1.2.64 → 1.2.68

package/package.json

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

package/src/dr_pivottable.js

@@ -127,10 +127,10 @@ let initDRPivotTable = function($, window, document) {
                 }
 
                 if (containsAverage || containsOthers) {
-                    if (containsAverage && key[0] === 'DR_Average') {
+                    if (containsAverage && !containsOthers && key[0] === 'DR_Average') {
                         totals[flatKey].push(record);
                     }
-                    if (containsOthers && key[0] === 'DR_Others') {
+                    if (containsOthers && !containsAverage && key[0] === 'DR_Others') {
                         totals[flatKey].push(record);
                     }
                 } else {
@@ -485,7 +485,9 @@ let initDRPivotTable = function($, window, document) {
     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;
+        var getAdditionalAggregation, buildAdditionalHeaderCols, buildAdditionalHeaderRows, buildAdditionalColValues, buildAdditionalRowValues, buildAdditionalRowTotals, buildAdditionalColTotals;
+        var additionalFieldsCol, additionalFieldsRow, additionalFieldsList;
+        var edit_assumptions, getExistingAggregator;
 
         var horizontalFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' horizontal-freeze-pane' : '';
         var verticalFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' vertical-freeze-pane' : '';
@@ -497,6 +499,14 @@ let initDRPivotTable = function($, window, document) {
             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: {
                 clickCallback: null
@@ -796,6 +806,16 @@ let initDRPivotTable = function($, window, document) {
         };
 
         processKeys = function(keysArr, className, dimention, attrs) {
+            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;
 
@@ -1015,6 +1035,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++) {
@@ -1177,6 +1200,9 @@ let initDRPivotTable = function($, window, document) {
             }
         };
         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;
@@ -1254,8 +1280,167 @@ let initDRPivotTable = function($, window, document) {
             }
             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, []));
+
+                tr.appendChild(td)
+            }
+        }
+
+        buildAdditionalRowValues = function (tr, colHeaderCols, rowKey) {
+            for (let i = 0; i < colHeaderCols.length; i++) {
+                const colKey = colHeaderCols[i].flatKey;
+                const totalAggregator = getAdditionalAggregation(rowKey, colKey);
+                const val = totalAggregator.value();
+                const formattedValue = getFormattedNumber(val, totalAggregator, opts)
+
+                let className = " col" + i + " colcol" + 0;
+                const td = createElement("td", className, formattedValue, {
+                    "data-value": val,
+                    "data-for": "col" + 0,
+                    "data-colnode": "" + i
+                });
+
+                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)
+
+                    let className = " 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);
+
+            let style = "pvtTotal pvtAddField colTotal";
+            style += " col" + colHeader.row + " colcol" + colHeader.col;
+
+            const td = createElement("td", style, formattedValue, {
+                "data-value": value,
+                "data-rowcol": "col" + colHeader.col,
+                "data-rownode": "" + colHeader.node
+            }, 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];
@@ -1305,6 +1490,11 @@ let initDRPivotTable = function($, window, document) {
 
                     tr.appendChild(td);
                 }
+
+                if (additionalFieldsCol.length > 0) {
+                    buildAdditionalColValues(tr, flatRowKey, rowHeader);
+                }
+
                 totalAggregator = rowTotals[flatRowKey];
                 if(!totalAggregator){
                     totalAggregator = {
@@ -1406,12 +1596,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 = [];
             for (k = 0, len = colHeaderCols.length; k < len; k++) {
                 h = colHeaderCols[k];
                 isColSubtotal = h.children.length !== 0;
+
                 totalAggregator = colTotals[h.flatKey];
                 if(!totalAggregator){
                     totalAggregator = {
@@ -1444,11 +1635,22 @@ let initDRPivotTable = function($, window, document) {
 
                 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), {
@@ -2154,10 +2356,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){
@@ -2186,10 +2398,24 @@ let initDRPivotTable = function($, window, document) {
             }
             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);

package/src/highcharts_renderer.js

@@ -1,6 +1,10 @@
 let getHighchartsRenderer = function ($, document, Highcharts, default_colors, highchartsRenderer,
                                       DataFormatter, lodash, moment_lib) {
 
+    if(!lodash){
+        lodash = _;
+    }
+
     let useNewUx = false;
     let useTotalsCalculation = false;
     if (document.ReportHippo && document.ReportHippo && document.ReportHippo.user) {
@@ -19,10 +23,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     }
 
-    if(!lodash){
-        lodash = _;
-    }
-
     if(!moment_lib){
         moment_lib = moment;
     }
@@ -41,6 +41,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         highchartsRenderer.variance_color = default_colors.variance_color;
     }
 
+    const mobileBrowserRegex = new RegExp([
+        '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
+        '|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/',
+        '|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino',
+    ].join(''), 'i');
+    highchartsRenderer.isMobile = mobileBrowserRegex.test(navigator.userAgent);
+
     highchartsRenderer.highcharts_theme = {
         "colors": highchartsRenderer.defaults_colors,
         "chart": {
@@ -1425,7 +1432,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.encodeHTMLBrackets = function (string) {
-        return string.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+        return string.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     };
 
     highchartsRenderer.addSecondYAxis = function (pivotData, chartOptions, additionOptions, opts) {
@@ -4261,6 +4268,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
 
             if (typeof (value) != 'number') {
+                const drAdditionalField = _.find($.pivotUtilities.additionalFieldsList, {key: value});
+                if (drAdditionalField && drAdditionalField.key)
+                    return drAdditionalField.key;
+
                 value = 0;
             }
 
@@ -6624,12 +6635,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             options = {};
         } else {
             options = options.replace(/(\r\n|\n|\r)/gm, "");
-            try {
-                options = JSON.parse(options);
-            } catch (e) {
-                options = options.replaceAllC("{u'", "{'").replaceAllC(": u'", ": '").replaceAllC(", u'", ", '").replaceAllC("'", "\"")
-                options = JSON.parse(options);
-            }
+            options = JSON.parse(options);
         }
         return options;
     };
@@ -7415,6 +7421,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         enabled: false,
      };
 
+     if ((!additionOptions.legends_position || additionOptions.legends_position.value !== 'none') && highchartsRenderer.isMobile) {
+         return topPosition;
+     }
+
      if (additionOptions.legends_position && additionOptions.legends_position.value) {
        switch (additionOptions.legends_position.value) {
          case 'top':