@datarailsshared/dr_renderer 1.2.420 → 1.2.422

package/package.json

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

package/src/highcharts_renderer.js

@@ -379,6 +379,31 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     /** End of 'Highcharts initial configuration section' **/
 
+    const chartDataLabelsVerticalOptions = function (chartOptions) {
+        const vertical = lodash.get(chartOptions, 'label.vertical', false);
+        if (vertical) {
+            return {
+                rotation: 270,
+                y: -25,
+                padding: 10,
+                crop: false,
+            };
+        }
+
+        return  {};
+    };
+
+    const chartHasVerticalDataLabelsOption = (type) => {
+        return ![
+            highchartsRenderer.CHART_TYPES.LINE_CHART,
+            highchartsRenderer.CHART_TYPES.LINE_CHART_SMOOTH,
+            highchartsRenderer.CHART_TYPES.AREA_CHART,
+            highchartsRenderer.CHART_TYPES.AREA_CHART_SMOOTH,
+            highchartsRenderer.CHART_TYPES.BAR_CHART,
+            highchartsRenderer.CHART_TYPES.BAR_CHART_STACKED,
+        ].includes(type);
+    };
+
     highchartsRenderer.filterFloat = function (value) {
         if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/.test(value))
             return Number(value);
@@ -1041,8 +1066,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             };
             if (isNewAngular) {
                 const isPieChart = chartOptions.chart && chartOptions.chart.type === 'pie';
-                const x = isPieChart ? 13 : 12
-                const y = isPieChart ? -9 : 6
+                const x = isPieChart ? 13 : 12;
+                const y = isPieChart ? -9 : 6;
                 chartOptions.chart.spacingBottom = lodash.get(chartOptions, 'xAxis.title') ? 34 : 30; 
                 chartOptions.drilldown.breadcrumbs = {
                     formatter: () => '< &nbsp;Back',
@@ -1848,7 +1873,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var col_n_keys = pivotData.getColKeys();
         var row_n_keys = pivotData.getRowKeys();
 
-        var num_cols = col_n_keys.length;
         var num_rows = row_n_keys.length;
 
         const isOthersIncludedInRow = num_rows === 1 && lodash.includes(row_n_keys[0], highchartsRenderer.DR_OTHERS_KEY);
@@ -1867,9 +1891,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             var ob = {};
             // check string contains hebrew
             ob.initialName = (/[\u0590-\u05FF]/).test(key) ? ('\u200E' + key) : key;
-            if (lodash.isEmpty(String(ob.name))) {
-                ob.initialName = "[blank]";
-            }
 
             if (ob.initialName === highchartsRenderer.DR_OTHERS_KEY) {
                 ob.initialName = othersName;
@@ -1898,8 +1919,8 @@ 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();
+        row_n_keys = pivotData.getRowKeys(),
+        col_n_keys = pivotData.getColKeys();
 
         var num_cols = col_n_keys.length;
         var num_rows = row_n_keys.length;
@@ -3044,11 +3065,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             };
         }
-
+        chartOptions.plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.series);
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
         chartOptions.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
-
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -5084,10 +5104,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 const timeframe = highchartsRenderer.getTimeframeByFormat(format);
                 const fiscalYearMonthsModifier = highchartsRenderer.getFiscalYearMonthModifier();
+                const isFiscalYearBackEnabled = highchartsRenderer.isFiscalYearBackEnabled();
 
                 let date = moment_lib(tryParse).utcOffset(0);
-                if (lodash.includes(['quarter', 'year'], timeframe)) {
+                const originalDateYear = date.year()
+                const originalDateMonth = date.month();
+
+                if (lodash.includes(['quarter'], timeframe)){
                     date = date.subtract(fiscalYearMonthsModifier, 'M');
+                    if (fiscalYearMonthsModifier > 0 && !isFiscalYearBackEnabled) {
+                        let fiscalYear = originalDateYear;
+                        if ((originalDateMonth - fiscalYearMonthsModifier) >= 0) {
+                            fiscalYear += 1;
+                        }
+                        date = date.set('year', fiscalYear);
+                    }
+                }
+
+                if (lodash.includes(['year'], timeframe)) {
+                    if (fiscalYearMonthsModifier > 0 && isFiscalYearBackEnabled) {
+                        let fiscalYear = originalDateYear - 1;
+                        date = date.set('year', fiscalYear);
+                    }
                 }
 
                 return date.format(format) + "";
@@ -6017,7 +6055,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         let valToReturn = {};
         if (chartOpt) {
             lodash.forEach(chartOpt.suboptions, (suboption) => {
-                valToReturn[suboption.category_type] = highchartsRenderer.getDefaultValueForSubOptions(suboption, existing_options);
+                valToReturn[suboption.category_type] = highchartsRenderer.getDefaultValueForSubOptions(suboption, existing_options, type);
             });
         }
 
@@ -6087,6 +6125,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         };
         result = lodash.merge(result, options);
         result = lodash.merge(result, chartOptions.dataLabels);
