@datarailsshared/dr_renderer 1.4.114 → 1.4.118

package/package.json

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

package/src/highcharts_renderer.js

@@ -641,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, null, null) + "%";
+            return $.pivotUtilities.getFormattedNumber(value * 100, null, null) + "%";
         };
         return func;
     };
@@ -702,11 +702,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             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 = [];
+                    cols = pivotData.getColKeys()[0];
                 }
 
                 if (pivotData.rowAttrs.length == 0
@@ -715,7 +718,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     rows = [];
                 }
 
-                var cols = highchartsRenderer.getColsInFormatterContext(this);
                 if (typeof (cols) == 'object' && cols && cols.name) {
                     cols = cols.name;
                 }
@@ -740,7 +742,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;
@@ -863,18 +865,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             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 = [];
+                    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;
                 }
@@ -891,7 +897,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
 
                 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;
@@ -932,9 +938,9 @@ 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
                         );
                     }
 
@@ -1918,9 +1924,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             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) {
+                    if (agg && valueFormatter.isAbsoluteValue(delta_column_options.formula)) {
                         const baseValue = pivotData.getAggregator([pivotData.rowKeys[0]], pivotData.colKeys[index]).value();
-                        it.y = valueFormatter.getPercentageValue(it.y, baseValue);
+                        it.y = valueFormatter.getRelatedValue(it.y, baseValue);
                     }
                 }
             });
@@ -2056,17 +2062,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 col_ob.name = highchartsRenderer.getFormattedColKey(col_ob.initialName, pivotData);
                 col_ob.data = [];
                 lodash.forEach(row_n_keys, function (row_n_value) {
-                    // always takes the first key during drilldown,
-                    // we are only supporting one level drilldown but pivot table could have multiple nested row keys
-                    const rowKey = [row_n_value[0]];
-                    var agg = pivotData.getAggregator(rowKey, col_n_value);
+                    var agg = pivotData.getAggregator(row_n_value, col_n_value);
                     var val = agg.value();
-                    if (val != null && rowKey[0]) {
+                    if (val != null && row_n_value.length) {
                         if ($.isNumeric(val)) {
                             val = parseFloat(val);
                         }
 
-                        const row_initial_name = rowKey[0] === highchartsRenderer.DR_OTHERS_KEY ? othersName : rowKey;
+                        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,
@@ -2075,11 +2078,20 @@ 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) {
-                    // filtering out when there are multiple data series
-                    col_ob.data = lodash.uniqBy(col_ob.data, item =>
-                        Array.isArray(item.name) ? item.name.join(highchartsRenderer.delimer) : item.name
-                    );
                     pie_drill_down_series.push(col_ob);
                 }
             }
@@ -2130,7 +2142,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];
-        const forcePercentage = lodash.get(opts, 'comboOptions.secondaryAxisSettings.is_percentage', false);
+        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] = {
@@ -3749,8 +3761,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) {
@@ -5308,7 +5319,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     break;
             }
             options.comboOptions.seriesOptions.push(deltaColumnSeries);
-            options.comboOptions.secondaryAxisSettings.is_percentage = options.chartOptions.delta_column.is_percentage;
         }
     };
 
@@ -9982,7 +9992,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) {

package/src/value.formatter.js

@@ -1,30 +1,41 @@
 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 deltaColumn = lodash.get(render_options, 'chartOptions.delta_column', null);
+    const isPercentage = lodash.get(render_options, 'comboOptions.secondaryAxisSettings.is_percentage', false) || deltaColumn && deltaColumn.is_percentage;
     const currentRowName = rowKey && rowKey.length ? String(rowKey[0]) : '';
-    const isVariance = currentRowName.replace('_', '').toLowerCase() === deltaColumnName.replace('_', '').toLowerCase();
+    const isVariance = deltaColumn && currentRowName.replace('_', '').toLowerCase() === deltaColumn.name.replace('_', '').toLowerCase();
     const baseRowKey = data && data.rowKeys && data.rowKeys.length ? data.rowKeys[0] : null;
     const currentColKey = colKey ? colKey : [];
     const agg = data && baseRowKey ? data.getAggregator(baseRowKey, currentColKey) : null;
     
     if (isPercentage && isVariance && baseRowKey && agg) {
-        const baseValue = agg.value();
-        return getPercentageValue(value, baseValue) + '%';
+        if (deltaColumn && isAbsoluteValue(deltaColumn.formula)) {
+            value = getRelatedValue(value, agg.value());
+        }
+        
+        return Math.round(value * 100) + '%';
     }
 
     return null;
 };
 
