@datarailsshared/dr_renderer 1.2.418 → 1.2.420

package/package.json

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

package/src/graph-table-renderer.js

@@ -1,6 +1,6 @@
 /**
  * @typedef {Object} HighChartsRenderer
- * @property {(rows: Rows, options: GTROptions, isTable: boolean, widget: any, pivotModel?: PivotModel) => string} rhPivotViewV2
+ * @property {(rows: Rows, options: GTROptions | null, isTable: boolean, widget: any, pivotModel?: PivotModel) => string} rhPivotViewV2
  */
 
 /**
@@ -17,8 +17,14 @@
  * @typedef {Object} PivotModel
  */
 
+/**
+ * @typedef {Object} RendererOptions
+ * @property {any} hcInstance
+ */
+
 /**
  * @typedef {Object} GTROptions
+ * @property {RendererOptions} rendererOptions
  */
 
 /**
@@ -58,6 +64,11 @@ export class GraphTableRenderer {
      */
     #pivotUtilities;
 
+    /**
+     * @type {any | null}
+     */
+    #hcInstance = null;
+
     /**
      * 
      * @param {HighChartsRenderer} hcr 
@@ -97,12 +108,39 @@ export class GraphTableRenderer {
         return this.#pivotModel;
     }
 
+    /**
+     * @description returns Chart instance of HighCharts library
+     * @returns {any | null}
+     */
+    hcInstance() {
+        return this.#hcInstance;
+    }
+
+    #setHcInstance() {
+        if (!this.#options) {
+            return;
+        }
+        this.#hcInstance = this.#options.rendererOptions.hcInstance;
+        if (!this.#hcInstance) {
+            console.warn('[dr_renderer] HighCharts instance not found in options after the chart is rendered.');
+        }
+        /**
+         * hcInstance object is not needed in options after the chart is rendered - it's an internal object of HighCharts library
+         * Deleting to not supply it to widget object, so it cannot be used anywhere else 
+         */
+        delete this.#options.rendererOptions.hcInstance;
+    }
+
     renderTable(widget = null) {
-        return this.#hcr.rhPivotViewV2(this.#rows, this.#options || {}, true, widget, this.#pivotModel);
+        return this.#hcr.rhPivotViewV2(this.#rows, this.#options, true, widget, this.#pivotModel);
     }
 
     renderChart(widget = null) {
-        return this.#hcr.rhPivotViewV2(this.#rows, this.#options || {}, false, widget, this.#pivotModel);
+        const chart = this.#hcr.rhPivotViewV2(this.#rows, this.#options, false, widget, this.#pivotModel);
+        setTimeout(() => {
+            this.#setHcInstance();
+        });
+        return chart;
     }
 }
 

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: {
@@ -473,18 +490,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return chart_option;
     }
 
+    /**
+     * @deprecated For new angular just use hcInstance
+     */
     highchartsRenderer.downloadFile = function (title, graph_id, type) {
         let chart = null;
 
         const chartElement = $('#' + graph_id).find('div.chart');
         if (chartElement.highcharts) {
+            // old angular
             chart = chartElement.highcharts();
-        } else {
-            const graphIdString = graph_id.split('_')[1];
-            const graphId = Number(graphIdString) || graphIdString;
-            chart = lodash.findLast(Highcharts.charts, function(value) {
-                return value.options.widgetId === graphId;
-            });
         }
 
         if (!chart) return;
@@ -1090,19 +1105,25 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             chartOptions = highchartsRenderer.updateChartOptions(chartOptions, opts);
             chartOptions = highchartsRenderer.updateChartOptions(chartOptions, {credits: {enabled: false}});
             result = $("<div>").addClass("chart");
-            setTimeout(function () {
-                let chart;
-                if (result.highcharts) {
+ 
+            // old angular
+            if (result.highcharts) {
+                setTimeout(() => {
                     result.highcharts(chartOptions);
-                    chart = result.highcharts();
-                } else {
-                    chart = Highcharts.chart(result[0], chartOptions)
-                }
-
-                if (opts && opts.testChart) {
-                    opts.testChart.chart = chart;
-                }
-            });
+                    const chart = result.highcharts();
+                    if (opts && opts.testChart) {
+                        opts.testChart.chart = chart;
+                    }
+                });
+            } else {
+                // new angular
+                setTimeout(() => {
+                    const chart = Highcharts.chart(result[0], chartOptions);
+                    if (opts) {
+                        opts.hcInstance = chart;
+                    }
+                });
+            }
         }
         return result;
     };