+        result = lodash.merge(result, chartDataLabelsVerticalOptions(additionalOptions, chartOptions));
         chartOptions.dataLabels = result;
 
         return chartOptions;
@@ -6098,7 +6137,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return key
     };
 
-    highchartsRenderer.getDefaultValueForSubOptions = function (option, existing_options) {
+    highchartsRenderer.getDefaultValueForSubOptions = function (option, existing_options, chartType) {
         const valToReturn = {};
         
         if (option) {
@@ -6106,6 +6145,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             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);
+
+                    if (elem.showFn && typeof elem.showFn === 'function' && !elem.showFn(chartType)) {
+                        valToReturn[elem.value_name] = undefined;
+                    }
                 }
                 if (valToReturn[elem.value_name] == undefined && elem.element_type !== 'devider') {
                     if (typeof elem.default_value === 'object') {
@@ -6652,6 +6695,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     value_name: 'overlap',
                     default_value: false
                 },
+                {
+                    element_type: 'toggle',
+                    element_label: 'Vertical',
+                    value_name: 'vertical',
+                    default_value: false,
+                    showFn: chartHasVerticalDataLabelsOption,
+                },
                 {
                     element_type: 'devider',
                 },
@@ -6795,6 +6845,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     value_name: 'overlap',
                     default_value: false
                 },
+                {
+                    element_type: 'toggle',
+                    element_label: 'Vertical',
+                    value_name: 'vertical',
+                    default_value: false,
+                    showFn: chartHasVerticalDataLabelsOption,
+                },
                 {
                     element_type: 'toggle',
                     element_label: 'Shadow',
@@ -8520,18 +8577,27 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         lastDay2.getMonth(),
                         lastDay2.getDate(),
                         23, 59, 59
-                    ) / 1000)
+                    ) / 1000);
                     return range;
                 case 'quarter':
                     const utcDate = moment_lib.utc(initialDateString, format, true);
-                    range.val.fromdate = lodash.cloneDeep(utcDate).startOf(timeframe).add(fiscalYearMonthsModifier, 'M').unix();
-                    range.val.todate = lodash.cloneDeep(utcDate).endOf(timeframe).add(fiscalYearMonthsModifier, 'M').endOf('M').unix();
+                    range.val.fromdate = lodash.cloneDeep(utcDate).startOf(timeframe).add(fiscalYearMonthsModifier, 'M');
+                    range.val.todate = lodash.cloneDeep(utcDate).endOf(timeframe).add(fiscalYearMonthsModifier, 'M').endOf('M');
+                    if (fiscalYearMonthsModifier > 0 && !highchartsRenderer.isFiscalYearBackEnabled()) {
+                        range.val.fromdate = moment_lib(range.val.fromdate.subtract(1, 'Y'));
+                        range.val.todate = moment_lib(range.val.todate.subtract(1, 'Y'));
+                    }
+                    range.val.fromdate = range.val.fromdate.unix();
+                    range.val.todate = range.val.todate.unix();
                     return range;
                 default:
                     return "";
             }
         } else if (!lodash.isNaN(fieldnametoFilter)) {
-            const utcDate = moment_lib.unix(fieldnametoFilter).utc();
+            let utcDate = moment_lib.unix(fieldnametoFilter).utc();
+            if (lodash.includes(['year', 'quarter'], timeframe)) {
+                utcDate = moment_lib(utcDate).subtract(fiscalYearMonthsModifier, 'M');
+            }
             const fromDateMoment = lodash.cloneDeep(utcDate).startOf(timeframe);
             const toDateMoment = lodash.cloneDeep(utcDate).endOf(timeframe);
 
@@ -9497,6 +9563,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return lodash.get(document, 'ReportHippo.user.organization.fiscal_year_starts_from', 1) - 1;
     }
 
