@datarailsshared/dr_renderer 1.4.89 → 1.4.97

package/package.json

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

package/src/highcharts_renderer.js

@@ -1,9 +1,10 @@
 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,
@@ -611,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 () {
@@ -633,7 +641,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     highchartsRenderer.persantageValueLabelsFormatter = function (pivotData, opts) {
         var func = function () {
             var value = parseFloat(this.value);
-            return $.pivotUtilities.getFormattedNumber(value * 100, null, null) + "%";
+            return $.pivotUtilities.getFormattedNumber(value, null, null) + "%";
         };
         return func;
     };
@@ -692,6 +700,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         var func = function () {
             var value = parseFloat(this.y);
+
             if (pivotData) {
                 let series_name = highchartsRenderer.getSeriesNameInFormatterContext(this);
                 var rows = series_name.split(highchartsRenderer.delimer);
@@ -852,6 +861,7 @@ 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) {
                 let series_name = highchartsRenderer.getSeriesNameInFormatterContext(this);
                 var rows = series_name.split(highchartsRenderer.delimer);
@@ -879,6 +889,7 @@ 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 ")) {
                         let temp = cols;
@@ -919,7 +930,7 @@ 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) {
                         formatted_value_to_return = $.pivotUtilities.getFormattedNumber(
@@ -1346,7 +1357,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;
             }
 
@@ -1554,7 +1565,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;
             }
 
@@ -1876,7 +1887,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;
@@ -1903,6 +1914,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) {
+                        const baseValue = pivotData.getAggregator([pivotData.rowKeys[0]], pivotData.colKeys[index]).value();
+                        it.y = valueFormatter.getPercentageValue(it.y, baseValue);
+                    }
+                }
+            });
+        }
+
         if (delta_column_options.chart == 'line') {
             series.type = 'line';
             series.lineColor = varianceColor;
@@ -1949,7 +1972,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         } else if (delta_column_options.chart == 'spline') {
             series.color = varianceColor;
             series.type = 'spline'
-        }
+        } 
         return series;
     }
 
@@ -2107,9 +2130,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);
 
         chartOptions.yAxis = [chartOptions.yAxis];
         chartOptions.yAxis[1] = {
@@ -2122,7 +2143,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             },
             labels: {
-                formatter: labels_formatter,
+                formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts, forcePercentage),
                 style: {
                     color: varianceColor
                 }
@@ -2518,7 +2539,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 = {
@@ -3309,6 +3329,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'
@@ -3324,27 +3375,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)
@@ -3368,7 +3401,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
+                }
             }
         };
 
@@ -3405,7 +3444,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]);
         }
@@ -3801,12 +3840,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
             };
@@ -3869,6 +3914,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);
@@ -3956,6 +4006,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)
 
@@ -4043,6 +4098,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)
@@ -4130,6 +4190,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)
@@ -4220,6 +4285,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)
@@ -5206,38 +5276,39 @@ 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);
+            options.comboOptions.secondaryAxisSettings.name = options.chartOptions.delta_column.name.replace('_', '');
+            options.comboOptions.secondaryAxisSettings.is_percentage = options.chartOptions.delta_column.is_percentage;
         }
     };
 
@@ -7367,6 +7438,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',
@@ -10157,4 +10234,5 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     return highchartsRenderer;
 };
 
+
 module.exports = getHighchartsRenderer;

package/src/value.formatter.js

@@ -0,0 +1,30 @@
+const lodash = require('lodash');
+
+function getAggregatorPercentageValueIfRequired(value, render_options, data, rowKey, colKey) {
+    const isPercentage = lodash.get(render_options, 'comboOptions.secondaryAxisSettings.is_percentage', false);
+    const deltaColumnName = lodash.get(render_options, 'chartOptions.delta_column.name', '');
+    const currentRowName = rowKey && rowKey.length ? String(rowKey[0]) : '';
+    const isVariance = currentRowName.replace('_', '').toLowerCase() === deltaColumnName.replace('_', '').toLowerCase();
+    const baseRowKey = data && data.rowKeys && data.rowKeys.length ? data.rowKeys[0] : null;
+    const currentColKey = colKey ? colKey : [];
+    const agg = data ? data.getAggregator(baseRowKey, currentColKey) : null;
+    
+    if (isPercentage && isVariance && baseRowKey && agg) {
+        const baseValue = agg.value();
+        return getPercentageValue(value, baseValue) + '%';
+    }
+
+    return null;
+};
+
+function getPercentageValue(value, baseValue) {
+    if (!baseValue)
+        return value < 0 ? -100 : 100;
+
+    return Math.round(value / baseValue * 100);
+};
+
+module.exports = {
+    getAggregatorPercentageValueIfRequired,
+    getPercentageValue
+};

