@datarailsshared/dr_renderer 1.5.100 → 1.5.105

package/package.json

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

package/src/dr_pivottable.js

@@ -10,8 +10,6 @@ let initDRPivotTable = function($, window, document) {
     const newTableColors = ['rgb(127, 196, 255)', 'rgb(200, 243,243)', 'rgb(247, 161, 173)', 'rgb(255, 237, 178)', 'rgb(221, 239, 255)',
         'rgb(171, 216, 255)', 'rgb(174, 231, 220)', 'rgb(227, 255, 236)', 'rgb(162, 215, 227)', 'rgb(223, 239, 236)'];
 
-    const useNewUx = document.ReportHippo && document.ReportHippo && document.ReportHippo.user &&
-      document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
     // const numberOfRows = 500; // change to activate the handsontable when num of rows bigger then this.
 
     DRPivotData = (function(superClass) {
@@ -437,7 +435,7 @@ let initDRPivotTable = function($, window, document) {
                 colors = newTableColors;
             }
 
-            var isNewDesign = useNewUx && opts.chartOptions.table_options.use_new_table_design;
+            var isNewDesign = opts.chartOptions && opts.chartOptions.table_options && opts.chartOptions.table_options.use_new_table_design;
             if (value) {
                 var offset = parseInt(value);
                 if (offset) {
@@ -500,12 +498,12 @@ let initDRPivotTable = function($, window, document) {
         };
 
         createTotalValsBolder = function(element){
-            if(opts.chartOptions.table_options.colorize_headers == true && (!useNewUx || !opts.chartOptions.table_options.use_new_table_design)){
+            if(opts.chartOptions.table_options.colorize_headers == true && (!opts.chartOptions.table_options.use_new_table_design)){
                 element.style.setProperty("border-bottom", "3px double #000000", "important");
             }
         };
         createGrandTotalBolder = function(element){
-            if(opts.chartOptions.table_options.colorize_headers == true && (!useNewUx || !opts.chartOptions.table_options.use_new_table_design)){
+            if(opts.chartOptions.table_options.colorize_headers == true && (!opts.chartOptions.table_options.use_new_table_design)){
                 element.style.setProperty("border-top", "3px solid #000000", "important");
             }
         };

package/src/highcharts_renderer.js

@@ -173,7 +173,7 @@ const FEATURES = helpers.FEATURES;
 const TICKS_COUNT = 5;
 
 let getHighchartsRenderer = function ($, document, Highcharts, default_colors, highchartsRenderer,
-                                      DataFormatter, lodash, moment_lib, isNewAngular) {
+                                      DataFormatter, lodash, moment_lib, isNewAngular, envOptions) {
 
     /**  Highcharts initial configuration section **/
     if(!lodash){
@@ -214,6 +214,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.enabledNewWidgetValueFormatting = false;
     let disableAnimation = false;
+    const environment = envOptions || {};
+    highchartsRenderer.environment = environment;
 
     const _handleComputationalError = (err, onlyOptions) => {
         if (err instanceof BaseRendererError) {
@@ -244,13 +246,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.hasFeature = function(featureFlagKey) {
-        return lodash.includes(lodash.get(document, 'ReportHippo.user.features', []), featureFlagKey);
+        return lodash.includes(highchartsRenderer.features || [], featureFlagKey);
     }
-
-    if (!!lodash.get(document, 'ReportHippo.user')) {
-        disableAnimation = document.ReportHippo.user.organization && document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.disable_animation
+    highchartsRenderer.setFeatures = function(features) {
+        highchartsRenderer.features = features || [];
         highchartsRenderer.enabledNewWidgetValueFormatting = highchartsRenderer.hasFeature(FEATURES.ENABLE_NEW_WIDGET_VALUE_FORMATTING);
     }
+    highchartsRenderer.setFeatures(lodash.get(environment, 'features', []));
+    disableAnimation = !!lodash.get(environment, 'disable_animation', false);
 
     // fix issue of use tootip.stickOnContact with tooltip.outside , source: https://github.com/highcharts/highcharts/pull/15960
     // TODO: remove it after it is fixed in highcharts library new version
@@ -676,6 +679,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
 
                 try {
+                    const aggr = pivotData.getAggregator(rows, cols);
                     const percentageArray = [];
 
                     if (is_drill_down_pie && !highchartsRenderer.selfStartsWith(series_name, "Series ") && !isChartWithMultiValues) {
@@ -684,7 +688,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         rows = temp;
                     }
 
-                    if (!is_drill_down_pie && labelOptions.show_out_of_x_axis) {
+                    if (!is_drill_down_pie && labelOptions.show_out_of_x_axis && aggr.widget_values_format !== "#,###%") {
                         const axisTotal = pivotData.getAggregator([], cols).value();
                         if (value && axisTotal) {
                             percentageArray.push(Math.round(value / axisTotal * 100) + '%');
@@ -719,8 +723,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                     highchartsRenderer.replaceDrOthersKeys(cols, rows, drOthersInAxis, othersName);
 
-                    var aggr = pivotData.getAggregator(rows, cols);
-
                     let formattedValue = is_drill_down_pie || labelOptions.show_value ? $.pivotUtilities.getFormattedNumber(value, aggr, opts, true) : '';
                     formattedValue = removeNumberFormatValueUnitSign(formattedValue, labelOptions);
                     return String(formattedValue) + percentageWrapper;
@@ -898,7 +900,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
 
                     const percentageArray = [];
-                    if (tooltipOptions.show_out_of_x_axis) {
+                    if (tooltipOptions.show_out_of_x_axis && aggr.widget_values_format !== "#,###%") {
                         const axisTotal = pivotData.getAggregator([], cols).value();
                         const outOfAxisPercentages = axisTotal ? Math.round(y / axisTotal * 100) + '%' : '';
                         outOfAxisPercentages && percentageArray.push(`% Out of ${percentageLabels.axis}: ${outOfAxisPercentages}`);
@@ -964,7 +966,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 tempAr[temp_len - 1] = highchartsRenderer.getFieldName(colAttrs[j]);
             }
 
-            const formattedColKeys = highchartsRenderer.getFormattedColKeys(pivotData, null);
+            const formattedColKeys = highchartsRenderer.getFormattedColKeys(pivotData, null, true);
             tempAr = tempAr.concat(lodash.map(formattedColKeys, function (row) {
                 return row[j];
             }));
@@ -9440,11 +9442,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.getFiscalYearMonthModifier = function() {
-        return lodash.get(document, 'ReportHippo.user.organization.fiscal_year_starts_from', 1) - 1;
+        return lodash.get(highchartsRenderer, 'environment.fiscal_year_starts_from', 1) - 1;
     }
 
     highchartsRenderer.isFiscalYearBackEnabled = function() {
-        return lodash.get(document, 'ReportHippo.user.organization.fiscal_year_back');
+        return lodash.get(highchartsRenderer, 'environment.fiscal_year_back');
     }
 
     highchartsRenderer.getTimeframeByFormat = function(format) {
@@ -9504,7 +9506,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     // Method for getting formatted kyes for Axis (cols, rows)
-    highchartsRenderer.getFormattedKey = function (initialKey, pivotData, type) {
+    highchartsRenderer.getFormattedKey = function (initialKey, pivotData, type, forceFormatDates) {
         const isFlatKey = lodash.isString(initialKey) || lodash.isNumber(initialKey);
         if (isFlatKey || lodash.isArray(initialKey)) {
             let values = isFlatKey ? initialKey.toString().split(highchartsRenderer.delimer) : lodash.cloneDeep(initialKey);
@@ -9513,7 +9515,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     const formatInfo = pivotData[type][key] || {};
                     const valueToFloat = parseFloat(value);
                     const isDate = formatInfo.type === 'Date' && (moment_lib(valueToFloat).isValid() || moment_lib(value, formatInfo.format).isValid());
-                    const isDateFormatting = isDate && highchartsRenderer.isFormattingDatesAsOtherAxisTypes();
+                    const isDateFormatting = isDate && (forceFormatDates || highchartsRenderer.isFormattingDatesAsOtherAxisTypes());
                     const isNumberFormatting = !isDate && formatInfo.format && highchartsRenderer.isFormattingNumberAxis(pivotData);
 
                     if (isNumberFormatting || isDateFormatting) {
@@ -9541,13 +9543,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.getFormattedKey(initialValue, pivotData, 'rowFormats')
     }
 
-    highchartsRenderer.getFormattedKeys = function(pivotData, isCols, keys) {
+    highchartsRenderer.getFormattedKeys = function(pivotData, isCols, keys, forceFormatDates) {
         keys = keys || (isCols ? pivotData.getColKeys() : pivotData.getRowKeys());
-        return lodash.map(keys, key => highchartsRenderer.getFormattedKey(key, pivotData, isCols ? 'colFormats' : 'rowFormats'));
+        return lodash.map(keys, key => highchartsRenderer.getFormattedKey(key, pivotData, isCols ? 'colFormats' : 'rowFormats', forceFormatDates));
     }
 
-    highchartsRenderer.getFormattedColKeys = function(pivotData, keys) {
-        return highchartsRenderer.getFormattedKeys(pivotData, true, keys);
+    highchartsRenderer.getFormattedColKeys = function(pivotData, keys, forceFormatDates) {
+        return highchartsRenderer.getFormattedKeys(pivotData, true, keys, forceFormatDates);
     }
 
     highchartsRenderer.getFormattedRowKeys = function(pivotData, keys) {

package/src/index.d.ts

@@ -31,6 +31,13 @@ declare namespace DrRenderFactory {
         isNewAngular: boolean;
     }
 
+    interface EnvironmentOptions {
+        features?: string[];
+        disable_animation?: boolean;
+        fiscal_year_starts_from?: number;
+        fiscal_year_back?: boolean;
+    }
+
     interface Factory {
         init($: any, window: Window, document: Document, Handsontable?: any): void;
         getInitHighchartsRenderer(
@@ -41,12 +48,13 @@ declare namespace DrRenderFactory {
             highchartsRenderer: any,
             lodash: any,
             moment_lib: any,
-            isNewAngular: boolean
+            isNewAngular: boolean,
+            envOptions?: EnvironmentOptions
         ): any;
         getInitPublishedItemsRenderer(publishedItemsRenderer: any, bind?: any): any;
 
         DataFormatter: typeof DataFormatterType;
-        
+
         // Error types and classes
         RendererErrorCodes: typeof ErrorTypes.RendererErrorCodes;
         BaseRendererError: typeof ErrorTypes.BaseRendererError;

package/src/index.js

@@ -17,8 +17,8 @@ dr_render_factory.init = function($, window, document, Handsontable){
     }
 }
 
-dr_render_factory.getInitHighchartsRenderer = function($, document, Highcharts, default_colors, highchartsRenderer, lodash, moment_lib, isNewAngular){
-    return getHighchartsRenderer($, document, Highcharts, default_colors, highchartsRenderer, DataFormatter, lodash, moment_lib, isNewAngular);
+dr_render_factory.getInitHighchartsRenderer = function($, document, Highcharts, default_colors, highchartsRenderer, lodash, moment_lib, isNewAngular, envOptions){
+    return getHighchartsRenderer($, document, Highcharts, default_colors, highchartsRenderer, DataFormatter, lodash, moment_lib, isNewAngular, envOptions);
 }
 
 dr_render_factory.getInitPublishedItemsRenderer = function (publishedItemsRenderer, bind = {}) {

package/tests/highcharts_renderer.test.js

@@ -465,7 +465,8 @@ describe('highcharts_renderer', () => {
                 getColKeys: jest.fn(() => [['col1'], ['col2']]),
                 getRowKeys: jest.fn(() => [['row1'], ['row2']]),
                 getAggregator: jest.fn(() => ({
-                    value: () => 1000
+                    value: () => 1000,
+                    widget_values_format: "#,###"
                 }))
             };
 
@@ -654,7 +655,7 @@ describe('highcharts_renderer', () => {
         });
 
         describe('Label options handling', () => {
-            it('should return raw value when show_out_of_x_axis is true but percentage logic is not triggered', () => {
+            it('should return raw value when show_out_of_x_axis is true but percentage logic is not triggered due to percentage format', () => {
                 opts = {
                     chartOptions: {
                         label: {
@@ -665,7 +666,10 @@ describe('highcharts_renderer', () => {
                 };
 
                 funcContext.y = 250;
-                mockPivotData.getAggregator = jest.fn(() => ({ value: () => 1000 }));
+                mockPivotData.getAggregator = jest.fn(() => ({
+                    value: () => 1000,
+                    widget_values_format: "#,###%"
+                }));
 
                 let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts);
                 let result = fn.call(funcContext);
@@ -684,7 +688,10 @@ describe('highcharts_renderer', () => {
                 };
 
                 funcContext.y = 200;
-                mockPivotData.getAggregator = jest.fn(() => ({ value: () => 800 }));
+                mockPivotData.getAggregator = jest.fn(() => ({
+                    value: () => 800,
+                    widget_values_format: "#,###"
+                }));
 
                 let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts);
                 let result = fn.call(funcContext);
@@ -692,7 +699,7 @@ describe('highcharts_renderer', () => {
                 expect(result).toBe('200');
             });
 
-            it('should return raw value when both percentage options are enabled but percentage logic is not triggered', () => {
+            it('should return raw value when both percentage options are enabled but percentage logic is not triggered due to percentage format', () => {
                 opts = {
                     chartOptions: {
                         label: {
@@ -707,7 +714,10 @@ describe('highcharts_renderer', () => {
                 let callCount = 0;
                 mockPivotData.getAggregator = jest.fn(() => {
                     callCount++;
-                    return { value: () => callCount === 1 ? 1000 : 800 };
+                    return {
+                        value: () => callCount === 1 ? 1000 : 800,
+                        widget_values_format: "#,###%"
+                    };
                 });
 
                 let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts);
@@ -716,7 +726,7 @@ describe('highcharts_renderer', () => {
                 expect(result).toBe('250');
             });
 
-            it('should show only percentages without value when show_value is false but percentages are enabled', () => {
+            it('should show only percentages without value when show_value is false and percentages are enabled', () => {
                 opts = {
                     chartOptions: {
                         label: {
@@ -727,7 +737,10 @@ describe('highcharts_renderer', () => {
                 };
 
                 funcContext.y = 250;
-                mockPivotData.getAggregator = jest.fn(() => ({ value: () => 1000 }));
+                mockPivotData.getAggregator = jest.fn(() => ({
+                    value: () => 1000,
+                    widget_values_format: "#,###"
+                }));
 
                 let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts);
                 let result = fn.call(funcContext);
@@ -746,7 +759,10 @@ describe('highcharts_renderer', () => {
                 };
 
                 funcContext.y = 0;
-                mockPivotData.getAggregator = jest.fn(() => ({ value: () => 1000 }));
+                mockPivotData.getAggregator = jest.fn(() => ({
+                    value: () => 1000,
+                    widget_values_format: "#,###"
+                }));
 
                 let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts);
                 let result = fn.call(funcContext);
@@ -765,7 +781,10 @@ describe('highcharts_renderer', () => {
                 };
 
                 funcContext.y = 250;
-                mockPivotData.getAggregator = jest.fn(() => ({ value: () => 0 }));
+                mockPivotData.getAggregator = jest.fn(() => ({
+                    value: () => 0,
+                    widget_values_format: "#,###"
+                }));
 
                 let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts);
                 let result = fn.call(funcContext);
@@ -828,11 +847,10 @@ describe('highcharts_renderer', () => {
                 funcContext.y = 300;
                 mockPivotData.getRowKeys = jest.fn(() => ([['row1'], ['row2']]));
 
-                let callCount = 0;
                 mockPivotData.getAggregator = jest.fn((rows, cols) => {
-                    if (rows.length === 1) return { value: () => 400 };
-                    if (rows.length === 0 && cols.length > 0) return { value: () => 1200 };
-                    return { value: () => 800 };
+                    if (rows.length === 1) return { value: () => 400, widget_values_format: "#,###" };
+                    if (rows.length === 0 && cols.length > 0) return { value: () => 1200, widget_values_format: "#,###" };
+                    return { value: () => 800, widget_values_format: "#,###" };
                 });
 
                 let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts);
@@ -854,18 +872,10 @@ describe('highcharts_renderer', () => {
                 funcContext.y = 200; // value = 200
                 mockPivotData.getRowKeys = jest.fn(() => ([['row1'], ['row2']]));
 
-                let callCount = 0;
                 mockPivotData.getAggregator = jest.fn((rows, cols) => {
-                    callCount++;
-
-                    if (rows.length === 1) {
-                        return { value: () => 400 };
-                    }
-                    if (rows.length === 0 && cols.length > 0) {
-                        return { value: () => 0 };
-                    }
-
-                    return { value: () => 200 };
+                    if (rows.length === 1) return { value: () => 400, widget_values_format: "#,###" };
+                    if (rows.length === 0 && cols.length > 0) return { value: () => 0, widget_values_format: "#,###" };
+                    return { value: () => 200, widget_values_format: "#,###" };
                 });
 
                 let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts);
@@ -890,9 +900,9 @@ describe('highcharts_renderer', () => {
 
                 mockPivotData.getAggregator = jest.fn((rows, cols) => {
                     if (cols.length === 0) {
-                        return { value: () => 0 };
+                        return { value: () => 0, widget_values_format: "#,###" };
                     }
-                    return { value: () => 200 };
+                    return { value: () => 200, widget_values_format: "#,###" };
                 });
 
                 let fn = highchartsRenderer.defaultDataLabelFormatter(mockPivotData, opts);
@@ -1624,7 +1634,7 @@ describe('highcharts_renderer', () => {
 
         describe('dynamic system fields', () => {
             it('should count Scenario & Budget Cycle as system field', () => {
-                lodash.set(document, 'ReportHippo.user.features', ['multiple_dimension_tags', 'use_new_scenario_tag']);
+                highchartsRenderer.setFeatures(['multiple_dimension_tags', 'use_new_scenario_tag']);
 
                 const fieldWithScenario = { name: 'Scenario' };
                 expect(highchartsRenderer.isSystemField(fieldWithScenario)).toBe(true);
@@ -5085,7 +5095,7 @@ describe('highcharts_renderer', () => {
             });
 
             it('should return formatted multivalue colKey as array (format_dates_as_other_axis_types is ON)', () => {
-                lodash.set(document, 'ReportHippo.user.features', ['format_dates_as_other_axis_types']);
+                highchartsRenderer.setFeatures(['format_dates_as_other_axis_types']);
                 const initialKey = [1687277052, 1687277052];
                 const pivotData = {
                     colFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
@@ -5097,7 +5107,7 @@ describe('highcharts_renderer', () => {
             });
 
             it('should return formatted multivalue rowKey as array (format_dates_as_other_axis_types is ON)', () => {
-                lodash.set(document, 'ReportHippo.user.features', ['format_dates_as_other_axis_types']);
+                highchartsRenderer.setFeatures(['format_dates_as_other_axis_types']);
                 const initialKey = [1687277052, 1687277052];
                 const pivotData = {
                     rowFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
@@ -5109,7 +5119,7 @@ describe('highcharts_renderer', () => {
             });
 
             it('should return NOT formatted multivalue colKey as array (format_dates_as_other_axis_types is OFF)', () => {
-                lodash.set(document, 'ReportHippo.user.features', []);
+                highchartsRenderer.setFeatures([]);
                 const initialKeyAlreadyFormatted = ['10/10/2020', '10/10/2021'];
                 const pivotData = {
                     colFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
@@ -5121,7 +5131,7 @@ describe('highcharts_renderer', () => {
             });
 
             it('should return NOT formatted multivalue rowKey as array (format_dates_as_other_axis_types is OFF)', () => {
-                lodash.set(document, 'ReportHippo.user.features', []);
+                highchartsRenderer.setFeatures([]);
                 const initialKeyAlreadyFormatted = ['10/10/2020', '10/10/2021'];
                 const pivotData = {
                     rowFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
@@ -5266,7 +5276,7 @@ describe('highcharts_renderer', () => {
 
         it('should getFormattedColKeys call getFormattedKeys for colFormats', () => {
             highchartsRenderer.getFormattedColKeys('test1', 'test2');
-            expect(highchartsRenderer.getFormattedKeys).toHaveBeenCalledWith('test1', true, 'test2');
+            expect(highchartsRenderer.getFormattedKeys).toHaveBeenCalledWith('test1', true, 'test2', undefined);
         });
 
         it('should getFormattedRowKeys call getFormattedKeys for rowFormats', () => {
@@ -5501,6 +5511,8 @@ describe('highcharts_renderer', () => {
                     let aggregator = highchartsRenderer.rhPivotAggregatorSum([''], format, true, {}, {});
                     const agg = aggregator({}, '', '');
 
+                    agg.widget_values_format = format;
+
                     if (lodash.isEqual(cols, ['col 1']) && lodash.isEqual(rows, ['row 1'])) {
                         agg.sum = 12345;
                     } else if (lodash.isEqual(cols, ['col 1']) && lodash.isEqual(rows, [])) {