npm - @datarailsshared/dr_renderer - Versions diffs - 1.2.46-beta → 1.2.48-beta - Mend

@datarailsshared/dr_renderer 1.2.46-beta → 1.2.48-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json +1 -1
package/src/dataformatter.js +1 -1
package/src/dr_pivottable.js +19 -9
package/src/highcharts_renderer.js +528 -159

package/package.json CHANGED Viewed

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

package/src/dataformatter.js CHANGED Viewed

@@ -1004,7 +1004,7 @@ var DataFormatterImpl = function () {
                 // Call function
                 result = this.memoized[pattern].call(this, n, type);
-                if (result.value === result.pattern) {
+                if (result.value === result.pattern && !(String(n) === '0' && result.value.includes('0'))) {
                     result.value = n;
                 }
             }

package/src/dr_pivottable.js CHANGED Viewed

@@ -3,7 +3,7 @@ let initDRPivotTable = function($, window, document) {
     var slice = [].slice;
     var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-    var DRPivotData, sortDateStrings, getSort, processKey, SubtotalRenderer, getFormattedNumber, largeToSmallSort, NovixRenderer;
+    var DRPivotData, sortDateStrings, getSort, processKey, SubtotalRenderer, getFormattedNumber, largeToSmallSort, largeToSmallSortByAbsolute, NovixRenderer;
     var delim = " , ";
     const newTableColors = ['rgb(127, 196, 255)', 'rgb(200, 243,243)', 'rgb(247, 161, 173)', 'rgb(255, 237, 178)', 'rgb(221, 239, 255)',
@@ -155,7 +155,7 @@ let initDRPivotTable = function($, window, document) {
                     totals[flatKey].push(record);
                 }
             }
-            if (addKey) {
+            if (addKey && key.length === attrs.length) {
                 keys.push(key);
             }
             return key;
@@ -180,13 +180,13 @@ let initDRPivotTable = function($, window, document) {
                 if (!colKey.length && !rowKey.length) {
                     this.allTotal.push(record);
                 }
-                if (!colKey.length && rowKey.length === 1) {
-                    this.rowTotals[rowKey[0]].push(record);
-                    this.rowTotals[rowKey[0]].isChangeable = true;
+                if (!colKey.length && rowKey.length) {
+                    this.rowTotals[rowKey.join(delim)].push(record);
+                    this.rowTotals[rowKey.join(delim)].isChangeable = true;
                 }
-                if (!rowKey.length && colKey.length === 1) {
-                    this.colTotals[colKey[0]].push(record);
-                    this.colTotals[colKey[0]].isChangeable = true;
+                if (!rowKey.length && colKey.length) {
+                    this.colTotals[colKey.join(delim)].push(record);
+                    this.colTotals[colKey.join(delim)].isChangeable = true;
                 }
             } else {
                 this.allTotal.push(record);
@@ -340,7 +340,11 @@ let initDRPivotTable = function($, window, document) {
         };
     };
-    largeToSmallSort = function(as, bs) {
+    largeToSmallSortByAbsolute = function (as, bs) {
+        return largeToSmallSort(as , bs, true);
+    }
+    largeToSmallSort = function(as, bs, is_abs = false) {
         var a, a1, b, b1, rd, rx, rz;
         rx = /(\d+)|(\D+)/g;
         rd = /\d/;
@@ -352,6 +356,11 @@ let initDRPivotTable = function($, window, document) {
             if (isNaN(bs)) {
                 return 1;
             }
+            if (is_abs) {
+                return Math.abs(bs) - Math.abs(as);
+            }
             return bs - as;
         }
         a = String(as).toLowerCase();
@@ -2217,6 +2226,7 @@ let initDRPivotTable = function($, window, document) {
     $.pivotUtilities.getFormattedNumber = getFormattedNumber;
     $.pivotUtilities.sortDateStrings = sortDateStrings;
     $.pivotUtilities.largeToSmallSort = largeToSmallSort;
+    $.pivotUtilities.largeToSmallSortByAbsolute = largeToSmallSortByAbsolute;
     $.pivotUtilities.getPivotDataModel = function(input, opts){ return new DRPivotData(input, opts); }
     $.pivotUtilities.getPivotTableFormula = function(rowData, opts, func, colFields, rowFields, aggregationDefaults, utils) {
         let totalStr = 'Grand Totals';

package/src/highcharts_renderer.js CHANGED Viewed

@@ -891,14 +891,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return chartOptions;
     };
-    highchartsRenderer.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions) {
+    // Generate series for charts functions
+    highchartsRenderer.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions, opts, chartOptions) {
         var chart_series = [],
             row_n_keys = pivotData.getRowKeys(),
             col_n_keys = pivotData.getColKeys();
-        var num_cols = col_n_keys.length;
-        var num_rows = row_n_keys.length;
         var has_delta = false;
         if (additionOptions && lodash.has(additionOptions, "delta_column.field") && additionOptions.delta_column.field == "series") {
             has_delta = true;
@@ -909,16 +907,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var i = 0;
         var variat_serias = null;
+        const n = col_n_keys.length;
+        const xSum = (1 + n) / 2 * n;
         lodash.forEach(row_n_keys, function (row_n_value) {
             var ob = {};
+            let ySum = 0;
+            let xySum = 0;
+            let squareXSum = 0;
             ob.data = [];
             if (row_n_value && row_n_value.length > 0)
                 ob.name = row_n_value.join(highchartsRenderer.delimer);
-            lodash.forEach(col_n_keys, function (col_n_value) {
+            lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
                 var val = agg.value();
                 if (isUniqueVals && agg.uniq)
                     val = agg.uniq.join('<br>');
@@ -937,6 +941,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     else
                         val = 0;
                 }
+                xySum += Number(val) * (index + 1);
+                ySum += Number(val);
+                squareXSum += (index + 1) * (index + 1);
                 ob.data.push(val);
             });
@@ -950,6 +958,24 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
             chart_series.push(ob);
+            if (opts.trendLine) {
+                const a = ((ySum * squareXSum) - (xSum * xySum)) / ((n * squareXSum) - (xSum * xSum));
+                const b = ((n * xySum) -  (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
+                const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
+                trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
+                trendSeries.dashStyle = 'shortdot';
+                trendSeries.type = 'line';
+                trendSeries.data = trendSeries.data.map((el, index) => a + b * (index + 1));
+                if (colors && colors[i]) {
+                    trendSeries.color = colors[i];
+                }
+                chart_series.push(trendSeries);
+            }
             i++;
         });
@@ -970,30 +996,48 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts);
+        if (opts.total) {
+            const newSeries = lodash.clone(chart_series[chart_series.length - 1]);
+            newSeries.name = 'Total';
+            newSeries.data = [];
+            col_n_keys.forEach(columnKey => {
+                let totalKey = columnKey;
+                if (lodash.isArray(columnKey)) {
+                    totalKey = totalKey.join(' , ');
+                }
+                newSeries.data.push(pivotData.colTotals[totalKey].sum);
+            })
+            chart_series.push(newSeries);
+        }
         return chart_series;
     };
-    highchartsRenderer.ptCreateColumnSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, isNotDrilldown, additionOptions) {
+    highchartsRenderer.ptCreateColumnSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, isNotDrilldown, additionOptions, opts, chartOptions) {
         var chart_series = [],
             row_n_keys = pivotData.getRowKeys(),
             col_n_keys = pivotData.getColKeys();
-        var num_cols = col_n_keys.length;
-        var num_rows = row_n_keys.length;
         var has_delta = false;
         if (additionOptions && lodash.has(additionOptions, "delta_column.field") && additionOptions.delta_column.field == "series") {
             has_delta = true;
         }
         if (row_n_keys.length == 0)
             row_n_keys.push([]);
         var i = 0;
         var variat_serias = null;
+        const n = col_n_keys.length;
+        const xSum = (1 + n) / 2 * n;
         lodash.forEach(row_n_keys, function (row_n_value) {
+            let ySum = 0;
+            let xySum = 0;
+            let squareXSum = 0;
             var ob = {};
             ob.data = [];
             if (row_n_value && row_n_value.length > 0)
@@ -1006,7 +1050,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 style: highchartsRenderer.getDataLabelsStyle(additionOptions)
             }
-            lodash.forEach(col_n_keys, function (col_n_value) {
+            lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
                 var val = agg.value();
@@ -1040,6 +1084,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (!isNotDrilldown)
                     tmoobj.drilldown = true;
+                xySum += Number(val) * (index + 1);
+                ySum += Number(val);
+                squareXSum += (index + 1) * (index + 1);
                 ob.data.push(tmoobj);
             });
@@ -1053,6 +1100,23 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
             chart_series.push(ob);
+            if (opts.trendLine) {
+                const a = ((ySum * squareXSum) - (xSum * xySum)) / ((n * squareXSum) - (xSum * xSum));
+                const b = ((n * xySum) -  (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
+                const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
+                trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
+                trendSeries.dashStyle = 'shortdot';
+                trendSeries.type = 'line';
+                trendSeries.data = trendSeries.data.map((data, index) => ({name: data.name, y: a + b * (index + 1)}));
+                if (colors && colors[i]) {
+                    trendSeries.color = colors[i];
+                }
+                chart_series.push(trendSeries);
+            }
             i++;
         });
@@ -1064,18 +1128,68 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts);
+        let weights = { line: 2,spline: 3 ,area:-2, areaspline: -1, scatter:4, column: 1 };
+        if (opts.comboOptions && opts.comboOptions.seriesOptions.length) {
+            opts.comboOptions.seriesOptions.forEach(option => {
+                chart_series.forEach(series => {
+                    if (option.series === series.name) {
+                        switch (option.chartType) {
+                            case 'line-chart':
+                                series.type = 'line';
+                                break;
+                            case 'line-chart-smooth':
+                                series.type = 'spline';
+                                break;
+                            case 'area-chart':
+                                series.type = 'area';
+                                break;
+                            case 'area-chart-smooth':
+                                series.type = 'areaspline';
+                                break;
+                            case 'scatter-chart':
+                                series.type = 'scatter';
+                                break;
+                            case 'column-chart' || 'column-chart-stacked':
+                                delete series.type;
+                                break;
+                        }
+                    }
+                })
+            })
+        }
+        if (opts.total) {
+            const totalSeries = lodash.clone(chart_series[chart_series.length - 1]);
+            totalSeries.name = 'Total';
+            totalSeries.data = [];
+            col_n_keys.forEach(columnKey => {
+                let key = columnKey;
+                let totalKey = columnKey;
+                if (lodash.isArray(columnKey)) {
+                    key = columnKey[0];
+                    totalKey = totalKey.join(' , ');
+                }
+                totalSeries.data.push({name: lodash.unescape(key), y: pivotData.colTotals[totalKey].sum});
+            });
+            chart_series.push(totalSeries);
+        }
+        chart_series.sort((a,b) => {
+            return (weights[a.type] || 0) > (weights[b.type] || 0) ? 1 : (weights[a.type] || 0) < (weights[b.type] || 0) ? -1 : 0
+        });
         return chart_series;
-    };
+    }
     highchartsRenderer.getVariantSeries = function (series, delta_column_options) {
         const varianceColor = delta_column_options.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
         series.name = delta_column_options.name.replace('_', '');
         series.color = varianceColor;
-        if (!delta_column_options.only_variant && !delta_column_options.same_yaxis) {
-            series.yAxis = 1;
-        }
         if (delta_column_options.point_click_event) {
             series.allowPointSelect = true;
             series.point = {
@@ -1103,7 +1217,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             series.marker = {
                 lineColor: varianceColor
             };
-        } else if (delta_column_options.chart == 'column') {
+        } else if (delta_column_options.chart == 'column' || delta_column_options.chart == 'combo') {
             series.type = 'column';
         } else {
             series.type = 'spline';
@@ -1148,8 +1262,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return series;
     }
-    highchartsRenderer.ptCreateSeriesToDrillDownChart = function (pivotData) {
+    highchartsRenderer.ptCreateSeriesToDrillDownChart = function (pivotData, chartOptions, additionOptions, opts) {
         var pie_series = [];
         var col_n_keys = pivotData.getColKeys();
@@ -1180,13 +1293,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             pie_series.push(ob);
         });
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(pie_series, pivotData, chartOptions, additionOptions, opts);
         return ([{
             colorByPoint: true,
             data: pie_series
         }]);
     };
-    highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart = function (pivotData) {
+    highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart = function (pivotData, chartOptions, additionOptions, opts) {
         var pie_drill_down_series = [],
             row_n_keys = pivotData.getRowKeys(),
@@ -1224,12 +1339,60 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         });
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(pie_drill_down_series, pivotData, chartOptions, additionOptions, opts);
         return ({
             series: pie_drill_down_series
         });
     };
+    highchartsRenderer.moveSeriesToSecondYAxisIfNeeded = function(chartSeries, pivotData, chartOptions, additionOptions, opts) {
+        if (!opts || !opts.comboOptions) {
+            return;
+        }
+        let addSecondYAxis = false;
+        lodash.forEach(chartSeries, function (series) {
+            let sOptions = lodash.find(opts.comboOptions.seriesOptions, function(sOptions) {
+                return sOptions.series === series.name || sOptions.series.replace('_', '') === series.name
+            });
+            if (sOptions && sOptions.secondaryAxis) {
+                series.yAxis = 1;
+                addSecondYAxis = true;
+            }
+        });
+        if (addSecondYAxis) {
+            highchartsRenderer.addSecondYAxis(pivotData, chartOptions, additionOptions, opts);
+        }
+    }
+    highchartsRenderer.addSecondYAxis = function (pivotData, chartOptions, additionOptions, opts) {
+        const varianceColor = (additionOptions && additionOptions.delta_column.color) || (highchartsRenderer && highchartsRenderer.variance_color) || Highcharts.getOptions().colors[7];
+        let labels_formatter = opts.comboOptions.secondaryAxisSettings.is_percentage ?
+            highchartsRenderer.persantageValueLabelsFormatter(pivotData, opts) :
+            highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts);
+        chartOptions.yAxis = [chartOptions.yAxis];
+        chartOptions.yAxis[1] = {
+            min: !isNaN(parseInt(opts.comboOptions.secondaryAxisSettings.min)) ? opts.comboOptions.secondaryAxisSettings.min : null,
+            max: !isNaN(parseInt(opts.comboOptions.secondaryAxisSettings.max)) ? opts.comboOptions.secondaryAxisSettings.max : null,
+            title: {
+                text: opts.comboOptions.secondaryAxisSettings.name,
+                style: {
+                    color: varianceColor
+                }
+            },
+            labels: {
+                formatter: labels_formatter,
+                style: {
+                    color: varianceColor
+                }
+            },
+            opposite: true
+        }
+    };
     highchartsRenderer.ptRenderBasicPie = function (pivotData, opts) {
         var chartOptions = {};
         var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('pie-chart');
@@ -1409,7 +1572,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
         chartOptions.xAxis = {categories: pivotData.getColKeys()};
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
         var total = [];
         lodash.forEach(chartOptions.series, function (obj) {
@@ -1550,7 +1713,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.xAxis = {categories: pivotData.getColKeys()};
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
         var total = [];
         lodash.forEach(chartOptions.series, function (obj) {
@@ -1644,7 +1807,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         };
         var uniqueVals = kpioptions.value.value == "Unique";
-        let temp_series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, uniqueVals);
+        let temp_series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, uniqueVals, null, opts, chartOptions);
         var total = [];
         lodash.forEach(temp_series, function (obj) {
@@ -1764,12 +1927,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (useNewUx) {
           chartOptions.tooltip.borderColor = '#fff';
         }
-        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true);
         if (drilldownFunc)
             chartOptions.drilldown = {}
         else
-            chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData);
+            chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
@@ -1826,7 +1989,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
             }
         };
-        highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, true);
@@ -1871,7 +2033,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
@@ -1902,8 +2064,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
-        highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, true);
         chartOptions.plotOptions = {
@@ -1950,7 +2110,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
         var colors = ['#ff0202', '#b3060e', '#70000a'];
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, colors, null, null, additionOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, colors, null, null, additionOptions, opts, chartOptions);
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
@@ -1972,34 +2132,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
-    highchartsRenderer.addSecondYAxisIfNeed = function (pivotData, chartOptions, additionOptions, opts) {
-        if (additionOptions && additionOptions.delta_column && additionOptions.delta_column.field == "series") {
-            chartOptions.yAxis = [chartOptions.yAxis];
-            let labels_formatter = highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts);
-            if (additionOptions.delta_column.is_percentage) {
-                labels_formatter = highchartsRenderer.persantageValueLabelsFormatter(pivotData, opts);
-            }
-            const varianceColor = additionOptions.delta_column.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
-            chartOptions.yAxis[1] = {
-                title: {
-                    text: additionOptions.delta_column.name.replace('_', ''),
-                    style: {
-                        color: varianceColor
-                    }
-                },
-                labels: {
-                    formatter: labels_formatter,
-                    style: {
-                        color: varianceColor
-                    }
-                },
-                opposite: true
-            }
-        }
-    };
     highchartsRenderer.ptRenderSpLine = function (pivotData, opts) {
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;
@@ -2025,8 +2157,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
-        highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, true);
         chartOptions.plotOptions = {
@@ -2068,7 +2198,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
         highchartsRenderer.handleGridLines(additionOptions, chartOptions);
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
@@ -2116,7 +2246,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
         highchartsRenderer.handleGridLines(additionOptions, chartOptions);
@@ -2213,7 +2343,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
             lineWidth: 0
         };
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
@@ -2275,8 +2405,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
-        highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
             shadow: highchartsRenderer.tooltipShadow,
@@ -2290,7 +2418,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         highchartsRenderer.handleGridLines(additionOptions, chartOptions);
         var isNotDrilldown = !(colAttrs && colAttrs.length > 1);
-        chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, null, null, null, isNotDrilldown, additionOptions);
+        if (lodash.get(opts, 'paletteOptions.widgetPalette', null)) {
+            const mc_palette = lodash.find(lodash.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
+            chartOptions.colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
+        } else if (lodash.get(opts, 'paletteOptions.dashboardPalette.colors', null)) {
+            chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
+        }
+        chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, chartOptions.colors, null, null, isNotDrilldown, additionOptions, opts, chartOptions);
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
         chartOptions.plotOptions = {
             column: {
@@ -2458,7 +2592,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         };
         //chartOptions.xAxis = { categories: pivotData.getColKeys() };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, null, null, true, true);
+        if (lodash.get(opts, 'paletteOptions.widgetPalette', null)) {
+            const mc_palette = lodash.find(lodash.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
+            chartOptions.colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
+        } else if (lodash.get(opts, 'paletteOptions.dashboardPalette.colors', null)) {
+            chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
+        }
+        chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, chartOptions.colors, null, true, true, null, opts, chartOptions);
         //chartOptions.drilldown = {}
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
@@ -2535,11 +2675,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.xAxis = {type: 'category'};
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
         //if (drilldownFunc)
         //    chartOptions.drilldown = {}
         //else
-        chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData);
+        chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
@@ -2610,7 +2750,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
@@ -2724,7 +2864,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
@@ -2813,6 +2953,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return format;
     }
