@datarailsshared/dr_renderer 1.2.318-rocket → 1.2.320

package/package.json

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

package/src/dr_pivottable.js

@@ -91,6 +91,7 @@ let initDRPivotTable = function($, window, document) {
 
         DRPivotData.prototype.arrSort = function(attrs) {
             var a, sortersArr;
+            const sortByValueAttrs = this.sortByValueAttrs;
             sortersArr = (function() {
                 var l, len1, results;
                 results = [];
@@ -100,11 +101,21 @@ let initDRPivotTable = function($, window, document) {
                 }
                 return results;
             }).call(this);
+
             return function(a, b) {
                 var comparison, i, sorter;
                 for (i in sortersArr) {
-                    sorter = sortersArr[i];
-                    comparison = sorter(a[i], b[i]);
+                    const index = parseInt(i);
+                    sorter = sortersArr[index];
+                    if (sortByValueAttrs.indexOf(attrs[index]) !== -1) {
+
+                        // For case current Field attrs[index] is sorted by value we are concatenating values passed to sorter function
+                        // Concatenation is done from first field in a block (first axis or first series) until current field index.
+                        // Cause for this case sorting will be as list of these concatenated strings (which is prepared in getSortingByValueOrderList)
+                        comparison = sorter(a.slice(0, index + 1).join(','), b.slice(0, index + 1).join(','));
+                    } else {
+                        comparison = sorter(a[index], b[index]);
+                    }
                     if (comparison !== 0) {
                         return comparison;
                     }

package/src/highcharts_renderer.js

@@ -139,6 +139,11 @@ const CHART_AXIS_DEFAULT_LABEL = 'Axis (Category)';
 
 const CHART_LEGEND_DEFAULT_LABEL = 'Legend (Series)';
 
+const FEATURES = {
+    ENABLE_NEW_WIDGET_VALUE_FORMATTING: 'enable_new_widget_value_formatting',
+    ENABLE_SERVER_TOTALS_CALCULATION: 'enable_server_totals_calculation',
+}
+
 let getHighchartsRenderer = function ($, document, Highcharts, default_colors, highchartsRenderer,
                                       DataFormatter, lodash, moment_lib, isNewAngular) {
 
@@ -166,10 +171,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     lodash.assign(highchartsRenderer, HIGHCHARTS_CONSTANTS);
 
     highchartsRenderer.useTotalsCalculation = false;
+    highchartsRenderer.enabledNewWidgetValueFormatting = false;
     let disableAnimation = false;
     if (document.ReportHippo && document.ReportHippo && document.ReportHippo.user) {
-        highchartsRenderer.useTotalsCalculation = lodash.includes(document.ReportHippo.user.features, 'enable_server_totals_calculation');
+        highchartsRenderer.useTotalsCalculation = lodash.includes(document.ReportHippo.user.features, FEATURES.ENABLE_SERVER_TOTALS_CALCULATION);
         disableAnimation = document.ReportHippo.user.organization && document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.disable_animation
+        highchartsRenderer.enabledNewWidgetValueFormatting = lodash.includes(document.ReportHippo.user.features, FEATURES.ENABLE_NEW_WIDGET_VALUE_FORMATTING);
     }
 
     // fix issue of use tootip.stickOnContact with tooltip.outside , source: https://github.com/highcharts/highcharts/pull/15960
@@ -628,7 +635,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     // do nothing
                 }
             }
-            return $.pivotUtilities.getFormattedNumber(value, null, opts);
+            return $.pivotUtilities.getFormattedNumber(value, null, opts).replace(/\u00A0/g, " ");
         };
         return func;
     };
@@ -1460,6 +1467,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 totalSeries.color = colors[i];
             }
 
+        if (!lodash.isEmpty(pivotData.colTotals)) {
             col_n_keys.forEach(columnKey => {
                 let key = columnKey;
                 let totalKey = columnKey;
@@ -1470,6 +1478,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 const value = pivotData.colTotals[totalKey] ? pivotData.colTotals[totalKey].value() : 0;
                 totalSeries.data.push({name: lodash.unescape(key), y: value});
             });
+        } else {
+            lodash.forEach(row_n_keys, (rowKey, index) => {
+                let key = rowKey;
+                let totalKey = rowKey;
+                if (lodash.isArray(rowKey)) {
+                    key = col_n_keys[index];
+                    totalKey = totalKey.join(highchartsRenderer.delimer);
+                }
+                const value = pivotData.rowTotals[totalKey] ? pivotData.rowTotals[totalKey].value() : 0;
+                totalSeries.data.push({name: lodash.unescape(key), y: value});
+            });
+        }
 
             chart_series.push(totalSeries);
         }
