@datarailsshared/dr_renderer 1.2.419 → 1.2.421

package/package.json

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

package/src/highcharts_renderer.js

@@ -346,7 +346,24 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         },
         exporting: {
             enabled: false,
-            sourceWidth: 900
+            sourceWidth: 900,
+            chartOptions: {
+                chart: {
+                    events: {
+                        load: function () {
+                            const chart = this;
+                            chart.renderer.definition({
+                                tagName: 'style',
+                                textContent: `
+                                    .highcharts-xaxis-grid > .highcharts-grid-line {
+                                        stroke: none;
+                                    }
+                                `,
+                            });
+                        },
+                    },
+                },
+            },
         },
         drilldown: {
             activeAxisLabelStyle: {
@@ -1024,8 +1041,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',
@@ -1831,7 +1848,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);
@@ -1850,9 +1866,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;
@@ -5067,10 +5080,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) + "";
@@ -6248,7 +6279,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_type: 'checkbox',
                     element_label: 'Freeze panes <small>(old table only)</small>',
                     value_name: 'freeze_panes',
-                    default_value: true
+                    default_value: false
                 },
                 {
                     element_type: 'checkbox',
@@ -6474,7 +6505,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_type: 'checkbox',
                     element_label: 'Freeze panes <small>(old table only)</small>',
                     value_name: 'freeze_panes',
-                    default_value: true
+                    default_value: false
                 },
                 {
                     element_type: 'checkbox',
@@ -8503,18 +8534,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);
 
@@ -9480,6 +9520,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/src/published_items_renderer.js

@@ -4,6 +4,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
   this.scope = {};
   this.options = {};
   this.isScenarioMode = null;
+  this.settings = {};
 
   publishedItemsRenderer.formulaCellClicked = function (event, scope, options, window) {
     event.stopPropagation();
@@ -30,16 +31,23 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
   }
 
-  publishedItemsRenderer.zoomTable = function(iframeWindow, table, body) {
+  publishedItemsRenderer.zoomTable = function (iframeWindow, table, body) {
     const bodyZoom = parseFloat(body.style.zoom) || 1;
+    const SCROLL_OFFSET = 16;
+
+    const tableWidth = table.getBoundingClientRect().width * bodyZoom;
+    const tableHeight = table.getBoundingClientRect().height * bodyZoom;
+    const root = iframeWindow.document.documentElement;
+
+    let requiredZoom = (root.clientWidth - SCROLL_OFFSET) / tableWidth;
+    if (this.settings.resizeTableUsingBothDimensions) {
+      requiredZoom = Math.min(requiredZoom, (root.clientHeight - SCROLL_OFFSET) / tableHeight);
+    }
 
-    const tableWidth = (table.getBoundingClientRect().width + (iframeWindow.innerWidth - body.offsetWidth)) * bodyZoom;
-    const requiredZoom = iframeWindow.innerWidth / tableWidth;
-  
     table.style.zoom = requiredZoom;
   };
 
-  publishedItemsRenderer.resizePublishedImage = function(publish_item_image, iframeWindow, body) {
+  publishedItemsRenderer.resizePublishedImage = function (publish_item_image, iframeWindow, body) {
     if (!publish_item_image) return;
 
     let body_zoom = body.style.zoom;
@@ -188,7 +196,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
           const format = inputMetaData.format ? inputMetaData.format.toUpperCase() : 'MM/DD/YYYY';
           const formattedDate = formatValue('d', format, inputMetaData.value).value
           if (_this.isScenarioMode) {
-             dateEl.innerHTML = '<label class="value dateInput" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;">' + formattedDate + '</label>';
+            dateEl.innerHTML = '<label class="value dateInput" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;">' + formattedDate + '</label>';
           } else {
             dateEl.innerHTML = '<label class="value dateInput" style="cursor: pointer;">' + formattedDate + '</label>';
           }
@@ -299,7 +307,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
       if (resizeTimeout) {
         cancelAnimationFrame(resizeTimeout);
       }
-    
+
       resizeTimeout = requestAnimationFrame(() => {
         publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
       });
@@ -342,7 +350,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     }, 500);
   }
 
-  publishedItemsRenderer.applyInitDocumentStyles = function(document, iframeWindow) {
+  publishedItemsRenderer.applyInitDocumentStyles = function (document, iframeWindow) {
     const table = document.getElementsByTagName('table')[0];
     if (table) {
       table.style.overflow = 'hidden';

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);
+        });
+    });
+
 });