@datarailsshared/dr_renderer 1.2.418 → 1.2.419

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.418",
+  "version": "1.2.419",
   "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

@@ -473,18 +473,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 +1088,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 +4616,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 +4770,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) {
@@ -9185,9 +9157,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 +9223,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/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
  */