@datarailsshared/dr_renderer 1.3.59 → 1.4.5

package/src/highcharts_renderer.js

@@ -1,9 +1,19 @@
 const helpers = require('./dr-renderer-helpers');
 const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart');
 const { DrDonutChart } = require('./charts/dr_donut_chart');
-const seriesPointStylesHelper= require('./seriesPointStyles-helper');
+const seriesPointStylesHelper = require('./seriesPointStyles-helper');
 const smartQueriesHelper = require('./smart_queries_helper');
-const {DrGaugeCategoriesSummaryChart} = require("./charts/dr_gauge_categories_summary_chart");
+const valueFormatter = require('./value.formatter');
+const { DrGaugeCategoriesSummaryChart } = require("./charts/dr_gauge_categories_summary_chart");
+const {
+    TooMuchDataError,
+    NoDataError,
+    BaseRendererError,
+    DataConflictError,
+    GaugeConfigurationError,
+    GenericRenderingError,
+    GenericComputationalError
+} = require('./errors');
 
 const mobileBrowserRegex = new RegExp([
     '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
@@ -61,8 +71,10 @@ const CHART_TYPES = {
     GAUGE_SOLID_CHART: 'gauge-solid-chart',
     GAUGE_CHART: 'gauge-chart',
     GAUGE_CHART_ENHANCED: 'gauge-chart-enhanced',
+    GAUGE_CHART_DYNAMIC_GOAL: 'gauge-chart-dynamic-goal',
     GAUGE_CHART_CATEGORIES_SUMMARY: 'gauge-chart-categories-summary',
     KPI_WIDGET: 'kpi-widget',
+    SMART_KPI: 'smart-kpi',
     TEXT_WIDGET: 'text-widget',
     WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
     WATERFALL_WALKTHROUGH: 'waterfall-chart-walkthrough',
@@ -155,13 +167,7 @@ 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',
-    FORMAT_DATES_AS_OTHER_AXIS_TYPES: 'format_dates_as_other_axis_types',
-    MULTIPLE_DIMENSION_TAGS: 'multiple_dimension_tags',
-    USE_NEW_SCENARIO_TAG: 'use_new_scenario_tag',
-    ENABLE_SERVER_WIDGET_DATA_SORTING: 'enable_server_widget_data_sorting',
-}
+const FEATURES = helpers.FEATURES;
 
 const TICKS_COUNT = 5;
 
@@ -208,6 +214,34 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     highchartsRenderer.enabledNewWidgetValueFormatting = false;
     let disableAnimation = false;
 
+    const _handleComputationalError = (err, onlyOptions) => {
+        if (err instanceof BaseRendererError) {
+            throw err;
+        }
+
+        const genericError = new GenericComputationalError();
+        if (onlyOptions) {
+            console.error(genericError.title);
+            return {};
+        } else {
+            throw genericError;
+        }
+    };
+
+    const _handleRenderingError = (err, onlyOptions) => {
+        if (err instanceof BaseRendererError) {
+            throw err;
+        }
+
+        const genericError = new GenericRenderingError();
+        console.error(genericError.title);
+        if (onlyOptions) {
+            return {};
+        } else {
+            throw genericError;
+        }
+    }
+
     highchartsRenderer.hasFeature = function(featureFlagKey) {
         return lodash.includes(lodash.get(document, 'ReportHippo.user.features', []), featureFlagKey);
     }
@@ -404,7 +438,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     const isChartTypeSupportedForSmartQuery = (type) => {
         if (!type) return null;
-        return [
+        return lodash.includes([
             'line',
             'line-chart-forecast',
             'spline',
@@ -414,7 +448,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             highchartsRenderer.CHART_TYPES.LINE_CHART_SMOOTH,
             highchartsRenderer.CHART_TYPES.AREA_CHART,
             highchartsRenderer.CHART_TYPES.AREA_CHART_SMOOTH,
-        ].includes(type);
+        ], type);
     };
 
 
@@ -578,7 +612,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     //TODO No totals formatts
-    highchartsRenderer.defaultValueLabelsFormatter = function (pivotData, opts) {
+    highchartsRenderer.defaultValueLabelsFormatter = function (pivotData, opts, forcePercentage = false) {
+        const deltaColumn = lodash.get(opts, 'chartOptions.delta_column', null);
+        const isPercentage = deltaColumn && deltaColumn.is_percentage && deltaColumn.only_variant || forcePercentage;
+        
+        if (isPercentage) {
+            return highchartsRenderer.persantageValueLabelsFormatter(pivotData, opts);
+        }
+
         const labelOptions = lodash.get(opts.chartOptions, 'label') || lodash.get(opts.chartOptions, 'label_pie');
 
         return function () {
@@ -659,12 +700,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         var func = function () {
             var value = parseFloat(this.y);
+
             if (pivotData) {
+                const isChartWithMultiValues = highchartsRenderer.isChartWithMultiValues(pivotData);
                 let series_name = highchartsRenderer.getSeriesNameInFormatterContext(this);
                 var rows = series_name.split(highchartsRenderer.delimer);
+                var cols = highchartsRenderer.getColsInFormatterContext(this);
 
-                if (is_drill_down_pie && highchartsRenderer.selfStartsWith(series_name, "Series ")) {
+                if (is_drill_down_pie && (highchartsRenderer.selfStartsWith(series_name, "Series ") || isChartWithMultiValues)) {
                     rows = [];
+
+                    if (isChartWithMultiValues) {
+                        cols = pivotData.getColKeys()[0];
+                    }
                 }
 
                 if (pivotData.rowAttrs.length == 0
@@ -673,8 +721,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     rows = [];
                 }
 
-                var cols = highchartsRenderer.getColsInFormatterContext(this);
-                if (typeof (cols) == 'object' && cols.name) {
+                if (typeof (cols) == 'object' && cols && cols.name) {
                     cols = cols.name;
                 }
 
@@ -698,7 +745,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 try {
                     const percentageArray = [];
 
-                    if (is_drill_down_pie && !highchartsRenderer.selfStartsWith(series_name, "Series ")) {
+                    if (is_drill_down_pie && !highchartsRenderer.selfStartsWith(series_name, "Series ") && !isChartWithMultiValues) {
                         let temp = cols;
                         cols = rows;
                         rows = temp;
@@ -819,19 +866,27 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             const isTrendSeries = this.series.options.className === SERIES_CLASSNAMES.TREND_SERIES;
 
             var y = parseFloat(this.y);
+
             if (pivotData) {
+                const isChartWithMultiValues = highchartsRenderer.isChartWithMultiValues(pivotData);
                 let series_name = highchartsRenderer.getSeriesNameInFormatterContext(this);
                 var rows = series_name.split(highchartsRenderer.delimer);
-                if (is_drill_down_pie && highchartsRenderer.selfStartsWith(series_name,"Series ")) {
+                var cols = highchartsRenderer.getColsInFormatterContext(this);
+                
+                if (is_drill_down_pie && (highchartsRenderer.selfStartsWith(series_name,"Series ") || isChartWithMultiValues)) {
                     rows = [];
+                    
+                    if (isChartWithMultiValues) {
+                        cols = pivotData.getColKeys()[0];
+                    }
                 }
+
                 if (pivotData.rowAttrs.length == 0
                     || this.series.options.className === 'totalSeries'
                     || isTrendSeries) {
                     rows = [];
                 }
 
-                var cols = highchartsRenderer.getColsInFormatterContext(this);
                 if (lodash.isNil(cols) && is_drill_down_pie) {
                     cols = this.name;
                 }
@@ -846,8 +901,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (variant_name && rows && rows[0] && variant_name == rows[0]) {
                     rows[0] = variant_name_default_name;
                 }
+
                 try {
-                    if (is_drill_down_pie && !highchartsRenderer.selfStartsWith(series_name,"Series ")) {
+                    if (is_drill_down_pie && !highchartsRenderer.selfStartsWith(series_name,"Series ") && !isChartWithMultiValues) {
                         let temp = cols;
                         cols = rows;
                         rows = temp;
@@ -886,11 +942,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
 
                     var aggr = pivotData.getAggregator(rows, cols);
-
+                    
                     let formatted_value_to_return = $.pivotUtilities.getFormattedNumber(y, null, opts);
-                    if (aggr.value() || isWaterfallBreakdown) {
+                    if (aggr.value() || isWaterfallBreakdown || isChartWithMultiValues) {
                         formatted_value_to_return = $.pivotUtilities.getFormattedNumber(
-                            isWaterfallBreakdown || isWaterfallWalkthrough || isTrendSeries ? y : aggr.value(), aggr, opts
+                            isChartWithMultiValues || isWaterfallBreakdown || isWaterfallWalkthrough || isTrendSeries ? y : aggr.value(), aggr, opts
                         );
                     }
 
@@ -1043,26 +1099,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return forExport;
     };
 
-    highchartsRenderer.getNoDataResult = function (to_match) {
-        var temp_result = $('<div class="noData-box"></div>');
-        var resultsArr = [];
-
-        if (to_match) {
-            resultsArr.push(highchartsRenderer.getWidgetPlaceholder(highchartsRenderer.widgetPlaceholders.tooMuchData));
-        } else {
-            resultsArr.push(highchartsRenderer.getWidgetPlaceholder(highchartsRenderer.widgetPlaceholders.nodata));
-        }
-
-        temp_result.html(resultsArr);
-
-        return temp_result;
-    };
-
-    highchartsRenderer.getWidgetPlaceholder = function(placeholder) {
-        const defaultPlaceholder = $('<div class="noData"><i class="noData-image"></i> no data</div>');
-        return $.pivotUtilities.errorHandling.getErrorPlaceholder(placeholder) || defaultPlaceholder;
-    }
-
     highchartsRenderer.ptCreateElementAndDraw = function (chartOptions, opts) {
         chartOptions = lodash.merge(highchartsRenderer.getCommonChartOptions(opts.chartOptions), chartOptions);
 
@@ -1163,13 +1199,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         if (!seriesDataLength && !chartOptions.onlyText) {
-            result = highchartsRenderer.getNoDataResult();
-            opts.error_has_occurred = true;
-            opts.error_params = highchartsRenderer.widgetPlaceholders.nodata;
+            const noDataError = new NoDataError();
+            console.error(noDataError.title);
+            throw noDataError;
         } else if (!chartOptions.onlyText && chartOptions.series && toMatch) {
-            result = highchartsRenderer.getNoDataResult(toMatch);
-            opts.error_has_occurred = true;
-            opts.error_params = highchartsRenderer.widgetPlaceholders.tooMuchData;
+            const tooMuchDataError = new TooMuchDataError();
+            console.error(tooMuchDataError.title);
+            throw tooMuchDataError;
         } else {
             chartOptions = highchartsRenderer.updateChartOptions(chartOptions, opts);
             chartOptions = highchartsRenderer.updateChartOptions(chartOptions, {credits: {enabled: false}});
@@ -1237,6 +1273,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var chart_series = [],
             row_n_keys = pivotData.getRowKeys(),
             col_n_keys = pivotData.getColKeys();
+        const chartType = chartOptions && chartOptions.chart && chartOptions.chart.type ? chartOptions.chart.type : null;
+        const isCombiLineForecastChart = opts.chartOptions.isSmartQueriesEnabled;
+        const indexOfScenarioCycleFilter = lodash.findIndex(pivotData.rowAttrs, (rowAttr) => rowAttr === 'Scenario Cycle');
+
+        if (isChartTypeSupportedForSmartQuery(chartType) && pivotData.rowAttrs?.length < row_n_keys?.[0]?.length && indexOfScenarioCycleFilter > -1) {
+            const indexOfScenarioFilter = row_n_keys[0].length - 1;
+            for (let i = 0; i < row_n_keys?.length; i++) {
+                row_n_keys[i].splice(indexOfScenarioFilter, 1);
+            }
+            row_n_keys = Array.from(
+                new Set(row_n_keys.map(JSON.stringify))
+            ).map(JSON.parse);
+        }
 
         var has_delta = false;
         if (additionOptions && lodash.has(additionOptions, "delta_column.field") && additionOptions.delta_column.field == "series") {
@@ -1320,7 +1369,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
 
             if (has_delta && additionOptions && ob.name == additionOptions.delta_column.name) {
-                ob = highchartsRenderer.getVariantSeries(ob, additionOptions.delta_column);
+                ob = highchartsRenderer.getVariantSeries(ob, additionOptions.delta_column, pivotData);
                 variat_serias = ob;
             }
 
@@ -1417,21 +1466,23 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chart_series = chart_series.concat(trendSerieses);
 
         highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts, opts.total && opts.totalSeriesSettings && opts.totalSeriesSettings.secondaryAxis);
-        
-        const chartType = chartOptions && chartOptions.chart && chartOptions.chart.type ? chartOptions.chart.type : null;
         const smartQuerySeries = isChartTypeSupportedForSmartQuery(chartType)
-            ? smartQueriesHelper.createSingleDataSeriesForForecast(chart_series, opts.chartOptions, pivotData)
+            ? smartQueriesHelper.createSingleDataSeriesForForecast(chart_series, opts.chartOptions, pivotData, isCombiLineForecastChart)
             : null;
 
         if (smartQuerySeries) {
             if (chart_series.length > 1) {
-                lodash.remove(chart_series, s => 
-                (s.name && lodash.includes(s.name, 'SQ_Actuals')) || s.name === 'Forecast'
-                );
+                if (isCombiLineForecastChart) {
+                    chart_series = smartQuerySeries;
+                } else {
+                    lodash.remove(chart_series, s =>
+                        (s.name && lodash.includes(s.name, 'SQ_Actuals')) || s.name === 'Forecast'
+                    );
+                    chart_series.push(smartQuerySeries);
+                }
             } else {
-                chart_series = []
+                chart_series = [smartQuerySeries];
             }
-            chart_series.push(smartQuerySeries);
         }
 
         return chart_series;
@@ -1526,7 +1577,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
 
             if (has_delta && row_n_value && row_n_value.some(val => val === additionOptions.delta_column.name)) {
-                ob = highchartsRenderer.getVariantSeries(ob, additionOptions.delta_column);
+                ob = highchartsRenderer.getVariantSeries(ob, additionOptions.delta_column, pivotData);
                 variat_serias = ob;
             }
 
@@ -1848,7 +1899,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     }
 
-    highchartsRenderer.getVariantSeries = function (series, delta_column_options) {
+    highchartsRenderer.getVariantSeries = function (series, delta_column_options, pivotData) {
         const varianceColor = delta_column_options.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
         series.name = delta_column_options.name.replace('_', '');
         series.initialName = series.name;
@@ -1875,6 +1926,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
 
+        if (delta_column_options.is_percentage) {
+            lodash.forEach(series.data, function (it, index) {
+                if (pivotData.rowKeys && pivotData.rowKeys.length && pivotData.colKeys && pivotData.colKeys.length) {
+                    const agg = pivotData.getAggregator([pivotData.rowKeys[0]], pivotData.colKeys[index]);
+                    if (agg && valueFormatter.isAbsoluteValue(delta_column_options.formula)) {
+                        const baseValue = pivotData.getAggregator([pivotData.rowKeys[0]], pivotData.colKeys[index]).value();
+                        it.y = valueFormatter.getRelatedValue(it.y, baseValue);
+                    }
+                }
+            });
+        }
+
         if (delta_column_options.chart == 'line') {
             series.type = 'line';
             series.lineColor = varianceColor;
@@ -1921,7 +1984,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         } else if (delta_column_options.chart == 'spline') {
             series.color = varianceColor;
             series.type = 'spline'
-        }
+        } 
         return series;
     }
 
@@ -1983,14 +2046,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart = function (pivotData, chartOptions, additionOptions, opts) {
-
         var pie_drill_down_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;
-
         const othersName = highchartsRenderer.getOthersName(opts);
 
         lodash.forEach(col_n_keys, function (col_n_value) {
@@ -2011,17 +2070,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 lodash.forEach(row_n_keys, function (row_n_value) {
                     var agg = pivotData.getAggregator(row_n_value, col_n_value);
                     var val = agg.value();
-                    if (val != null && row_n_value[0]) {
+                    if (val != null && row_n_value.length) {
                         if ($.isNumeric(val)) {
                             val = parseFloat(val);
-                            // if (val > -1 && val < 1) {
-                            //     val = parseFloat(val.toPrecision(4));
-                            // } else {
-                            //     val = parseFloat(val.toFixed(2));
-                            // }
                         }
 
-                        const row_initial_name = row_n_value[0] === highchartsRenderer.DR_OTHERS_KEY ? othersName : row_n_value[0];
+                        const row_initial_name = row_n_value[0] === highchartsRenderer.DR_OTHERS_KEY ? othersName : row_n_value;
                         const row_name = highchartsRenderer.getFormattedRowKey(row_initial_name, pivotData);
                         col_ob.data.push({
                             name: row_name,
@@ -2030,6 +2084,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         });
                     }
                 });
+
+                col_ob.data = Object.values(
+                    lodash.reduce(col_ob.data, (acc, item) => {
+                        const key = Array.isArray(item.name) ? item.name[0] : item.name;
+                        const name = key ? [key] : [col_n];
+                        if (!acc[key]) {
+                            acc[key] = { name: name, initialName: name, y: 0 };
+                        }
+                        acc[key].y += item.y;
+                        return acc;
+                    }, {})
+                );
+
                 if (col_ob.data.length) {
                     pie_drill_down_series.push(col_ob);
                 }
@@ -2081,9 +2148,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     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);
+        const forcePercentage = lodash.get(opts, 'comboOptions.secondaryAxisSettings.is_percentage', false) || lodash.get(additionOptions, 'delta_column.is_percentage', false);
 
         chartOptions.yAxis = [chartOptions.yAxis];
         chartOptions.yAxis[1] = {
@@ -2096,7 +2161,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             },
             labels: {
-                formatter: labels_formatter,
+                formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts, forcePercentage),
                 style: {
                     color: varianceColor
                 }
@@ -2301,6 +2366,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return new DrGaugeChart(pivotData, opts).render();
     };
 
+    highchartsRenderer.ptRenderGaugeDynamicGoal = (pivotData, opts) => {
+        return new DrGaugeChart(pivotData, opts, true).render();
+    };
+
     highchartsRenderer.ptRenderGaugeCategoriesSummary = (pivotData, opts) => {
         return new DrGaugeCategoriesSummaryChart(pivotData, opts).render();
     };
@@ -2488,7 +2557,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;
         var colAttrs = pivotData.colAttrs;
-
         var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('line-chart');
 
         chartOptions.chart = {
@@ -3191,95 +3259,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
-    highchartsRenderer.ptRenderColumnWithDrilldown = function (pivotData, opts, drilldownFunc) {
-        var chartOptions = {};
-        var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('column-chart-drilldown');
-
-
-        chartOptions.chart = {
-            type: 'column',
-            events: {
-                'drilldown': function (e) {
-                    highchartsRenderer.modifyEventPointForDrilldown(e);
-                    if (drilldownFunc)
-                        drilldownFunc(e, this, "drilldown");
-
-                },
-                'drillup': function (e) {
-                    if (drilldownFunc)
-                        drilldownFunc(e, this, "drillup");
-
-                }
-
-            }
-        };
-        if (disableAnimation) {
-            chartOptions.chart.animation = false;
-        }
-        highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, additionOptions);
-
-        chartOptions.yAxis = {
-            min: null,
-            max: null,
-            title: {
-                text: additionOptions && additionOptions.axisY ? additionOptions.axisY.name : ''
-            },
-            labels: {
-                formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
-            }
-        };
-        if (additionOptions) {
-            highchartsRenderer.setYAxisMinMax(chartOptions.yAxis, additionOptions.axisY);
-        }
-
-        chartOptions.legend = {enabled: false};
-
-        chartOptions.plotOptions = {
-            series: {
-                animation: !disableAnimation,
-                borderWidth: 0,
-                cropThreshold: 1000,
-                dataLabels: {
-                    allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
-                    enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
-                    formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
-                    style: highchartsRenderer.getDataLabelsStyle(additionOptions)
-                }
-            },
-            column: {
-                borderRadius: 1,
-            }
-        };
-
-        chartOptions.tooltip = {
-            formatter: function () {
-                var y = parseFloat(this.y);
-                var agg = pivotData.getAggregator([], []);
-                if (agg) {
-                    return '<b>' + this.point.name + '</b>: ' + agg.format(y, true);
-                } else {
-                    return '<b>' + this.point.name + '</b>: ' + y.toLocaleString();
-                }
-            },
-        };
-
-        chartOptions.xAxis = {
-            type: 'category',
-        };
-        chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
-        //if (drilldownFunc)
-        //    chartOptions.drilldown = {}
-        //else
-        chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
-
-        highchartsRenderer.handleGridLines(additionOptions, chartOptions)
-
-        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
-
-        return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
-    };
-
     highchartsRenderer.ptRenderBar = function (pivotData, opts) {
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;
@@ -3368,6 +3347,37 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var rowAttrs = pivotData.rowAttrs;
         var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('bar-chart-stacked');
 
+        const isVarianceOnly = lodash.get(additionOptions, 'delta_column.only_variant', false);
+        const labelStyle = lodash.merge(
+            LABEL_DEFAULT_OPTIONS.style,
+            { color: lodash.get(additionOptions, `${ highchartsRenderer.getLabelOptionKey(additionOptions) }.font_color`) || LABEL_DEFAULT_OPTIONS.color },
+            highchartsRenderer.getDataLabelsStyle(additionOptions)
+        );
+
+        const stackLabelsFormatter = function() {
+            return function() {
+                if (this.total) {
+                    var total = parseFloat(this.total);
+                    var agg = pivotData.getAggregator([], []);
+                    if (agg) {
+                        return agg.format(total, true);
+                    } else {
+                        return total.toLocaleString();
+                    }
+                }
+                return '';
+            }
+        }
+
+        const dataLabelsFormatter = function() {
+            return function() {
+                const deltaColumnName = lodash.get(opts, 'chartOptions.delta_column.name', '');
+                const currentRowName = this.series && this.series.name ? String(this.series.name) : '';
+                const isVariance = currentRowName.replace('_', '').toLowerCase() === deltaColumnName.replace('_', '').toLowerCase();
+                return isVariance ? highchartsRenderer.defaultDataLabelFormatter(pivotData, opts).call(this) : '';
+            }
+        }
+
         chartOptions.chart = {
             type: 'bar',
             zoomType: 'x'
@@ -3383,27 +3393,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 text: additionOptions && additionOptions.axisY ? additionOptions.axisY.name : ''
             },
             stackLabels: {
-                enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
-                formatter: function () {
-                    if (this.total) {
-                        var total = parseFloat(this.total);
-                        var agg = pivotData.getAggregator([], []);
-                        if (agg) {
-                            return agg.format(total, true);
-                        } else {
-                            return total.toLocaleString();
-                        }
-                    }
-                    return "";
-                },
-                style: lodash.merge(
-                    LABEL_DEFAULT_OPTIONS.style,
-                    {
-                        color: lodash.get(additionOptions, `${ highchartsRenderer.getLabelOptionKey(additionOptions) }.font_color`)
-                            || LABEL_DEFAULT_OPTIONS.color,
-                    },
-                    highchartsRenderer.getDataLabelsStyle(additionOptions)
-                ),
+                enabled: additionOptions && additionOptions.label && !isVarianceOnly ? additionOptions.label.show : false,
+                formatter: stackLabelsFormatter.call(this),
+                style: labelStyle
             },
             labels: {
                 formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
@@ -3427,7 +3419,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.plotOptions = {
             series: {
                 animation: !disableAnimation,
-                stacking: 'normal'
+                stacking: 'normal',
+                dataLabels: {
+                    allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
+                    enabled: additionOptions && additionOptions.label ? additionOptions.label.show : false,
+                    formatter: dataLabelsFormatter.call(this),
+                    style: labelStyle
+                }
             }
         };
 
@@ -3464,7 +3462,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         const additionOptions = opts.chartOptions
             ? opts.chartOptions
             : highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN);
-
+        
         if (!highchartsRenderer.isSortingOnBackendEnabled) {
             pivotData.colKeys = lodash.map(lodash.keys(pivotData.colTotals), key => [key]);
         }
@@ -3769,8 +3767,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.isRowKeyShouldBePercentage = function(render_options, rowKey) {
-        if (render_options && render_options.comboOptions && render_options.comboOptions.secondaryAxisSettings &&
-            render_options.comboOptions.secondaryAxisSettings.is_percentage) {
+        if (lodash.get(render_options, 'comboOptions.secondaryAxisSettings.is_percentage', false) || lodash.get(render_options, 'chartOptions.delta_column.is_percentage', false)) {
             const rowKeyString = rowKey.join(highchartsRenderer.delimer);
             const rowKeyOptions = lodash.find(render_options.comboOptions.seriesOptions, {series: rowKeyString});
             if (rowKeyOptions && rowKeyOptions.secondaryAxis) {
@@ -3860,12 +3857,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.sum, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
 
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x);
 
-                    return formated_value && formated_value.hasOwnProperty('value') && formated_value.value != null ?
-                        formated_value.value : x.toLocaleString();
+                    return formated_value && formated_value.hasOwnProperty('value') && formated_value.value != null 
+                        ? formated_value.value 
+                        : x.toLocaleString();
                 },
                 numInputs: attr != null ? 0 : 1
             };
@@ -3928,6 +3931,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         return ''
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.uniq, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     if (is_graph == true || only_formats == true) {
                         let number_format = this.widget_values_format || null;
                         let formated_value = highchartsRenderer.formatValue('n', number_format, x);
@@ -4015,6 +4023,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.sum, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x)
 
@@ -4102,6 +4115,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.val, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
 
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x)
@@ -4189,6 +4207,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.val, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
 
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x)
@@ -4279,6 +4302,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.sum, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
 
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x)
@@ -4546,19 +4574,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
             if (uniqueCategories && ((maxCategories && uniqueCategories.length > maxCategories)
                 || (minCategories && uniqueCategories.length < minCategories))) {
-                options.error_has_occurred = true;
-                const breakdownText = `Please adjust your dashboard's reference date or filter selections as \
-                the quantity of data doesn't match the limit of at least ${ minCategories } values.`;
-                const walkthroughText = `Please adjust your dashboard's reference date and filter selections as \
-                the quantity of data doesn't match the chart's ${ minCategories }-${ maxCategories } value limit.`;
-
-                options.error_params = {
-                    title: 'Data Conflict',
-                    text: isBreakdown ? breakdownText : walkthroughText,
-                    class: uniqueCategories.length < minCategories ? 'waterfall-nodata' : 'waterfall-too-much-data',
-                }
-
-                return highchartsRenderer.getNoDataResult(true);
+                const dataConflictError = new DataConflictError({
+                    chartType: lodash.get(widget, 'chart_type'),
+                    uniqueCategories,
+                    minCategories,
+                    maxCategories
+                });
+                console.error(dataConflictError.title);
+                throw dataConflictError;
             }
         }
 
@@ -4567,9 +4590,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
-            options.error_has_occurred = true;
-            options.error_params = highchartsRenderer.widgetPlaceholders.nodata;
-            return highchartsRenderer.getNoDataResult();
+            const noDataError = new NoDataError();
+            console.error(noDataError.title);
+            throw noDataError;
         }
 
         if (rowData.length > highchartsRenderer.MAX_ROWS_FOR_SHOW_RESULTS) {
@@ -4577,9 +4600,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
-            options.error_has_occurred = true;
-            options.error_params = highchartsRenderer.widgetPlaceholders.tooMuchData;
-            return highchartsRenderer.getNoDataResult(true);
+            const tooMuchDataError = new TooMuchDataError();
+            console.error(tooMuchDataError.title);
+            throw tooMuchDataError;
         }
 
         var tmp = $.pivotUtilities.aggregatorTemplates;
@@ -4641,28 +4664,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 result = opts.renderer(pivotData, opts.rendererOptions);
             } catch (_error) {
-                e = _error;
-                if (typeof console !== "undefined" && console !== null) {
-                    console.error(e.stack);
-                }
-                result = $("<span>").html(opts.localeStrings.renderError);
-                if (options.onlyOptions) {
-                    result = {};
-                }
+                result = _handleRenderingError(_error, options.onlyOptions);
             }
 
             if (lodash.isObject(lodash.get(widget, 'pivot'))) {
                 widget.pivot.sortByValueAttrs = pivotData.sortByValueAttrs;
             }
         } catch (_error) {
-            e = _error;
-            if (typeof console !== "undefined" && console !== null) {
-                console.error(e.stack);
-            }
-            result = $("<span>").html(opts.localeStrings.computeError);
-            if (options.onlyOptions) {
-                result = {};
-            }
+            result = _handleComputationalError(_error, options.onlyOptions);
         }
 
         return result;
@@ -4700,19 +4709,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
             if (uniqueCategories && ((maxCategories && uniqueCategories.length > maxCategories)
                 || (minCategories && uniqueCategories.length < minCategories))) {
-                options.error_has_occurred = true;
-                const breakdownText = `Please adjust your dashboard's reference date or filter selections as \
-                the quantity of data doesn't match the limit of at least ${ minCategories } values.`;
-                const walkthroughText = `Please adjust your dashboard's reference date and filter selections as \
-                the quantity of data doesn't match the chart's ${ minCategories }-${ maxCategories } value limit.`;
-
-                options.error_params = {
-                    title: 'Data Conflict',
-                    text: isBreakdown ? breakdownText : walkthroughText,
-                    class: uniqueCategories.length < minCategories ? 'waterfall-nodata' : 'waterfall-too-much-data',
-                }
-
-                return highchartsRenderer.getNoDataResult(true);
+                const dataConflictError = new DataConflictError({
+                    chartType: lodash.get(widget, 'chart_type'),
+                    uniqueCategories,
+                    minCategories,
+                    maxCategories
+                });
+                console.error(dataConflictError.title);
+                throw dataConflictError;
             }
         }
 
@@ -4721,9 +4725,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
-            options.error_has_occurred = true;
-            options.error_params = highchartsRenderer.widgetPlaceholders.nodata;
-            return highchartsRenderer.getNoDataResult();
+            const noDataError = new NoDataError();
+            console.error(noDataError.title);
+            throw noDataError;
         }
 
         if (rowData.length > highchartsRenderer.MAX_ROWS_FOR_SHOW_RESULTS) {
@@ -4731,9 +4735,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
-            options.error_has_occurred = true;
-            options.error_params = highchartsRenderer.widgetPlaceholders.tooMuchData;
-            return highchartsRenderer.getNoDataResult(true);
+            const tooMuchDataError = new TooMuchDataError();
+            console.error(tooMuchDataError.title);
+            throw tooMuchDataError;
+        }
+
+        if (lodash.get(widget, 'chart_type') === highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL) {
+            const noNeedleOrGoalSelected =
+                !lodash.get(widget, 'options.chartOptions.dynamicGaugeConfig.goal')
+                || !lodash.get(widget, 'options.chartOptions.dynamicGaugeConfig.needle');
+
+            if (noNeedleOrGoalSelected) {
+                const gaugeError = new GaugeConfigurationError();
+                console.error(gaugeError.title);
+                throw gaugeError;
+            }
         }
 
         var tmp = $.pivotUtilities.aggregatorTemplates;
@@ -4794,28 +4810,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 result = opts.renderer(pivotData, opts.rendererOptions);
             } catch (_error) {
-                e = _error;
-                if (typeof console !== "undefined" && console !== null) {
-                    console.error(e.stack);
-                }
-                result = $("<span>").html(opts.localeStrings.renderError);
-                if (options.onlyOptions) {
-                    result = {};
-                }
+                result = _handleRenderingError(_error, options.onlyOptions);
             }
 
             if (lodash.isObject(lodash.get(widget, 'pivot'))) {
                 widget.pivot.sortByValueAttrs = pivotData.sortByValueAttrs;
             }
         } catch (_error) {
-            e = _error;
-            if (typeof console !== "undefined" && console !== null) {
-                console.error(e.stack);
-            }
-            result = $("<span>").html(opts.localeStrings.computeError);
-            if (options.onlyOptions) {
-                result = {};
-            }
+            result = _handleComputationalError(_error, options.onlyOptions);
         }
 
         return result;
@@ -4854,6 +4856,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             dateValuesDictionary: pivotOptions ? pivotOptions.dateValuesDictionary : null,
             keysObject: pivotOptions ? pivotOptions.keysObject : null,
             isDrillDownDisabled: pivotOptions ? pivotOptions.isDrillDownDisabled : false,
+            pivotUiFnRemoved: pivotOptions ? pivotOptions.pivotUiFnRemoved : false,
         };
 
         if (!subopts.rendererOptions) {
@@ -5291,45 +5294,61 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 },
                 seriesOptions: []
             }
-            if (options.chartOptions && options.chartOptions.delta_column && options.chartOptions.delta_column.field === 'series') {
-                let deltaColumnSeries = {
-                    series: options.chartOptions.delta_column.name,
-                    secondaryAxis: !options.chartOptions.delta_column.same_yaxis,
-                };
-                switch (options.chartOptions.delta_column.chart) {
-                    case 'line':
-                        deltaColumnSeries.chartType = 'line-chart';
-                        break;
-                    case 'spline':
-                        deltaColumnSeries.chartType = 'line-chart-smooth';
-                        break;
-                    case 'area':
-                        deltaColumnSeries.chartType = 'area-chart';
-                        break;
-                    case 'areaspline':
-                        deltaColumnSeries.chartType = 'area-chart-smooth';
-                        break;
-                    case 'scatter':
-                        deltaColumnSeries.chartType = 'scatter-chart';
-                        break;
-                    case 'column':
-                        deltaColumnSeries.chartType = 'column-chart';
-                        break;
-                    default:
-                        deltaColumnSeries.chartType = 'scatter-chart';
-                        break;
-                }
-                options.comboOptions.seriesOptions.push(deltaColumnSeries);
-                options.comboOptions.secondaryAxisSettings.name = options.chartOptions.delta_column.name.replace('_', '');
-                options.comboOptions.secondaryAxisSettings.is_percentage = options.chartOptions.delta_column.is_percentage;
+        }
+        
+        if (options.chartOptions && options.chartOptions.delta_column && options.chartOptions.delta_column.field === 'series') {
+            let deltaColumnSeries = {
+                series: options.chartOptions.delta_column.name,
+                secondaryAxis: !options.chartOptions.delta_column.same_yaxis,
+            };
+            switch (options.chartOptions.delta_column.chart) {
+                case 'line':
+                    deltaColumnSeries.chartType = 'line-chart';
+                    break;
+                case 'spline':
+                    deltaColumnSeries.chartType = 'line-chart-smooth';
+                    break;
+                case 'area':
+                    deltaColumnSeries.chartType = 'area-chart';
+                    break;
+                case 'areaspline':
+                    deltaColumnSeries.chartType = 'area-chart-smooth';
+                    break;
+                case 'scatter':
+                    deltaColumnSeries.chartType = 'scatter-chart';
+                    break;
+                case 'column':
+                    deltaColumnSeries.chartType = 'column-chart';
+                    break;
+                default:
+                    deltaColumnSeries.chartType = 'scatter-chart';
+                    break;
             }
+            options.comboOptions.seriesOptions.push(deltaColumnSeries);
         }
     };
 
-    highchartsRenderer.setMissingWidgetOptions = function(options, type) {
-        if (!lodash.has(options, 'chartOptions')) return;
+    highchartsRenderer.setMissingWidgetOptions = function (options, type) {
+        if (!options || !lodash.has(options, 'chartOptions')) return;
+
         const defaultOptions = highchartsRenderer.getDefaultValueForChart(type);
-        options.chartOptions = lodash.merge(defaultOptions, options.chartOptions);
+
+        // User can remove segment and this part of code was made to
+        // prevent a set of default value
+        if (type === highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL) {
+            const chartOptions = options.chartOptions || {};
+            const userSegments = chartOptions.segments;
+            const merged = lodash.merge({}, defaultOptions, lodash.omit(chartOptions, 'segments'));
+
+            if (Array.isArray(userSegments)) {
+                merged.segments = userSegments;
+            }
+
+            options.chartOptions = merged;
+            return;
+        }
+
+        options.chartOptions = lodash.merge({}, defaultOptions, options.chartOptions);
     };
 
     highchartsRenderer.addPivotOptions = function (selectedTemplateWOData, widgetOptions, drilldownFunction, drillDownListFunction) {
@@ -5996,21 +6015,30 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     ];
 
     highchartsRenderer.getDefaultValueForChart = function (type, existing_options) {
-        const chartOpt = type === highchartsRenderer.richTextSubType.type
+        const chartOpt = (type === highchartsRenderer.richTextSubType.type)
             ? highchartsRenderer.richTextSubType
             : highchartsRenderer.getChartOptionsBySubType(type);
-        let valToReturn = {};
-        if (chartOpt) {
-            lodash.forEach(chartOpt.suboptions, (suboption) => {
-                valToReturn[suboption.category_type] = highchartsRenderer.getDefaultValueForSubOptions(suboption, existing_options, type);
-            });
-        }
 
-        if (chartOpt.hasOwnProperty('default_options') && chartOpt.default_options) {
-            valToReturn = lodash.extend(valToReturn, chartOpt.default_options);
-        }
+        if (!chartOpt) return {};
 
-        return valToReturn;
+        const clone = (v) => (globalThis.structuredClone ? structuredClone(v) : lodash.cloneDeep(v));
+
+        const subValues = {};
+        lodash.forEach(chartOpt.suboptions, (suboption) => {
+            subValues[suboption.category_type] = clone(
+                highchartsRenderer.getDefaultValueForSubOptions(suboption, existing_options, type)
+            );
+        });
+
+        const baseDefaults = clone(chartOpt.default_options || {});
+
+        const overwriteArrays = (objValue, srcValue) => {
+            if (Array.isArray(objValue) || Array.isArray(srcValue)) {
+                return clone(srcValue);
+            }
+        };
+
+        return lodash.mergeWith({}, subValues, baseDefaults, overwriteArrays);
     };
 
     highchartsRenderer.getCommonChartOptions = function(additionalOptions) {
@@ -6089,6 +6117,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         
         if (option) {
             const type = option.category_type;
+
+            const existingOptionValue = lodash.get(existing_options, type);
+            if (!option.elements) {
+                return existingOptionValue || option.default_value;
+            }
+
             lodash.forEach(option.elements, function (elem) {
                 if (existing_options && lodash.has(existing_options, type + '.' + elem.value_name)) {
                     valToReturn[elem.value_name] = lodash.get(existing_options, type + '.' + elem.value_name);
@@ -6117,8 +6151,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.chartsTypesInfo[type] ? highchartsRenderer.chartsTypesInfo[type].legendName : CHART_LEGEND_DEFAULT_LABEL;
     };
 
-    highchartsRenderer.widgetPlaceholders = lodash.assign({}, $.pivotUtilities.errorHandling.placeholders);
-
     const suboptionsFontSizeValues = (lodash.map(lodash.fill(new Array(19), null), function (item, index) {
         const fontValue = index + 6;
         return { label: fontValue, value: fontValue }
@@ -6625,7 +6657,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_type: 'checkbox',
                     value_name: 'dislay_empty_values',
                     element_label: 'Display empty values',
-                    default_value: true
+                    default_value: false
                 },
             ]
         },
@@ -6653,7 +6685,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 value_name: 'dislay_empty_values',
                 element_label: 'Display empty values',
-                default_value: true
+                default_value: false
             },
             {
                 element_type: 'devider',
@@ -6948,12 +6980,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 {
                     element_type: 'devider',
                 },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Goal name',
-                    value_name: 'show_goal_name',
-                    default_value: true,
-                },
                 {
                     element_type: 'checkbox',
                     element_label: 'Value % out of Goal',
@@ -6966,6 +6992,20 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     value_name: 'show_percentage_in_segments',
                     default_value: false,
                 },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Show Goal label',
+                    value_name: 'show_goal_name',
+                    default_value: true,
+                },
+                {
+                    element_type: 'input',
+                    show_in_one_row: true,
+                    element_label: 'Goal name',
+                    value_name: 'goal_name',
+                    default_value: 'Goal',
+                    showFn: () => highchartsRenderer.hasFeature(FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL),
+                },
             ]
         },
         'label_with_percentage': {
@@ -7414,6 +7454,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 value_name: 'formula',
                 element_label: 'Formula',
                 default_value: 'x2-x1'
+            },
+            {
+                element_type: 'input',
+                value_name: 'color',
+                element_label: 'Color',
+                default_value: ''
             }, {
                 element_type: 'radio',
                 value_name: 'chart',
@@ -7573,6 +7619,40 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             ],
             default_value: ''
           }]
+        },
+        gauge_goal: {
+            is_hidden: true,
+            categorys_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Gauge goal',
+            category_type: 'goal',
+            elements: [
+                {
+                    element_type: 'input',
+                    value_name: 'title',
+                    element_label: 'Goal title',
+                    default_value: 'Goal',
+                },
+                {
+                    element_type: 'input',
+                    value_name: 'value',
+                    element_label: 'Goal value',
+                    default_value: 1000000,
+                },
+            ],
+        },
+        gauge_segments: {
+            is_hidden: true,
+            categorys_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Gauge segments',
+            category_type: 'segments',
+            default_value: GAUGE_OPTIONS_DEFAULT.segments,
+        },
+        gauge_is_absolute: {
+            is_hidden: true,
+            categorys_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Gauge is absolute value',
+            category_type: 'isAbsoluteValue',
+            default_value: false,
         }
     };
 
@@ -7596,6 +7676,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipDescription: 'The category (usually an independent variable) is shown on the x-axis and should be between 2 to 5 total columns. ',
             legendTooltipTitle: 'Drag one field to further configure your x-axis.',
             legendTooltipDescription: 'The breakdown subdivides the chart by a category field for further analysis of what’s contributing to the increase or decrease.',
+            categoryContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
+            legendContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
+            valuesContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
         },
         [highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH]: {
             name: 'Walkthrough Chart',
@@ -7609,6 +7704,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipTitle: 'Drag one or more fields to configure your x-axis.',
             axisTooltipDescription: 'The category is shown on the x-axis and should be between 2 to 10 columns.',
             legendTooltipTitle: '',
+            categoryContainerSettings: {
+                fixedInitialHeight: true,
+            },
+            valuesContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
+            filtersContainerSettings: {
+                fixedInitialHeight: true,
+            },
         },
         'combo-chart': {
             name: 'Combo Chart ',
@@ -7667,7 +7773,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         },
         'line-chart-forecast': {
             name: 'Combined Line',
-            label: 'Combined Line',
+            label: 'Forecast Chart',
             title: 'Show forecast over time.',
             description: 'For example, see how your Monthly Revenue evolves over a given period.',
             axisName: 'X - Axis',
@@ -7780,14 +7886,49 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipTitle: ' Best practice: we recommend no more than one segment.',
             legendTooltipTitle: 'To create a drill-down within this category, drag a field here.',
         },
+
         [highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED]: {
             name: 'Gauge chart',
-            label: 'Gauge',
-            title: 'Measures progress toward a goal or a KPI.',
+            categoryLabel: 'Gauge',
+            displayLabelInEditor: highchartsRenderer.hasFeature(FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL),
+            label: highchartsRenderer.hasFeature(FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL) ? 'Static goal' : 'Gauge',
+            title: highchartsRenderer.hasFeature(FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL)
+                ? 'Measures progress toward a goal or a KPI.'
+                : 'Track actual performance against targets from your budget or forecast files.',
             axisName: 'X-Axis',
             legendName: 'Data Series',
             startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
+            valuesContainerSettings: {
+                fixedInitialHeight: true,
+            },
+            filtersContainerSettings: {
+                fixedInitialHeight: true,
+            },
         },
+
+        [highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL]: {
+            name: 'Gauge chart with dynamic goal',
+            categoryLabel: 'Gauge',
+            displayLabelInEditor: true,
+            iconType: highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED,
+            label: 'Dynamic goal',
+            title: 'Track actual performance against manually set targets.',
+            axisName: 'Goal',
+            legendName: 'Data Series',
+            startedMessage: 'To get started, drag a field to the Value section and set the Goal with a field that references your planning files (e.g., Scenario or Version Name)',
+            categoryContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
+            valuesContainerSettings: {
+                fixedInitialHeight: true,
+            },
+            filtersContainerSettings: {
+                fixedInitialHeight: true,
+            },
+        },
+
         [highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY]: {
             name: 'Gauge chart categories summary',
             label: 'Gauge',
@@ -7796,6 +7937,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             legendName: 'Data Series',
             startedMessage: '',
         },
+        [highchartsRenderer.CHART_TYPES.SMART_KPI]: {
+            name: 'Smart Kpi',
+            label: 'Smart KPI',
+            title: 'Present a single Key Performance Indicator.',
+            axisName: 'X-Axis',
+            legendName: 'Data Series',
+            startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
+        },
         'kpi-widget': {
             name: 'Kpi ',
             label: 'KPI',
@@ -8206,29 +8355,49 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["subtitle"],
                             highchartsRenderer.suboptions["table_options_gauge"],
                             highchartsRenderer.suboptions["table_design_options"],
+                            highchartsRenderer.suboptions["gauge_goal"],
+                            highchartsRenderer.suboptions["gauge_segments"],
+                            highchartsRenderer.suboptions["gauge_is_absolute"],
+                        ]
+                    },
+                    {
+                        type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL,
+                        name:  highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL].name,
+                        class: 'google-visualization-charteditor-thumbs-gauge-solid',
+                        render: highchartsRenderer.ptRenderGaugeDynamicGoal,
+                        suboptions: [
+                            highchartsRenderer.suboptions["label_gauge"],
+                            highchartsRenderer.suboptions["tooltips_gauge"],
+                            highchartsRenderer.suboptions["subtitle"],
+                            highchartsRenderer.suboptions["table_options_gauge"],
+                            highchartsRenderer.suboptions["table_design_options"],
+                            highchartsRenderer.suboptions["gauge_goal"],
+                            highchartsRenderer.suboptions["gauge_segments"],
+                            highchartsRenderer.suboptions["gauge_is_absolute"],
+                        ],
+                        hidden: !highchartsRenderer.hasFeature(FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL),
+                    },
+                ]
+            },
+            {
+                type: 'gauge-categories-summary',
+                name: 'Gauge Categories Summary',
+                class: 'google-visualization-charteditor-mini-gauge',
+                hidden: true,
+                subtypes: [
+                    {
+                        type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY,
+                        name: highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY].name,
+                        class: 'google-visualization-charteditor-thumbs-gauge-solid',
+                        render: highchartsRenderer.ptRenderGaugeCategoriesSummary,
+                        suboptions: [
+                            highchartsRenderer.suboptions["label_gauge"],
+                            highchartsRenderer.suboptions["tooltips_gauge"],
+                            highchartsRenderer.suboptions["subtitle"]
                         ]
                     },
                 ]
             },