+    highchartsRenderer.isRowKeyShouldBePercentage = function(render_options, rowKey) {
+        if (render_options && render_options.comboOptions && render_options.comboOptions.secondaryAxisSettings &&
+            render_options.comboOptions.secondaryAxisSettings.is_percentage) {
+            const rowKeyString = rowKey.join(highchartsRenderer.delimer);
+            const rowKeyOptions = lodash.find(render_options.comboOptions.seriesOptions, {series: rowKeyString});
+            if (rowKeyOptions && rowKeyOptions.secondaryAxis) {
+                return true;
+            }
+        }
+        return false;
+    }
     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;
@@ -2832,17 +2984,6 @@ 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];
-        var has_variants_persentage = false;
-        var variant_name = '';
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field === 'series' &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
         return function (data, rowKey, colKey) {
             return {
                 sum: 0,
@@ -2864,10 +3005,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         this.formats = lodash.uniq(this.formats);
                     }
-                    if (has_variants_persentage) {
-                        if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                            this.widget_values_format = "#,###%";
-                        }
+                    if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                        this.widget_values_format = "#,###%";
                     }
                     if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -2987,17 +3126,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
     highchartsRenderer.rhPivotAggregatorSum = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
-        var attr;
-        attr = arg[0];
-        var has_variants_persentage = false;
-        var variant_name = '';
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field == "series" &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
+        var attr = arg[0];
         return function (data, rowKey, colKey) {
             return {
                 sum: 0,
@@ -3030,10 +3159,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.formats = lodash.uniq(this.formats);
                         }
-                        if (has_variants_persentage) {
-                            if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                                this.widget_values_format = "#,###%";
-                            }
+                        if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                            this.widget_values_format = "#,###%";
                         }
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3087,17 +3214,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
     highchartsRenderer.rhPivotAggregatorMin = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