+    highchartsRenderer.isFiscalYearBackEnabled = function() {
+        return lodash.get(document, 'ReportHippo.user.organization.fiscal_year_back');
+    }
+
     highchartsRenderer.getTimeframeByFormat = function(format) {
         if (format && highchartsRenderer.containsIgnoreCase(format, 'q'))
             return 'quarter';

package/tests/highcharts_renderer.test.js

@@ -39,6 +39,7 @@ describe('highcharts_renderer', () => {
             getOptions: function() { return Highcharts.opt; },
             Tooltip: {},
             wrap: () => {},
+            chart: () => {},
         };
         _window.DataFormatter = DataFormatter;
         initPivotTable($, _window, _document);
@@ -7375,6 +7376,124 @@ describe('highcharts_renderer', () => {
         })
     });
 
+    describe('Function ptCreateElementAndDraw', () => {
+        beforeEach(() => {
+            jest.clearAllMocks();
+        });
+
+        afterAll(() => {
+            jest.restoreAllMocks();
+        });
+
+        it('should set chart colors palette using widget or dashboard colors palette', () => {
+            const chartOptions = {
+                colors: [],
+                chart: {
+                },
+            };
+            const optionsWidgetPalette = {
+                paletteOptions: {
+                    widgetPalette: ['#ff0202', '#b3060e', '#70000a'],
+                    dashboardPalette: {
+                        colors: ['#ffffff', '#000000']
+                    },
+                },
+                onlyOptions: true,
+            };
+
+            const res = highchartsRenderer.ptCreateElementAndDraw(chartOptions, optionsWidgetPalette);
+            expect(res.colors).toEqual(optionsWidgetPalette.paletteOptions.widgetPalette);
+
+            const optionsDashboardPalette = {
+                paletteOptions: {
+                    dashboardPalette: {
+                        colors: ['#ffffff', '#000000']
+                    },
+                },
+                onlyOptions: true,
+            };
+
+            const res2 = highchartsRenderer.ptCreateElementAndDraw(chartOptions, optionsDashboardPalette);
+            expect(res2.colors).toEqual(optionsDashboardPalette.paletteOptions.dashboardPalette.colors);
+        });
+
+        it('should set drilldown options on drilldown chart', () => {
+            jest.useFakeTimers();
+            highchartsRenderer.isNewAngular = true;
+            const chartSpy = jest.spyOn(Highcharts, 'chart').mockImplementation(() => {});
+
+            const chartOptions = {
+                colors: [],
+                chart: {
+                },
+                onlyText: true,
+                drilldown: {
+                },
+            };
+            const options = {};
+
+            highchartsRenderer.ptCreateElementAndDraw(chartOptions, options);
+
+            jest.runAllTimers();
+
+            expect(chartSpy).toHaveBeenCalledWith(
+                expect.any(Object),
+                expect.objectContaining({
+                    drilldown: expect.objectContaining({
+                        drillUpButton: expect.any(Object),
+                        breadcrumbs: expect.any(Object),
+                    }),
+                }),
+            );
+        });
+
+        it('should return no data result if series is empty', () => {
+            const chartOptions = {
+                chart: {},
+                series: [{ data: [] }, { data: [] }, {}],
+            };
+            const options = {};
+            const noDataFnSpy = jest.spyOn(highchartsRenderer, 'getNoDataResult').mockImplementation(() => {});
+
+            highchartsRenderer.ptCreateElementAndDraw(chartOptions, options);
+            
+            expect(noDataFnSpy).toHaveBeenCalled();
+            expect(options.error_has_occurred).toBeTruthy();
+            expect(options.error_params).toBe(highchartsRenderer.widgetPlaceholders.nodata);
+        });
+
+        it('should return too much data result if series is too long', () => {
+            const chartOptions = {
+                chart: {},
+                series: [{ data: new Array(1000) }, { data: new Array(1000) }, {}],
+            };
+            const options = {};
+            const noDataFnSpy = jest.spyOn(highchartsRenderer, 'getNoDataResult').mockImplementation(() => {});
+
+            highchartsRenderer.ptCreateElementAndDraw(chartOptions, options);
+
+            expect(noDataFnSpy).toHaveBeenCalled();
+            expect(options.error_has_occurred).toBeTruthy();
+            expect(options.error_params).toBe(highchartsRenderer.widgetPlaceholders.tooMuchData);
+        });
+
+        it('should set hcInstance on options with chart object for graph table renderer to use', () => {
+            jest.useFakeTimers();
+            jest.spyOn(Highcharts, 'chart').mockImplementation(() => ({ chart: true }));
+
+            const chartOptions = {
+                chart: {},
+                onlyText: true,
+            };
+            const options = {};
+
+            highchartsRenderer.ptCreateElementAndDraw(chartOptions, options);
+            jest.runAllTimers();
+
+            expect(options.hcInstance).toBeDefined();
+        });
+    });
+
     describe('Function getNoDataResult', () => {
         const container = $('<div class="noData-box"></div>');
 
@@ -8739,4 +8858,77 @@ describe('highcharts_renderer', () => {
         });
     });
 
