@datarailsshared/dr_renderer 1.2.10 → 1.2.11

package/src/novix_renderer.js

@@ -376,13 +376,14 @@ let initNovixRenderer = function($, window, document, Handsontable){
                         //data columns
                         if (pvtData.colKeys.length > 0) {
 
+                            const formattedColKeys = pvtData.getFormattedColKeys(colKeys);
                             var aux = rowData.length;
                             var startCol = aux;
-                            var prior = colKeys[0][nn];
+                            var prior = formattedColKeys[0][nn];
                             var toMerge = 0;
-                            for (var cc = 0; cc < colKeys.length; cc++) {
+                            for (var cc = 0; cc < formattedColKeys.length; cc++) {
 
-                                var textHeader = colKeys[cc][nn];
+                                var textHeader = formattedColKeys[cc][nn];
 
                                 if (nn < pvtData.colAttrs.length - 1 && prior != textHeader) {
                                     rowData.push(textHeader);
@@ -456,8 +457,9 @@ let initNovixRenderer = function($, window, document, Handsontable){
                 // DATA
 
                 var mergeDic = {};
+                const formattedRowKeys = pvtData.getFormattedRowKeys(rowKeys);
 
-                for (var rr = 0; rr < rowKeys.length; rr++) {
+                for (var rr = 0; rr < formattedRowKeys.length; rr++) {
 
                     var rowData = [];
 
@@ -466,29 +468,29 @@ let initNovixRenderer = function($, window, document, Handsontable){
                             mergeDic[cc] = {
                                 toMerge: 1,
                                 row: 0,
-                                priorText: rowKeys[rr][cc]
+                                priorText: formattedRowKeys[rr][cc]
                             };
                         }
                     }
 
                     //column for row atts
                     for (var cc = 0; cc < pvtData.rowAttrs.length; cc++) {
-                        rowData.push(rowKeys[rr][cc]);
-                        if (rowKeys[rr][cc] === subtotal) {
+                        rowData.push(formattedRowKeys[rr][cc]);
+                        if (formattedRowKeys[rr][cc] === subtotal) {
                             addMergeCell(rr + pvtData.colAttrs.length + 1, cc, 1, dataSource.fixedColumns - cc, true, true);
-                        } else if (cc === rowKeys[rr].length - 1 && hasColumnAttr) {
+                        } else if (cc === formattedRowKeys[rr].length - 1 && hasColumnAttr) {
                             addMergeCell(rr + pvtData.colAttrs.length + 1, cc, 1, 2, true, true);
                         }
                         // merge cell (last column)
                         if (opts.chartOptions.table_options.show_column_total && rr != 0 && mergeDic[cc]) { // check for merge dic
-                            if (rowKeys[rr][cc] == mergeDic[cc].priorText) {
+                            if (formattedRowKeys[rr][cc] == mergeDic[cc].priorText) {
                                 mergeDic[cc].toMerge++;
-                            } else if (cc < rowKeys[rr].length - 1) {
+                            } else if (cc < formattedRowKeys[rr].length - 1) {
                                 //create merge cell for this column
                                 addMergeCell(mergeDic[cc].row + pvtData.colAttrs.length + 1, cc, mergeDic[cc].toMerge, 1);
                                 mergeDic[cc].row = rr;
                                 mergeDic[cc].toMerge = 1;
-                                mergeDic[cc].priorText = rowKeys[rr][cc];
+                                mergeDic[cc].priorText = formattedRowKeys[rr][cc];
                             }
                         }
                     }

package/src/pivottable.js

@@ -1,3 +1,5 @@
+const helpers = require('./dr-renderer-helpers');
+
 // from pivottable@2.23.0
 let initPivotTable = function($, window, document) {
     var indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
@@ -20,10 +22,7 @@ let initPivotTable = function($, window, document) {
         }
         return x1 + x2;
     };
-    let useTotalsCalculation = false;
-    if (document.ReportHippo && document.ReportHippo && document.ReportHippo.user) {
-        useTotalsCalculation = _.includes(document.ReportHippo.user.features, 'enable_server_totals_calculation');
-    }
+
     numberFormat = function(opts) {
         var defaults;
         defaults = {
@@ -577,6 +576,7 @@ let initPivotTable = function($, window, document) {
         l_mapping = {};
         for (i in order) {
             x = order[i];
+            if (order[i] === null) x = '[null]';
             mapping[x] = i;
             if (typeof x === "string") {
                 l_mapping[x.toLowerCase()] = i;
@@ -668,6 +668,7 @@ let initPivotTable = function($, window, document) {
             this.getAggregator = bind(this.getAggregator, this);
             this.getRowKeys = bind(this.getRowKeys, this);
             this.getColKeys = bind(this.getColKeys, this);
+            this.getRowKeysByCols = bind(this.getRowKeysByCols, this);
             this.sortKeys = bind(this.sortKeys, this);
             this.arrSort = bind(this.arrSort, this);
             this.input = input;
@@ -684,17 +685,34 @@ let initPivotTable = function($, window, document) {
                 return true;
             });
             this.tree = {};
-            this.rowKeys = [];
-            this.colKeys = [];
+
+            this.isKeysSortingDoneOnBackendSide = opts.keysObject && typeof opts.keysObject === 'object' && helpers.backendSortingKeysAreNotEmpty(opts.keysObject);
+            if (this.isKeysSortingDoneOnBackendSide) {
+                this.rowKeys = opts.keysObject.row_keys;
+                this.colKeys = opts.keysObject.col_keys;
+                this.rowKeysByCols = opts.keysObject.row_keys_by_cols;
+            } else {
+                this.rowKeys = [];
+                this.colKeys = [];
+            }
+
             this.rowTotals = {};
             this.colTotals = {};
             this.allTotal = this.aggregator(this, [], []);
             this.sorted = false;
             this.dateValuesDictionary = opts.dateValuesDictionary;
+            this.sortByValueAttrs = opts.sortByValueAttrs || [];
+            this.colFormats = opts.colFormats || [];
+            this.rowFormats = opts.rowFormats || [];
+            this.isFormattingAxisLabels = opts.rendererOptions && opts.rendererOptions.isFormattingAxisLabels;
+            this.getFormattedColKeys = (keys) => opts.getFormattedColKeys(this, keys);
+            this.getFormattedRowKeys = (keys) => opts.getFormattedRowKeys(this, keys);
+            this.isDrillDownDisabled = opts.isDrillDownDisabled;
+
             PivotData.forEachRecord(this.input, this.derivedAttributes, (function(_this) {
                 return function(record) {
                     if (_this.filter(record)) {
-                        return _this.processRecord(record, useTotalsCalculation);
+                        return _this.processRecord(record);
                     }
                 };
             })(this));
@@ -850,15 +868,23 @@ let initPivotTable = function($, window, document) {
         };
 
         PivotData.prototype.getColKeys = function() {
-            this.sortKeys();
+            if (!this.isKeysSortingDoneOnBackendSide) {
+                this.sortKeys();
+            }
             return this.colKeys;
         };
 
         PivotData.prototype.getRowKeys = function() {
-            this.sortKeys();
+            if (!this.isKeysSortingDoneOnBackendSide) {
+                this.sortKeys();
+            }
             return this.rowKeys;
         };
 
+        PivotData.prototype.getRowKeysByCols = function() {
+            return this.rowKeysByCols;
+        };
+
         PivotData.prototype.processRecord = function(record) {
             var colKey, flatColKey, flatRowKey, l, len1, len2, n, ref, ref1, ref2, ref3, rowKey, x;
             colKey = [];

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();
@@ -19,7 +20,6 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
   }
 
   publishedItemsRenderer.resizeTable = function (options, iframeWindow) {
-    options.alreadySetTimeout = null;
     const publish_item_image = iframeWindow.document.getElementById('publish_item_image');
     const table = iframeWindow.document.getElementsByTagName("table")[0];
     const body = iframeWindow.document.getElementsByTagName("body")[0];
@@ -31,40 +31,23 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
   }
 
-  publishedItemsRenderer.zoomTable = function(iframeWindow, table, body) {
-    let body_zoom = body.style.zoom;
-    body_zoom = parseFloat(body_zoom) || 1;
-
-    let zoom = table.style.zoom;
-    zoom = parseFloat(zoom) || 1;
-
-    const positionInfo = table.getBoundingClientRect();
-    let width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
+  publishedItemsRenderer.zoomTable = function (iframeWindow, table, body) {
+    const bodyZoom = parseFloat(body.style.zoom) || 1;
+    const SCROLL_OFFSET = 16;
 
-    if (width < iframeWindow.innerWidth) {
-      zoom += 0.05;
+    const tableWidth = table.getBoundingClientRect().width * bodyZoom;
+    const tableHeight = table.getBoundingClientRect().height * bodyZoom;
+    const root = iframeWindow.document.documentElement;
 
-      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
-      if (width < iframeWindow.innerWidth) {
-        table.style.zoom = zoom;
-        setTimeout(function () {
-          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
-        }, 10);
-      }
-    } else if (width >= iframeWindow.innerWidth) {
-      zoom -= 0.05;
-
-      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
-      table.style.zoom = zoom;
-      if (width >= iframeWindow.innerWidth) {
-        setTimeout(function () {
-          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
-        }, 10);
-      }
+    let requiredZoom = (root.clientWidth - SCROLL_OFFSET) / tableWidth;
+    if (this.settings.resizeTableUsingBothDimensions) {
+      requiredZoom = Math.min(requiredZoom, (root.clientHeight - SCROLL_OFFSET) / tableHeight);
     }
-  }
 
-  publishedItemsRenderer.resizePublishedImage = function(publish_item_image, iframeWindow, body) {
+    table.style.zoom = requiredZoom;
+  };
+
+  publishedItemsRenderer.resizePublishedImage = function (publish_item_image, iframeWindow, body) {
     if (!publish_item_image) return;
 
     let body_zoom = body.style.zoom;
@@ -107,11 +90,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     if (!options.responsive) {
       publishedItemsRenderer.resetTableZoom(document);
     } else {
-      if (!options.alreadySetTimeout) {
-        options.alreadySetTimeout = setTimeout(function () {
-          publishedItemsRenderer.resizeTable(options, iframeWindow);
-        }, 100);
-      }
+      publishedItemsRenderer.resizeTable(options, iframeWindow);
     }
   }
 
@@ -217,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>';
           }
@@ -323,20 +302,19 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
   }
 
   publishedItemsRenderer.addEventListeners = function (document, iframeWindow, scope, options) {
-    document.addEventListener("DOMContentLoaded", function () {
-      if (!options.alreadySetTimeout) {
-        options.alreadySetTimeout = setTimeout(function () {
-          publishedItemsRenderer.resizeTable(options, iframeWindow);
-        }, 50);
+    let resizeTimeout;
+    const handleDimensionChange = () => {
+      if (resizeTimeout) {
+        cancelAnimationFrame(resizeTimeout);
       }
-    });
-    iframeWindow.addEventListener("resize", function () {
-      if (!options.alreadySetTimeout) {
-        options.alreadySetTimeout = setTimeout(function () {
-          publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
-        }, 100);
-      }
-    });
+
+      resizeTimeout = requestAnimationFrame(() => {
+        publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
+      });
+    }
+
+    document.addEventListener("DOMContentLoaded", handleDimensionChange);
+    iframeWindow.addEventListener("resize", handleDimensionChange);
 
     // Add click event to cell with formula
     let all_a_hrefs = document.querySelectorAll('td a[location_id]');
@@ -372,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/src/seriesPointStyles-helper.js

@@ -0,0 +1,43 @@
+function getSeriesPointStyles(isSelected) {
+    return {
+        opacity: isSelected ? 1 : 0.1,
+        marker: {
+            enabled: true,
+            radius: isSelected ? 8 : 3,
+        },
+        dataLabels: {
+            style: {
+                fontWeight: isSelected ? "bold" : "normal",
+            },
+        },
+    };
+}
+
+function setSeriesPointStylesOnClick(e) {
+    const selectedPoint = e.point;
+    e.point.series.chart.series.forEach((series) =>
+        series.points.forEach((point) => {
+            point.update(getSeriesPointStyles(point === selectedPoint), false);
+        })
+    );
+    e.point.series.chart.redraw();
+}
+
+function setInitialPointStyles(opts, series) {
+    series.forEach((series) => {
+        if (Array.isArray(series.data)) {
+            series.data.forEach((item) => {
+                const isSelected =
+                    item && opts.selectedPoint &&
+                    item.initialName === opts.selectedPoint.initialName &&
+                    item.y.toFixed(2) === opts.selectedPoint.y.toFixed(2);
+                item = Object.assign(item, getSeriesPointStyles(isSelected));
+            });
+        }
+    });
+}
+
+module.exports = {
+    setSeriesPointStylesOnClick,
+    setInitialPointStyles,
+};

package/tests/dr-renderer-helpers.test.js

@@ -0,0 +1,150 @@
+import drRendererHelpers from '../src/dr-renderer-helpers';
+
+describe('dr-renderer-helpers', () => {
+
+    describe('backendSortingKeysAreNotEmpty', () => {
+        it('should return true if keys are not empty', () => {
+            const keys = {
+                row_keys: [1, 2, 3],
+                col_keys: [1, 2, 3]
+            };
+            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(true);
+        });
+
+        it('should return true if one of the keys is not empty', () => {
+            const keys = {
+                row_keys: [1, 2, 3],
+                col_keys: []
+            };
+            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(true);
+        });
+
+        it('should return false if keys are empty', () => {
+            const keys = {
+                row_keys: [],
+                col_keys: [],
+            };
+            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(false);
+        });
+
+        it('should return false if keys are null', () => {
+            const keys = null;
+            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(false);
+        });
+    });
+
+    describe('capitalize', () => {
+        it('should capitalize a string', () => {
+            const string = 'test';
+            expect(drRendererHelpers.capitalize(string)).toBe('Test');
+        });
+
+        it('should not capitalize a string when it was not trimmed', () => {
+            const string = ' test';
+            expect(drRendererHelpers.capitalize(string)).toBe(' test');
+        });
+
+        it('should return an empty string if string is null', () => {
+            const string = null;
+            expect(drRendererHelpers.capitalize(string)).toBe('');
+        });
+    });
+
+    describe('clamp', () => {
+        it('should clamp value between teh boundaries', () => {
+            expect(drRendererHelpers.clamp(10, 5, 20)).toBe(10);
+            expect(drRendererHelpers.clamp(10, 25, 20)).toBe(20);
+            expect(drRendererHelpers.clamp(10, 15, 20)).toBe(15);
+        });
+    });
+
+    describe('isNumber', () => {
+        it('should check whether the value is a finity number', () => {
+            expect(drRendererHelpers.isNumber('number')).toBeFalsy();
+            expect(drRendererHelpers.isNumber(Infinity)).toBeFalsy();
+            expect(drRendererHelpers.isNumber(12)).toBeTruthy();
+        });
+    });
+
+    describe('mergeDeep', () => {
+        it('should handle the wrong data', () => {
+            expect(drRendererHelpers.mergeDeep([1, 2, 3], { a: 1, b: 2})).toEqual([1, 2, 3]);
+            expect(drRendererHelpers.mergeDeep('string', { a: 1, b: 2})).toEqual('string');
+            expect(drRendererHelpers.mergeDeep({ a: 1 }, 'string')).toEqual({ a: 1 });
+        });
+
+        it('should not merge arrays and replace instead', () => {
+            expect(drRendererHelpers.mergeDeep({
+                a: [1, 2, 3]
+            }, {
+                a: [2, 3, 4]
+            })).toEqual({
+                a: [2, 3, 4]
+            });
+        });
+
+        it('should merge nested objects', () => {
+            expect(drRendererHelpers.mergeDeep({
+                a: 1,
+                b: {
+                    c: 3,
+                    d: 4
+                }
+            },
+            {
+                b: {
+                    d: 5,
+                    e: 6
+                },
+                c: 7
+            })).toEqual({
+                a: 1,
+                b: {
+                    c: 3,
+                    d: 5,
+                    e: 6,
+                },
+                c: 7,
+            });
+        });
+
+        it('should merge more than 2 objects', () => {
+            expect(drRendererHelpers.mergeDeep({
+                a: 1,
+                b: 2
+            },
+            {
+                b: 3,
+                c: 4
+            },
+            {
+                a: 5,
+                e: 6
+            })).toEqual({
+                a: 5,
+                b: 3,
+                c: 4,
+                e: 6
+            });
+        });
+    });
+
+    describe('removeSVGTextCorrection', () => {
+        it('should remove yCorr by default', () => {
+            const svg = {
+                yCorr: -12
+            };
+            drRendererHelpers.removeSVGTextCorrection(svg);
+            expect(svg.yCorr).toBe(0);
+        });
+
+        it('should remove yCorr by default', () => {
+            const svg = {
+                xCorr: -12
+            };
+            drRendererHelpers.removeSVGTextCorrection(svg, 'xCorr');
+            svg.xCorr = -20;
+            expect(svg.xCorr).toBe(0);
+        });
+    });
+});