@@ -3870,6 +3890,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.rhPivotCount = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
         var attr = arg[0];
+        // isCustomValues format need for check in case when customer apply SecondaryAxis and one of them is true
+        // in that case we take formats from seriesOptions and apply those format to each one of them their format from the table
+        // method isCustomValuesFormat check if format was added custom format by self or it's a default format from table
+        const isCustomValuesFormat = highchartsRenderer.isCustomValuesFormat(render_options, widget_values_format);
+
         return function (data, rowKey, colKey) {
             return {
                 sum: 0,
@@ -3881,6 +3906,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 calculated_formats: calculated_info.formats,
                 isChangeable: false,
                 push: function (record) {
+                    if (highchartsRenderer.enabledNewWidgetValueFormatting) {
+                        record.formats = highchartsRenderer.getRecordFormats(render_options, record['DR_Values']);
+                    }
+
                     if (record.hasOwnProperty('data_types') && $.isArray(record['data_types'])) {
                         this.data_types = this.data_types.concat(record['data_types']);
                         this.data_types = lodash.uniq(this.data_types);
@@ -3925,7 +3954,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = 'General';
                     }
 
-                    if (this.widget_values_format) {
+                    if (this.widget_values_format && !highchartsRenderer.enabledNewWidgetValueFormatting) {
+                        number_format = this.widget_values_format;
+                    }
+
+                    if (isCustomValuesFormat) {
                         number_format = this.widget_values_format;
                     }
 
@@ -4013,6 +4046,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.rhPivotAggregatorSum = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
         var attr = arg[0];
+        // isCustomValues format need for check in case when customer apply SecondaryAxis and one of them is true
+        // in that case we take formats from seriesOptions and apply those format to each one of them their format from the table
+        // method isCustomValuesFormat check if format was added custom format by self or it's a default format from table
+        const isCustomValuesFormat = highchartsRenderer.isCustomValuesFormat(render_options, widget_values_format);
+
         return function (data, rowKey, colKey) {
             return {
                 sum: 0,
@@ -4033,7 +4071,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         }
                     }
                     var val = parseFloat(record[attr]);
+
                     if (!isNaN(val)) {
+                        if (highchartsRenderer.enabledNewWidgetValueFormatting) {
+                            record.formats = highchartsRenderer.getRecordFormats(render_options, record['DR_Values']);
+                        }
 
                         if (record.hasOwnProperty('data_types') && $.isArray(record['data_types'])) {
                             this.data_types = this.data_types.concat(record['data_types']);
@@ -4080,13 +4122,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = 'General';
                     }
 
-                    if (this.widget_values_format) {
+                    if (this.widget_values_format && !highchartsRenderer.enabledNewWidgetValueFormatting) {
                         number_format = this.widget_values_format;
                     }
 
+                    if (isCustomValuesFormat) {
+                        number_format = this.widget_values_format;
+                    }
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
-
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x)
+
                     if (formated_value && formated_value.hasOwnProperty('value') && formated_value.value != null) {
                         return formated_value.value;
                     } else {
@@ -4101,6 +4146,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.rhPivotAggregatorMin = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
         var attr = arg[0];
+        // isCustomValues format need for check in case when customer apply SecondaryAxis and one of them is true
+        // in that case we take formats from seriesOptions and apply those format to each one of them their format from the table
+        // method isCustomValuesFormat check if format was added custom format by self or it's a default format from table
+        const isCustomValuesFormat = highchartsRenderer.isCustomValuesFormat(render_options, widget_values_format);
+
         return function (data, rowKey, colKey) {
             return {
                 val: null,
@@ -4124,6 +4174,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     var ref, x;
                     x = parseFloat(record[attr]);
                     if (!isNaN(x)) {
+                        if (highchartsRenderer.enabledNewWidgetValueFormatting) {
+                            record.formats = highchartsRenderer.getRecordFormats(render_options, record['DR_Values']);
+                        }
+
                         if (record.hasOwnProperty('data_types') && $.isArray(record['data_types'])) {
                             this.data_types = this.data_types.concat(record['data_types']);
                             this.data_types = lodash.uniq(this.data_types);
@@ -4166,7 +4220,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = 'General';
                     }
 
-                    if (this.widget_values_format) {
+                    if (this.widget_values_format && !highchartsRenderer.enabledNewWidgetValueFormatting) {
+                        number_format = this.widget_values_format;
+                    }
+
+                    if (isCustomValuesFormat) {
                         number_format = this.widget_values_format;
                     }
 
@@ -4187,6 +4245,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.rhPivotAggregatorMax = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
         var attr = arg[0];
+        // isCustomValues format need for check in case when customer apply SecondaryAxis and one of them is true
+        // in that case we take formats from seriesOptions and apply those format to each one of them their format from the table
+        // method isCustomValuesFormat check if format was added custom format by self or it's a default format from table
+        const isCustomValuesFormat = highchartsRenderer.isCustomValuesFormat(render_options, widget_values_format);
+
         return function (data, rowKey, colKey) {
             return {
                 val: null,
@@ -4210,6 +4273,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     var ref, x;
                     x = parseFloat(record[attr]);
                     if (!isNaN(x)) {
+                        if (highchartsRenderer.enabledNewWidgetValueFormatting) {
+                            record.formats = highchartsRenderer.getRecordFormats(render_options, record['DR_Values']);
+                        }
+
                         if (record.hasOwnProperty('data_types') && $.isArray(record['data_types'])) {
                             this.data_types = this.data_types.concat(record['data_types']);
                             this.data_types = lodash.uniq(this.data_types);
@@ -4253,7 +4320,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = 'General';
                     }
 
-                    if (this.widget_values_format) {
+                    if (this.widget_values_format && !highchartsRenderer.enabledNewWidgetValueFormatting) {
+                        number_format = this.widget_values_format;
+                    }
+
+                    if (isCustomValuesFormat) {
                         number_format = this.widget_values_format;
                     }
 
@@ -4274,6 +4345,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.rhPivotAggregatorAverage = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
         var attr = arg[0];
+        // isCustomValues format need for check in case when customer apply SecondaryAxis and one of them is true
+        // in that case we take formats from seriesOptions and apply those format to each one of them their format from the table
+        // method isCustomValuesFormat check if format was added custom format by self or it's a default format from table
+        const isCustomValuesFormat = highchartsRenderer.isCustomValuesFormat(render_options, widget_values_format);
+
         return function (data, rowKey, colKey) {
             return {
                 sum: 0,
@@ -4298,6 +4374,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     var ref, x;
                     x = parseFloat(record[attr]);
                     if (!isNaN(x)) {
+                        if (highchartsRenderer.enabledNewWidgetValueFormatting) {
+                            record.formats = highchartsRenderer.getRecordFormats(render_options, record['DR_Values']);
+                        }
+
                         if (record.hasOwnProperty('data_types') && $.isArray(record['data_types'])) {
                             this.data_types = this.data_types.concat(record['data_types']);
                             this.data_types = lodash.uniq(this.data_types);
@@ -4347,7 +4427,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = 'General';
                     }
 
-                    if (this.widget_values_format) {
+                    if (this.widget_values_format && !highchartsRenderer.enabledNewWidgetValueFormatting) {
+                        number_format = this.widget_values_format;
+                    }
+
+                    if (isCustomValuesFormat) {
                         number_format = this.widget_values_format;
                     }
 
@@ -4408,72 +4492,42 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return ret_str;
     };
 
-    highchartsRenderer.getNewAttrSortingForCol = function (pivotData, sortingOptions) {
-        let rowAttrs, rowKeys, colKeys, colAttrs;
-        rowAttrs = pivotData.rowAttrs;
-        rowKeys = pivotData.rowKeys;
-        colKeys = pivotData.colKeys;
-        colAttrs = pivotData.colAttrs;
-
-
-        if (!colAttrs || colAttrs.length == 0) {
-            return null;
-        }
-
+    highchartsRenderer.getSortingByValueOrderList = function (pivotData, sortingOptions, keysArray, attrs, fieldIndex, widget) {
         let values_names_arr = [];
-        let keysArray = sortingOptions.field ? rowKeys : colKeys;
-
         lodash.forEach(keysArray, function (val) {
-            let firstArray = sortingOptions.field ? [val[0]] : [];
-            let secondArray = sortingOptions.field ? sortingOptions.field.split(highchartsRenderer.delimer) : [val[0]];
-            let aggregator_subtotal = pivotData.getAggregator(firstArray, secondArray);
-
-            if (aggregator_subtotal) {
-                let value_subtotal = aggregator_subtotal.value();
-                if (sortingOptions && sortingOptions.is_absolute && !isNaN(parseFloat(value_subtotal))) {
-                    value_subtotal = Math.abs(value_subtotal);
-                }
-                values_names_arr.push({name: val[0], value: value_subtotal});
-            }
-        });
-
-        // ORDERING
-        let sorting_vector = ['asc'];
-        if (sortingOptions && sortingOptions.type == 'largestToSmallest') {
-            sorting_vector = ['desc'];
-        }
-        values_names_arr = lodash.orderBy(values_names_arr, ['value'], sorting_vector);
-
-        // map only names
-        let attr_sorted_values = lodash.map(values_names_arr, 'name');
-        return {name: sortingOptions.field ? rowAttrs[0] : colAttrs[0], values: attr_sorted_values};
-    };
-
-    highchartsRenderer.getNewAttrSortingForRow = function (pivotData, sortingOptions) {
-        let rowAttrs, rowKeys, colKeys, colAttrs;
-        rowAttrs = pivotData.rowAttrs;
-        rowKeys = pivotData.rowKeys;
-        colKeys = pivotData.colKeys;
-        colAttrs = pivotData.colAttrs;
+            const firstArray = [];
+            const secondArray = val.slice(0, fieldIndex + 1);
+
+            let valueForComparison;
+            if (sortingOptions.sort_by === 'variance') {
+                const varianceConfig = widget.options.chartOptions.delta_column;
+                const data = pivotData.input;
+                const varianceField = varianceConfig.field === 'category' ? widget.cols[0] : widget.rows[0];
+                const varianceRowsForCurrentKey = lodash.filter(data, row => 
+                    row[varianceField.name] === varianceConfig.name 
+                        && lodash.every(secondArray, (item, index) => row[attrs[index]] === item)
+                );
 
-        if (!rowAttrs || rowAttrs.length == 0) {
-            return null;
-        }
+                valueForComparison = lodash.reduce(varianceRowsForCurrentKey, (a, d) => a + d[widget.vals[0].name], 0);
+            } else {
+                let getAggregatorParams = [firstArray, secondArray];
 
-        let values_names_arr = [];
-        let keysArray = sortingOptions.field ? colKeys : rowKeys;
+                if (lodash.includes(pivotData.rowAttrs, attrs[fieldIndex])) {
+                    getAggregatorParams = lodash.reverse(getAggregatorParams);
+                }
+    
+                let aggregator_subtotal = pivotData.getAggregator(...getAggregatorParams);
 
-        lodash.forEach(keysArray, function (val) {
-            let firstArray = sortingOptions.field ? sortingOptions.field.split(highchartsRenderer.delimer) : [val[0]];
-            let secondArray = sortingOptions.field ? [val[0]] : [];
-            let aggregator_subtotal = pivotData.getAggregator(firstArray, secondArray);
+                if (aggregator_subtotal) {
+                    valueForComparison = aggregator_subtotal.value();
+                }
+            }
 
-            if (aggregator_subtotal) {
-                let value_subtotal = aggregator_subtotal.value();
-                if (sortingOptions && sortingOptions.is_absolute && !isNaN(parseFloat(value_subtotal))) {
-                    value_subtotal = Math.abs(value_subtotal);
+            if (!lodash.isNil(valueForComparison)) {
+                if (sortingOptions && sortingOptions.is_absolute && !isNaN(parseFloat(valueForComparison))) {
+                    valueForComparison = Math.abs(valueForComparison);
                 }
-                values_names_arr.push({name: val[0], value: value_subtotal});
+                values_names_arr.push({name: secondArray.join(','), value: valueForComparison});
             }
         });
 
@@ -4485,36 +4539,33 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         values_names_arr = lodash.orderBy(values_names_arr, ['value'], sorting_vector);
 
         // map only names
-        let attr_sorted_values = lodash.map(values_names_arr, 'name');
-        return {name: sortingOptions.field ? colAttrs[0] : rowAttrs[0], values: attr_sorted_values};
+        return lodash.map(values_names_arr, 'name');
     };
 
-    highchartsRenderer.generateSortingFunctionByValues = function (sortingOptions, pivotData, opts) {
-        let new_map;
-        let axis = highchartsRenderer.getAxis(sortingOptions.axis, opts);
-        if (axis == 'col_total') {
-            new_map = highchartsRenderer.getNewAttrSortingForCol(pivotData, sortingOptions);
-        } else if (axis == 'row_total') {
-            new_map = highchartsRenderer.getNewAttrSortingForRow(pivotData, sortingOptions);
-        }
-
+    highchartsRenderer.generateSortingFunctionByValues = function (sortByValueSettings, pivotData, opts, widget) {
         let old_sorters_function = opts.sorters;
         if (!old_sorters_function) {
             old_sorters_function = function () {
             };
         }
-        if (new_map) {
-            var sortAs = $.pivotUtilities.sortAs;
-            let new_sorters_function = function (attr) {
-                if (new_map.name == attr) {
-                    return $.pivotUtilities.sortAs(new_map.values);
-                } else {
-                    return old_sorters_function(attr);
-                }
+        return function (attr) {
+            const sortingOptions = lodash.find(sortByValueSettings, fieldSorting => fieldSorting.name === attr);
+            if (sortingOptions) {
+                const axis = highchartsRenderer.getAxis(_.includes(pivotData.colAttrs, attr) ? 'col_total' : 'row_total', opts);
+                const isColumnSort = axis === 'col_total';
+                const fieldIndex = lodash.findIndex(isColumnSort ? pivotData.colAttrs : pivotData.rowAttrs, name => name === attr);
+                const orderedNamesList = highchartsRenderer.getSortingByValueOrderList(
+                    pivotData,
+                    sortingOptions.sorting,
+                    pivotData[isColumnSort ? 'colKeys' : 'rowKeys'],
+                    pivotData[isColumnSort ? 'colAttrs' : 'rowAttrs'],
+                    fieldIndex,
+                    widget
+                );
+                return $.pivotUtilities.sortAs(orderedNamesList);
+            } else {
+                return old_sorters_function(attr);
             }
-            return new_sorters_function;
-        } else {
-            return old_sorters_function;
         }
     };
 
@@ -4718,6 +4769,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         result = null;
         try {
             pivotData = $.pivotUtilities.getPivotDataModel(rowData, opts);
+            pivotData.sortByValueAttrs = [];
             try {
                 if (options && options.onlyOptions) {
                     if (!opts.rendererOptions) {
@@ -4725,9 +4777,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
                     opts.rendererOptions.onlyOptions = true;
                 }
-                var totalFilters = lodash.get(opts, 'rendererOptions.total_value_options', null);
-                if (totalFilters && totalFilters.sorting_options) {
-                    let new_sorting_function = highchartsRenderer.generateSortingFunctionByValues(totalFilters.sorting_options, pivotData, opts);
+
+                const sortByValueSettings = lodash.filter(
+                    lodash.get(widget, 'options.sortingFields', []),
+                    sortingField => lodash.includes(['field_values', 'variance'], lodash.get(sortingField, 'sorting.sort_by'))
+                );
+
+                if (sortByValueSettings.length) {
+                    pivotData.sortByValueAttrs = lodash.map(sortByValueSettings, fieldSorting => fieldSorting.name);
+                    let new_sorting_function = highchartsRenderer.generateSortingFunctionByValues(sortByValueSettings, pivotData, opts, widget);
                     opts.sorters = new_sorting_function;
                     optsFiltered.sorters = new_sorting_function;
                     pivotData.sorters = new_sorting_function;
@@ -7084,18 +7142,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 value_name: 'is_percentage',
                 default_value: false,
                 hidden: true,
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Sort by variance',
-                value_name: 'sort_by_variance',
-                default_value: false,
-                hidden: true
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Sort by absolute variance',
-                value_name: 'sort_by_absolute_variance',
-                default_value: false,
-                hidden: true
             }]
         },
         'delta_column_for_drill_down': {
@@ -7162,18 +7208,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 value_name: 'is_percentage',
                 default_value: false,
                 hidden: true,
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Sort by variance',
-                value_name: 'sort_by_variance',
-                default_value: false,
-                hidden: true
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Sort by absolute variance',
-                value_name: 'sort_by_absolute_variance',
-                default_value: false,
-                hidden: true
             }, {
                 element_type: 'checkbox',
                 element_label: 'Filter zero values',
@@ -8690,7 +8724,9 @@ 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 = lodash.find(widget.options.sortingFields, element => element.id === field.id);
+                const fieldToSort = lodash.find(
+                    widget.options.sortingFields, element => element.id === field.id && lodash.get(element, 'sorting.sort_by') === 'field_items'
+                );
                 field.sorting = fieldToSort ? fieldToSort.sorting : field.sorting;
             });
         }
@@ -8772,7 +8808,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             });
         } else if (isCustomSorting) {
             lodash.forEach(rowsAndCols, function (field) {
-                const fieldToSort = lodash.find(widget.options.sortingFields, element => element.id === field.id);
+                const fieldToSort = lodash.find(
+                    widget.options.sortingFields, element => element.id === field.id && lodash.get(element, 'sorting.sort_by') === 'field_items'
+                );
                 field.sorting = fieldToSort ? fieldToSort.sorting : field.sorting;
             });
         }
@@ -8807,61 +8845,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         /****** END *******/
-
-        if (lodash.has(widget, "options.chartOptions.delta_column") &&
-            widget.options.chartOptions.delta_column.field != '' &&
-            (widget.options.chartOptions.delta_column.sort_by_variance ||
-                widget.options.chartOptions.delta_column.sort_by_absolute_variance) &&
-            widget.rows.length > 0 &&
-            widget.cols.length > 0 &&
-            widget.vals.length
-        ) {
-            let variance_config = widget.options.chartOptions.delta_column;
-            let val_field = widget.vals[0];
-            let field_for_sorting = null;
-            let field_with_variant = null;
-            if (variance_config.field == "series") {
-                field_for_sorting = widget.cols[0];
-                field_with_variant = widget.rows[0];
-            } else if (variance_config.field == "category") {
-                field_for_sorting = widget.rows[0];
-                field_with_variant = widget.cols[0];
-            }
-
-            let data_sorted = lodash.filter(data, function (data_row) {
-                return data_row[field_with_variant.name] == variance_config.name && data_row[field_for_sorting.name] != undefined;
-            });
-
-            const sorting_variance = widget.options.total_value_options && widget.options.total_value_options.sorting_variance === '' ? 'asc' : 'desc';
-
-            if (widget.options.chartOptions.delta_column.sort_by_absolute_variance) {
-                data_sorted = lodash.sortBy(data_sorted, function (o) {
-                    if (sorting_variance === 'desc') {
-                        return Math.abs(o[val_field.name]) * -1;
-                    }
-
-                    return Math.abs(o[val_field.name]) * 1;
-                });
-            } else {
-                data_sorted = lodash.orderBy(data_sorted, [val_field.name], [sorting_variance]);
-            }
-
-            let values_for_sort = lodash.map(data_sorted, function (data_row) {
-                return data_row[field_for_sorting.name];
-            });
-
-            values_for_sort = lodash.uniq(values_for_sort);
-
-            if (values_for_sort.length > 0) {
-                let field = lodash.find(datesFields, {name: field_for_sorting.name});
-                if (field) {
-                    field.values = values_for_sort;
-                    field.sorting = null;
-                } else {
-                    datesFields.push({name: field_for_sorting.name, values: values_for_sort});
-                }
-            }
-        } else if (widget.options && widget.options.sortingValues) {
+        
+        // TODO: Remove. sortingValues looks like lagacy which is not in use neither in webclient nor in renderer
+        if (widget.options && widget.options.sortingValues) {
             var field = lodash.find(datesFields, {name: widget.options.sortingValues.field});
             if (field) {
                 field.values = widget.options.sortingValues.values;
@@ -9281,6 +9267,25 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     }
 
+    highchartsRenderer.checkFormats = function(render_options, widget_values_format) {
+        const isSecondaryAxis = lodash.some(render_options.comboOptions?.seriesOptions, series => series?.secondaryAxis);
+        const formats = lodash.map(render_options.comboOptions?.seriesOptions, series => series.format);
+        const isCustomFormat = !lodash.includes(formats, widget_values_format);
+
+        return { isSecondaryAxis, isCustomFormat }
+    }
+
+    highchartsRenderer.getRecordFormats = function(render_options, recordName) {
+       return render_options?.comboOptions?.seriesOptions
+           .filter(series => series.series === recordName)
+           .map(series => series.format);
+    }
+
+    highchartsRenderer.isCustomValuesFormat = function (render_options, widget_values_format) {
+        const { isSecondaryAxis, isCustomFormat } = highchartsRenderer.checkFormats(render_options, widget_values_format);
+        return highchartsRenderer.enabledNewWidgetValueFormatting && (isCustomFormat || !isSecondaryAxis);
+    }
+
     return highchartsRenderer;
 };
 

package/src/pivottable.js

@@ -577,6 +577,7 @@ let initPivotTable = function($, window, document) {
         l_mapping = {};
         for (i in order) {
             x = order[i];
+            if (order[i] === null) x = '[null]';
             mapping[x] = i;
             if (typeof x === "string") {
                 l_mapping[x.toLowerCase()] = i;