-        var attr;
-        attr = arg[0];
-        var has_variants_persentage = false;
-        var variant_name = '';
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field == "series" &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
+        var attr = arg[0];
         return function (data, rowKey, colKey) {
             return {
                 val: null,
@@ -3131,10 +3248,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.formats = lodash.uniq(this.formats);
                         }
-                        if (has_variants_persentage) {
-                            if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                                this.widget_values_format = "#,###%";
-                            }
+                        if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                            this.widget_values_format = "#,###%";
                         }
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3185,17 +3300,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
     highchartsRenderer.rhPivotAggregatorMax = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
-        var attr;
-        attr = arg[0];
-        var has_variants_persentage = false;
-        var variant_name = '';
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field == "series" &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
+        var attr = arg[0];
         return function (data, rowKey, colKey) {
             return {
                 val: null,
@@ -3229,10 +3334,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.formats = lodash.uniq(this.formats);
                         }
-                        if (has_variants_persentage) {
-                            if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                                this.widget_values_format = "#,###%";
-                            }
+                        if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                            this.widget_values_format = "#,###%";
                         }
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3283,17 +3386,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
     highchartsRenderer.rhPivotAggregatorAverage = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
-        var attr;
-        attr = arg[0];
-        var has_variants_persentage = false;
-        var variant_name = '';
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field == "series" &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
+        var attr = arg[0];
         return function (data, rowKey, colKey) {
             return {
                 sum: 0,
@@ -3328,10 +3421,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.formats = lodash.uniq(this.formats);
                         }
-                        if (has_variants_persentage) {
-                            if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                                this.widget_values_format = "#,###%";
-                            }
+                        if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                            this.widget_values_format = "#,###%";
                         }
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3879,11 +3970,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     pivotData.sorters = new_sorting_function;
                 }
