@datarailsshared/dr_renderer 1.2.63 → 1.2.67

package/package.json

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

package/src/dr_pivottable.js

@@ -146,7 +146,7 @@ let initDRPivotTable = function($, window, document) {
         DRPivotData.prototype.processRecord = function(record, useTotalsCalculation) {
             if (useTotalsCalculation) {
                 if (!this.notFirst) {
-                    this.keysLength = Object.keys(record).length - 1;
+                    this.keysLength = _.keys(record).length - 1;
                     this.notFirst = true;
                 }
                 let getRowAggregator = (function(_this) {
@@ -213,9 +213,9 @@ let initDRPivotTable = function($, window, document) {
             var colKey, fColKey, fRowKey, flatColKey, flatRowKey, i, j, k, m, n, ref, results, rowKey;
             rowKey = [];
             colKey = [];
-            const recordValues = Object.values(record);
-            const containsAverage = recordValues.includes('DR_Average');
-            const containsOthers = recordValues.includes('DR_Others');
+            const recordValues = _.values(record);
+            const containsAverage = _.includes(recordValues, 'DR_Average');
+            const containsOthers = _.includes(recordValues, 'DR_Others');
             if (!containsAverage && !containsOthers) {
                 this.allTotal.push(record);
             }
@@ -485,6 +485,8 @@ 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 getAdditionalAggregation, buildAdditionalHeaderCols, buildAdditionalHeaderRows, buildAdditionalColValues, buildAdditionalRowValues, buildAdditionalRowTotals, buildAdditionalColTotals;
+        var additionalFieldsCol, additionalFieldsRow, additionalFieldsList;
         var edit_assumptions;
 
         var horizontalFreezePaneClass = opts.chartOptions.table_options.freeze_panes ? ' horizontal-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,143 @@ 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) {
+            let totalRowValue = 0;
+
+            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)
+                totalRowValue += +formattedValue;
+
+                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, totalRowValue)
+            }
+        }
+
+        buildAdditionalRowTotals = function (tr, totalRowValue) {
+            let style = "pvtTotal pvtAddFiled rowTotal";
+
+            const td = createElement("td", style, totalRowValue, {
+                "data-value": totalRowValue
+            });
+
+            tr.appendChild(td);
+        }
+
+        buildAdditionalColTotals = function (tr, rowHeaderRows, colKey, colHeader) {
+            let othersVal = 0;
+            let val;
+
+            for (let i = 0; i < rowHeaderRows.length; i++) {
+                const rowKey = rowHeaderRows[i].flatKey;
+                const totalAggregator = getAdditionalAggregation(rowKey, colKey);
+                val = totalAggregator.value();
+
+                othersVal += +getFormattedNumber(val, totalAggregator, opts);
+            }
+
+            let style = "pvtTotal pvtAddField colTotal";
+            style += " col" + colHeader.row + " colcol" + colHeader.col;
+
+            const td = createElement("td", style, othersVal, {
+                "data-value": othersVal,
+                "data-rowcol": "col" + colHeader.col,
+                "data-rownode": "" + colHeader.node
+            }, getTableEventHandlers(othersVal, [], colHeader.key));
+
+
+            return td;
+        }
+
         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 +1466,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 +1572,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 +1611,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), {
@@ -2115,7 +2293,7 @@ let initDRPivotTable = function($, window, document) {
         };
 
         selectFreezableElements = function(wrapper) {
-            const selectString =_.map(Object.values(elementToTransform), function (item) {
+            const selectString =_.map(_.values(elementToTransform), function (item) {
                 return `.${item.replace(' ', '')}`;
             }).join(',');
             return Array.from(wrapper.querySelectorAll(selectString));
@@ -2154,10 +2332,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 +2374,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,10 +1,14 @@
 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) {
-        useTotalsCalculation = _.includes(document.ReportHippo.user.features, 'enable_server_totals_calculation');
+        useTotalsCalculation = lodash.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";
@@ -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": {
@@ -1020,7 +1027,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (lodash.isArray(columnKey)) {
                     totalKey = totalKey.join(' , ');
                 }
-                newSeries.data.push(pivotData.colTotals[totalKey].sum);
+                const value = pivotData.colTotals[totalKey] ? pivotData.colTotals[totalKey].value() : 0;
+                newSeries.data.push(value);
             })
 
             chart_series.push(newSeries);
@@ -1153,7 +1161,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         let weights = { line: 2,spline: 3 ,area:-2, areaspline: -1, scatter:4, column: 1 };
 
-        if (opts.comboOptions && chartType.includes('combo') && !lodash.isEqual(row_n_keys, [[]])) {
+        if (opts.comboOptions && lodash.includes(chartType,'combo') && !lodash.isEqual(row_n_keys, [[]])) {
             chart_series.forEach((series, seriesIndex) => {
                 const savedSeriesOption = lodash.find(opts.comboOptions.seriesOptions, {series: series.name});
                 if (savedSeriesOption) {
@@ -1175,12 +1183,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.total) {
             const totalSeries = lodash.clone(ethalonSeries);
             if (opts.totalSeriesSettings) {
-                if (chartType.includes('combo')) {
+                if (lodash.includes(chartType, 'combo')) {
                     highchartsRenderer.setChartTypeBySeriesType(opts.totalSeriesSettings.chartType, totalSeries);
                 }
 
                 totalSeries.yAxis = opts.totalSeriesSettings.secondaryAxis ? 1 : undefined;
-            } else if (chartType.includes('combo')) {
+            } else if (lodash.includes(chartType,'combo')) {
                 if (has_delta) {
                     totalSeries.type = 'column';
                 } else {
@@ -1197,7 +1205,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     key = columnKey[0];
                     totalKey = totalKey.join(' , ');
                 }
-                totalSeries.data.push({name: lodash.unescape(key), y: pivotData.colTotals[totalKey].sum});
+                const value = pivotData.colTotals[totalKey] ? pivotData.colTotals[totalKey].value() : 0;
+                totalSeries.data.push({name: lodash.unescape(key), y: value});
             });
 
             chart_series.push(totalSeries);
@@ -1423,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) {
@@ -1998,7 +2007,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.setTitleAndSubTitle = function (chartOptions, opts, additionOptions) {
-        chartOptions.title = opts.chartOptions.hideChartHeader ? null : {
+        chartOptions.title = opts.chartOptions.hideChartHeader ? { text: '' } : {
             align: 'center',
             text: opts && opts.chart_title ? opts.chart_title : "",
             style: {
@@ -3026,13 +3035,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.ignoreIfCalculatedValue = function(data, rowKey, colKey, record, associatedFields, renderOptions, isGraph) {
         var eliminate = renderOptions && renderOptions.chartOptions && renderOptions.chartOptions.table_options &&
-            renderOptions.chartOptions.table_options.eliminate_calc_totals && !_.isEmpty(associatedFields) && !isGraph;
+            renderOptions.chartOptions.table_options.eliminate_calc_totals && !lodash.isEmpty(associatedFields) && !isGraph;
         let ignore = false;
 
         if (eliminate && !(data.colAttrs.length === colKey.length && data.rowAttrs.length === rowKey.length)) {
-            const keys = Object.keys(associatedFields);
-            _.forEach(keys, key => {
-                if (~_.indexOf(associatedFields[key], record[key]) || ~_.indexOf(associatedFields[key], record['DR_Values'])) {
+            const keys = lodash.keys(associatedFields);
+            lodash.forEach(keys, key => {
+                if (~lodash.indexOf(associatedFields[key], record[key]) || ~lodash.indexOf(associatedFields[key], record['DR_Values'])) {
                     ignore = true;
                 }
             });
@@ -4129,14 +4138,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             formats: {},
             associated_fields: {},
         };
-        _.forEach(widget.calculated_values, item => {
+        lodash.forEach(widget.calculated_values, item => {
             calculated_values_info.formats[item.name] = item.format
 
             let fieldName = item.field_name;
 
             if (!fieldName) {
-                const sourceArr = _.concat(widget.cols, widget.rows);
-                const filed = _.find(sourceArr, {id: item.field})
+                const sourceArr = lodash.concat(widget.cols, widget.rows);
+                const filed = lodash.find(sourceArr, {id: item.field})
                 fieldName = filed ? filed.name : '';
             }
 
@@ -4259,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;
             }
 
@@ -4426,7 +4439,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.updateBackwardCompatibleWidgetOptions = function(options, type) {
-        if (_.get(options, 'chartOptions.chart.hideLegends', false)) {
+        if (lodash.get(options, 'chartOptions.chart.hideLegends', false)) {
             options.chartOptions.legends_position = { value: 'none' };
             delete options.chartOptions.chart.hideLegends;
         }
@@ -6622,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;
     };
@@ -7413,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':

package/src/novix_renderer.js

@@ -108,7 +108,7 @@ let initNovixRenderer = function($, window, document, Handsontable){
                     visibility: 'hidden',
                 };
                 let td = document.createElement('td');
-                for (let [key, value] of Object.entries(tdStyles)) {
+                for (let [key, value] of _.entries(tdStyles)) {
                     td.style[key] = value;
                 };
                 td.innerHTML = item.str;