package/tests/highcharts_renderer.test.js

@@ -8,6 +8,7 @@ import addInDynamicRanges from './mock/add-in-dynamic-ranges.json';
 import widgets from './mock/widgets.json';
 import initPivotTable from "../src/pivottable";
 import initDRPivotTable from "../src/dr_pivottable";
+import valueFormatter from "../src/value.formatter";
 import { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } from "../src/charts/dr_gauge_chart";
 
 const mockDrChartRender = jest.fn();
@@ -68,6 +69,8 @@ let _document = document;
 let Highcharts;
 
 describe('highcharts_renderer', () => {
+    let getAggregatorPercentageValueIfRequiredMock;
+
     beforeAll(() => {
         Highcharts = {
             charts: [{
@@ -92,6 +95,12 @@ describe('highcharts_renderer', () => {
 
         highchartsRenderer = getHighchartsRenderer($, _document, Highcharts, lodash.cloneDeep(DEFAULT_USER_COLORS), highchartsRenderer,
             DataFormatter, lodash, moment, true);
+
+        getAggregatorPercentageValueIfRequiredMock = jest.spyOn(valueFormatter, 'getAggregatorPercentageValueIfRequired').mockImplementation(() => null);
+    });
+
+    afterAll(() => {
+        getAggregatorPercentageValueIfRequiredMock.mockRestore();
     });
 
     describe('Function filterFloat', () => {
@@ -444,7 +453,7 @@ describe('highcharts_renderer', () => {
             let funcContext = { value: '12345.678' };
             let persantageValueLabelsFormatterFn = highchartsRenderer.persantageValueLabelsFormatter(null, {})
             let result = persantageValueLabelsFormatterFn.call(funcContext)
-            expect(result).toBe('1,234,567.8%');
+            expect(result).toBe('12,345.678%');
         });
     });
 
@@ -2604,17 +2613,20 @@ describe('highcharts_renderer', () => {
                     it('Should return General format if there are no widget_values_format', () => {
                         aggregatorObject.widget_values_format = null;
                         expect(aggregatorObject.format(123.4567, false)).toBe('123.46');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return widget format if it\'s not calculated value', () => {
                         aggregatorObject.widget_values_format = '\"$\"#,###.###';
                         expect(aggregatorObject.format(1123.4567, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return calculated value format if it\'s calculated value', () => {
                         aggregator = highchartsRenderer.rhPivotAggregatorSum(arg, widget_values_format, is_graph, render_options, calculated_info);
                         aggregatorObject = aggregator({}, ['Region average'], '');
                         expect(aggregatorObject.format(1123.45678, false)).toBe('112345.68%');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('if FF enabledNewWidgetValueFormatting is and some of secondaryAxis is true widget values format must be from seriesOptions and widget_value_format to equal first seriesOptions format', () => {
@@ -2631,6 +2643,7 @@ describe('highcharts_renderer', () => {
                         aggregatorObject = aggregator({}, ['Profit'], '');
                         aggregatorObject.push({ DR_Values: 'Profit', Profit: 123 });
                         expect(aggregatorObject.format(1123.45678, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
                 });
             });
@@ -2805,17 +2818,20 @@ describe('highcharts_renderer', () => {
                     it('Should return General format if there are no widget_values_format', () => {
                         aggregatorObject.widget_values_format = null;
                         expect(aggregatorObject.format(123.4567, false)).toBe('123.46');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return widget format if it\'s not calculated value', () => {
                         aggregatorObject.widget_values_format = '\"$\"#,###.###';
                         expect(aggregatorObject.format(1123.4567, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return calculated value format if it\'s calculated value', () => {
                         aggregator = highchartsRenderer.rhPivotCount(arg, widget_values_format, is_graph, render_options, calculated_info);
                         aggregatorObject = aggregator({}, ['Region average'], '');
                         expect(aggregatorObject.format(1123.45678, false)).toBe('112345.68%');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('if FF enabledNewWidgetValueFormatting is and some of secondaryAxis is true widget values format must be from seriesOptions and widget_value_format to equal first seriesOptions format', () => {
@@ -2832,6 +2848,7 @@ describe('highcharts_renderer', () => {
                         aggregatorObject = aggregator({}, ['Profit'], '');
                         aggregatorObject.push({ DR_Values: 'Profit', Profit: 123 });
                         expect(aggregatorObject.format(1123.45678, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
                 });
             });
@@ -2964,6 +2981,7 @@ describe('highcharts_renderer', () => {
                     it('Should return widget format if it\'s graph', () => {
                         aggregatorObject.widget_values_format = '\"$\"#,###.###';
                         expect(aggregatorObject.format(2, false)).toBe('$2.000');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return widget format if it\'s only_formats', () => {
@@ -2971,6 +2989,7 @@ describe('highcharts_renderer', () => {
                         aggregatorObject = aggregator({}, '', '');
                         aggregatorObject.widget_values_format = '\"$\"#,###.###';
                         expect(aggregatorObject.format(2, true)).toBe('$2.000');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return uniq values if it\'s table and not only_formats', () => {
@@ -2978,6 +2997,7 @@ describe('highcharts_renderer', () => {
                         aggregatorObject = aggregator({}, '', '');
                         aggregatorObject.formated_values = ['val1', 'val2'];
                         expect(aggregatorObject.format(aggregatorObject.formated_values, false)).toBe('val1<br>val2');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
                 });
             });
@@ -3156,17 +3176,20 @@ describe('highcharts_renderer', () => {
                     it('Should return General format if there are no widget_values_format', () => {
                         aggregatorObject.widget_values_format = null;
                         expect(aggregatorObject.format(123.4567, false)).toBe('123.46');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return widget format if it\'s not calculated value', () => {
                         aggregatorObject.widget_values_format = '\"$\"#,###.###';
                         expect(aggregatorObject.format(1123.4567, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return calculated value format if it\'s calculated value', () => {
                         aggregator = highchartsRenderer.rhPivotAggregatorAverage(arg, widget_values_format, is_graph, render_options, calculated_info);
                         aggregatorObject = aggregator({}, ['Region average'], '');
                         expect(aggregatorObject.format(1123.45678, false)).toBe('112345.68%');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('if FF enabledNewWidgetValueFormatting is and some of secondaryAxis is true widget values format must be from seriesOptions and widget_value_format to equal first seriesOptions format', () => {
@@ -3183,6 +3206,7 @@ describe('highcharts_renderer', () => {
                         aggregatorObject = aggregator({}, ['Profit'], '');
                         aggregatorObject.push({ DR_Values: 'Profit', Profit: 123 });
                         expect(aggregatorObject.format(1123.45678, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
                 });
             });
@@ -3358,17 +3382,20 @@ describe('highcharts_renderer', () => {
                     it('Should return General format if there are no widget_values_format', () => {
                         aggregatorObject.widget_values_format = null;
                         expect(aggregatorObject.format(123.4567, false)).toBe('123.46');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return widget format if it\'s not calculated value', () => {
                         aggregatorObject.widget_values_format = '\"$\"#,###.###';
                         expect(aggregatorObject.format(1123.4567, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return calculated value format if it\'s calculated value', () => {
                         aggregator = highchartsRenderer.rhPivotAggregatorMin(arg, widget_values_format, is_graph, render_options, calculated_info);
                         aggregatorObject = aggregator({}, ['Region average'], '');
                         expect(aggregatorObject.format(1123.45678, false)).toBe('112345.68%');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('if FF enabledNewWidgetValueFormatting is and some of secondaryAxis is true widget values format must be from seriesOptions and widget_value_format to equal first seriesOptions format', () => {
@@ -3385,6 +3412,7 @@ describe('highcharts_renderer', () => {
                         aggregatorObject = aggregator({}, ['Profit'], '');
                         aggregatorObject.push({ DR_Values: 'Profit', Profit: 123 });
                         expect(aggregatorObject.format(1123.45678, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
                 });
             });
@@ -3560,17 +3588,20 @@ describe('highcharts_renderer', () => {
                     it('Should return General format if there are no widget_values_format', () => {
                         aggregatorObject.widget_values_format = null;
                         expect(aggregatorObject.format(123.4567, false)).toBe('123.46');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return widget format if it\'s not calculated value', () => {
                         aggregatorObject.widget_values_format = '\"$\"#,###.###';
                         expect(aggregatorObject.format(1123.4567, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('Should return calculated value format if it\'s calculated value', () => {
                         aggregator = highchartsRenderer.rhPivotAggregatorMax(arg, widget_values_format, is_graph, render_options, calculated_info);
                         aggregatorObject = aggregator({}, ['Region average'], '');
                         expect(aggregatorObject.format(1123.45678, false)).toBe('112345.68%');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
 
                     it('if FF enabledNewWidgetValueFormatting is and some of secondaryAxis is true widget values format must be from seriesOptions and widget_value_format to equal first seriesOptions format', () => {
@@ -3587,6 +3618,7 @@ describe('highcharts_renderer', () => {
                         aggregatorObject = aggregator({}, ['Profit'], '');
                         aggregatorObject.push({ DR_Values: 'Profit', Profit: 123 });
                         expect(aggregatorObject.format(1123.45678, false)).toBe('$1,123.457');
+                        expect(getAggregatorPercentageValueIfRequiredMock).toHaveBeenCalled();
                     });
                 });
             });

package/tests/value.formatter.test.js

@@ -0,0 +1,79 @@
+const { getAggregatorPercentageValueIfRequired, getPercentageValue } = require('../src/value.formatter');
+
+describe('Function getAggregatorPercentageValueIfRequired', () => {
+    let render_options, rowKey, colKey;
+
+    beforeEach(() => {
+        render_options = {
+            comboOptions: { secondaryAxisSettings: { is_percentage: true } },
+            chartOptions: { delta_column: { name: 'Variance' } }
+        };
+        rowKey = ['Variance'];
+        colKey = ['SomeCol'];
+    });
+
+    it('should return percentage string when all conditions are met', () => {
+        const data = {
+            rowKeys: ['Variance'],
+            getAggregator: jest.fn(() => ({
+                value: () => 200
+            }))
+        };
+        const result = getAggregatorPercentageValueIfRequired(50, render_options, data, rowKey, colKey);
+        expect(result).toBe('25%');
+    });
+
+    it('should return null if is_percentage is false', () => {
+        const data = {
+            rowKeys: ['Variance'],
+            getAggregator: jest.fn()
+        };
+        render_options.comboOptions.secondaryAxisSettings.is_percentage = false;
+        const result = getAggregatorPercentageValueIfRequired(50, render_options, data, rowKey, colKey);
+        expect(result).toBeNull();
+    });
+
+    it('should return null if isVariance is false', () => {
+        const data = {
+            rowKeys: ['NotVariance'],
+            getAggregator: jest.fn()
+        };
+        rowKey = ['NotVariance'];
+        const result = getAggregatorPercentageValueIfRequired(50, render_options, data, rowKey, colKey);
+        expect(result).toBeNull();
+    });
+
+    it('should return null if baseRowKey is missing', () => {
+        const data = {
+            rowKeys: [],
+            getAggregator: jest.fn()
+        };
+        const result = getAggregatorPercentageValueIfRequired(50, render_options, data, rowKey, colKey);
+        expect(result).toBeNull();
+    });
+
+    it('should return null if agg is missing', () => {
+        const data = {
+            rowKeys: ['Variance'],
+            getAggregator: jest.fn(() => null)
+        };
+        const result = getAggregatorPercentageValueIfRequired(50, render_options, data, rowKey, colKey);
+        expect(result).toBeNull();
+    });
+});
+
+describe('Function getPercentageValue', () => {
+    it('should return -100 when baseValue is falsy and value < 0', () => {
+        expect(getPercentageValue(-50, 0)).toBe(-100);
+    });
+
+    it('should return 100 when baseValue is falsy and value >= 0', () => {
+        expect(getPercentageValue(50, null)).toBe(100);
+    });
+
+    it('should return rounded percentage when baseValue is truthy', () => {
+        expect(getPercentageValue(25, 200)).toBe(13);
+        expect(getPercentageValue(50, 200)).toBe(25);
+        expect(getPercentageValue(200, 200)).toBe(100);
+    });
+});