+
+    describe('Function ptCreateSeriesToDrillDownChart', () => {
+        let pivotData, chartOptions, additionOptions, opts;
+
+        beforeEach(() => {
+            pivotData = {
+                getColKeys: jest.fn(),
+                getRowKeys: jest.fn(),
+                getAggregator: jest.fn().mockReturnValue({
+                    value: jest.fn()
+                })
+            };
+
+            chartOptions = {
+                chart: {
+                    type: 'pie'
+                }
+            };
+
+            additionOptions = {};
+            opts = {};
+
+            highchartsRenderer.getOthersName = jest.fn();
+            highchartsRenderer.getFormattedColKey = jest.fn();
+            highchartsRenderer.moveSeriesToSecondYAxisIfNeeded = jest.fn();
+        });
+
+        it('should handle Hebrew characters in key', () => {
+            pivotData.getColKeys.mockReturnValue(['שלום']);
+            pivotData.getRowKeys.mockReturnValue(['row1']);
+            pivotData.getAggregator().value.mockReturnValue(10);
+            highchartsRenderer.getOthersName.mockReturnValue('Others');
+            highchartsRenderer.getFormattedColKey.mockReturnValue('FormattedKey');
+        
+            const result = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
+            expect(result[0].data[0].initialName).toEqual('\u200Eשלום');
+        });
+
+        it('should handle DR_OTHERS_KEY', () => {
+            pivotData.getColKeys.mockReturnValue([highchartsRenderer.DR_OTHERS_KEY]);
+            pivotData.getRowKeys.mockReturnValue(['row1']);
+            pivotData.getAggregator().value.mockReturnValue(10);
+            highchartsRenderer.getOthersName.mockReturnValue('Others');
+            highchartsRenderer.getFormattedColKey.mockReturnValue('FormattedKey');
+        
+            const result = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
+            expect(result[0].data[0].initialName).toEqual('Others');
+        });
+        
+        it('should handle negative values when chart type is not pie', () => {
+            chartOptions.chart.type = 'notPie';
+            pivotData.getColKeys.mockReturnValue(['key1']);
+            pivotData.getRowKeys.mockReturnValue(['row1']);
+            pivotData.getAggregator().value.mockReturnValue(-10);
+            highchartsRenderer.getOthersName.mockReturnValue('Others');
+            highchartsRenderer.getFormattedColKey.mockReturnValue('FormattedKey');
+        
+            const result = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
+            expect(result[0].data[0].y).toEqual(-10);
+        });
+        
+        it('should handle numeric keys', () => {
+            pivotData.getColKeys.mockReturnValue(['123']);
+            pivotData.getRowKeys.mockReturnValue(['row1']);
+            pivotData.getAggregator().value.mockReturnValue(10);
+            highchartsRenderer.getOthersName.mockReturnValue('Others');
+            highchartsRenderer.getFormattedColKey.mockReturnValue('FormattedKey');
+        
+            const result = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
+            expect(result[0].data[0].drilldown).toEqual(123);
+        });
+    });
+
 });