@@ -4612,26 +4633,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         highchartsRenderer.sanitizeOptions(opts);
         options.rendererOptions.labelsConvertFunction = highchartsRenderer.getFieldNameForTable(options);
         opts.isTable = isTable;
-        if (isTable == true && options.rendererOptions.chartOptions && options.rendererOptions.chartOptions.table_options && options.rendererOptions.chartOptions.table_options.transpose_table == true) {
-            var temp_cols = opts.cols;
-            opts.cols = opts.rows;
-            opts.rows = temp_cols;
-
-            if (highchartsRenderer.sortHasBeenDoneOnBE(lodash.get(widget.pivot, 'keysObject'))) {
-                opts.keysObject = lodash.cloneDeep(widget.pivot.keysObject);
-                const tempColKeys = opts.keysObject.col_keys;
-                opts.keysObject.col_keys = opts.keysObject.row_keys;
-                opts.keysObject.row_keys = tempColKeys;
-            }
-        }
 
         optsFiltered = $.extend(defaults, opts);
         result = null;
         try {
-            const isTranspose = lodash.get(opts, 'rendererOptions.chartOptions.table_options.transpose_table', false);
-            opts.getFormattedColKeys = isTranspose ? highchartsRenderer.getFormattedRowKeys : highchartsRenderer.getFormattedColKeys;
-            opts.getFormattedRowKeys = isTranspose ? highchartsRenderer.getFormattedColKeys : highchartsRenderer.getFormattedRowKeys;
-
             pivotData = $.pivotUtilities.getPivotDataModel(rowData, opts);
             pivotData.sortByValueAttrs = [];
             try {
@@ -4782,26 +4787,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         highchartsRenderer.sanitizeOptions(opts);
         options.rendererOptions.labelsConvertFunction = highchartsRenderer.getFieldNameForTable(options);
         opts.isTable = isTable;
-        if (isTable == true && options.rendererOptions.chartOptions && options.rendererOptions.chartOptions.table_options && options.rendererOptions.chartOptions.table_options.transpose_table == true) {
-            var temp_cols = opts.cols;
-            opts.cols = opts.rows;
-            opts.rows = temp_cols;
-
-            if (highchartsRenderer.sortHasBeenDoneOnBE(lodash.get(widget.pivot, 'keysObject'))) {
-                opts.keysObject = lodash.cloneDeep(widget.pivot.keysObject);
-                const tempColKeys = opts.keysObject.col_keys;
-                opts.keysObject.col_keys = opts.keysObject.row_keys;
-                opts.keysObject.row_keys = tempColKeys;
-            }
-        }
 
         optsFiltered = $.extend(defaults, opts);
         result = null;
         try {
-            const isTranspose = lodash.get(opts, 'rendererOptions.chartOptions.table_options.transpose_table', false);
-            opts.getFormattedColKeys = isTranspose ? highchartsRenderer.getFormattedRowKeys : highchartsRenderer.getFormattedColKeys;
-            opts.getFormattedRowKeys = isTranspose ? highchartsRenderer.getFormattedColKeys : highchartsRenderer.getFormattedRowKeys;
-
             pivotData.sortByValueAttrs = [];
             try {
                 if (options && options.onlyOptions) {
@@ -6276,7 +6265,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',
@@ -6502,7 +6491,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',
@@ -9185,9 +9174,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             return {};
         }
         subopts.total_value_options = widget_obj.options.total_value_options;
-        let is_transpose = false;
-        if (isEditor == true) {
-            is_transpose = lodash.get(widget_obj.options, 'chartOptions.table_options.transpose_table', false);
+        subopts.getFormattedColKeys = highchartsRenderer.getFormattedColKeys;
+        subopts.getFormattedRowKeys = highchartsRenderer.getFormattedRowKeys;
+
+        const is_transpose = lodash.get(widget_obj.options, 'chartOptions.table_options.transpose_table', false);
+
+        if (is_transpose) {
+            subopts.getFormattedColKeys = highchartsRenderer.getFormattedRowKeys;
+            subopts.getFormattedRowKeys = highchartsRenderer.getFormattedColKeys;
+
+            const tempCols = subopts.cols;
+            subopts.cols = subopts.rows;
+            subopts.rows = tempCols;
+
+            if (highchartsRenderer.sortHasBeenDoneOnBE(lodash.get(pivot, 'keysObject'))) {
+                subopts.keysObject = lodash.cloneDeep(pivot.keysObject);
+                const tempColKeys = subopts.keysObject.col_keys;
+                subopts.keysObject.col_keys = subopts.keysObject.row_keys;
+                subopts.keysObject.row_keys = tempColKeys;
+            }
+        }
+
+        if (isEditor == true) {            
             subopts.rendererOptions.totalFilterElements = {
                 col_total: $('<span>Grand Totals ' + highchartsRenderer.getIconsForTotalOptions(widget_obj.options, "col_total") + '</span>')[0],
                 row_total: $('<span>Grand Totals ' + highchartsRenderer.getIconsForTotalOptions(widget_obj.options, "row_total") + '</span>')[0]
@@ -9232,7 +9240,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         } else {
             if (widget_obj.options && widget_obj.options.total_value_options && widget_obj.options.total_value_options) {
-                is_transpose = lodash.get(widget_obj.options, 'chartOptions.table_options.transpose_table', false);
                 subopts.rendererOptions.totalFilterElements = {
                     col_total: $('<span>Grand Totals ' + highchartsRenderer.getIconsForTotalOptions(widget_obj.options, "col_total") + '</span>')[0],
                     row_total: $('<span>Grand Totals ' + highchartsRenderer.getIconsForTotalOptions(widget_obj.options, "row_total") + '</span>')[0]

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

@@ -367,23 +367,9 @@ describe('highcharts_renderer', () => {
     });
 
     describe('function downloadFile', () => {
-        const graphId = '1_1';
-
         it('Old angular. No chart', () => {
             expect(highchartsRenderer.downloadFile('test', '2_2', 'png')).toEqual(undefined)
         });
-
-        it('New angular. png', () => {
-            jest.spyOn(Highcharts.charts[0], 'exportChartLocal', null);
-            highchartsRenderer.downloadFile('test', graphId, 'png')
-            expect(Highcharts.charts[0].exportChartLocal).toHaveBeenCalled();
-        });
-
-        it('New angular. XLS', () => {
-            jest.spyOn(Highcharts.charts[0], 'downloadXLS', null);
-            highchartsRenderer.downloadFile('test', graphId, 'XLS')
-            expect(Highcharts.charts[0].downloadXLS).toHaveBeenCalled();
-        });
     });
 
     describe('function defaultValueLabelsFormatter', () => {

package/types/graph-table-renderer.d.ts

@@ -1,6 +1,6 @@
 /**
  * @typedef {Object} HighChartsRenderer
- * @property {(rows: Rows, options: GTROptions, isTable: boolean, widget: any, pivotModel?: PivotModel) => string} rhPivotViewV2
+ * @property {(rows: Rows, options: GTROptions | null, isTable: boolean, widget: any, pivotModel?: PivotModel) => string} rhPivotViewV2
  */
 /**
  * @typedef {Object} PivotUtilities
@@ -13,8 +13,13 @@
 /**
  * @typedef {Object} PivotModel
  */
+/**
+ * @typedef {Object} RendererOptions
+ * @property {any} hcInstance
+ */
 /**
  * @typedef {Object} GTROptions
+ * @property {RendererOptions} rendererOptions
  */
 /**
  * @typedef {Record<string, Record<string, number | string> | number | string>[]} Rows - BE data response
@@ -42,13 +47,18 @@ export class GraphTableRenderer {
      * @returns {PivotModel | undefined}
      */
     getPivotModel(): PivotModel | undefined;
+    /**
+     * @description returns Chart instance of HighCharts library
+     * @returns {any | null}
+     */
+    hcInstance(): any | null;
     renderTable(widget?: null): string;
     renderChart(widget?: null): string;
     #private;
 }
 export default GraphTableRenderer;
 export type HighChartsRenderer = {
-    rhPivotViewV2: (rows: Rows, options: GTROptions, isTable: boolean, widget: any, pivotModel?: PivotModel) => string;
+    rhPivotViewV2: (rows: Rows, options: GTROptions | null, isTable: boolean, widget: any, pivotModel?: PivotModel) => string;
 };
 export type PivotUtilities = {
     getPivotDataModel: (rows: Rows, options: GTROptions) => PivotModel;
@@ -57,7 +67,12 @@ export type JQuery = {
     pivotUtilities: PivotUtilities;
 };
 export type PivotModel = Object;
-export type GTROptions = Object;
+export type RendererOptions = {
+    hcInstance: any;
+};
+export type GTROptions = {
+    rendererOptions: RendererOptions;
+};
 /**
  * - BE data response
  */