-                if (totalFilters && totalFilters.filter_options) {
-                    result = highchartsRenderer.generateFilteredResult(totalFilters, optsFiltered, rowData, opts, pivotData);
-                } else {
-                    result = opts.renderer(pivotData, opts.rendererOptions);
-                }
+                result = opts.renderer(pivotData, opts.rendererOptions);
             } catch (_error) {
                 e = _error;
                 if (typeof console !== "undefined" && console !== null) {
@@ -4283,6 +4370,27 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 delete options.chartOptions.label;
             }
         }
+        if (!options.comboOptions) {
+            options.comboOptions = {
+                secondaryAxisSettings: {
+                    name: 'Secondary Axis',
+                    max: null,
+                    min: null,
+                    is_percentage: false,
+                },
+                seriesOptions: []
+            }
+            if (options.chartOptions.delta_column && options.chartOptions.delta_column.field === 'series') {
+                options.comboOptions.seriesOptions.push({
+                    series: options.chartOptions.delta_column.name,
+                    chartType: options.chartOptions.delta_column.chart,
+                    secondaryAxis: !options.chartOptions.delta_column.same_yaxis,
+                });
+                options.comboOptions.secondaryAxisSettings.name = options.chartOptions.delta_column.name.replace('_', '');
+                options.comboOptions.secondaryAxisSettings.is_percentage = options.chartOptions.delta_column.is_percentage;
+            }
+        }
     };
     highchartsRenderer.addPivotOptions = function (selectedTemplateWOData, widgetOptions, drilldownFunction, drillDownListFunction) {
@@ -4888,6 +4996,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     value_name: 'remove_underscores',
                     default_value: true
                 },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Use big data table',