-function getPercentageValue(value, baseValue) {
+function getRelatedValue(value, baseValue) {
     if (!baseValue)
-        return value < 0 ? -100 : 100;
+        return value < 0 ? -1 : 1;
 
-    return Math.round(value / baseValue * 100);
+    return value / baseValue;
+};
+
+function isAbsoluteValue(formula) {
+    if (!formula)
+        return false;
+    
+    return lodash.includes(formula.replace(/\s+/g, ''), 'x2-x1');
 };
 
 module.exports = {
     getAggregatorPercentageValueIfRequired,
-    getPercentageValue
+    getRelatedValue,
+    isAbsoluteValue
 };

package/tests/highcharts_renderer.test.js

@@ -453,7 +453,7 @@ describe('highcharts_renderer', () => {
             let funcContext = { value: '12345.678' };
             let persantageValueLabelsFormatterFn = highchartsRenderer.persantageValueLabelsFormatter(null, {})
             let result = persantageValueLabelsFormatterFn.call(funcContext)
-            expect(result).toBe('12,345.678%');
+            expect(result).toBe('1,234,567.8%');
         });
     });
 
@@ -545,6 +545,7 @@ describe('highcharts_renderer', () => {
             mockPivotData = {
                 rowAttrs: ['row1'],
                 colAttrs: ['col1'],
+                getColKeys: jest.fn(() => [['col1'], ['col2']]),
                 getRowKeys: jest.fn(() => [['row1'], ['row2']]),
                 getAggregator: jest.fn(() => ({
                     value: () => 1000
@@ -561,6 +562,7 @@ describe('highcharts_renderer', () => {
             });
             spyOn(highchartsRenderer, 'replaceDrOthersKeys');
             spyOn(highchartsRenderer, 'selfStartsWith').and.returnValue(false);
+            spyOn(highchartsRenderer, 'isChartWithMultiValues').and.returnValue(true);
 
             global.$ = {
                 pivotUtilities: {
@@ -658,6 +660,17 @@ describe('highcharts_renderer', () => {
                 expect(result).toBe('500');
             });
 
+            it('should handle drill-down pie when is a multi values chart', () => {
+                highchartsRenderer.isChartWithMultiValues.and.returnValue(true);
+
+                opts = { chartOptions: {} };
+                let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts, true);
+                let result = fn.call(funcContext);
+
+                expect(highchartsRenderer.isChartWithMultiValues).toHaveBeenCalledWith(mockPivotData);
+                expect(result).toBe('500');
+            });
+
             it('should use point name for columns when cols is null in drill-down pie', () => {
                 highchartsRenderer.getColsInFormatterContext.and.returnValue(null);
                 funcContext.point.name = 'DrillDownPoint';
@@ -2057,7 +2070,7 @@ describe('highcharts_renderer', () => {
                         field: 'series',
                         name: 'TEST_test',
                         same_yaxis: true,
-                        is_percentage: true,
+                        is_percentage: false,
                     }
                 }
             };
@@ -2074,7 +2087,7 @@ describe('highcharts_renderer', () => {
                         name: 'Secondary Axis',
                         max: null,
                         min: null,
-                        is_percentage: true
+                        is_percentage: false
                     },
                     seriesOptions: [{
                         series: 'TEST_test',

package/tests/ptCreateDrillDownSeriesToDrilldownChart.test.js

@@ -405,6 +405,26 @@ describe('ptCreateDrillDownSeriesToDrilldownChart', () => {
             );
             expect(highchartsRenderer.getDataLabelsStylesForDrillDown).toHaveBeenCalledWith(mockAdditionOptions);
         });
+
+        it('should merge values when row name is a plain string (not array)', () => {
+            jest.spyOn(highchartsRenderer, 'getFormattedRowKey').mockImplementation(name => name);
+
+            mockPivotData.getRowKeys.mockReturnValue([ 'PLAIN_STRING_NAME' ]);
+            mockPivotData.getColKeys.mockReturnValue([ ['valid-key'] ]);
+            mockPivotData.getAggregator.mockImplementation(() => ({ value: () => 100 }));
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            expect(result.series).toHaveLength(1);
+            const dataPoint = result.series[0].data[0];
+            expect(dataPoint.name).toEqual(['PLAIN_STRING_NAME']);
+            expect(dataPoint.y).toBe(100);
+        });
     });
 
     describe('edge cases', () => {

package/tests/value.formatter.test.js

@@ -1,4 +1,4 @@
-const { getAggregatorPercentageValueIfRequired, getPercentageValue } = require('../src/value.formatter');
+const { getAggregatorPercentageValueIfRequired, getRelatedValue, isAbsoluteValue } = require('../src/value.formatter');
 
 describe('Function getAggregatorPercentageValueIfRequired', () => {
     let render_options, rowKey, colKey;
@@ -6,7 +6,12 @@ describe('Function getAggregatorPercentageValueIfRequired', () => {
     beforeEach(() => {
         render_options = {
             comboOptions: { secondaryAxisSettings: { is_percentage: true } },
-            chartOptions: { delta_column: { name: 'Variance' } }
+            chartOptions: { 
+                delta_column: { 
+                    name: 'Variance',
+                    formula: 'x2-x1' 
+                } 
+            }
         };
         rowKey = ['Variance'];
         colKey = ['SomeCol'];
@@ -82,18 +87,44 @@ describe('Function getAggregatorPercentageValueIfRequired', () => {
     });
 });
 
-describe('Function getPercentageValue', () => {
-    it('should return -100 when baseValue is falsy and value < 0', () => {
-        expect(getPercentageValue(-50, 0)).toBe(-100);
+describe('Function getRelatedValue', () => {
+    it('should return -1 when baseValue is falsy and value < 0', () => {
+        expect(getRelatedValue(-50, 0)).toBe(-1);
     });
 
-    it('should return 100 when baseValue is falsy and value >= 0', () => {
-        expect(getPercentageValue(50, null)).toBe(100);
+    it('should return 1 when baseValue is falsy and value >= 0', () => {
+        expect(getRelatedValue(50, null)).toBe(1);
     });
 
-    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);
+    it('should return related value when baseValue is truthy', () => {
+        expect(getRelatedValue(50, 200)).toBe(0.25);
+        expect(getRelatedValue(200, 200)).toBe(1);
+    });
+});
+
+describe('Function isAbsoluteValue', () => {
+    it('should return false if formula is undefined', () => {
+        expect(isAbsoluteValue(undefined)).toBe(false);
+    });
+
+    it('should return false if formula is null', () => {
+        expect(isAbsoluteValue(null)).toBe(false);
+    });
+
+    it('should return false if formula does not contain "x2-x1"', () => {
+        expect(isAbsoluteValue('x2 + x1')).toBe(false);
+        expect(isAbsoluteValue('x1-x2')).toBe(false);
+        expect(isAbsoluteValue('')).toBe(false);
+    });
+
+    it('should return true if formula contains "x2-x1"', () => {
+        expect(isAbsoluteValue('x2-x1')).toBe(true);
+        expect(isAbsoluteValue(' x2 - x1 ')).toBe(true);
+        expect(isAbsoluteValue('some text x2-x1 more text')).toBe(true);
+    });
+
+    it('should ignore spaces in formula', () => {
+        expect(isAbsoluteValue('x2 - x1')).toBe(true);
+        expect(isAbsoluteValue('  x2   -   x1  ')).toBe(true);
     });
 });