-        {
-            type: 'gauge-categories-summary',
-            name: 'Gauge Categories Summary',
-            class: 'google-visualization-charteditor-mini-gauge',
-            hidden: true,
-            subtypes: [
-                {
-                    type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY,
-                    name: highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY].name,
-                    class: 'google-visualization-charteditor-thumbs-gauge-solid',
-                    render: highchartsRenderer.ptRenderGaugeCategoriesSummary,
-                    suboptions: [
-                        highchartsRenderer.suboptions["label_gauge"],
-                        highchartsRenderer.suboptions["tooltips_gauge"],
-                        highchartsRenderer.suboptions["subtitle"]
-                    ]
-                },
-            ]
-        },
             {
                 type: 'kpi',
                 name: 'KPI',
@@ -8248,6 +8417,23 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         highchartsRenderer.suboptions["negative_number_format"],
                         highchartsRenderer.suboptions["legends"],
                     ]
+                },
+                {
+                    type: 'smart-kpi',
+                    hidden: true,
+                    name: highchartsRenderer.chartsTypesInfo['smart-kpi'].name,
+                    class: 'google-visualization-charteditor-thumbs-kpi',
+                    render: () => { throw new Error('Smart KPI widget is not implemented yet'); },
+                    suboptions: [
+                        highchartsRenderer.suboptions["value"],
+                        highchartsRenderer.suboptions["range"],
+                        highchartsRenderer.suboptions["widget_library"],
+                        highchartsRenderer.suboptions["name"],
+                        highchartsRenderer.suboptions["table_options_transpose"],
+                        highchartsRenderer.suboptions["table_design_options"],
+                        highchartsRenderer.suboptions["negative_number_format"],
+                        highchartsRenderer.suboptions["legends"],
+                    ]
                 }]
             },
             {
@@ -9812,7 +9998,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     // Check if chart has multiple values
     highchartsRenderer.isChartWithMultiValues = function(pivotData) {
-        return lodash.get(pivotData, 'rowAttrs[0]') === 'DR_Values';
+        return lodash.some(lodash.get(pivotData, 'rowAttrs'), attr => attr === 'DR_Values');
     }
 
     highchartsRenderer.checkFormats = function(render_options, widget_values_format) {
@@ -9914,11 +10100,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         e.point.name = e.point.initialName;
         e.point.series.name = lodash.get(e.point.series, 'userOptions.initialName', e.point.series.name);
         const seriesData = lodash.get(e.point.series, 'userOptions.data');
-        const initialNameForSmartQueries = seriesData 
+        const initialSeriesName = seriesData
             ? lodash.find(seriesData, obj => obj.name === e.point.name)
             : null;
-        if (initialNameForSmartQueries && initialNameForSmartQueries.type) {
-            e.point.series.name = initialNameForSmartQueries.type === "SQ_Actuals" ? 'Actuals' : 'Forecast';
+        if (initialSeriesName && initialSeriesName.type && ['SQ_Actuals', 'Forecast'].includes(initialSeriesName.type)) {
+            e.point.series.name = 'Forecast';
         }
         lodash.set(e, 'point.category.userOptions', e.point.initialName.toString().split(highchartsRenderer.delimer));
     }
@@ -10064,4 +10250,5 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     return highchartsRenderer;
 };
 
+
 module.exports = getHighchartsRenderer;