+                    value_name: 'use_handsOnTable',
+                    default_value: false
+                },
                 {
                   element_type: 'checkbox',
                   element_label: 'Use new table design',
@@ -5412,7 +5526,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_options: [
                     {label: 'Markers', value: ''},
                     {label: 'Line', value: 'line'},
+                    {label: 'Smooth Line', value: 'spline'},
                     {label: 'Column', value: 'column'},
+                    {label: 'Area', value: 'area'},
+                    {label: 'Smooth Area', value: 'areaspline'},
                 ],
                 default_value: ''
             }, {
@@ -5424,7 +5541,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 element_label: 'Same yAxis',
                 value_name: 'same_yaxis',
-                default_value: false
+                default_value: false,
+                hidden: true,
             }, {
                 element_type: 'checkbox',
                 element_label: 'Same xAxis',
@@ -5434,17 +5552,20 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 element_label: 'Percentage',
                 value_name: 'is_percentage',
-                default_value: false
+                default_value: false,
+                hidden: true,
             }, {
                 element_type: 'checkbox',
                 element_label: 'Sort by variance',
                 value_name: 'sort_by_variance',
-                default_value: false
+                default_value: false,
+                hidden: true
             }, {
                 element_type: 'checkbox',
                 element_label: 'Sort by absolute variance',
                 value_name: 'sort_by_absolute_variance',
-                default_value: false
+                default_value: false,
+                hidden: true
             }]
         },
         'delta_column_for_drill_down': {
@@ -5483,7 +5604,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_options: [
                     {label: 'Markers', value: ''},
                     {label: 'Line', value: 'line'},
+                    {label: 'Smooth Line', value: 'spline'},
                     {label: 'Column', value: 'column'},
+                    {label: 'Area', value: 'area'},
+                    {label: 'Smooth Area', value: 'areaspline'},
                 ],
                 default_value: ''
             }, {
@@ -5495,7 +5619,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 element_label: 'Same yAxis',
                 value_name: 'same_yaxis',
-                default_value: false
+                default_value: false,
+                hidden: true,
             }, {
                 element_type: 'checkbox',
                 element_label: 'Same xAxis',
@@ -5505,7 +5630,85 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 element_label: 'Percentage',
                 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
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Sort by absolute variance',
+                value_name: 'sort_by_absolute_variance',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Filter zero values',
+                value_name: 'is_filter_zero',
+                default_value: false
+            }]
+        },
+        'delta_column_combo': {
+            category_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Variance',
+            category_type: 'delta_column',
+            elements: [{
+                element_type: 'radio',
+                value_name: 'field',
+                element_label: 'Select Field',
+                element_options: [
+                    {label: 'None', value: ''},
+                    {label: 'Axis', value: 'category'},
+                    {label: 'Legend', value: 'series'},
+                ],
+                default_value: ''
+            }, {
+                element_type: 'input',
+                value_name: 'name',
+                element_label: 'Name',
+                default_value: '_Variance'
+            }, {
+                element_type: 'input',
+                value_name: 'formula',
+                element_label: 'Formula',
+                default_value: 'x2-x1'
+            }, {
+                hidden: true,
+                element_type: 'radio',
+                value_name: 'chart',
+                element_label: 'Chart',
+                element_options: [
+                    {label: 'Markers', value: ''},
+                    {label: 'Line', value: 'line'},
+                    {label: 'Smooth Line', value: 'spline'},
+                    {label: 'Column', value: 'column'},
+                    {label: 'Area', value: 'area'},
+                    {label: 'Smooth Area', value: 'areaspline'},
+                ],
+                default_value: ''
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Only variance',
+                value_name: 'only_variant',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Same yAxis',
+                value_name: 'same_yaxis',
+                default_value: false,
+                hidden: true,
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Same xAxis',
+                value_name: 'same_xaxis',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Percentage',
+                value_name: 'is_percentage',
+                default_value: false,
+                hidden: true,
             }, {
                 element_type: 'checkbox',
                 element_label: 'Sort by variance',
@@ -5516,6 +5719,85 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_label: 'Sort by absolute variance',
                 value_name: 'sort_by_absolute_variance',
                 default_value: false
+            }]
+        },
+        'delta_column_for_drill_down_combo': {
+            category_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Variance',
+            category_type: 'delta_column',
+            elements: [{
+                element_type: 'radio',
+                value_name: 'field',
+                element_label: 'Select Field',
+                element_options: [
+                    {label: 'None', value: ''},
+                    {label: 'Axis', value: 'category'},
+                    {label: 'Legend', value: 'series'},
+                ],
+                default_value: ''
+            }, {
+                element_type: 'input',
+                value_name: 'name',
+                element_label: 'Name',
+                default_value: '_Variance'
+            }, {
+                element_type: 'input',
+                value_name: 'formula',
+                element_label: 'Formula',
+                default_value: 'x2-x1'
+            }, {
+              element_type: 'input',
+              value_name: 'color',
+              element_label: 'Color',
+              default_value: ''
+            }, {
+                hidden: true,
+                element_type: 'radio',
+                value_name: 'chart',
+                element_label: 'Chart',
+                element_options: [
+                    {label: 'Markers', value: ''},
+                    {label: 'Line', value: 'line'},
+                    {label: 'Smooth Line', value: 'spline'},
+                    {label: 'Column', value: 'column'},
+                    {label: 'Area', value: 'area'},
+                    {label: 'Smooth Area', value: 'areaspline'},
+                ],
+                default_value: ''
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Only variance',
+                value_name: 'only_variant',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Same yAxis',
+                value_name: 'same_yaxis',
+                default_value: false,
+                hidden: true,
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Same xAxis',
+                value_name: 'same_xaxis',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Percentage',
+                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',
@@ -5580,6 +5862,39 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
     highchartsRenderer.chartsTypesInfo = {
+        'combo-chart': {
+            name: 'Column Combo Chart ',
+            label: 'Column Combo Chart ',
+            title: 'Allows for multiple chart display formats in one widget',
+            description: 'For example, Revenue and Cost of goods sold as clomuns, and Gross margin as a line',
+            axisName: 'X - Axis',
+            legendName: 'Data series',
+            startedMessage: 'To add multiple chart types, click on  “Combo Chart Options“. A Secondary Axis is available in this chart',
+            axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
+            legendTooltipTitle: 'Click to  display these data series as line or area charts',
+        },
+        'combo-column-chart': {
+            name: 'Column Combo Chart ',
+            label: 'Column Chart',
+            title: 'Allows for multiple chart display formats in one widget',
+            description: 'For example, Revenue and Cost of goods sold as clomuns, and Gross margin as a line',
+            axisName: 'X - Axis',
+            legendName: 'Data series',
+            startedMessage: 'To add multiple chart types, click on  “Combo Chart Options“. A Secondary Axis is available in this chart.',
+            axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
+            legendTooltipTitle: 'Click to  display these data series as line or area charts.',
+        },
+        'combo-stacked-chart': {
+            name: 'Stacked Column Combo Chart  ',
+            label: 'Stacked Column',
+            title: 'Allows for multiple chart display formats in one widget.',
+            description: 'For example, different department stacked clomuns, and average as a line.',
+            axisName: 'X - Axis',
+            legendName: 'Data series',
+            startedMessage: 'To add multiple chart types, click on  “Combo Chart Options“. A Secondary Axis is available in this chart.',
+            axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
+            legendTooltipTitle: 'Click to  display these data series as line or area charts.',
+        },
         'line-chart': {
             name: 'Line chart',
             label: 'Line Chart',
@@ -5809,6 +6124,53 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["table_options_transpose"],
                             highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["negative_number_format"],
+                            highchartsRenderer.suboptions["delta_column_combo"],
+                            highchartsRenderer.suboptions["error_policy"],
+                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["legends"],
+                        ]
+                    }
+                ]
+            },
+            {
+                type: 'combo',
+                name: 'Combo',
+                class: 'combo-chart',
+                subtypes: [{
+                    type: 'combo-column-chart',
+                    name: highchartsRenderer.chartsTypesInfo['combo-column-chart'].name,
+                    class: 'combo-column-chart',
+                    render: highchartsRenderer.ptRenderColumn,
+                    suboptions: [
+                        highchartsRenderer.suboptions["default_show"],
+                        highchartsRenderer.suboptions["axisY"],
+                        highchartsRenderer.suboptions["axisX"],
+                        highchartsRenderer.suboptions["tooltips"],
+                        highchartsRenderer.suboptions["label"],
+                        highchartsRenderer.suboptions["subtitle"],
+                        highchartsRenderer.suboptions["table_options"],
+                        highchartsRenderer.suboptions["chart"],
+                        highchartsRenderer.suboptions["negative_number_format"],
+                        highchartsRenderer.suboptions["delta_column_for_drill_down_combo"],
+                        highchartsRenderer.suboptions["error_policy"],
+                        highchartsRenderer.suboptions["from_version"],
+                        highchartsRenderer.suboptions["legends"],
+                    ],
+                },
+                    {
+                        type: 'combo-stacked-chart',
+                        name: highchartsRenderer.chartsTypesInfo['combo-stacked-chart'].name,
+                        class: 'combo-stacked-chart',
+                        render: highchartsRenderer.ptRenderStackedColumn,
+                        suboptions: [
+                            highchartsRenderer.suboptions["default_show"],
+                            highchartsRenderer.suboptions["axisY"],
+                            highchartsRenderer.suboptions["axisX"],
+                            highchartsRenderer.suboptions["tooltips"],
+                            highchartsRenderer.suboptions["label_with_percentage"],
+                            highchartsRenderer.suboptions["subtitle"],
+                            highchartsRenderer.suboptions["table_options"],
+                            highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["delta_column"],
                             highchartsRenderer.suboptions["error_policy"],
                             highchartsRenderer.suboptions["from_version"],
@@ -6715,6 +7077,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
     highchartsRenderer.setNewFieldNames = function (res) {
+        if (useTotalsCalculation) {
+            return res;
+        }
         if (res && res[0] && res[0]['DR_Values']) {
             lodash.forEach(res, function (item) {
                 item['DR_Values'] = highchartsRenderer.getFieldName(item['DR_Values']);
@@ -6728,7 +7094,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var datesFields = [];
         datesFields = lodash.filter(widget.rows, element => element.type == 'Date');
         datesFields = datesFields.concat(lodash.filter(widget.cols, element => element.type == 'Date'));
         const isCustomSorting = widget.options.sortingFields && Array.isArray(widget.options.sortingFields) && widget.options.sortingFields.length > 0;
         if (isCustomSorting) {
             lodash.forEach(datesFields, function (field) {
@@ -6796,7 +7162,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         "name": field.name,
                         "type": field.type,
                         "values": [],
-                        "sorting": field.sorting
+                        "sorting": field.sorting,
                     });
                 }
             } else if (field.sorting && field.sorting.type == "CustomOrder" && field.sorting.values) {
@@ -6881,6 +7247,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (field.sorting && field.sorting.type == "DateString") {
                     return $.pivotUtilities.sortDateStrings(field.sorting.month_order);
                 } else if (field.sorting && field.sorting.type == "largestToSmallest") {
+                    if (field.sorting.is_absolute)
+                        return $.pivotUtilities.largeToSmallSortByAbsolute;
                     return $.pivotUtilities.largeToSmallSort;
                 } else {
                     return $.pivotUtilities.sortAs(field.values);
@@ -7088,7 +7457,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
        itemMarginTop: 2,
      };
      const none = {
-        enabled: false,
+        enabled: false,
      };
      if (additionOptions.legends_position && additionOptions.legends_position.value) {